/* Hero option D, "Water" (ZT-172 design lab, Sep 27 2026). Loads after the shared style.css and overrides the hero only.
   Ivo's bar (09 brief, decision 1): "cool, not boring", an atmospheric scene that reads as art, nothing that implies an
   office. So: no room. The glass mark stands on black glass at the edge of a calm night bay. Files: media/v5 (a look still
   from gpt_image_2_5, upscaled from 1344 px; a 2K render replaces it if this option is picked).

   Built on prototype A (a-descent/room.css; its notes on the layers, the box and the scrim hold here). The differences:
   - .rm-back   the plate is the whole scene (no second plate is needed: the glass layer always covers the scene's glass).
     .rm-city   the bay above the glass (the full width, down to the glass's edge at 56.5% of the photo), slipping 9% of
                the photo's height further down: the far shore moves a touch slower than the water in front of it.
   - .rm-desk   the glass surface as its own file (water-front-1920: cut at the glass's edge, y 607 of 1074, 3 px feather,
                plus 360 px of ink), rising at 1.2x with the mark on it. Its front melts into ink over the last 16% of the
                photo's height.
   - .rm-refl   the mark's reflection is a little stronger: black glass is a better mirror than stone.
   900 px and under: one layer (tablets the 1280 scene, phones the vertical phone scene), the mark above the words, as in A.
   Ivo's pick (Sep 27, round 2): look 11, black marble with fine gold veins under an amber and rose afterglow, rendered sharp
   (nano_banana_pro 2K, wide and a true 9:16 phone frame) and set here as the page's default. ?look=12, 14 and 15 still show
   the other looks (index.html); the first water scene's files (media/v5/water-*) are kept for the record. */

.hero-room{
  /* The scene files per width are gone with the old renders (ZT-433); the room layer has no picture now. */
  --room:var(--room-wide);
  /* The glass's edge (fraction of the photo's height) and the front file's height (the glass to the photo's foot, plus
     360 px of ink, over the photo's height). look-11-front-1920: y 602 of 1074, 832 px tall. */
  --edge:.56052;--front-h:.77467;
  --room-grade:none;
  /* The photo's aspect, 1920 x 1074, is written into .rm-box as 1.787709 and .559375. Where the mark's lower tip touches the
     glass, as a fraction of the photo: x 1459, y 730 (on the glass, 123 px in front of its edge at y 607, where the palms'
     reflections and the moon's streak meet). */
  --tip-x:.76;--tip-y:.66;
  /* inset 0: the page's scroll-padding (the header) must not shift the range, so the room is exactly the photo at scroll 0. */
  view-timeline:--room block;view-timeline-inset:0;
  background:var(--night);
}

/* ---------- The layers ---------- */
/* Each layer covers the hero and is a size container, so the box inside can size itself like background-size: cover
   from the hero's real size (cqw / cqh), whatever the words make that size. */
.rm-layer{position:absolute;inset:0;pointer-events:none;container-type:size}
/* The photo's own box: covers the hero, centered, its bottom on the hero's bottom (so the desk never crops away). */
.rm-box{--bw:max(100cqw,100cqh * 1.787709);--bh:max(100cqh,100cqw * .559375);position:absolute;left:calc(50cqw - var(--bw) / 2);top:calc(100cqh - var(--bh));width:var(--bw);height:var(--bh)}
.rm-img{position:absolute;inset:0;background:var(--room) 0 0/100% 100% no-repeat;filter:var(--room-grade)}

.rm-back{z-index:0;transform-origin:62% 46%}
/* The bay: the full width, from the top of the photo to the glass's edge (y 607 of 1074). The plate inside it is placed back
   on the plate below, then slips down with the scroll; its lower edge is always behind the glass. */
.rm-city{position:absolute;left:0;top:0;width:100%;height:calc(var(--edge) * 100%);overflow:hidden}
.rm-city .rm-img{inset:auto;left:0;top:0;width:100%;height:calc(100% / var(--edge))}

.rm-desk{z-index:1}
/* The glass file: 1920 x 827, its top at y 607 of the photo (56.518%), 77.002% of the photo's height tall. */
.rm-top{position:absolute;left:0;top:calc(var(--edge) * 100%);width:100%;height:calc(var(--front-h) * 100%);background:var(--desk) 0 0/100% 100% no-repeat;filter:var(--room-grade)}
/* The glass's front melts into ink over the last 16% of the photo's height (file rows 295 to 467, where the photo ends). */
.rm-top::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(22,25,29,0) calc((1 - var(--edge) - .16) / var(--front-h) * 100%),rgba(22,25,29,.5) calc((1 - var(--edge) - .08) / var(--front-h) * 100%),var(--night) calc((1 - var(--edge)) / var(--front-h) * 100%))}
.rm-under{position:absolute;left:0;right:0;top:calc((var(--edge) + var(--front-h)) * 100% - 1px);height:60%;background:var(--night)}

