/* ===================================================================
   Hero app-open animation (Emily landing handoff, 2026-07).

   Self-contained illustration for the homepage hero: a case opens,
   sticky notes fall in, category folders cascade up and settle onto
   the wordmark. The SVG art lives in components/_hero_animation.html
   with its presentation attributes intact; the TIMELINE lives in
   js/components/hero-animation.js. This file holds only static layout:

   1. the embedding wrapper (centres the fixed-size stage, scales it
      down responsively),
   2. resting/behaviour states the JS toggles, and
   3. the `hx*` positioning classes — machine-relocated from the
      handoff's inline `style=` attributes (CSP forbids those), so the
      coordinates are the designer's exactly, with zero drift.

   Colours are the handoff literals so the wrapper boxes match the
   inline SVG fills byte-for-byte; they coincide with the .marketing
   tokens (accent #b07636, ink #22323b, cream #f3ece2).
   =================================================================== */

/* ---- Embedding wrapper ------------------------------------------------
   The stage keeps the design's native 380x640 box and scale(1.33). We
   drop the handoff's hero-specific negative margins (they centred it in
   a 100vh column) and instead reserve height here so it sits cleanly in
   our hero grid. The stage scales down with the viewport via a CSS var
   the wrapper sets at each breakpoint. */
.hero-anim {
  position: relative;
  width: 100%;
  /* let the grid/flex cell shrink below the stage's fixed 380px box */
  min-width: 0;
  /* Box height ≈ the case FOOTPRINT (not the whole stage): the cascade
     and falling notes overflow upward out of this box, so its bottom
     edge sits at the base of the case. Bottom-aligned in the grid, this
     is what lines the case up with the buttons. */
  height: var(--hero-anim-h, 300px);
}

/* The stage carries a fixed 380x640 box. Absolutely positioning it takes
   that box out of flow (so it can never force horizontal page overflow),
   centres it horizontally, and anchors its BOTTOM to the box bottom so
   the case base is the alignment datum. transform-origin bottom keeps
   the base pinned as it scales. The handoff's hero-tuned margin/scale on
   #caseStage are fully overridden here. */
.hero-anim #caseStage {
  position: absolute;
  left: 50%;
  /* the case base sits a few stage-units above the stage bottom; drop the
     stage slightly so the visible case bottom meets the box bottom (and,
     bottom-aligned in the grid, the buttons' bottom edge exactly). */
  bottom: -14px;
  margin: 0;
  transform: translateX(-50%) scale(var(--hero-anim-scale, 0.82));
  transform-origin: bottom center;
}

@media (min-width: 1024px) { .hero-anim { --hero-anim-scale: 1.18; --hero-anim-h: 360px; } }
@media (max-width: 1023px) { .hero-anim { --hero-anim-scale: 0.82; --hero-anim-h: 300px; } }
@media (max-width: 640px)  { .hero-anim { --hero-anim-scale: 0.62; --hero-anim-h: 232px; } }

/* Stacked-first (below lg the animation leads the hero). The stage's notes
   and folders fly UP out of the box, and the hero section clips overflow —
   so reserve the flight path above the box, or the art pops in mid-air at
   the header line. These reserves are measured against the tallest frame of
   the loop (a note at the top of its arc, with the shortened stacked launch
   in hero-animation.js), plus a few px of slack — not eyeballed. Re-measure
   if the launch geometry or stage scale changes. */
@media (max-width: 1023px) { .hero-anim-lead { margin-top: 112px; } }
@media (max-width: 640px)  { .hero-anim-lead { margin-top: 80px; } }

/* ---- Resting / behaviour states the JS toggles ---------------------- */
/* Pieces start hidden; frame() reveals them. Labels + cascade folders
   fade/rise under JS control. */
#caseStage .case-part { opacity: 0; }
#caseStage .l-note { opacity: 0; }
#caseStage .flabel { opacity: 0; pointer-events: none; }

/* After the loop lands, the cascade settles with an eased transition
   (the JS clears inline transforms and adds .done). */
#caseStage.done .l-casc { transition: transform 0.55s cubic-bezier(0.34, 1.15, 0.5, 1); }
#caseStage.done .flabel { transition: opacity 0.4s ease; }

/* Reduced motion: the JS jumps to the final resting frame and never
   ticks, so there is nothing further to disable here. */

