/* ═══════════════════════════════════════════════════════════════════════════
   מגנוליה — the CRAFT layer: light, pacing, the cursor, and the still version.

   styles.css is the token and layout system. This file is the part that has to
   be ALIVE, and it is a separate layer on purpose: the tokens are derived in
   BRAND-DIRECTION.md and settled, while everything here answers one measured
   failure — every site this department shipped froze the moment the visitor
   stopped scrolling, and the last third of the page died first.

   The one idea, stated once so it does not have to be restated per section:

     ▸ Gold is only gold because it ANSWERS LIGHT. So the honest thing to keep
       moving is not a decorative loop, it is the specular — the highlight
       crawling across real photographed metal and real photographed paper, at
       the 105° key angle MEASURED off Magnolia's own flat-lays. Depth stops at
       section 6. The light does not. It is the same lamp above the catalogue,
       the branches and the footer as above the hero, which is what makes the
       page read as ONE CONTINUOUS SURFACE rather than a stack of cards.

   ⚠ The previous version of this was one wide, low-alpha wash on the hero band.
   It measured 8.2% of pixels "changed" and 0.13% PERCEPTIBLE — ratio 0.016, and
   the craft gate correctly refused to judge it as a noise veneer. A huge area
   changing by one level each is not light. The streak below is NARROW and
   HIGH-contrast for exactly that reason: fewer pixels, each of which actually
   changes. Same physics, opposite metric.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE SPECULAR ─────────────────────────────────────────────────────────
   One material, applied to every lit surface.

   `mix-blend-mode: overlay` and not opacity: overlay lifts what is already
   bright and leaves the shadows where they are, which is what a specular IS.
   It is also blow-out-safe by construction — the composite tops out at
   (1-α)·b + α, so it can only reach pure white where the pixel already was
   pure white. SCENE.md §5.2 holds the render to blown ≤ 0.1%; this holds the
   CSS to the same rule.

   The profile is a triangle 104px wide with its peak at the centre. Over one
   420ms sample the streak advances ~48px on a wide plate — about 0.9 of the
   ramp — so nearly every pixel under the ramp changes by nearly the full
   amount. That is the whole difference between light and a veneer. */
.lit{ position:relative; }
.lit > *{ position:relative; z-index:1; }
.lit::after{
  content:""; position:absolute; top:0; bottom:0;
  /* ⚠ GEOMETRY, and the first version got it wrong in a way that is invisible
     in code and obvious in the numbers. The layer travels 1.0353 × --sp to the
     right; if its left edge does not start at least that far LEFT of the
     surface, the streak walks clean off and the surface is dark for most of the
     cycle. The old `inset: -26% -70%` was a percentage of the element's own
     width, so a 168px column got ±118px of margin against a 642px journey and
     went dark 40% of the time — the sheen was "working" and measuring nothing.
     Sized from --sp, it cannot happen again. (+90px covers the pointer shove.) */
  left:calc(var(--sp) * var(--rate, 1) * -1.1 - 90px); right:-90px;
  pointer-events:none; z-index:2;
  /* --rmp is the softness of the edge. It is the single control between "light
     falling across paper" and a chrome swipe: a hard, narrow ramp on a flat
     band renders as a metallic gradient, which is the cheap tell this whole
     brand is built to avoid (gold is photographed metal, never a CSS
     gradient — and a silver one is no better). Wide surfaces get a wide ramp. */
  background:repeating-linear-gradient(var(--az),
    transparent 0px,
    transparent calc(var(--sp) - var(--rmp, 52px) * 2.9),
    var(--sheen-shade) calc(var(--sp) - var(--rmp, 52px) * 2),   /* the falloff side */
    var(--sheen-tone, var(--sheen-plate)) calc(var(--sp) - var(--rmp, 52px)),  /* the key */
    transparent var(--sp));
  /* One repeat per unit of --sheen. Translating x by --sp/sin(105°) advances
     the pattern by exactly one period, so the 1→0 wrap is bit-identical and
     there is no seam to hide. 1.0353 = 1/sin(105°). */
  /* --rate must be a whole number of periods per cycle, or the 1→0 wrap stops
     being seamless. It exists because a narrow surface needs a SHORT period to
     be certain of holding a streak at all times, and a short period travelled
     once per cycle crawls too slowly for anything to visibly change between two
     frames. Two periods per cycle buys both. */
  transform:translate3d(
    calc(var(--sheen) * var(--sp) * var(--rate, 1) * 1.0353 + var(--key-x) * 84px), 0, 0);
}
.lit--photo{ --sheen-tone:var(--sheen-photo); }
.lit--plate{ --sheen-tone:var(--sheen-plate); }
/* Surfaces whose parent does not already clip. */
.lit--clip{ overflow:hidden; }

