/* Front page only: hero + showcase carousel. Extracted from static index.html. */
/* ============================================================
   HOME PAGE ONLY — hero + showcase carousel
   Shared header/buttons/footer/etc live in assets/site.css
   ============================================================ */

/* ---------------- HERO ----------------
   Was a single centred column (kicker/art/h1/sub/2 CTAs all text-align:
   center) — the textbook "everything centred" tell. Now a left-biased
   asymmetric split, echoing the showcase's own 1.05fr/.95fr slide layout
   below it so the two sections read as one design language, not two. */
.hero{position:relative;background:var(--ink);overflow:hidden;isolation:isolate;
  padding:clamp(3rem,9vh,6rem) 0 clamp(2rem,6vh,4rem)}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(55% 60% at 50% 30%,var(--peacock),transparent 70%);opacity:.45}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.4;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px)}

.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;text-align:center}}

.hero-copy{min-width:0}
.hero .kicker{display:flex;gap:.6rem;align-items:center;margin-bottom:1rem}
.hero .kicker::before{content:"";width:1.6rem;height:1px;background:var(--gold);opacity:.6}
@media(max-width:900px){.hero .kicker{justify-content:center}}

/* Hero dragonfly artwork.

   Motion lesson learned the hard way, twice: the pixel-segmented layers
   can NEVER move relative to each other. The ribbon/text art has a
   transparent hole exactly where the dragonflies sit, so animating the
   pair alone either exposes the hole (v1) or — with a static backfill
   copy underneath — shows two offset copies of the dragonflies at once
   (v2, the "two dragonflies" ghosting). The only seam-proof ambient
   motion is drifting the WHOLE assembled logo as one unit, which is what
   dflyHover now does, applied to .dfly-mount.

   Entrance: seven CSS "plank" pieces fly in and settle into a loose pile
   (0 -> 1.5s), hold a beat, then dissolve (1.55 -> 2.1s) as the real logo
   pops up through them (1.55 -> 2.4s) — "built from wood, then the mark
   pops free" instead of a plain fade. The ambient drift only starts once
   that's finished (2.5s), so it never fights the reveal; its keyframes
   start and end at the pop's resting transform, so the handoff is
   invisible. */
.dfly-scene{position:relative;width:100%;max-width:460px;aspect-ratio:1;justify-self:center}
.dfly-mount{position:absolute;inset:0;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.5));
  opacity:0;transform:scale(.3);will-change:transform;
  /* dflyHover at 9.5s / ~0.1Hz, deliberately clear of the ~0.2Hz
     (one-cycle-per-5s) band Apple's motion guidance flags as a
     vestibular-discomfort risk for slow looping oscillations. */
  animation:logoPop .85s var(--ease-spring) 1.55s both,
            dflyHover 9.5s var(--ease) 2.5s infinite}
.dfly-layer{position:absolute;inset:0;width:100%;height:100%}
.dfly-ribbon{z-index:1}
.dfly-text{z-index:2}
.dfly-pair{z-index:3}
@keyframes logoPop{
  0%{opacity:0;transform:scale(.3)}
  65%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}

/* Wood planks — pure CSS art, the same wood-plate gradient tokens used for
   every product photo backdrop elsewhere on the site, not new illustration.
   Each plank carries its own start offset/rotation via inline custom
   properties (set in the markup) so seven identical rules don't produce
   seven identical pieces. transform-origin stays centered so rotation
   reads as tumbling, not orbiting. */
.plank{
  position:absolute;left:50%;top:52%;margin-left:-17%;margin-top:-5%;
  background:linear-gradient(158deg,var(--wood-1),var(--wood-2) 62%,var(--wood-3));
  border-radius:3px;box-shadow:0 6px 14px rgba(0,0,0,.35);
  opacity:0;will-change:transform,opacity;
  animation:
    plankIn 1.1s var(--ease-spring) calc(var(--i,0) * 70ms) both,
    plankOut .5s var(--ease) calc(1.55s + var(--i,0) * 40ms) forwards;
}
@keyframes plankIn{
  0%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--rot0)) scale(.8)}
  55%{opacity:1}
  100%{opacity:1;transform:translate(0,0) rotate(var(--rot1)) scale(1)}
}
@keyframes plankOut{
  0%{opacity:1;transform:translate(0,0) rotate(var(--rot1)) scale(1)}
  100%{opacity:0;transform:translate(0,0) rotate(var(--rot1)) scale(.7)}
}
/* Starts and ends at the exact resting transform logoPop finishes on
   (translate 0 / rotate 0 / scale 1), so both the pop -> drift handoff
   and every loop wraparound are continuous — no tick. */