/* The scrim moves with the words. The wall behind the copy is already near black, so the scrim only has to hold where the
   words cross the glass (the city, the bridge's lights): it holds until the words' column ends (--copy-r: the right edge
   of the copy's 8 of 12 columns, from the page grid) and clears 200 px past it. Top: the header band, which holds the nav
   at 4.5:1 where the lit skyline sits right under it (2560 px wide). */
.rm-scrim{--wrap-c:min(100% - 2 * var(--gutter),var(--max));--copy-r:calc(50% + var(--wrap-c) / 6 - 8px);position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(90deg,rgba(22,25,29,.3) 0,rgba(22,25,29,.5) calc(var(--copy-r) - 260px),rgba(22,25,29,.5) calc(var(--copy-r) - 120px),rgba(22,25,29,.24) calc(var(--copy-r) + 40px),rgba(22,25,29,0) calc(var(--copy-r) + 200px)),
  linear-gradient(rgba(22,25,29,.78),rgba(22,25,29,.6) var(--head-h),rgba(22,25,29,0) calc(var(--head-h) + 110px))}

/* ---------- The mark on the desk (above 900 px) ---------- */
.rm-rig{z-index:3}
/* --mh, the mark's height: half the photo's height, 480 px at most, and never so tall that its top reaches the header. */
.rm-rig .rm-box{--mh:min(var(--bh) * .5,480px,(100cqh - var(--bh) * (1 - var(--tip-y)) - var(--head-h) - 24px) / .911);--mw:calc(var(--mh) * .66);--mx:calc(var(--bw) * var(--tip-x) - var(--mw) * .7511);--my:calc(var(--bh) * var(--tip-y) - var(--mh) * .911)}
/* The slot: its lower tip (75.1% across, 91.1% down the slot; hero3d's numbers) on the tip point. */
.hero-room .hero-mark{position:absolute;left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh);pointer-events:auto}
/* On the stone the contact shadow is a little wider and softer, and the lit pool picks up the glass's blue. */
.hero-room .hero-mark::before{left:-18%;right:-18%;bottom:0;height:13%;background:radial-gradient(closest-side,rgba(0,163,224,.08),rgba(251,250,247,.03) 60%,transparent)}
/* The reflection in the polished stone: the poster mirrored about the tip line (91.1% of the slot), faint and a little
   soft (the stone blurs the window's lights too), fading out over about a third of the mark's height below the tip. */
.rm-refl{position:absolute;left:var(--mx);top:calc(var(--my) + var(--mh) * .822);width:var(--mw);height:var(--mh);transform:scaleY(-1);opacity:.32;-webkit-mask:linear-gradient(to top,#000 8.9%,rgba(0,0,0,.35) 22%,transparent 42%);mask:linear-gradient(to top,#000 8.9%,rgba(0,0,0,.35) 22%,transparent 42%)}
.rm-refl img{display:block;width:100%;height:100%;filter:blur(1.5px);transition:opacity var(--h3d-floor-ms,360ms) var(--ease-out)}
/* It waits for the mark like the floor shadow does: hidden while the power-up plays or holds the poster back. */
html[data-h3d-intro] .rm-refl img{opacity:0;animation:nl-poster-back 240ms var(--ease-out) 2.5s both}
.hero-mark[data-h3d-hold]+.rm-refl img{opacity:0;transition:none;animation:none}

/* The words sit above every layer. The grid spans the hero, so it lets the pointer through to the slot (the Skip button)
   except over the words themselves. */
.hero-room .hero-grid{position:relative;z-index:4;pointer-events:none}
.hero-room .hero-copy{pointer-events:auto}

/* ---------- Scroll: the descent ---------- */
/* The hero's exit range runs from scroll 0 to the hero's height (it starts at the top of the page). */
/* Calmer (ZT-384, Ivo, Oct 2): about two thirds of the first descent (65% and 1.04, -20%, 15%). */
@keyframes rm-back{0%{transform:translate3d(0,0,0) scale(1)}25%{opacity:1}100%{transform:translate3d(0,42%,0) scale(1.02);opacity:.3}}
@keyframes rm-city{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,9%,0)}}
@keyframes rm-desk{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,-13%,0)}}
@keyframes rm-lite{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(0,10%,0)}}
/* The live 3D mark recedes and turns as the hero leaves (hero3d's own scroll pose, which it offers no switch for) and its
   contact shadow fades with it by about 36% of the exit (hero3d.css, --h3d-s): the reflection follows the shadow then. The
   poster never moves on its own, so over the poster the reflection stays. */