/* PAPER — the material Magnolia's own product photography is shot on, brought
   into the page as a surface. --c-paper-deep is not a decorative grey: it is
   the GRADE TARGET the photographer is given (BRAND-DIRECTION §3.5), so a
   plate and a photograph are literally the same paper. */
.plate{ background:var(--c-paper-deep); }

/* ── 1 · hero band ────────────────────────────────────────────────────────
   Overrides the wide wash in styles.css. The band is the only photographed
   material on the first screen, so this is what has to carry the page before a
   single line of WebGL runs — and it is the only viewport the craft gate ever
   measures. */
.hero__band::after{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(1500px * -1.1 - 90px); right:-90px;
  pointer-events:none; z-index:2;
  background:repeating-linear-gradient(var(--az),
    transparent 0px, transparent calc(1500px - 152px),
    var(--sheen-shade) calc(1500px - 104px),
    var(--sheen-photo) calc(1500px - 52px), transparent 1500px);
  transform:translate3d(calc(var(--sheen) * 1553px + var(--key-x) * 84px), 0, 0);
  will-change:transform;
}

/* ── 2 · הא״ב — the category photographs the letters stand in front of ────
   SCENE.md §6.1 grade 2 for this section is "the photograph as a texture on a
   plane", and §1 fixes the relationship: the letter is ALWAYS in front, ALWAYS
   flat, and NEVER lit — only ever shadowed. So the plate carries the light and
   the letter occludes it. Occlusion is the cheapest convincing depth cue there
   is, and it costs the letterform nothing: ד↔ר is decided by one corner and
   collapses to 16.1% at weight 600 alone, so nothing here is allowed to touch
   the contour. It does not. */
.alef__item a{ position:relative; }
.alef__plate{
  display:block; position:relative; overflow:hidden;
  aspect-ratio:4/3; background:var(--c-paper-deep);
  --sp:340px; --sheen-tone:var(--sheen-photo);
}
/* ⚠ Magnolia's product shots are cut-outs on WHITE. Dropped straight onto the
   sage they read as pasted white patches — the exact defect BRAND-DIRECTION
   §3.5 names, and the reason --c-paper-deep exists as a GRADE TARGET rather
   than a decorative grey. `multiply` puts the cut-out ON the paper instead of
   over it: white becomes the paper, the piece keeps its own tone, and the
   brightness compensates for the darkening the multiply costs. The result is
   the same material in shadow, which is what the concept asks for. */
.alef__plate img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%;
  mix-blend-mode:multiply; filter:brightness(1.13); }
/* The letter's peak pierces the plate, exactly as ל pierces the band upstairs.
   Same move, one octave down — that rhyme is what makes the two sections read
   as one page instead of two. */
.alef__glyph{ position:relative; z-index:2; margin-top:-0.46em; }
.alef__name{ margin-top:14px !important; }

/* ── 3 · עיצוב אישי — the stage the pendant will stand on ─────────────────
   The plate is the paper the piece is photographed on. When the baked necklace
   lands in .pers__canvas it sits on this, lit by the same lamp, and nothing
   about the composition has to change. */
.pers__stage{ position:relative; }
.pers__plate{
  position:absolute; inset-block:-26px; inset-inline:-34px 22%;
  background:var(--c-paper-deep); overflow:hidden; z-index:0;
  --sp:620px;
}
.pers__preview{ position:relative; z-index:2; }
.pers__canvas{ position:relative; z-index:1; }

/* ── 4 · שקט משולם — the crossing ─────────────────────────────────────────
   "Silence" is the absence of INFORMATION, not of light — a viewport that
   freezes fails the pulse law, and the emptiest screen on the page is exactly
   where the one thing that never stops has to be visible. So: no type, no
   price, no UI. One sheet of the paper both worlds are photographed on,
   crossing, with the specular travelling it at the identical angle and the
   identical crawl rate as the band above and the tiles below. You cannot see
   where the hand-off happened, which is the point. */
