/* ──────────────────────────────────────────────────────────────────────────
   1) GLOBAL parallax background — one fixed field of dots + drifting colour
      washes behind the WHOLE page (welcome → support). Layers drift at
      different rates on scroll (set in app.js) for depth.
   2) HERO — a clean welcome: copy + phone visible from the start, gentle
      entrance, the global bg showing through.
   3) Showcase phone choreography styles live in styles.css.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Global background — clean, smooth parallax. Two layers only: soft colour
   washes (.site-bg-glow) and a very subtle graph grid (.site-bg-grid). Both are
   driven by transform: translate3d in app.js (lerped toward a scroll-derived
   target) so the parallax is buttery — never per-frame background-position
   recompute (which ticks/stutters). ── */
.site-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.site-bg-layer { position: absolute; inset: 0; will-change: transform; backface-visibility: hidden; }
/* Far soft colour washes (slowest). Padded out so the parallax shift never
   exposes an edge. */
.site-bg-glow {
  inset: -35% -12%;
  background:
    radial-gradient(26% 18% at 12% 14%, color-mix(in srgb, var(--primary) 34%, transparent), transparent 66%),
    radial-gradient(28% 20% at 88% 26%, color-mix(in srgb, var(--primary-2) 30%, transparent), transparent 66%),
    radial-gradient(30% 20% at 30% 64%, color-mix(in srgb, var(--accent-green, #37c26b) 24%, transparent), transparent 70%),
    radial-gradient(26% 18% at 78% 84%, color-mix(in srgb, var(--gold, #f4b23e) 26%, transparent), transparent 68%);
  filter: blur(40px); opacity: .8;
}
/* Very subtle graph-paper grid — kept faint so it reads as smooth structure,
   not noise. Over-sized + offset so the translate parallax never shows an edge. */
.site-bg-grid {
  inset: -20% -20%;
  background-image:
    linear-gradient(color-mix(in srgb, var(--primary-2) 9%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--primary-2) 9%, transparent) 1px, transparent 1px);
  background-size: 72px 72px; opacity: .5;
}
[data-theme="dark"] .site-bg-grid { opacity: .28; }
[data-theme="dark"] .site-bg-glow { opacity: .55; }

/* Sections sit above the global bg and stay transparent so it shows through. */
.hero-stage, .section { background: transparent; }

/* ── Hero (welcome) ── */
.hero-stage { position: relative; }
.hero-pin {
  /* dvh (not vh) so mobile browser chrome retracting/expanding doesn't jump the
     hero height. dvh == vh on desktop, so the PC layout is unchanged. */
  position: relative; min-height: clamp(560px, 86dvh, 900px);
  display: flex; align-items: center;
  padding: clamp(24px, 5vw, 60px) 0;
}
.hero-stage-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(16px, 5vw, 40px);
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px; align-items: center;
}
.hero-stage .hero-copy { max-width: 600px; }
.hero-stage .hero-copy > * { will-change: transform, opacity; }

/* The phone (front face = CM splash). Gentle float; no scroll-flip in the hero. */
.hero-phone-pos { justify-self: center; perspective: 1200px; will-change: transform; }
.hero-phone-flip {
  position: relative; width: clamp(240px, 24vw, 320px); aspect-ratio: 9 / 19.5;
  transform-style: preserve-3d; transform-origin: 50% 50%;
  animation: heroFloat 6s ease-in-out infinite;
}
.hero-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 42px; }
.hero-face-back { transform: rotateY(180deg); }
.hero-face .phone { width: 100%; height: 100%; }
.hero-back-shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 30px; }
@keyframes heroFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-14px) rotate(2deg); } }

/* ── Mobile (<768px) ── */
@media (max-width: 768px) {
  .hero-pin { min-height: 0; padding: clamp(28px, 8vw, 64px) 0 18px; }
  .hero-stage-inner { grid-template-columns: 1fr; text-align: center; gap: 18px; }
  .hero-stage .hero-copy { margin: 0 auto; }
  .hero-phone-flip { width: min(248px, 64vw); }
  .hero-face-back { display: none; }
  /* Phones don't scroll-parallax the background (see app.js), so keep the fixed
     field cheap to composite: lighter blur, and release the GPU layer
     promotions that eat mobile memory. */
  .site-bg-layer { will-change: auto; }
  .site-bg-glow { filter: blur(26px); opacity: .42; }
  .site-bg-grid { opacity: .3; }
}

/* Reduced motion: no float, everything visible. */
@media (prefers-reduced-motion: reduce) {
  .hero-stage .hero-copy > *, .hero-phone-pos { opacity: 1 !important; }
  .hero-phone-flip { animation: none; }
  .site-bg-layer { transform: none !important; }
  /* No scroll choreography → every showcase panel stays fully readable. */
  .sc-copy { opacity: 1 !important; transform: none !important; }
}

/* ── Showcase — a sticky REAL 3D phone (thickness + dynamic island) that spins
   continuously and "dribbles" side to side between far-out alternating texts.
   Texts are all pre-rendered (active emphasised, no fade-from-nothing). ── */
