/* THE SIGNAL — scroll-film hero + brand asset styling
   Loaded after styles.css; only touches .film-hero, .brand-texture and
   feature-card spotlight enhancements. Tokens come from :root in styles.css. */

/* ---------- film hero ---------- */
.film-hero { position: relative; background: var(--bg-primary); }
.film-driver { height: 560vh; position: relative; }
.film-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--bg-primary); }
/* The scrubbed film. object-fit: cover is safe on both cuts now that mobile has
   its own portrait encode — the old canvas had to letterbox on phones because
   the only source was 16:9. */
#film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; display: block; background: var(--bg-primary); }
#film-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.film-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(10, 10, 12, .55) 100%); }
.film-seam { position: absolute; inset: auto 0 0 0; height: 45vh; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--bg-secondary)); }

/* scrim behind the hero copy so the converting block stays readable over footage.
   The radial alone fell off too early: the stat block and trust row sit low-left,
   past its 55% stop, right where the backbar lights are brightest. A left-anchored
   linear wedge carries the darkness the full height of the column; the radial stays
   on top to keep the falloff soft rather than a visible vertical edge. */
.film-copy::before { content: ""; position: absolute; inset: -12% -18%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse at 42% 50%, rgba(10, 10, 12, .55) 0%, rgba(10, 10, 12, .26) 58%, transparent 78%),
    linear-gradient(96deg, rgba(10, 10, 12, .88) 0%, rgba(10, 10, 12, .78) 34%, rgba(10, 10, 12, .5) 58%, rgba(10, 10, 12, .16) 76%, transparent 88%); }

/* Over moving footage a scrim alone can't be trusted — every frame is a different
   backdrop. Shadows give each glyph its own local contrast, so the copy holds even
   on the brightest frame. Matches the treatment already on .film-b / .film-final. */
.film-copy .hero-description { text-shadow: 0 1px 3px rgba(10, 10, 12, .92), 0 2px 22px rgba(10, 10, 12, .78); }
.film-copy .hero-note { text-shadow: 0 1px 3px rgba(10, 10, 12, .95), 0 2px 18px rgba(10, 10, 12, .8); }
.film-copy .hero-citation { text-shadow: 0 1px 3px rgba(10, 10, 12, .9), 0 2px 16px rgba(10, 10, 12, .7); }

/* ---------- beats ---------- */
.film-beat { position: absolute; z-index: 10; opacity: 0; pointer-events: none; }
.film-beat.live { pointer-events: auto; }
.film-copy { left: clamp(20px, 6vw, 96px); top: 50%; transform: translateY(-50%); max-width: 640px; }
.film-b { max-width: min(520px, 82vw); }
.film-b .film-kicker { font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px; }
.film-b h3 { font-size: clamp(26px, 3.2vw, 42px); line-height: 1.1; margin: 0;
  text-shadow: 0 2px 26px rgba(10, 10, 12, .7); }
.film-b p { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.5; color: rgba(245, 245, 247, .82);
  margin: 12px 0 0; text-shadow: 0 1px 18px rgba(10, 10, 12, .8); }
.film-final h2 { font-size: clamp(32px, 4.6vw, 58px); line-height: 1.06; margin: 0 0 26px;
  text-shadow: 0 2px 30px rgba(10, 10, 12, .65); }
.pos-left { left: clamp(24px, 7vw, 110px); top: 50%; transform: translateY(-46%); }
.pos-right { right: clamp(24px, 7vw, 110px); top: 50%; transform: translateY(-46%); text-align: right; }
.pos-low { left: 50%; bottom: 12vh; transform: translateX(-50%); text-align: center; }
.pos-center { left: 50%; top: 50%; transform: translate(-50%, -46%); text-align: center; }

/* ---------- static mode (mobile / reduced-motion / save-data) ---------- */
.film-static .film-driver { height: auto; }
.film-static .film-stage { position: relative; height: auto; min-height: 100svh; display: flex; align-items: center; }
.film-static #film-video, .film-static .film-b, .film-static .film-final, .film-static .film-seam { display: none; }
.film-static #film-poster { position: absolute; height: 100%; }
.film-static .film-stage::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, .55), rgba(10, 10, 12, .82)); }
.film-static .film-copy { position: relative; left: auto; top: auto; transform: none; opacity: 1 !important;
  pointer-events: auto; z-index: 2; padding: calc(80px + 24px) 20px 48px; margin: 0 auto; }
.film-static .film-copy::before { display: none; }

