/* ═══ Atlas Studio site kit · the ember edge (pairs with embers.js) ═════════════════════════
   Markup (one per page): a root with class .fh and data-embers="hero" | "lite", holding
   canvas.fh-cv, div.fh-still, p.fh-note (hidden) and the clean box .fh-copy; optionally
   div.fh-catchers (hero only: the product tiles) and elements marked [data-ember-obstacle].
   The fire parts around .fh-copy (margin --fh-pad), the nav pill .fh-nav__in (--fh-nav-pad) and
   each obstacle (--fh-obs-pad). embers.js sets data-fire on the root (live | paused | still-frame |
   still) and --fh-lit (0..1) on the headline .fh-h. Colours are tokens (tokens.css).
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.fh{--fh-pad:24px;           /* the clean pocket the fire leaves round the box (embers.js reads it) */
  --fh-nav-pad:16px;         /* ...round the nav pill */
  --fh-obs-pad:16px;         /* ...round each [data-ember-obstacle] */
  background:var(--ground);color:var(--ink);isolation:isolate;overflow:hidden}
.fh--lite{--fh-pad:20px}
/* the fire: canvas z0, tiles z1, copy z2. The shader ends exactly on the ground at the bottom edge. */
.fh-cv{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%}
/* the still: shown without WebGL2 (and without JS). Hero: a capture of the live fire over a
   hand-built gradient. Lite: the gradient flame alone, plus a drawn contact edge round the box. */
.fh-still{position:absolute;inset:0;z-index:0;display:none;
  background:
    linear-gradient(to top,var(--ground) 0,rgb(var(--ground-rgb) / 0) 16%),
    url("img/still.jpg") 72% 100%/cover no-repeat,
    radial-gradient(34% 52% at 68% 96%,rgb(var(--still-1-rgb) / .92) 0,rgb(var(--still-2-rgb) / .78) 22%,rgb(var(--still-3-rgb) / .5) 46%,rgb(var(--still-4-rgb) / .22) 70%,rgb(var(--ground-rgb) / 0) 100%),
    radial-gradient(70% 46% at 50% 100%,rgb(var(--still-5-rgb) / .42) 0,rgb(var(--still-6-rgb) / .18) 55%,rgb(var(--ground-rgb) / 0) 100%),
    var(--ground)}
.fh--lite .fh-still{
  background:radial-gradient(60% 34% at var(--fh-src-x,30%) 100%,rgb(var(--still-5-rgb) / .14) 0,rgb(var(--still-6-rgb) / .06) 55%,rgb(var(--ground-rgb) / 0) 100%),var(--ground)}
.fh--nogl .fh-still{display:block}
.fh--nogl .fh-cv{display:none}
/* lite still: the contact edge itself, drawn round the box's pocket */
.fh--lite.fh--nogl .fh-copy{position:relative}
.fh--lite.fh--nogl .fh-copy::before{content:"";position:absolute;inset:calc(-1 * var(--fh-pad));z-index:-1;border-radius:28px;padding:1.5px;pointer-events:none;
  background:linear-gradient(to top,rgb(var(--still-2-rgb) / .95),rgb(var(--still-3-rgb) / .7) 28%,rgb(var(--still-3-rgb) / .2) 72%,rgb(var(--still-3-rgb) / .1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.fh--lite.fh--nogl .fh-copy::after{content:"";position:absolute;left:0;right:0;top:calc(100% + var(--fh-pad) - 2px);height:110px;z-index:-1;pointer-events:none;
  background:radial-gradient(42% 100% at 50% 0,rgb(var(--still-3-rgb) / .26),rgb(var(--still-4-rgb) / .1) 55%,rgb(var(--ground-rgb) / 0) 100%)}
/* shown only when the fire falls back to the still, so the state is never silent */
.fh-note{position:absolute;right:var(--gut);bottom:22px;z-index:2;margin:0;font-size:12px;line-height:1.3;color:var(--ink-3)}

/* the headline's firelight: cool off-white away from the fire, warming toward it as it burns */
@property --fh-lit{syntax:'<number>';inherits:true;initial-value:.5}
.fh-h{background:linear-gradient(90deg,var(--lit-cool) 0%,var(--lit-mid) 38%,
    color-mix(in oklab,var(--lit-warm-0),var(--lit-warm-1) calc(var(--fh-lit) * 100%)) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.fh-h__open{background:linear-gradient(100deg,var(--open-0) 0%,var(--open-1) 44%,var(--open-2) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
@media (forced-colors:active){
  .fh-h,.fh-h__open{background:none;-webkit-text-fill-color:currentColor}
}

/* ── the product tiles (hero only): three matte dark links in the right margin, each real mark
   inlaid in cream, with an animated warm glow (the composite draws the halo, this css the lit lower
   edge, both breathing via --fh-glow). No embers touch them. embers.js builds them into
   .fh-catchers and poses them every frame. Hover: a 2px lift, an ease forward, the glow brightens. ── */
.fh-catchers{position:absolute;inset:0;z-index:1;pointer-events:none;contain:layout}
.fh-catch{position:absolute;left:0;top:0;display:block;will-change:transform;
  background:var(--ground-2);box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .07)}
.fh-catch--tile{--fh-glow:.9;display:grid;place-items:center;
  background:radial-gradient(95% 62% at 50% 114%,rgb(255 150 70 / calc(var(--fh-glow) * .17)),rgb(255 150 70 / 0) 72%),var(--ground-2);
  box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .075),inset 0 -1px 0 rgb(255 176 104 / calc(var(--fh-glow) * .34))}
.fh-catch--tile svg{display:block;width:28px;height:28px;overflow:visible;
  fill:color-mix(in oklab,var(--cream),#FFC08A calc(var(--fh-glow) * 22%));fill-opacity:.9;
  filter:drop-shadow(0 -.75px 0 rgb(0 0 0 / .6)) drop-shadow(0 1px 1.6px rgb(255 140 60 / calc(var(--fh-glow) * .5)))}
.fh-catch--tile .fh-in--lo{fill-opacity:.5}
.fh-catch--tile .fh-in--mid{fill-opacity:.72}
.fh-catch--tile .fh-in--plate{fill-opacity:.8}
@property --fh-lift{syntax:'<length>';inherits:false;initial-value:0px}
@property --fh-sc{syntax:'<number>';inherits:false;initial-value:1}
.fh-catch--tile{pointer-events:auto;cursor:pointer;--fh-lift:0px;--fh-sc:1;
  transition:--fh-lift .28s cubic-bezier(.2,.7,.2,1),--fh-sc .28s cubic-bezier(.2,.7,.2,1)}
.fh-catch--tile:hover{--fh-lift:-2px;--fh-sc:1.04}
.fh-catch--tile:active{--fh-lift:0px;--fh-sc:.97;transition-duration:.08s}
.fh-catch--tile:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.fh-catch--tile:hover svg,.fh-catch--tile:focus-visible svg{fill-opacity:1}
@media (prefers-reduced-motion:reduce){.fh-catch--tile:hover,.fh-catch--tile:active{--fh-lift:0px;--fh-sc:1}}
.fh--nogl .fh-catchers{display:none}
@media (forced-colors:active){.fh-catchers{display:none}}