@keyframes dflyHover{
  0%,100%{transform:translateY(0)    rotate(0)         scale(1)}
  30%    {transform:translateY(-6px) rotate(-0.45deg)  scale(1.006)}
  70%    {transform:translateY(-6px) rotate(0.45deg)   scale(1.006)}
}
@media(prefers-reduced-motion:reduce){
  .plank{display:none}
  .dfly-mount{animation:none;opacity:1;transform:none}
}

.hero h1{font-size:clamp(2.6rem,1rem + 6.4vw,5.6rem);letter-spacing:-.035em;
  text-transform:uppercase;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .sub{max-width:46ch;margin:1.4rem 0 0;color:rgba(228,237,240,.76);
  font-size:clamp(1rem,.94rem + .25vw,1.18rem)}
@media(max-width:900px){.hero h1,.hero .sub{margin-inline:auto}}

/* One clear primary action, not two equal buttons — "See what's new" is
   still there, just demoted to a plain link so the eye has one obvious
   next step instead of a choice. */
.hero-actions{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin-top:2rem}
@media(max-width:900px){.hero-actions{justify-content:center}}
.hero-actions .textlink{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sky);border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .3s,border-color .3s}
.hero-actions .textlink:hover{color:var(--gold-lite);border-color:var(--gold-lite)}

/* ---------------- SHOWCASE — rotating top 3 ---------------- */
.showcase{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
.showcase::before{content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(60% 70% at 68% 45%,var(--glow,var(--peacock)),transparent 72%);
  opacity:.5;transition:background 1s var(--ease)}
.showcase::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}

/* The stage is a draggable track, not an opacity-crossfade stack: three slides
   sit side by side and the track's transform slides between them. This is what
   makes 1:1 finger tracking, velocity handoff, and mid-drag interruption
   possible at all — a crossfade has no position to grab. */
.stage{position:relative;min-height:clamp(430px,62vh,600px);overflow:hidden;
  cursor:grab;touch-action:pan-y}
.stage.dragging{cursor:grabbing}
.track{display:flex;height:100%;will-change:transform}
.slide{flex:0 0 100%;width:100%;height:100%;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(1.8rem,4vw,3.2rem) 0}
@media(max-width:900px){
  .slide{grid-template-columns:minmax(0,1fr);text-align:center}
  .slide .blurb{margin-inline:auto}
}

.slide-copy{min-width:0}
.slide-copy>*{opacity:0;transform:translateY(24px)}
.slide.on .slide-copy>*{animation:slideIn .8s var(--ease) forwards}
.slide.on .slide-copy>*:nth-child(1){animation-delay:.1s}
.slide.on .slide-copy>*:nth-child(2){animation-delay:.2s}
.slide.on .slide-copy>*:nth-child(3){animation-delay:.3s}
.slide.on .slide-copy>*:nth-child(4){animation-delay:.4s}
.slide.on .slide-copy>*:nth-child(5){animation-delay:.5s}
@keyframes slideIn{to{opacity:1;transform:none}}

.rank{display:flex;align-items:center;gap:.8rem;margin:0 0 1.1rem}
.rank b{font-family:var(--display);font-size:.8rem;font-weight:800;letter-spacing:.2em;color:var(--gold)}
.rank i{flex:1;max-width:70px;height:1px;background:var(--gold);opacity:.5;font-style:normal}
@media(max-width:900px){.rank{justify-content:center}}

/* Tracking is size-specific, not a fixed value: this is the biggest text on the
   page (up to 5.4rem), so it gets tighter negative tracking than the shared
   h1/h2/h3 default — letters read too far apart at this scale otherwise. */
.slide h2{font-size:clamp(2.4rem,1rem + 5.6vw,5.4rem);letter-spacing:-.045em;
  text-transform:uppercase;margin-bottom:.9rem}