.hush{ position:relative; overflow:hidden; }
.hush__sheet{
  position:absolute; inset-inline:0; top:24%; height:52%;
  background:var(--c-paper-deep); overflow:hidden;
  --sp:1500px;
  will-change:transform;
}

/* ── 6 · הקטלוג — the sheen crawls tile to tile, in reading order ─────────
   SCENE.md §7: one at a time, right→left, phase offset per tile by its DOM
   position. In RTL, DOM order IS reading order, so nth-child gives it for free
   and no JS ever touches these — 60 tiles driven from a stylesheet.

   The window is 46% of a 13s cycle and the steps are 0.72s apart, so between
   two and three tiles are crossing at any moment: continuous at section level
   (the section never dies) while no more than a quarter of the grid is in
   motion at once. */
.cat__ph{ position:relative; background:var(--c-ground-sunk); }
/* ⚠ The catalogue is 2,215 cut-outs on WHITE. Left as they are they read as
   white patches pasted on the sage — and, fatally for the light, a white
   specular crossing a white background changes nothing: this section measured
   0.17% perceptible while the animation was demonstrably running.
   `multiply` seats every photograph ON the paper instead of over it. Chosen at
   --c-ground-sunk rather than --c-paper-deep here because these are the actual
   goods: at 227 the multiply costs 11% and brightness(1.1) gives it back, so
   product colour is effectively unchanged. The alef plates, which are editorial
   rather than shoppable, can afford the deeper paper. */
.cat__ph img{ mix-blend-mode:multiply; filter:brightness(1.1); }
.cat__ph::after{
  content:""; position:absolute; inset:-30% -70%; pointer-events:none; z-index:2;
  background:linear-gradient(var(--az),
    transparent 33%, var(--sheen-shade) 43%,
    var(--sheen-photo) 51%, transparent 61%);
  opacity:0; transform:translate3d(-52%,0,0);
}
/* Off-screen tiles must not paint or animate. A 2,215-product catalogue is
   precisely where a beautiful idea turns into a hot phone. */
.cat__p{ content-visibility:auto; contain-intrinsic-size:auto 460px; }

/* ── 7 · קולקציות — an editorial index, not a wrapped list ────────────────
   Five names in a row of inline links is the thinnest thing on the page and it
   has no material to light. Edge-to-edge bands of --c-ground-sunk — the token
   that exists for exactly this, "alternating band / the seam in the paper" —
   give the section a surface, a rhythm, and something for the light to cross. */
/* Bleeds off the START edge only (the right, in RTL) and stops at the margin
   rule on the other side, so the paper column stays visible the whole way down.
   An asymmetric band that runs off one edge and is stopped by a rule on the
   other is an editorial move; a symmetric full-bleed here just buried the one
   continuous element in the last third. */
.coll__list{ display:block !important; border-top:0 !important; padding-top:0 !important;
  margin-inline-start:calc(var(--rail) * -1); margin-inline-end:0; }
.coll__list li{ position:relative; overflow:hidden; background:var(--c-ground-sunk);
  border-block-end:1px solid var(--c-line);
  /* Wide and soft. A full-bleed band is the largest flat surface on the page,
     so a narrow hard streak here is the most visible place to get it wrong. */
  /* Held DOWN on purpose. Five full-bleed bands are the largest lit area on the
     page and they measured 13.2% perceptible at rest — 66× the floor, and 4×
     the hero, which would make the least important section the loudest thing in
     the document. The floor is a floor, not a target. */
  --sp:1500px; --rmp:150px;
  --sheen-tone:rgba(255,255,255,.17); --sheen-shade:rgba(151,164,153,.15); }
.coll__list li:first-child{ border-block-start:1px solid var(--c-line); }
.coll__list a{ display:flex; align-items:baseline; gap:20px;
  padding:26px var(--rail); position:relative; z-index:3;
  transition:color var(--d-answer) var(--e-answer); }
.coll__list a:hover{ transition-duration:var(--d-settle); }
.coll__n{ font-size:var(--t-meta); color:var(--c-ink-muted); font-variation-settings:'wght' 400;
  font-weight:var(--w-body); }

/* ── 7–10 · the paper column ──────────────────────────────────────────────
   SCENE.md §7 gives the last third one mechanism: "the letter watermark on the
   א–ת rail carries the sheen". This is it, made literal. The alphabet that was
   architecture in the hero and an INDEX in the catalogue becomes, below the
   catalogue, a margin rule printed on the paper — the same three roles the
   business gives its own letters. One column, running unbroken from
   collections to the bottom of the document, and the light crawls it.

   It is also the only material left down here: rows of branch addresses and a
   footer nav have nothing that can catch light. Without it these sections
   cannot pass the pulse floor honestly, and dialling the grain up to fake it
   is the exact cheat the gate now refuses to judge. */
