/* =========================================================
   StarQR — layout.css
   Page Layout — Background blobs, app container, header,
   and footer positioning.
   ========================================================= */

/* ── BACKGROUND BLOBS ─────────────────────────────────── */
/* Decorative gradient circles that float gently.         */
/* GPU-composited via will-change for smooth animation.   */
.bg-blob {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;          /* Click-through — purely visual    */
  z-index: 0;                    /* Behind all content               */
  will-change: transform;        /* GPU hint for smooth animation    */
  animation: blobFloat 8s ease-in-out infinite alternate;
}

.bg-blob--1 {
  width: 360px;
  height: 360px;
  top: -100px;
  right: -80px;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.10) 0%, transparent 70%);
  animation-delay: 0s;
}

.bg-blob--2 {
  width: 300px;
  height: 300px;
  bottom: -80px;
  left: -60px;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.09) 0%, transparent 70%);
  animation-delay: -4s;          /* Offset so blobs move out of sync */
}

@keyframes blobFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(8px, 12px) scale(1.05); }
}

/* ── APP CONTAINER ────────────────────────────────────── */
/* Centered column layout — max-width keeps content       */
/* readable on large screens while being full-width on    */
/* mobile. Uses min-height: 100dvh for full viewport.     */
.app {
  position: relative;
  z-index: 1;                    /* Above background blobs          */
  width: 100%;
  max-width: 420px;              /* Mobile-first max width           */
  margin: 0 auto;                /* Center horizontally              */
  min-height: calc(100dvh - 120px); /* Account for header + footer  */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-sm) var(--space-xl);
}

/* ── HEADER ───────────────────────────────────────────── */
/* App branding — logo image + name + tagline.            */
/* Sits outside <main> for proper semantic structure.     */
.app__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: var(--space-sm) var(--space-sm) 0;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
  animation: headerEntrance 300ms var(--ease-out) both;
}

@keyframes headerEntrance {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Logo container — horizontal layout: [icon] [text] */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Text block next to logo icon — stacks name + subtitle */
.logo__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

/* Logo image — sized to match the design spec */
.logo__image {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(79, 70, 229, 0.15));
  transition: transform var(--dur-normal) var(--ease-spring);
}

/* Micro-interaction: subtle hover effect on logo */
.logo:hover .logo__image {
  transform: scale(1.08) rotate(2deg);
}

/* App name — gradient text effect */
.logo__name {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(135deg, var(--primary) 0%, #818CF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Standard property fallback for non-WebKit browsers */
  color: var(--primary);
}

/* Tagline below the app name */
.app__subtitle {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: 0.1px;
  opacity: 0.85;
  margin: 0;
  margin-top: 1px;
}

/* ── FOOTER ───────────────────────────────────────────── */
/* Minimal footer — proper semantic landmark.             */
.app__footer {
  text-align: center;
  padding: var(--space-md) var(--space-sm);
  font-size: var(--text-xs);
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}

.app__footer .fa-heart {
  color: var(--error);
  font-size: 10px;
}