/* Home hero card (index.html only, loaded after home.css).
   Wide screens: clip 1 (black AI cube -> glass box) plays once and the box floats. Scrolling then
   scrubs clip 2 (a sheet comes out of the front AI folder and turns to face you) while the card
   stays pinned; at the end the sheet opens out into the real "Your free check" card.
   Phones/tablets: a still of the glass box that gives way to the card as it scrolls into view.
   Reduced motion or no JavaScript: the card itself, with the glass-box mark in its title bar.

   home-hero.js sets, on .gh-doc:
     --gh-s   smoothed scroll progress (0 = glass box, 1 = card)   [drives the ground shadow]
     --gh-c   0..1 how far the sheet has opened into the card
     --gh-ct/--gh-cr/--gh-cb/--gh-cl   where the sheet sits in clip 2's last frame (px insets) */

@property --gh-c{syntax:"<number>";inherits:true;initial-value:1}

/* ---------- still card (always) ---------- */
/* clip, not hidden: hidden would make the hero a scroll container and break the sticky card */
.gh-hero{overflow:hidden;overflow:clip}
.gh-doc[data-hero]{filter:none}
.gh-doc[data-hero] .gh-doc-frame{box-shadow:0 34px 60px rgba(1,15,28,.55)}
.gh-doc[data-hero] .gh-doc-bar{position:relative;z-index:1;justify-content:flex-start;gap:10px}
.gh-doc[data-hero] .gh-doc-meta{margin-left:auto}
.gh-doc-mark{display:block;flex:0 0 auto;width:20px;height:22px;margin:-3px 0}
.gh-doc-frame .gh-doc-mark img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}

.gh-stage{position:relative;display:grid;aspect-ratio:1.08;background:#fff}
@media (max-width:900px){.gh-stage{aspect-ratio:auto;min-height:400px}}  /* full-width card: height follows the text */
.gh-float{position:relative;display:grid;grid-area:1/1;min-width:0}
.gh-mouth{position:relative;display:grid;min-width:0}
.gh-sheet{position:relative;background:#fff;min-width:0}
.gh-doc-frame .gh-sheet .gh-doc-mock{min-height:0}
.gh-art,.gh-ground{display:none}
.gh-art{position:absolute;inset:3.5% 0 0;pointer-events:none}
.gh-doc-frame .gh-art video,
.gh-doc-frame .gh-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;background:transparent}
.gh-doc-frame .gh-art .gh-clip2{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:fill;opacity:0}
.gh-art .gh-still{display:none;position:absolute;inset:0}
.gh-art .gh-still img{width:100%;height:100%}
.gh-ground{
  position:absolute;left:31%;right:31%;bottom:1.6%;height:4.4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(7,52,91,.26),rgba(7,52,91,.08) 62%,rgba(7,52,91,0));
}

/* ---------- motion (JavaScript on, motion allowed) ---------- */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .gh-doc[data-hero] .gh-art,
  .gh-doc[data-hero] .gh-ground{display:block}

  /* Until home-hero.js takes over: the clip's first frame. If the script never runs,
     the card still arrives on its own after a few seconds. */
  .gh-doc[data-hero]{animation:gh-c .7s cubic-bezier(.16,1,.3,1) 6s both}
  .gh-doc[data-hero].is-live{animation:none}
  .gh-doc[data-hero].is-clip2 .gh-clip2{opacity:1}

  .gh-doc[data-hero] .gh-doc-frame{--gh-ce:calc(var(--gh-c,1)*(2 - var(--gh-c,1)))}
  .gh-doc[data-hero] .gh-ground{opacity:calc(1 - var(--gh-s,0)*10)}
  .gh-doc[data-hero] .gh-doc-mark{opacity:var(--gh-c,1)}

  /* The sheet in clip 2's last frame opens out into the card: same place and grey to begin with,
     then it widens to the whole card, turns white, and the real text fades in. */
  .gh-doc[data-hero] .gh-sheet{
    clip-path:inset(calc(var(--gh-ct,50%)*(1 - var(--gh-ce))) calc(var(--gh-cr,50%)*(1 - var(--gh-ce)))
                    calc(var(--gh-cb,50%)*(1 - var(--gh-ce))) calc(var(--gh-cl,50%)*(1 - var(--gh-ce))));
    background-color:rgb(calc(225 + 30*var(--gh-ce)),calc(225 + 30*var(--gh-ce)),calc(225 + 30*var(--gh-ce)));
    opacity:clamp(0,var(--gh-c,1)*40,1);
  }
  .gh-doc[data-hero] .gh-sheet .gh-doc-mock{opacity:clamp(0,(var(--gh-c,1) - .55)/.45,1)}

  /* Wide screens: the card stays put while the sheet comes out (home-hero.js sets the top). */
  @media (min-width:901px){
    .gh-hero.is-pinned{padding-bottom:236px}
    .gh-doc[data-hero].is-live{margin-bottom:-220px}
    .gh-doc[data-hero].is-live::after{content:"";display:block;height:220px}
    .gh-doc[data-hero].is-live .gh-doc-frame{position:sticky}
  }

  /* Phones and tablets: a still of the glass box (no clip) that fades as the card fades in. */
  @media (max-width:900px){
    .gh-doc-frame .gh-art .gh-clip,
    .gh-doc-frame .gh-art .gh-clip2{display:none}
    .gh-art .gh-still{display:block}
    .gh-doc[data-hero] .gh-art{inset:6% 8% 4%}
    .gh-doc[data-hero] .gh-art{opacity:calc(1 - var(--gh-c,1)*2)}
    .gh-doc[data-hero] .gh-sheet{clip-path:none;background-color:#fff;opacity:clamp(0,var(--gh-c,1)*2 - 1,1)}
    .gh-doc[data-hero] .gh-sheet .gh-doc-mock{opacity:1}
  }
  .gh-doc.is-still .gh-art .gh-still{display:block}
}

@keyframes gh-c{from{--gh-c:0}to{--gh-c:1}}