.sc-wrap { position: relative; }
.sc-phone-wrap {
  /* dvh == vh on desktop (PC unchanged); avoids the mobile chrome jump. */
  position: sticky; top: 0; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  z-index: 3; pointer-events: none;
  perspective: 1700px; perspective-origin: 50% 45%;
}
.sc-texts { position: relative; margin-top: -100dvh; z-index: 1; }
.sc-copy {
  min-height: 100dvh; display: flex; flex-direction: column; justify-content: center;
  opacity: .35; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease;
}
.sc-copy.is-active { opacity: 1; transform: none; }
/* Fallback when the scroll animation can't/shouldn't run (reduced motion or the
   <769px branch): the GSAP onUpdate never fires, so make EVERY panel fully
   readable and undo the offset — text is never left gray. */
.sc-wrap.no-anim .sc-copy { opacity: 1 !important; transform: none !important; }
.sc-copy[data-side="right"] { align-items: flex-end; text-align: right; padding-right: clamp(24px, 14vw, 400px); }
.sc-copy[data-side="left"]  { align-items: flex-start; text-align: left;  padding-left:  clamp(24px, 14vw, 400px); }
.sc-copy h3 { font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -0.035em; font-weight: 900; line-height: 1.04; max-width: 11ch; }
.sc-copy p { color: var(--muted); margin-top: 16px; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.5; max-width: 26ch; }
/* Kicker pill follows its text to the active side. */
.sc-copy .step-kicker { align-self: inherit; font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; }
.sc-copy[data-side="right"] .step-kicker { align-self: flex-end; }
.sc-copy[data-side="left"]  .step-kicker { align-self: flex-start; }

/* ── The 3D phone box — rounded, real thickness via four inset edge faces. ── */
.sc-phone-3d {
  --w: clamp(224px, 21vw, 284px);
  --h: calc(var(--w) * 19.3 / 9);
  --depth: 16px;
  --r: 40px;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d; will-change: transform;
}
.sc-face {
  position: absolute; inset: 0; border-radius: var(--r); overflow: hidden;
  background: #0a0e16; border: 7px solid #0c121c;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.07);
}
.sc-front { transform: translateZ(calc(var(--depth) / 2)); }
.sc-back  { transform: rotateY(180deg) translateZ(calc(var(--depth) / 2)); }
.sc-shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: calc(var(--r) - 7px); display: block; }
/* Dynamic island — sits over the status bar, on both faces. */
.sc-island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 30%; height: 20px; background: #000; border-radius: 999px; z-index: 6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
/* Body = rounded-rect slices stacked tightly (1px apart) through the depth → a
   SOLID rounded thickness: no corner gaps AND no edge-on combing/white flash. */
.sc-body {
  position: absolute; inset: 0; border-radius: var(--r);
  background: linear-gradient(110deg, #2b3548, #0c1019 60%);
}
.sc-body-1  { transform: translateZ(7.5px); }
.sc-body-2  { transform: translateZ(6.5px); }
.sc-body-3  { transform: translateZ(5.5px); }
.sc-body-4  { transform: translateZ(4.5px); }
.sc-body-5  { transform: translateZ(3.5px); }
.sc-body-6  { transform: translateZ(2.5px); }
.sc-body-7  { transform: translateZ(1.5px); }
.sc-body-8  { transform: translateZ(0.5px); }
.sc-body-9  { transform: translateZ(-0.5px); }
.sc-body-10 { transform: translateZ(-1.5px); }
.sc-body-11 { transform: translateZ(-2.5px); }
.sc-body-12 { transform: translateZ(-3.5px); }
.sc-body-13 { transform: translateZ(-4.5px); }
.sc-body-14 { transform: translateZ(-5.5px); }
.sc-body-15 { transform: translateZ(-6.5px); }
.sc-body-16 { transform: translateZ(-7.5px); }

/* ── Responsive visibility helpers ── */
.only-mobile { display: none; }

/* ── Mobile (≤768px): the scroll-driven 3D phone is a desktop experience — on
   phones it collapsed to one static screenshot and the section looked empty.
   Replace it with a swipeable snap gallery where EVERY app page appears, each
   in its own phone frame with its caption. ── */
.sc-mobile { display: none; }
@media (max-width: 768px) {
  .only-desktop { display: none; }
  .only-mobile { display: inline; }
  .sc-wrap { display: none; }
  .sc-mobile { display: block; padding: 4px 0 10px; }
  .sc-mobile-scroller {
    display: flex; gap: 16px; overflow-x: auto; padding: 10px 24px 20px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sc-mobile-scroller::-webkit-scrollbar { display: none; }
  .sc-mobile-card {
    flex: 0 0 66vw; max-width: 290px; scroll-snap-align: center;
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  .sc-mobile-phone {
    position: relative; width: 100%; aspect-ratio: 9 / 19.3;
    border-radius: 34px; overflow: hidden;
    background: #0a0e16; border: 6px solid #0c121c;
    box-shadow: var(--shadow), var(--shadow-glow);
  }
  .sc-mobile-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
  .sc-mobile-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 30%; height: 16px; background: #000; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
  .sc-mobile-card .step-kicker { margin: 16px 0 10px; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); padding: 6px 12px; border-radius: 999px; }
  .sc-mobile-card h3 { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.12; }
  .sc-mobile-card p { color: var(--muted); margin-top: 7px; font-size: 14px; line-height: 1.45; }
}