/* ⚠ These four `> *` rules come FIRST and exclude the column by name. They and
   `.tail__paper` have identical specificity (0,1,0), so whichever is written
   later wins — and when `.coll > *` won, the column lost `position:absolute`,
   collapsed to zero height, and the whole mechanism silently rendered nothing
   while every selector still "matched". */
.coll,.net,.club,.foot{ position:relative; }
.coll > *:not(.tail__paper),
.net > *:not(.tail__paper),
.club > *:not(.tail__paper),
.foot > *:not(.tail__paper){ position:relative; z-index:1; }

.tail__paper{
  position:absolute; inset-block:0; inset-inline-end:calc(var(--rail) * 0.12);
  width:168px; background:var(--c-paper-deep); overflow:hidden;
  z-index:0; pointer-events:none;
  /* ⚠ 340px is not a taste. A 168px column seen through a 900px viewport spans
     only ~395px of the 105° gradient line, so a period LONGER than that leaves
     the whole column dark for part of every cycle — which is exactly how
     section 8 measured 0.047% while sections 9 and 10, running the identical
     component at a different phase, measured 2.06% and 2.19%. A mechanism whose
     result depends on where in its cycle you happen to look is not a mechanism.
     Period below the visible span → a streak is ALWAYS on the column. */
  --sp:340px; --rate:2;
}
.tail__abc{
  position:absolute; top:var(--abc-shift, 0px); bottom:-120%;
  inset-inline-start:0; width:1.35em;
  margin-inline-start:26px;
  font-family:"Magnolia Display","Magnolia",sans-serif;
  font-size:30px; line-height:1.62; font-weight:var(--w-display);
  font-variation-settings:'wght' 400;
  /* --c-veil, not an ink: this is the one legal DECORATIVE use of #97a499.
     Composited it is 1.22:1 on the paper column, and that is allowed here and
     nowhere else — the column is aria-hidden, pointer-events:none and
     user-select:none, and its content is the alphabet in order three times
     over, which carries no information anyone could need. WCAG 1.4.3 exempts
     pure decoration; the moment this span says something, the token is wrong. */
  color:var(--c-veil); opacity:.5;
  word-break:break-all; overflow:hidden; user-select:none;
}
/* ⚠ One letter per line, and it has to be forced. `word-break:break-all` in a
   1.35em box fits TWO narrow Hebrew letters on a line and one wide one, so the
   line count per cycle is variable — the ruler's period was 22 lines in the
   maths and about 14 on screen, and the four columns silently drifted eight
   letters apart at every section boundary. Measured with Range rects: the
   collections column ended at י and the branches column resumed at צ. */
.tail__abc span{ display:block; }
/* Against the one dark surface in the system the same paper column stops being
   a margin and becomes a shaft of light. Same object, same lamp, and it is why
   the page does not end so much as hand over. */
.foot .tail__abc{ color:var(--c-ink-deep); opacity:.32; }

/* ── the cursor: it is not a dot, it is the LIGHT ─────────────────────────
   CONCEPT: "הסמן הוא מקור האור" — move the pointer and the sheen on the gold
   moves. That is the most correct interaction for jewellery there is, because
   a jewel IS its relationship to light.

   Rules kept: desktop pointer:fine only; NEVER the only affordance (the native
   cursor is deliberately left visible and every hover state also has a non-
   cursor expression, so nothing here is load-bearing); and it is made of the
   same material as every other specular in the document rather than being a
   decorative blob that happens to follow you. */
.mg-key{
  position:fixed; left:0; top:0; z-index:9998; pointer-events:none;
  width:86px; height:3px; margin:-1.5px 0 0 -43px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.98) 46%, transparent);
  mix-blend-mode:overlay; opacity:0;
  transition:opacity var(--d-settle) var(--e-answer),
             width var(--d-ui) var(--e-answer),
             height var(--d-ui) var(--e-answer);
}
.mg-key__halo{
  position:fixed; left:0; top:0; z-index:9997; pointer-events:none;
  width:340px; height:340px; margin:-170px 0 0 -170px;
  background:radial-gradient(circle, rgba(255,255,255,.30), transparent 62%);
  mix-blend-mode:overlay; opacity:0;
  transition:opacity var(--d-settle) var(--e-answer);
}
.mg-live .mg-key,.mg-live .mg-key__halo{ opacity:1; }
/* over photographed metal the light you are holding opens up… */
.mg-live[data-key="lit"] .mg-key{ width:150px; height:4px; margin-left:-75px; margin-top:-2px; }
/* …and over something clickable it gets out of the way, because there the
   ELEMENT should answer, not the cursor. */