/* ---------- mobile: the film runs here too, so the copy is a beat ----------
   Below 768px .film-copy is no longer in static flow. It is an absolutely
   positioned beat over a sticky 100svh stage, exactly as on desktop, which means
   it can no longer grow the page — anything taller than the viewport is cut off
   at both ends. Measured at 390x844 the untouched block is ~766px of content
   before the Android CTA; centred, it starts 39px down and the badge vanishes
   under the 80px nav.

   So the type steps down and the block is pinned below the nav. The Android vote
   CTA stays: it is the only instance on the page, and hiding it on phones would
   silently delete the Android waitlist capture for mobile visitors, who are
   exactly the people most likely to be on Android. */
@media (max-width: 767px) {
  /* Pinned top AND bottom, so the block has a definite height to compose within
     rather than stacking from the top and leaving half the screen empty. */
  .film-copy {
    left: 18px; right: 18px; max-width: none;
    top: 84px; bottom: 20px; transform: none;
  }

  /* The copy is bottom-weighted, and the leftover height goes ABOVE the badge
     rather than being split between the groups. The film is a portrait cut of a
     man at a bar; `cover` at phone aspect crops width only, so his face sits in
     a fixed vertical band — roughly 105-393px on a 932-tall viewport, eyes near
     240. An evenly-split layout put the headline at 120-277, straight across his
     eyes. Handing the whole surplus to the badge drops the block to ~355 so the
     face reads clean above it and the type starts at his collar.

     The gaps below stay in vh, not fixed px: on a 667-tall phone the block
     already fills the stage exactly, and any fixed margin there pushes the
     Android CTA out through the bottom of the sticky stage. clamp() lets them
     collapse toward 0 as the viewport shortens, which is also why the surplus
     above the badge is `auto` — it cannot go negative. Keeping the citation
     glued to the stats matters: it is an attribution, and spacing every child
     would have set it adrift from the figures it belongs to. */
  .film-copy .hero-content { display: flex; flex-direction: column; height: 100%; }
  .film-copy .hero-description { margin-top: clamp(0px, 1.1vh, 11px); }
  .film-copy .hero-buttons { margin-top: clamp(0px, 1.6vh, 16px); }

  /* inline-flex badge would stretch full-width as a flex child. margin-top:auto
     is the single flexible gap — it carries the whole block down off his face. */
  .film-copy .social-proof-badge { align-self: flex-start; margin-top: auto;
    margin-bottom: 0; padding: 7px 13px; font-size: 12.5px; }
  .film-copy .hero-content h1 { font-size: clamp(30px, 8.6vw, 42px); line-height: 1.2;
    margin-bottom: 0; }
  .film-copy .hero-description { font-size: 16px; line-height: 1.45; margin-bottom: 6px; }
  /* margins on .hero-citation are inline in the markup, so they need the weight */
  .film-copy .hero-citation { font-size: 11.5px; margin-top: 0 !important;
    margin-bottom: 0 !important; }
  .film-copy .hero-buttons { margin-bottom: 14px; }
  .film-copy .btn-primary { padding: 15px 28px; font-size: 16px; }
  .film-copy .hero-note { font-size: 12px; line-height: 1.4; margin-bottom: 0; }
  .film-copy .android-vote-cta { margin-top: 14px; padding: 10px 13px; }
}

/* ---------- reduced-motion / Save-Data on phones: pan the still onto the man ----
   Now that the film runs on mobile, this applies only to the static fallback —
   the visitor who asked for no motion, or is on Save-Data. They get the closing
   scene as a still: a 720x900 two-shot, man left, woman right. At phone aspect
   `cover` has to discard ~42% of the width, so only one of them can survive the
   crop. The inherited 62% anchor picked neither — it landed in the dead space
   between them and sliced the woman at the frame edge.

   The drift is suppressed under reduced-motion further down; there it is a
   static anchor, which is the part that actually matters.

   Anchor on the man: he is who the headline is addressing ("You want to know
   what to say"), so the still should resolve on him. It opens centred on the
   space between the two of them and drifts left, which reads as the shot
   settling rather than a static crop, and lets the pair register before the
   frame commits to him. */
@media (max-width: 767px) {
  .film-static #film-poster {
    object-position: 0% center;
    animation: film-pan-to-man 5.5s cubic-bezier(.33, 0, .12, 1) .45s both;
  }
}

/* Rests at 0%, not a few percent in: the asset already clips his hair at its own
   left edge, so any inset crops him twice. */
@keyframes film-pan-to-man {
  from { object-position: 50% center; }
  to   { object-position: 0% center; }
}