.slide h2 em{font-style:normal;color:var(--gold)}
.slide .blurb{max-width:44ch;color:rgba(228,237,240,.72);font-size:clamp(.95rem,.9rem + .2vw,1.08rem);margin:0 0 1.5rem}
.priceline{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap;margin-bottom:1.6rem}
@media(max-width:900px){.priceline{justify-content:center}}
.priceline .amt{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,1rem + 2.4vw,3.1rem);
  color:var(--paper);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.priceline .was{color:var(--slate);text-decoration:line-through;font-size:1.05rem}
.priceline .save{background:var(--hot);color:var(--ink-deep);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:.35rem .6rem;border-radius:3px}

.slide-actions{display:flex;gap:.7rem;flex-wrap:wrap}
@media(max-width:900px){.slide-actions{justify-content:center}}

/* product visual on the stage */
.slide-art{position:relative;width:min(100%,460px);aspect-ratio:1;justify-self:center}
.slide-art .plate{position:absolute;inset:0;border-radius:6px;overflow:hidden;
  background:repeating-linear-gradient(96deg,rgba(11,31,39,.06) 0 2px,transparent 2px 10px),
             linear-gradient(158deg,var(--wood-1),var(--wood-2) 62%,var(--wood-3));
  box-shadow:0 50px 90px -34px rgba(0,0,0,.8),0 0 0 1px rgba(244,239,227,.1);
  transform:rotate(-2deg);transition:transform .9s var(--ease)}
.slide.on .slide-art .plate{animation:plateIn 1s var(--ease) forwards}
@keyframes plateIn{from{opacity:0;transform:rotate(-6deg) scale(.92)}to{opacity:1;transform:rotate(-2deg) scale(1)}}
.slide-art:hover .plate{transform:rotate(0deg) scale(1.02)}
.slide-art .plate>svg,.slide-art .plate>img{position:absolute;inset:12%;width:76%;height:76%;color:var(--wood-ink)}
.slide-art .plate>img{object-fit:contain;inset:8%;width:84%;height:84%}
.slide-art .ribbon{position:absolute;top:6%;left:-10px;z-index:3;background:var(--hot);color:var(--on-accent-light);
  font-weight:700;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .9rem;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.7)}

/* showcase controls */
.stage-ctl{display:flex;align-items:center;gap:1rem;padding:0 0 1.6rem;flex-wrap:wrap}
.dots{display:flex;gap:.5rem;flex:none}
/* Visual track stays a slim 4px bar, but the tappable box is 24px tall (WCAG 2.2
   Target Size minimum) — the track is centered inside via a pseudo-element rather
   than making the whole indicator visually thick. */
.dot{width:38px;height:24px;padding:0;border:none;background:none;position:relative;
  display:grid;place-items:center;cursor:pointer}
.dot::before{content:"";position:absolute;inset:10px 0;border-radius:99px;
  background:rgba(140,188,199,.28);transition:background .3s}
.dot[aria-current="true"]::before{background:rgba(200,155,74,.3)}
.dot .fill{position:absolute;inset:10px 0;width:0;background:var(--gold);border-radius:99px}
.dot:active .fill,.dot:active::before{transform:scaleY(1.6)}
.arrows{display:flex;gap:.4rem;margin-left:auto}
.arrows button{width:40px;height:40px;border-radius:999px;background:rgba(140,188,199,.1);
  border:var(--line);color:var(--ice);display:grid;place-items:center;
  transition:background .3s,transform .12s var(--press)}
.arrows button:hover{background:rgba(200,155,74,.25)}
.arrows button:active{transform:scale(.88);transition-duration:.08s}
.arrows svg{width:16px;height:16px}
.playpause{display:flex;align-items:center;gap:.45rem;background:none;border:var(--line);
  color:var(--slate);border-radius:999px;padding:.5rem .8rem;min-height:24px;font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;transition:color .3s,border-color .3s,transform .12s var(--press)}
.playpause:hover{color:var(--gold);border-color:var(--gold)}
.playpause:active{transform:scale(.95);transition-duration:.08s}
.counter{font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.16em;color:var(--slate)}
.counter b{color:var(--gold)}