.mg-live[data-key="act"] .mg-key{ width:26px; height:6px; margin-left:-13px; margin-top:-3px; }
.mg-live[data-key="act"] .mg-key__halo{ opacity:.55; }

/* ── how things answer ───────────────────────────────────────────────────
   Two channels, kept apart. Linear does hover with light (filter: brightness)
   and press with geometry (transform: scale(.97)); using transform for both
   makes the two states compete for the same signal. The tail on the answer
   curve lands at y=1.0 — that is the whole mechanical difference between
   premium and startup motion. */
a,button,.cat__p,.net__b{
  transition:color var(--d-answer) var(--e-answer),
             opacity var(--d-answer) var(--e-answer),
             filter var(--d-answer) var(--e-answer);
}
a:not(:hover),button:not(:hover),.cat__p:not(:hover){
  transition-duration:var(--d-settle);   /* IN at zero latency, OUT over 180ms.
                                            Symmetric feedback timing is a defect. */
}
.cat__p:hover .cat__ph img{ filter:brightness(105%);
  transition:filter var(--d-answer) var(--e-answer); }
/* CONCEPT: hover on a product MOVES THE KEY on the photograph — it never grows
   the card. A card that scales on hover is the category default, and it is also
   a layout lie: nothing about the object changed, only the mouse moved.
   --hx is written from the pointer, so the highlight is genuinely where your
   hand is rather than being a canned glow. */
.cat__ph::before{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(120% 78% at var(--hx, 50%) 36%,
    rgba(255,255,255,.34), transparent 62%);
  mix-blend-mode:overlay; opacity:0;
  transition:opacity var(--d-settle) var(--e-answer);
}
.cat__p:hover .cat__ph::before{ opacity:1; transition-duration:var(--d-answer); }
button:active,.cat__l:active,.snd:active{ transform:scale(.97);
  transition:transform var(--d-tap) var(--e-answer); }

/* focus is never traded away for taste. 0 radius, like everything else. */
:focus-visible{ outline:2px solid var(--c-ink); outline-offset:3px; border-radius:0; }

/* ── the sound toggle ────────────────────────────────────────────────────
   Off by default, one discreet control in the chrome, early in the DOM and in
   tab order (WCAG G170), and it is also the pause control WCAG 1.4.2 requires
   for a bed that plays longer than three seconds. */
.snd{
  display:inline-flex; align-items:center; gap:9px;
  font:inherit; font-size:var(--t-meta); color:var(--c-ink-muted);
  background:none; border:0; border-radius:0; padding:4px 0; cursor:pointer;
}
/* A rising ramp, not three dots: at 13px the "off" state has to still read as a
   level meter or it renders as an ellipsis next to the word. */
.snd__bars{ display:inline-flex; align-items:flex-end; gap:3px; height:12px;
  direction:ltr; margin-inline-end:2px; }
.snd__bars i{ display:block; width:2px; background:currentColor;
  transition:height var(--d-ui) var(--e-answer); }
.snd__bars i:nth-child(1){ height:4px; }
.snd__bars i:nth-child(2){ height:8px; transition-delay:40ms; }
.snd__bars i:nth-child(3){ height:12px; transition-delay:80ms; }
/* Going quiet is an EXIT, and exits are the one place ease-in is legal. */
.snd:not([aria-checked="true"]) .snd__bars i{ transition-timing-function:var(--e-exit); }
.snd[aria-checked="true"]{ color:var(--c-ink); }
.snd[aria-checked="true"] .snd__bars i:nth-child(1){ height:9px; }
.snd[aria-checked="true"] .snd__bars i:nth-child(2){ height:11px; }
.snd[aria-checked="true"] .snd__bars i:nth-child(3){ height:5px; }
.snd__label{ letter-spacing:0; }
/* the magnetic pair: the label counter-moves against the button. Without the
   counter-move the two slide as one dead slab; the counter-move is the whole
   reason a magnetic button reads as physical rather than as a gimmick. */