@keyframes rm-refl{to{opacity:0}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rm-back{animation:rm-back linear both;animation-timeline:--room;animation-range:exit 0% exit 100%}
    /* The city's own box is the photo's box again, so 9% of it is 9% of the photo's height. */
    .rm-city .rm-img{animation:rm-city linear both;animation-timeline:--room;animation-range:exit 0% exit 100%}
    .rm-desk,.rm-rig{animation:rm-desk linear both;animation-timeline:--room;animation-range:exit 0% exit 100%}
    .rm-box:has(>.hero-mark.is-3d) .rm-refl{animation:rm-refl linear both;animation-timeline:--room;animation-range:exit 0% exit 36%}
  }
  /* Lite: the room and the mark on it drift together at 0.85x; the words keep 1x. */
  @media (prefers-reduced-motion:no-preference) and (max-width:900px){
    .rm-back,.rm-rig{animation-name:rm-lite}
  }
}

/* ---------- 900 px and under: lite ---------- */
/* One layer (the whole room, no desk cut, no city slip, no reflection) and the landing's arrangement: the mark above the
   words, right on tablets, on the reading line on phones. The mark still stands on the desk: the room is scaled to the
   mark and placed so a spot on the desk sits under its tip, then fades to ink under the H1. The words start below the mark,
   as on the landing (the mark's height plus the landing's gap), and the group sits at the top (on a phone the words fill
   the hero anyway, so this matches the landing there).
   Tablets: the landscape room (room-1280, which still has the chair: this is the whole photo), twice the mark's height
   at least, the tip on the right of the desk as on desktop. */
@media (max-width:900px){
  .hero-room{
    --room:var(--room-tab);
    --pad:var(--s4);--lx:var(--tip-x);--ly:var(--tip-y);--room-k:2;
    --lw:calc(var(--mark-h) * .66);
    --ll:calc(100cqw - var(--gutter) - (100cqw - 2 * var(--gutter)) * .06 - var(--lw));
    --lt:calc(var(--head-h) + var(--pad));
    --ltx:calc(var(--ll) + var(--lw) * .7511);--lty:calc(var(--lt) + var(--mark-h) * .911);
    flex-direction:column;justify-content:flex-start}
  .rm-desk,.rm-refl,.rm-city{display:none}
  /* Wide enough to cover the hero right of the tip, never smaller than --room-k times the mark. */
  .rm-back .rm-box{--bw:max(var(--mark-h) * var(--room-k) * 1.787709,(100cqw - var(--ltx)) / (1 - var(--lx)) + 16px);--bh:calc(var(--bw) * .559375);left:calc(var(--ltx) - var(--bw) * var(--lx));top:calc(var(--lty) - var(--bh) * var(--ly))}
  /* The desk's front into ink: from just below the tip to ink 14% of the room's height further down. */
  .rm-back .rm-box::after{content:"";position:absolute;inset:0 0 -1px;background:linear-gradient(rgba(22,25,29,0) calc(var(--ly) * 100% + 3%),var(--night) calc(var(--ly) * 100% + 17%))}
  .rm-rig .rm-box{left:0;top:0;width:100%;height:100%}
  .hero-room .hero-mark{left:var(--ll);top:var(--lt);width:var(--lw);height:var(--mark-h)}
  .hero-room .hero-grid{flex:none;padding-top:calc(var(--lt) + var(--mark-h))}
  /* The header band (it holds "Menu" at 4.5:1 over the lit pier on the right), and a light veil where the H1 crosses the
     desk. */
  .rm-scrim{background:linear-gradient(rgba(22,25,29,.8),rgba(22,25,29,.66) calc(var(--head-h) - 12px),rgba(22,25,29,.12) calc(var(--head-h) + 40px),rgba(22,25,29,.12) calc(var(--lty) - 20px),rgba(22,25,29,.45) calc(var(--lty) + 60px),rgba(22,25,29,0) calc(var(--lty) + 200px))}
}
/* Phones: the vertical phone scene (the bay across the top third, the glass from 48% down), sized to cover the hero right
   of the tip and placed so the mark, on the reading line at the left, stands on the glass 10% of the scene's height in
   front of its edge. */
@media (max-width:560px){
  .hero-room{
    --room:var(--room-phone);
    --pad:var(--s3);--lx:var(--phone-x,.30);--ly:var(--phone-y,.63);--ll:var(--gutter)}
  .rm-back .rm-box{--bw:calc((100cqw - var(--ltx)) / (1 - var(--lx)) + 16px);--bh:calc(var(--bw) * 1.787778)}
}