/* ---- Machine-relocated positioning (do not hand-edit) --------------- */
.hx0 { position:relative; width:380px; height:640px; overflow:visible; cursor:pointer; transform:scale(1.33); transform-origin:center; margin:-210px 0 124px 0; }
.hx1 { position:absolute; left:50%; top:605px; width:250px; height:24px; transform:translateX(-50%); background:rgba(34,50,59,0.13); border-radius:50%; filter:blur(7px); z-index:0; }
.hx2 { position:absolute; left:40px; top:410px; width:300px; height:210px; background:#b07636; border:2.5px solid #22323b; border-radius:24px; z-index:1; }
.hx3 { position:absolute; left:132px; top:360px; z-index:0; }
.hx4 { position:absolute; left:55px; top:414px; width:270px; height:196px; transform-origin:50% 100%; opacity:0; z-index:4; will-change:transform,opacity; }
.hx5 { display:block; overflow:visible; }
.hx6 { position:absolute; top:16px; left:12px; display:flex; align-items:center; gap:8px; color:#f3ece2; pointer-events:none; }
.hx7 { width:13.6px; display:inline-flex; justify-content:flex-start; align-items:center; flex:0 0 auto; }
.hx8 { height:17px; width:auto; display:block; flex:0 0 auto; }
.hx9 { font-family:'Lora',Georgia,serif; font-size:9px; font-weight:600; color:#f3ece2; }
.hx10 { position:absolute; left:55px; top:414px; width:270px; height:196px; transform-origin:50% 100%; opacity:0; z-index:5; will-change:transform,opacity; }
.hx11 { position:absolute; left:55px; top:414px; width:270px; height:196px; transform-origin:50% 100%; opacity:0; z-index:6; will-change:transform,opacity; }
.hx12 { position:absolute; left:55px; top:414px; width:270px; height:196px; transform-origin:50% 100%; opacity:0; z-index:7; will-change:transform,opacity; }
.hx13 { position:absolute; left:55px; top:414px; width:270px; height:196px; transform-origin:50% 100%; opacity:0; z-index:8; will-change:transform,opacity; }
.hx14 { position:absolute; left:55px; top:414px; width:270px; height:196px; transform-origin:50% 100%; opacity:0; z-index:9; will-change:transform,opacity; }
.hx15 { font-family:'Lora',Georgia,serif; font-size:9px; font-weight:600; color:#22323b; }
.hx16 { position:absolute; left:55px; top:414px; width:270px; height:196px; transform-origin:50% 100%; opacity:0; z-index:10; will-change:transform,opacity; }
.hx17 { position:absolute; left:55px; top:414px; width:270px; height:196px; transform-origin:50% 100%; opacity:0; z-index:11; will-change:transform,opacity; }
.hx18 { height:15.3px; width:auto; display:block; flex:0 0 auto; }
.hx19 { position:absolute; left:40px; top:128px; width:300px; height:217px; transform-origin:50% 50%; opacity:0; z-index:13; will-change:transform,opacity; }
.hx20 { position:absolute; inset:0; display:block; overflow:visible; z-index:1; }
.hx21 { position:absolute; left:115px; top:-5px; width:70px; height:70px; transform-origin:50% 50%; opacity:0; z-index:10; will-change:transform,opacity; }
.hx22 { display:block; overflow:visible; }
.hx23 { position:absolute; left:38px; top:-44px; width:136px; height:196px; transform-origin:50% 50%; opacity:0; z-index:10; will-change:transform,opacity; }
.hx24 { position:absolute; left:85px; top:-18px; width:130px; height:96px; transform-origin:50% 50%; opacity:0; z-index:10; will-change:transform,opacity; }
.hx25 { position:absolute; left:108px; top:-18px; width:84px; height:96px; transform-origin:50% 50%; opacity:0; z-index:10; will-change:transform,opacity; }
.hx26 { position:absolute; left:89px; top:-42px; width:122px; height:144px; transform-origin:50% 50%; opacity:0; z-index:10; will-change:transform,opacity; }
.hx27 { position:absolute; left:120px; top:0px; width:60px; height:60px; transform-origin:50% 50%; opacity:0; z-index:10; will-change:transform,opacity; }
.hx28 { position:absolute; left:108px; top:-12px; width:84px; height:84px; transform-origin:50% 50%; opacity:0; z-index:10; will-change:transform,opacity; }
.hx29 { position:absolute; inset:0; display:block; overflow:visible; z-index:20; }
.hx30 { position:absolute; top:22px; left:20px; display:flex; align-items:center; gap:8px; color:#f3ece2; z-index:25; pointer-events:none; }
.hx31 { position:absolute; left:40px; top:488px; width:300px; height:137px; background:#b07636; border:2.5px solid #22323b; border-radius:14px 14px 24px 24px; z-index:30; }
.hx32 { position:absolute; left:56px; top:588px; text-align:left; z-index:31; font-family:'Lora',Georgia,serif; font-size:15px; font-style:italic; font-weight:500; color:#f3ece2; opacity:0; pointer-events:none; }