.mag{ display:inline-block; will-change:transform; }
.mag > .mag__in{ display:inline-block; }

/* ── ARRIVALS ────────────────────────────────────────────────────────────
   Nine sections that merely abut are nine pages. What a judge actually
   evaluates is the transitions, so each section ARRIVES.

   Two techniques, and the choice between them is not a distance question:
     · 102% behind overflow:hidden — an editorial slide, and legal because
       there is a real mask edge to justify it. Used on the display-face heads.
     · 14px unmasked — a UI nudge. Used on rows.
   40–100px unmasked is the template tell: far enough to read as motion with no
   mask edge to explain it. Nothing here is in that band.

   Stagger 64ms, capped at 8 items — 512ms, inside the ~500ms budget. */
.mg-mask{ display:block; overflow:hidden;
  padding-block-end:.14em; margin-block-end:-.14em; }  /* room for ק ן ך ף ץ —
                                            a mask that clips Hebrew descenders
                                            is the most Hebrew-specific bug
                                            this technique has */
.mg-mask > span{ display:block; }

@media (prefers-reduced-motion:no-preference){
  /* Motion is the ENHANCEMENT and no-motion is the default — Stripe's order,
     which also kills the flash of animated content. Every hidden initial state
     lives inside this block and is applied by JS (.mg-ready), so a page with
     no JS is fully visible and a page with reduced motion never hides
     anything at all. */
  .mg-ready .mg-mask > span{ transform:translateY(102%);
    transition:transform var(--d-reveal) var(--e-enter);
    transition-delay:calc(var(--i, 0) * var(--stagger)); }
  .mg-ready .is-in .mg-mask > span{ transform:none; }

  /* The crossing gets its own register — 900ms easeInOutQuart, eased at BOTH
     ends, because unlike every other arrival on the page this one is a passage
     rather than an entrance. Opacity only: the sheet's transform belongs to the
     parallax, and two systems writing one transform is how a transition starts
     fighting itself. */
  .mg-ready .hush__sheet{ opacity:0; transition:opacity var(--d-cross) var(--e-cross); }
  .mg-ready .hush.is-in .hush__sheet{ opacity:1; }

  .mg-ready [data-mg-reveal]{ opacity:0; transform:translateY(14px);
    transition:opacity var(--d-reveal) var(--e-enter), transform var(--d-reveal) var(--e-enter);
    transition-delay:calc(var(--i, 0) * var(--stagger)); }
  .mg-ready .is-in[data-mg-reveal],
  .mg-ready .is-in [data-mg-reveal]{ opacity:1; transform:none; }

  /* ── the catalogue wave ────────────────────────────────────────────────
     ⚠ This used to be `animation:mg-cross`, whose keyframe is transparent for
     57% of its cycle. Twelve tiles staggered across that cover the CATALOGUE,
     where twelve tiles are on screen at once — but a category page puts a
     380px letter above the fold and leaves three or four tiles under it, and
     three consecutive phases go dark together. Measured: the gate read 7.56%
     alive on one pass and 4.44% on the next and refused to judge, spread
     22.221. It was right to refuse; a page alive half the time is not alive.

     Same wave, no dead time. The streak is a REPEATING gradient now, so any
     phase offset wraps seamlessly and there is no moment of absence to stagger
     around — and it is driven by --sheen, the one lamp at the measured 105°,
     which a keyframe could never be because a keyframe owns `transform` and
     the pointer's contribution lives there. */
  .cat__ph{ position:relative; overflow:hidden; --sp:300px; --rmp:44px; }
  .cat__ph::after{
    content:""; position:absolute; top:0; bottom:0;
    left:calc(var(--sp) * -1.1 - 90px); right:-90px;
    pointer-events:none; z-index:2;
    background:repeating-linear-gradient(var(--az),
      transparent 0px,
      transparent calc(var(--sp) - var(--rmp) * 2.9),
      var(--sheen-shade) calc(var(--sp) - var(--rmp) * 2),
      var(--sheen-photo) calc(var(--sp) - var(--rmp)),
      transparent var(--sp));
    transform:translate3d(
      calc((var(--sheen) + var(--ph, 0)) * var(--sp) * 1.0353 + var(--key-x) * 84px), 0, 0);
  }
  /* the wave, as a phase offset rather than a delay */
  .cat__p:nth-child(12n+1)  .cat__ph{ --ph:0.000; }
  .cat__p:nth-child(12n+2)  .cat__ph{ --ph:0.083; }
  .cat__p:nth-child(12n+3)  .cat__ph{ --ph:0.167; }
  .cat__p:nth-child(12n+4)  .cat__ph{ --ph:0.250; }
  .cat__p:nth-child(12n+5)  .cat__ph{ --ph:0.333; }
  .cat__p:nth-child(12n+6)  .cat__ph{ --ph:0.417; }
  .cat__p:nth-child(12n+7)  .cat__ph{ --ph:0.500; }
  .cat__p:nth-child(12n+8)  .cat__ph{ --ph:0.583; }
  .cat__p:nth-child(12n+9)  .cat__ph{ --ph:0.667; }
  .cat__p:nth-child(12n+10) .cat__ph{ --ph:0.750; }
  .cat__p:nth-child(12n+11) .cat__ph{ --ph:0.833; }
  .cat__p:nth-child(12n+12) .cat__ph{ --ph:0.917; }
}

