/* Hero variant: Trevor as a black-and-gold marble bust, live in three.js, turning to follow the cursor, in front
   of a gilded gallery thrown out of focus as if shot on a 50 mm lens at the bust's eye level. Loaded after
   style.css and depth.css by f-statue.html, whose chapters below are f.html's.

   The scene (photograph and bust) holds still while the first stretch of the page scrolls; over that stretch
   the gallery's lights go down, the camera eases in and the name moves on, then the first chapter cuts in over
   the scene on its diagonal. Position: sticky only, no scroll hijacking. gallery.js sets the scroll-linked
   transforms and opacity on each moving element, and dims the 3D lights. */
.hero.hero--gallery{display:block;justify-items:normal;align-content:normal;height:calc(100dvh + 60vh);min-height:0;padding:0;
  text-align:left;overflow:visible;background:var(--abyss)}
.gallery{position:sticky;top:0;height:100dvh;min-height:620px;overflow:hidden;isolation:isolate}
/* no news bar on this page: the header row sits at the very top, at the right, and the shared motion toggle
   (which style.css puts in the news bar) joins it as a pill beside Menu (gallery.js moves it in) */
.head{top:0;justify-content:flex-end;gap:12px}
.head .motion-toggle{position:static!important;width:auto;height:auto;border-radius:1440px!important;padding:10px 20px!important;white-space:nowrap}
@media (max-width:560px){ .head{gap:8px} .head .motion-toggle{padding:8px 14px!important} .head .pill{padding-left:14px;padding-right:14px} }

/* the photograph: covers the scene, its vanishing point kept where the camera's eye line is */
.gallery__plate{position:absolute;inset:0;z-index:0;transform-origin:46% 44%}
.gallery__plate img{width:100%;height:100%;display:block;object-fit:cover;object-position:46% 44%}
/* a neutral scrim under the words (left and foot), and the lights going down as the hero scrolls away */
.gallery__scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgb(0 0 0 / .74) 0%,rgb(0 0 0 / .5) 30%,rgb(0 0 0 / 0) 58%),
             linear-gradient(0deg,rgb(0 0 0 / .62) 0%,rgb(0 0 0 / 0) 34%)}