/* Scoped to phone widths on purpose. .film-static is also what desktop gets under
   reduced-motion or Save-Data, and there #film-poster is the 1920x1080 landscape
   still — a different frame with a different subject. Anchoring that one hard left
   would crop the wrong thing. */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .film-static #film-poster { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .film-driver { height: auto; }
}

/* ---------- sniped-component styling: cursor spotlight + gradient edge on
   feature cards (Aceternity-pattern, rebuilt vanilla, obeying tokens) ---------- */
.feature-card-enhanced { position: relative; }
.feature-card-enhanced::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  opacity: 0; transition: opacity .35s; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 59, 127, .10), transparent 65%); }
.feature-card-enhanced:hover::after { opacity: 1; }
.feature-card-enhanced { transition: border-color .3s, transform .3s, box-shadow .3s; }
.feature-card-enhanced:hover { border-color: rgba(255, 59, 127, .45); transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(10, 10, 12, .5), 0 0 0 1px rgba(180, 100, 212, .12); }

/* ---------- brand texture: smoke wisps behind a section, under its content ---------- */
.brand-texture { position: relative; overflow: hidden; }
.brand-texture::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url('/assets/brand/textures/smoke-01.jpg') no-repeat right -8% top -6% / 46% auto;
  mix-blend-mode: screen; opacity: .22; }
.brand-texture > * { position: relative; }

/* ---------- in-film product cards (real app imagery inside Act 2 beats) ---------- */
.film-avatars { display: flex; gap: 10px; margin-top: 20px; }
.film-avatar-card { width: 116px; border-radius: 14px; overflow: hidden;
  background: rgba(20, 20, 24, .55); border: 1px solid rgba(255, 59, 127, .30);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(10, 10, 12, .5); }
.film-avatar-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.film-avatar-card .fa-name { font-weight: 600; font-size: 13px; color: var(--text-primary); padding: 7px 9px 0; }
.film-avatar-card .fa-scn { font-size: 11px; color: rgba(244, 244, 246, .62); padding: 1px 9px 8px; }
.film-thumb { margin-top: 20px; width: 158px; border-radius: 16px; overflow: hidden;
  background: rgba(20, 20, 24, .5); border: 1px solid rgba(180, 100, 212, .32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(10, 10, 12, .5); }
.film-thumb img { width: 100%; display: block; }
.pos-right .film-thumb { margin-left: auto; }
.pos-right .film-avatars { justify-content: flex-end; }

/* Arabic. The beats keep their physical anchors, and the copy needs no help —
   it has no text-align of its own, so `start` already resolves to the right
   edge under dir="rtl". The thumb does need help: it is a fixed-width block, so
   it stays pinned physically left and falls out of step with the copy above it.
   The avatar row is already correct (flex-start is the right edge in RTL). */
[dir="rtl"] .pos-left .film-thumb { margin-left: auto; }
@media (max-width: 1100px) { .film-avatar-card { width: 98px; } .film-avatar-card .fa-scn { display: none; } }

/* ---------- v3 refinements (2026-08-08 feedback) ---------- */
/* bigger hero heading on desktop */
@media (min-width: 768px) {
  .film-copy { max-width: 720px; top: 53%; }
  .film-copy .hero-content h1, .film-hero .hero-content h1 { font-size: clamp(40px, 4.5vw, 66px); line-height: 1.05; }
  .film-copy .hero-description { font-size: 19px; }
}
/* bigger feature beats + components */
.film-b { max-width: min(660px, 86vw); }
.film-b .film-kicker { font-size: 14px; }
.film-b h3 { font-size: clamp(32px, 4vw, 58px); }
.film-b p { font-size: clamp(16px, 1.5vw, 21px); }
.film-avatar-card { width: 148px; border-radius: 16px; }
.film-avatar-card .fa-name { font-size: 15px; padding: 9px 11px 0; }
.film-avatar-card .fa-scn { font-size: 12px; padding: 2px 11px 10px; }
.film-thumb { width: 200px; border-radius: 18px; }
.film-mid h3 { font-size: clamp(36px, 4.6vw, 64px); }
/* taller feature-card images on mobile — square, fills the screen */
@media (max-width: 767px) {
  .feature-image { height: auto; aspect-ratio: 1 / 1; }
  .film-static .film-stage::after { background: linear-gradient(180deg, rgba(10,10,12,.42), rgba(10,10,12,.72)); }
}
.film-mid h3 { text-shadow: 0 2px 30px rgba(10, 10, 12, .75); margin: 0; }
.film-mid { width: max-content; max-width: 90vw; }