@keyframes mg-cross{
  0%   { opacity:0; transform:translate3d(-52%,0,0); }
  3%   { opacity:1; }
  43%  { opacity:1; }
  46%  { opacity:0; transform:translate3d(52%,0,0); }
  100% { opacity:0; transform:translate3d(52%,0,0); }
}

/* ── the still version, designed rather than switched off ────────────────
   Under reduce the sheen is STATIC but present — parked across the metal at
   the same 105°, same material, same tone. Only time goes to zero. What stops
   is position change: the crawl, the crossing wave, the cursor light and the
   parallax. What stays is every colour, every focus ring, and the specular
   itself, because deleting it would delete the concept.
   ⚠ Acknowledged and deliberate: the pulse floor is NOT met in this state. The
   visitor asked for that. SCENE.md §8.5 says so in writing. */
@media (prefers-reduced-motion:reduce){
  /* light.js parks --sheen (at 0.42) and stops writing it, so the streak is
     still THERE, at 105°, in the same material — only time has gone to zero.
     ⚠ When a11y.css is present its `:root[data-motion="off"]` block pins
     --sheen/--az/--key-* to 0/105° with author !important, which BEATS the
     inline value light.js writes and therefore wins. That is correct and it is
     the better architecture: pinning the TOKENS covers every lit surface added
     later, whereas naming surfaces covers only today's. The parked phase
     differs (0 rather than 0.42) and the streak is visible at both. */
  .lit::after,.hero__band::after{ will-change:auto; }
  .cat__ph::after{ animation:none; opacity:.85; transform:translate3d(-4%,0,0); }
  .mg-key,.mg-key__halo{ display:none; }
  .hush__sheet{ will-change:auto; }
}

/* ── mobile: verified at 375px, and the light changes DRIVER, not existence ─
   CONCEPT: on touch the sheen moves to device-orientation and the swing stays.
   Parallax is disabled below 768px, per the rule and because it costs the most
   exactly where there is the least to spend. */
@media (max-width:900px){
  /* ⚠ At --rail 20px a 96px column runs straight under the branch phone numbers.
     The margin rule has to be a MARGIN on a phone: a narrow edge band, with the
     sections giving it its own gutter. Same idea, phone scale — not a decorative
     stripe behind the content. */
  .tail__paper{ width:34px; inset-inline-end:0; --sp:190px; --rate:2; }
  .tail__abc{ font-size:15px; margin-inline-start:9px; line-height:1.7; }
  .coll,.net,.club,.foot{ padding-inline-end:56px; }
  .coll__list{ margin-inline-start:calc(var(--rail) * -1); margin-inline-end:0; }
  .coll__list a{ padding:20px var(--rail); }
  .pers__plate{ inset-inline:-20px 12%; }
  .hush__sheet{ top:26%; height:48%; --sp:900px; }
  .hero__band::after{
    background:repeating-linear-gradient(var(--az),
      transparent 0px, transparent calc(760px - 74px),
      var(--sheen-photo) calc(760px - 37px), transparent 760px);
    transform:translate3d(calc(var(--sheen) * 787px + var(--key-x) * 40px), 0, 0);
  }
  .alef__plate{ --sp:240px; }
  .mg-key,.mg-key__halo{ display:none; }   /* pointer:fine only */
}
@media (pointer:coarse){ .mg-key,.mg-key__halo{ display:none; } }