/* the room is kept dim (gallery.js deepens it on scroll), so the bust reads as the lit piece on display */
.gallery__dark{position:absolute;inset:0;z-index:1;background:#000;opacity:.32;pointer-events:none}

/* the bust: a transparent canvas over the photograph, solid down to where the frame cuts it (data-solid) */
.gallery__bust{position:absolute;inset:0;z-index:2;transform-origin:68% 60%}
.gallery__bust canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.1s var(--ease)}
.gallery__bust.live canvas{opacity:1}
.gallery__load{position:absolute;z-index:3;left:68%;top:46%;width:min(32%,220px);height:2px;translate:-50% 0;background:rgb(255 255 255 / .14);overflow:hidden;transition:opacity .5s ease}
.gallery__load span{position:absolute;inset:0;background:#e6b25f;transform-origin:left center;transform:scaleX(var(--p,0));transition:transform .35s ease-out}
.gallery__bust.live ~ .gallery__load{opacity:0}

/* the name sits on the dark left of the gallery, centred top to bottom (Trevor, 2026-10-20), with the one
   link under it; it scrolls on normally while the scene holds */
.gallery-copy{position:absolute;z-index:4;top:0;left:var(--gut);height:100dvh;min-height:620px;display:grid;align-content:center;
  justify-items:start;max-width:min(46vw,760px)}
.hero--gallery .hero__mark{justify-items:start}
/* the name in Federo, an Art Deco face close to the title lettering Trevor picked (the cover of O Último
   Conhaque): round O, high-waisted M, U with a stem. It is wider than the condensed face, so it sets smaller.
   The close repeats it, so the page opens and ends on the same name */
@font-face{font-family:"Federo";src:url("../../assets/fonts/federo-400.woff2") format("woff2");font-weight:400;font-display:swap}
.hero--gallery .wordmark{font-family:"Federo",var(--cond);font-size:clamp(56px,min(7.6vw,17vh),150px);line-height:.94;letter-spacing:0;animation:nameIn 1.6s var(--ease) .2s both}
/* the name as raised gold letters, the shiny gold of the leaf across the bust's eyes, with no plate behind them
   (Trevor, 2026-10-20: "the same as the gold on the face… really shiny"). Each line carries a mirror-like
   reflection in the face's own colours (sampled from a render: #f6d37e, #d9aa54, #8b581e, #402c19, with its
   sheens pushed to near white, Trevor: "even more shiny"), pale at the top, a dark horizon just below the middle, a bright reflection under it; the leaf's
   fine crinkle and pin-point glints lie over it (assets/head/gold-leaf.webp, soft-light). A thin dark rim and
   a stepped bronze edge with a soft drop shadow raise the letters off the page. Clipping text to a picture is
   a deliberate exception to TasteSkill's solid-colour rule, on Trevor's request; plain white where unsupported */
@supports (background-clip:text) or (-webkit-background-clip:text){
  /* the close's name wears it too, letter by letter (each letter rises on its own; depth.js), the leaf's grain
     shifted per letter so it never repeats letter to letter */
  .hero--gallery .wordmark,.foot__name span{color:transparent;
    background:url("../../assets/head/gold-leaf.webp") calc(var(--i,0) * -83px) 0/600px auto,
      linear-gradient(to bottom,#fbe09a 0%,#fffdf4 11%,#fff4cc 19%,#f6cf72 30%,#dcae58 41%,#8b581e 52%,#402c19 56%,#b47f30 61%,#f8d680 71%,#fffcef 79%,#fff0bd 86%,#c08a3a 100%) 0 0/100% 1lh repeat-y;
    background-blend-mode:soft-light,normal;
    -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px rgb(74 46 10 / .6)}
  .hero--gallery .wordmark,.foot__name{
    filter:drop-shadow(0 1px 0 #8a6020) drop-shadow(0 1px 0 #6b4914) drop-shadow(0 1px 0 #50350c) drop-shadow(0 2px 0 #33220a) drop-shadow(0 12px 16px rgb(0 0 0 / .55))}
}
.foot__name{font-family:"Federo",var(--cond);font-size:min(calc((100vw - 2 * var(--gut)) / 9.6),150px);line-height:.94;letter-spacing:0}
.hero--gallery .hero__foot{position:static;translate:none;width:auto;margin-top:28px;text-align:left;font-size:16px}
/* centre the name itself in the viewport, including short windows: equal space either side of its row,
   with the scroll link in the lower space. The gallery's 620px minimum must not push the words down. */
@media (min-width:901px){
  .gallery-copy{min-height:0;grid-template-rows:1fr auto 1fr;align-content:normal}
  .hero--gallery .hero__mark{grid-row:2}
  .hero--gallery .hero__foot{grid-row:3;align-self:start}
}

/* the first chapter cuts in over the darkened scene */
.hero--gallery + .ch{z-index:1}

@media (max-width:900px){
  .hero.hero--gallery{height:auto}
  .gallery{position:relative;height:min(74svh,680px);min-height:420px}
  .gallery__plate img{object-position:50% 44%}
  .gallery__scrim{background:linear-gradient(0deg,rgb(0 0 0 / .55) 0%,rgb(0 0 0 / 0) 30%)}
  .gallery__load{left:50%}
  /* the first chapter's diagonal rises into the hero's foot (depth.css), so the foot keeps that band clear */
  .gallery-copy{position:static;height:auto;min-height:0;max-width:none;padding:28px var(--gut) calc(48px + var(--cutH))}
}
/* reduced motion, or motion paused on the site (html.motion-off): the still scene, no hold. The centred
   name already clears the first chapter's diagonal; only the narrow layout needs its foot reserved */
@media (prefers-reduced-motion:reduce){
  .hero.hero--gallery{height:auto}
  .gallery{position:relative}
  .gallery__plate,.gallery__bust{transform:none}
  .gallery__dark{opacity:.32}
  .gallery-copy{padding-bottom:0}
  .hero--gallery .wordmark{animation:none}
  .gallery__bust canvas,.gallery__load,.gallery__load span,.gallery__poster{transition:none}
}
.motion-off .hero.hero--gallery{height:auto}
.motion-off .gallery{position:relative}
.motion-off .gallery__plate,.motion-off .gallery__bust{transform:none}
.motion-off .gallery__dark{opacity:.32}
.motion-off .gallery-copy{padding-bottom:0}
.motion-off .hero--gallery .wordmark{animation:none}
@media (max-width:900px){ .motion-off .gallery-copy{padding-bottom:calc(48px + var(--cutH))} }
@media (max-width:900px) and (prefers-reduced-motion:reduce){ .gallery-copy{padding-bottom:calc(48px + var(--cutH))} }

/* the bust as a still picture: shown until the live bust has drawn, and kept if WebGL or the model fails
   (or there is no script). Placed where the camera puts the bust. --u is the camera's frame height: the
   scene's height, or less on a tall narrow scene, where the camera widens its view and lowers the frame to
   the scene's bottom edge (data-sit="bottom"; head-lab.js resize). So the frame's middle is 100cqh - u/2. */
.gallery{container-type:size}
.gallery__poster{--u:min(100cqh,125cqw);position:absolute;z-index:2;pointer-events:none;width:auto;max-width:none;height:calc(var(--ph) * var(--u));
  top:calc(100cqh - var(--u) / 2 + var(--pt) * var(--u));left:calc(69cqw + var(--pl) * var(--u));transition:opacity .8s var(--ease)}
.gallery__bust.live ~ .gallery__poster{opacity:0}
.gallery__bust.failed ~ .gallery__load{display:none}
/* the camera moves the bust right (data-shift) only on a wide scene beside the words; otherwise it is centred */
@container (aspect-ratio <= 1.1){ .gallery__poster{left:calc(50cqw + var(--pl) * var(--u))} }
@media (max-width:900px){ .gallery__poster{left:calc(50cqw + var(--pl) * var(--u))} }

/* ---- the loading screen (f-statue.html): the bust on its turned base turning once as the live bust loads, the
   count under it. Each frame of the turn is one cell of a 6 x 6 sheet (the script sets which). While it shows,
   the page does not scroll and the name waits to rise */
.intro{position:fixed;inset:0;z-index:300;display:grid;place-content:center;justify-items:center;gap:22px;background:#070605;
  transition:opacity .8s var(--ease),visibility 0s .8s}
.intro.is-done{opacity:0;visibility:hidden}
/* the bust with its base built into the model (head_statue_base.glb), 36 frames of one turn */
.intro__bust{--h:min(50svh,420px);height:var(--h);width:calc(var(--h) * 354 / 524);
  background:url("../../assets/head/bust-spin-base.webp") 0 0/600% 600% no-repeat}
.intro__pct{font:400 22px/1 "Federo",var(--cond);letter-spacing:.08em;color:#e7cf95;font-variant-numeric:tabular-nums}
html.is-loading{overflow:hidden}
html.is-loading .hero--gallery .wordmark{animation-play-state:paused}