/* v3 homepage scroll effects — companion to v3fx.js (2026-09-16).
   Three effects modelled on the reference the owner liked (wisprflow.ai):
   1. CURTAIN — sections after the pinned block become full-bleed rounded
      panels that stick at the top and get slid over by the next one.
   2. SCRUB  — the pinned "How it works" panels move with the scroll.
   3. TILT   — the Discovered / Invited / Done cards rotate in 3D as they enter.
   Everything here is inert until v3fx.js adds html.fx-on, and it stays inert
   for reduced-motion users, so the plain page is always the fallback. */

html.fx-on .fx-curtain{
  /* pin by the TOP; v3fx.js sets a NEGATIVE top on panels taller than the screen
     (top = viewport − panel height) so a tall panel is fully readable before it
     holds and the next one slides over it. (bottom:0 only holds a panel while it
     enters, then lets it scroll away — wrong effect.) */
  position: sticky; top: 0;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  border-radius: 38px 38px 0 0;
  box-shadow: 0 -22px 60px rgba(14, 31, 18, .18);
  overflow: visible;
}
/* auto width, NOT 100%: these sections carry 48px side padding with content-box
   sizing, so width:100% made them 486px wide on a 390px phone and pushed their
   text off the right edge. */
html.fx-on .fx-curtain > section{ width: auto; max-width: 100%; box-sizing: border-box; }
html.fx-on .fx-curtain[data-fx-tone="ivory"]{ background: #FBF6EA; }
html.fx-on .fx-curtain[data-fx-tone="sand"]{ background: #E6D7B4; }
html.fx-on .fx-curtain[data-fx-tone="deep"]{ background: #0e1f12; color: #EFE3C8; }
/* the last curtain runs into the dark footer, so no rounded seam there */
html.fx-on .fx-curtain:last-child{ border-radius: 38px 38px 0 0; }

/* stacking order: each later curtain paints over the one before it */
html.fx-on .fx-curtain:nth-of-type(1){ z-index: 2; }
html.fx-on .fx-curtain:nth-of-type(2){ z-index: 3; }
html.fx-on .fx-curtain:nth-of-type(3){ z-index: 4; }
html.fx-on .fx-curtain:nth-of-type(4){ z-index: 5; }

/* TILT: give the trio a 3D stage and hand its motion to GSAP
   (the old CSS reveal used `translate` + a transition; both are switched off
   so the two systems never fight over the same card). */
html.fx-on [data-fx-stage]{ perspective: 1100px; perspective-origin: 50% 20%; }
html.fx-on [data-reveal^="mcard-"]{ translate: none !important; transition: none !important; transform-style: preserve-3d; backface-visibility: hidden; }

/* SCRUB: the panel inner blocks are moved by GSAP — promote them to their own layer */
html.fx-on [data-panel] > section{ will-change: transform, opacity; }

@media (max-width: 767px){
  html.fx-on .fx-curtain{ border-radius: 28px 28px 0 0; }
}

/* FEATURES STACK (v3fx.js): GSAP owns the card transforms; the old per-scroll
   inline transform from v3home.js is switched off under html.fx-on. */
html.fx-on [data-fcard]{ will-change: transform, opacity, filter; transform-origin: 50% 0; }
html.fx-on [data-fcard-stage]{ perspective: 1400px; }


/* Curtain sections are flex items: without min-width:0 they refuse to shrink
   below their content and ran 454px wide on a 390px phone (privacy panel cut). */
html.fx-on .fx-curtain > section{ min-width: 0; }
@media (max-width: 767px){
  [data-reveal="privacy"] > div{ padding: 40px 22px !important; border-radius: 26px !important; min-width: 0 !important; }
  [data-reveal="privacy"] [style*="border-radius:50%"][style*="dashed"],
  [data-reveal="privacy"] [style*="right:-70px"]{ display: none !important; }   /* decorative dashed circle */
  /* Discovered / Invited / Done on phones: plain cards one after another (owner: a third
     sticky stack left big empty gaps and felt off); they keep their tilt-in entrance */
  html.fx-on [data-reveal^="mcard-"]{ position: relative; top: auto; margin-top: 0; }
  html.fx-on [data-reveal="manifesto-words"]{ margin-bottom: 8px !important; }
  html.fx-on [data-reveal="manifesto-words"] ~ div{ margin-top: 18px !important; gap: 22px !important; }
}


/* HOW IT WORKS STACK (v3fx.js, all widths): panels scroll natively, stick with a small
   visible edge, and the next one slides over. Each panel is one rounded card (colour on the
   card itself, no cream band, no offset shadow); the covered card shrinks and darkens (set on
   the inner <section>, which the runtime never rewrites). Specific selectors + !important beat
   the old pinned-window rules in v3home.css and the runtime's inline panel styles. */
html.fx-stack [data-hiw]{ height:auto !important; margin-top:24px !important }
html.fx-stack [data-fx-stack]{ position:static !important; height:auto !important; overflow:visible !important; display:block !important }
html.fx-stack [data-fx-stack-stage]{ position:static !important; overflow:visible !important; min-height:0 !important; flex:none !important; padding:10px 0 40px !important }
html.fx-stack [data-hiw] [data-panel]{ position:sticky !important; left:auto !important; right:auto !important; bottom:auto !important; display:block !important; opacity:1 !important; transform:none !important; transition:none !important; pointer-events:auto !important; visibility:visible !important; filter:none !important; background:transparent !important; padding:0 48px !important }
html.fx-stack [data-hiw] [data-panel] + [data-panel]{ margin-top:22px }
html.fx-stack [data-hiw] [data-panel] > section{ display:block !important; max-width:1184px !important; margin:0 auto !important; padding:0 !important; border-radius:32px; overflow:hidden; transform-origin:50% 0; will-change:transform, filter; box-shadow:0 18px 44px -20px rgba(14,31,18,.55) }
html.fx-stack [data-hiw] [data-panel="i"] > section{ background:linear-gradient(165deg,#3a2358 0%,#241653 60%,#160e38 100%) }
html.fx-stack [data-hiw] [data-panel="d"] > section{ background:linear-gradient(165deg,#1c4e75 0%,#0f2e4a 100%) }
html.fx-stack [data-hiw] [data-panel="c"] > section{ background:#0e1f12 }
html.fx-stack [data-hiw] [data-panel] > section > div:first-child{ background:transparent !important; border-radius:0 !important; box-shadow:none !important; margin:0 !important }
@media (max-width:767px){
  html.fx-stack [data-hiw]{ margin-top:10px !important }
  html.fx-stack [data-fx-stack-stage]{ padding:6px 0 18px !important }
  html.fx-stack [data-hiw] [data-panel]{ padding:0 12px !important }
  html.fx-stack [data-hiw] [data-panel] + [data-panel]{ margin-top:16px }
  html.fx-stack [data-hiw] [data-panel] > section{ border-radius:26px; box-shadow:0 10px 30px -14px rgba(14,31,18,.5) }
}

/* PAGE CARDS (owner 2026-09-17: "why do we have different size cards"). The sections after
   How it works used to be full-width sheets; now each is a card exactly like the stack cards
   above: same width (1184px max, 48px gutters; 12px on phones), radius, shadow and gap.
   data-fx-card (set in v3fx.js): "surface" = the section is the card; "framed" = the section
   already holds its own dark card, so the section is just a clear wrapper around it. */
html.fx-on .fx-curtain{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; min-height:0 !important; justify-content:flex-start !important; padding:0 48px !important; margin-top:22px }
html.fx-on .fx-curtain:last-child{ margin-bottom:48px }
html.fx-on .fx-curtain > section{ width:100% !important; max-width:1184px !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; transform-origin:50% 0 }
html.fx-on .fx-curtain[data-fx-card="surface"] > section{ background:#FBF6EA; border-radius:32px; overflow:hidden; padding-left:48px !important; padding-right:48px !important; box-shadow:0 18px 44px -20px rgba(14,31,18,.55); will-change:transform, filter }
/* the framed section can hold more than its card (the download card has the occasion links
   under it): paint it in the page colour, rounded like the card, so nothing behind shows through */
html.fx-on .fx-curtain[data-fx-card="framed"] > section{ padding:0 !important; background:#EFE3C8; border-radius:32px; will-change:transform, filter }
html.fx-on .fx-curtain[data-fx-card="framed"] > section > div{ max-width:none !important; margin:0 !important; border-radius:32px !important; box-shadow:0 18px 44px -20px rgba(14,31,18,.55) !important; }
@media (max-width:767px){
  html.fx-on .fx-curtain{ padding:0 12px !important; margin-top:16px }
  html.fx-on .fx-curtain:last-child{ margin-bottom:28px }
  html.fx-on .fx-curtain[data-fx-card="surface"] > section{ border-radius:26px; padding-left:18px !important; padding-right:18px !important; box-shadow:0 10px 30px -14px rgba(14,31,18,.5) }
  html.fx-on .fx-curtain[data-fx-card="framed"] > section{ border-radius:26px }
  html.fx-on .fx-curtain[data-fx-card="framed"] > section > div{ border-radius:26px !important; box-shadow:0 10px 30px -14px rgba(14,31,18,.5) !important }
}

/* iOS draws a big play glyph on a muted inline video it won't autoplay — never show it */
[data-fx-lc] video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none }
[data-fx-lc] video::-webkit-media-controls{ display:none !important }
@media (max-width:767px){ [data-fx-lc-tag]{ font-size:12px !important } }
/* curtain sections slide in already solid: a fading privacy card let the reviews show through */
html.fx-on .fx-curtain > section[data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important }

/* phone stack: panels are no longer squeezed into a pinned window, so show their copy again
   (the old compaction rules in v3home.css hid it — Discover and Catch read as pictures only) */
@media (max-width:767px){
  html.fx-stack [data-hiw] [data-panel] p[style*="line-height:1.75"]{ display:block !important; font-size:15px !important; line-height:1.6 !important; margin:0 0 12px !important }
  html.fx-stack [data-hiw] [data-panel="c"] [style*="flex-wrap:wrap;gap:9px"]{ display:flex !important; margin-bottom:14px !important }
  html.fx-stack [data-hiw] [data-panel="d"] [style*="padding:28px 12px 0"]{ display:flex !important; padding:10px 16px 16px !important }
  html.fx-stack [data-hiw] [data-panel="d"] [style*="padding:28px 12px 0"] p{ font-size:14px !important }
}
@media (max-width:767px){
  /* invite panel: the hero already says guests need no app — keep the panel within a screen */
  html.fx-stack [data-hiw] [data-panel="i"] p[style*="line-height:1.75"] ~ p[style*="line-height:1.75"]{ display:none !important }
}

/* FULL-BLEED CARDS (owner 2026-09-17: "all the cards should be end to end on the side").
   Every card — the How it works stack and the page cards after it — spans the full screen
   width; only the content inside stays centred within 1184px (gutter = half the extra width
   + the card's own padding). Covered cards dim but no longer shrink, so no side gaps open. */
html.fx-stack [data-hiw] [data-panel]{ padding:0 !important }
html.fx-stack [data-hiw] [data-panel] > section{ max-width:none !important }
html.fx-on .fx-curtain{ padding:0 !important }
html.fx-on .fx-curtain > section{ max-width:none !important }
@media (min-width:768px){
  html.fx-stack [data-hiw] [data-panel="i"] > section > div:first-child{ padding-left:calc(max(0px, (100% - 1184px) / 2) + 60px) !important; padding-right:calc(max(0px, (100% - 1184px) / 2) + 60px) !important }
  html.fx-stack [data-hiw] [data-panel="d"] > section > div:first-child{ padding-left:calc(max(0px, (100% - 1184px) / 2) + 46px) !important; padding-right:calc(max(0px, (100% - 1184px) / 2) + 46px) !important }
  html.fx-stack [data-hiw] [data-panel="c"] > section > div:first-child{ padding-left:calc(max(0px, (100% - 1184px) / 2) + 64px) !important; padding-right:calc(max(0px, (100% - 1184px) / 2) + 64px) !important }
  html.fx-on .fx-curtain[data-fx-card="surface"] > section{ padding-left:calc(max(0px, (100% - 1184px) / 2) + 48px) !important; padding-right:calc(max(0px, (100% - 1184px) / 2) + 48px) !important }
  html.fx-on .fx-curtain > section[data-reveal="privacy"] > div{ padding-left:calc(max(0px, (100% - 1184px) / 2) + 64px) !important; padding-right:calc(max(0px, (100% - 1184px) / 2) + 64px) !important }
  html.fx-on .fx-curtain > section[data-dl] > div:first-child{ padding-left:calc(max(0px, (100% - 1184px) / 2) + 76px) !important; padding-right:calc(max(0px, (100% - 1184px) / 2) + 76px) !important }
}

/* STATIC AFTER THE REVIEWS (owner 2026-09-17: "don't stack up the cards after the review
   ends"). The page cards no longer stick; the privacy and download cards rise in once.
   The Invited / Discovered / Done card uses the app's Honeyed Sand background. */
html.fx-on .fx-curtain{ position:relative !important; top:auto !important }
html.fx-on .fx-curtain[data-fx-card="surface"] > section{ background:linear-gradient(168deg,#f6ecd3 0%,#f0e0bf 52%,#e9d3ac 100%) !important }
html.fx-on .fx-rise{ opacity:.35; transform:translateY(36px) scale(.985); transition:opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1) }
html.fx-on .fx-rise.fx-risen{ opacity:1; transform:none }
@media (prefers-reduced-motion: reduce){ html.fx-on .fx-rise{ opacity:1; transform:none; transition:none } }