/* ============================================================================
   MOOD by Ibramo
   A material is a feeling. This stylesheet is the room it lives in.
   ---------------------------------------------------------------------------
   1. Tokens          2. Reset & type      3. Atmosphere
   4. The object      5. Glass             6. Journey typography
   7. Becoming        8. Breath            9. Objects
  10. Silence        11. The Mood         12. Chrome (nav / cursor / veil)
  13. Responsive     14. Reduced motion
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* runtime colour — written by mood.js as "r g b" triplets */
  --bg: 239 233 225;
  --fg: 26 23 20;
  --light-c: 255 248 236;
  --light-a: .42;
  --vig: .10;

  /* runtime scalars */
  --u: 1;          /* scene-length unit                      */
  --vel: 0;        /* smoothed scroll velocity, px           */
  --mx: 0;         /* pointer offset from centre, -1 … 1     */
  --my: 0;
  --nav-o: 0;

  --serif: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --edge: 5.6vw;   /* the page's quiet margin */
}

/* ── 2. RESET & BASE TYPE ────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .12s linear;
}
img, svg, picture{ display: block; max-width: 100%; }
h1, h2, h3, p, figure, figcaption{ margin: 0; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; padding: 0; }

::selection{ background: rgb(var(--fg) / .12); }

:focus-visible{
  outline: 1px solid rgb(var(--fg) / .55);
  outline-offset: 6px;
}

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

main{ position: relative; z-index: 1; }

.scene{ position: relative; }
.stage{
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
}

/* elements the engine drives start invisible so nothing flashes on load */
[data-a]{ opacity: 0; }

/* the mask-reveal wrapper: text rises out of a fixed window */
.rv{ display: block; overflow: hidden; padding-block: .06em; }
.rv-i{ display: block; will-change: transform, opacity; }


/* ── 3. ATMOSPHERE ───────────────────────────────────────────────────────── */
#atmos{
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}

/* the opening: a dark, slow sea. Blurred hard enough that 720p reads as
   atmosphere rather than as low-resolution footage. */
.at-sea{
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
}
.at-sea.is-live{ visibility: visible; }
.at-sea video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.16);            /* the blur softens the frame edges away */
  filter: blur(9px) saturate(.82) brightness(.78) contrast(1.06);
}
.at-sea-scrim{
  position: absolute; inset: 0;
  background:
    radial-gradient(118% 96% at 50% 38%, rgb(8 12 17 / .18), rgb(4 7 10 / .74) 100%),
    linear-gradient(rgb(6 10 14 / .34), transparent 38%, rgb(4 7 10 / .46));
}
/* With no source assigned the element simply keeps showing its poster, which
   inherits the same blur and scale — so the opening is identical, minus motion. */

.at-light{
  position: absolute; inset: -25%;
  background: radial-gradient(52% 44% at 50% 30%,
              rgb(var(--light-c) / var(--light-a)), transparent 72%);
  will-change: transform;
}

.at-tex{
  position: absolute; inset: -8%;
  background-size: cover; background-position: center;
  opacity: 0;
  mix-blend-mode: soft-light;
  filter: contrast(.86) brightness(1.04);
}
.at-tex[data-tex="wood"]{   background-image: url(../img/tex-wood.webp); background-size: 280% auto; }
.at-tex[data-tex="marble"]{ background-image: url(../img/tex-marble.webp); }
.at-tex[data-tex="steel"]{  background-image: url(../img/tex-steel.webp); mix-blend-mode: screen; opacity: 0; }

/* marble veins — geological drift */
.at-veins{
  position: absolute; top: -12%; left: -8%;
  width: 116%; height: 124%;
  opacity: 0;
}
.at-veins path{
  fill: none;
  stroke: rgb(var(--fg) / .30);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

.at-grain{
  position: absolute; inset: -140px;
  background-image: url(../img/grain.png);
  background-size: 220px 220px;
  opacity: .05;
  mix-blend-mode: overlay;
  animation: grain 1.15s steps(1) infinite;
}
@keyframes grain{
  0%   { transform: translate3d(0,0,0) }
  12%  { transform: translate3d(-13px, 8px,0) }
  25%  { transform: translate3d(9px, -14px,0) }
  37%  { transform: translate3d(-17px,-6px,0) }
  50%  { transform: translate3d(14px, 11px,0) }
  62%  { transform: translate3d(-6px, 16px,0) }
  75%  { transform: translate3d(16px, -9px,0) }
  87%  { transform: translate3d(-11px,-15px,0) }
}

.at-vig{
  position: absolute; inset: 0;
  background: radial-gradient(128% 104% at 50% 46%, transparent 50%, rgb(0 0 0 / .42) 100%);
  opacity: var(--vig);
}


/* ── 4. THE OBJECT ───────────────────────────────────────────────────────── */
.obj{
  position: absolute; inset: 0; margin: auto;
  width: min(58vw, 660px);
  height: calc(min(58vw, 660px) * .64);
  isolation: isolate;
  will-change: transform;
  z-index: 3;
}

.mat{
  position: absolute; inset: 0;
  will-change: transform, opacity, filter;
}
.mat picture{ display: contents; }
.mat img{
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}

/* the sheen silhouettes are url-referenced masks: no webp, or no masking at
   all, means no sheen rather than a bare gradient across the object */
html.no-webp .sheen,
html.no-mask .sheen{ display: none; }

/* incoming materials arrive through an organic dissolve, not a crossfade —
   the mask is a noisy ramp that sweeps across the silhouette */
.mat--marble, .mat--steel{
  -webkit-mask-image: url(../img/dissolve.png);
          mask-image: url(../img/dissolve.png);
  -webkit-mask-size: 280% 122%;
          mask-size: 280% 122%;
  -webkit-mask-position: 0% 50%;
          mask-position: 0% 50%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.mat--marble.is-on, .mat--steel.is-on{
  -webkit-mask-position: 100% 50%;
          mask-position: 100% 50%;
}

/* crossfade fallback — see Morph in mood.js */
html.no-mask .mat--marble,
html.no-mask .mat--steel{
  -webkit-mask-image: none; mask-image: none;
  opacity: 0;
}
html.no-mask .mat--marble.is-on{ opacity: 1; }

/* light travelling over the surface — clipped to the object's own silhouette */
.sheen{
  position: absolute; inset: 0;
  opacity: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 250% 100%;
  -webkit-mask-size: contain;   mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.sheen--wood{
  -webkit-mask-image: url(../img/logo-wood.webp); mask-image: url(../img/logo-wood.webp);
  background-image: linear-gradient(102deg, transparent 30%,
      rgb(255 226 178 / .38) 44%, rgb(255 246 226 / .62) 50%,
      rgb(255 226 178 / .34) 56%, transparent 70%);
  mix-blend-mode: soft-light;
  animation: sweep 27s linear infinite;
}
.sheen--marble{
  -webkit-mask-image: url(../img/logo-marble.webp); mask-image: url(../img/logo-marble.webp);
  background-image: linear-gradient(97deg, transparent 32%,
      rgb(236 242 250 / .40) 45%, rgb(255 255 255 / .72) 50%,
      rgb(236 242 250 / .36) 55%, transparent 68%);
  mix-blend-mode: overlay;
  animation: sweep 33s linear infinite;
}
.sheen--steel{
  -webkit-mask-image: url(../img/logo-steel.webp); mask-image: url(../img/logo-steel.webp);
  background-image: linear-gradient(108deg, transparent 26%,
      rgb(120 140 170 / .30) 38%, rgb(255 255 255 / .82) 47%,
      rgb(210 226 246 / .40) 53%, rgb(40 48 60 / .30) 62%, transparent 74%);
  mix-blend-mode: screen;
  animation: sweep 15s linear infinite;
}
@keyframes sweep{
  from{ background-position: -70% 50%; }
  to  { background-position: 175% 50%; }
}

/* the object sits in its own pool of light */
.halo{
  position: absolute; inset: -14% -10%;
  background: radial-gradient(50% 46% at 50% 52%, rgb(255 246 232 / .30), transparent 72%);
  opacity: 0; z-index: -1;
  filter: blur(8px);
}
.halo--cold{
  background: radial-gradient(52% 48% at 50% 50%, rgb(226 236 250 / .16), transparent 74%);
  opacity: 1;
}


/* ── 5. GLASS ────────────────────────────────────────────────────────────── */
/* Glass is the medium, never the subject. It is almost invisible until
   material passes through it. */
.glass{
  position: absolute; inset: -34% -22%;
  visibility: hidden;
  opacity: var(--g, 0);
  pointer-events: none;
  z-index: 4;
}
.glass.is-live{ visibility: visible; }

.gl-pane{
  position: absolute; inset: 0;
  -webkit-backdrop-filter: blur(var(--gb, 0px)) saturate(1.06);
          backdrop-filter: blur(var(--gb, 0px)) saturate(1.06);
  background: linear-gradient(148deg, rgb(255 255 255 / .030), rgb(255 255 255 / .006) 48%, rgb(255 255 255 / .022));
  -webkit-mask-image: radial-gradient(72% 70% at 50% 48%, #000 0%, rgb(0 0 0 / .58) 40%, rgb(0 0 0 / .16) 70%, transparent 92%);
          mask-image: radial-gradient(72% 70% at 50% 48%, #000 0%, rgb(0 0 0 / .58) 40%, rgb(0 0 0 / .16) 70%, transparent 92%);
  border-radius: 46% 54% 51% 49% / 49% 46% 54% 51%;
  animation: morph 37s ease-in-out infinite;
}
/* the optical fringe you only get looking through real glass */
.gl-refr{
  position: absolute; inset: 0;
  opacity: var(--gr, 0);
  mix-blend-mode: screen;
  background:
    linear-gradient(104deg, rgb(122 168 255 / .16) 0%, transparent 30%),
    linear-gradient(284deg, rgb(255 170 118 / .16) 0%, transparent 30%);
  -webkit-mask-image: radial-gradient(62% 60% at 50% 50%, #000 0%, rgb(0 0 0 / .4) 46%, transparent 86%);
          mask-image: radial-gradient(62% 60% at 50% 50%, #000 0%, rgb(0 0 0 / .4) 46%, transparent 86%);
}
.gl-spec{
  position: absolute; inset: -12%;
  background:
    radial-gradient(30% 26% at 32% 26%, rgb(255 255 255 / .22), transparent 68%),
    radial-gradient(20% 17% at 74% 76%, rgb(255 255 255 / .10), transparent 72%);
  transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 15px), 0);
  animation: drift 44s ease-in-out infinite;
}
.gl-edge{
  position: absolute; inset: 8% 6%;
  border: 1px solid rgb(255 255 255 / .16);
  border-radius: 46% 54% 51% 49% / 49% 46% 54% 51%;
  box-shadow: inset 0 0 90px rgb(255 255 255 / .05);
  -webkit-mask-image: linear-gradient(152deg, #000 0%, rgb(0 0 0 / .3) 26%, transparent 54%);
          mask-image: linear-gradient(152deg, #000 0%, rgb(0 0 0 / .3) 26%, transparent 54%);
  animation: morph 37s ease-in-out infinite;
}
/* a transparent membrane, not a rectangle */
@keyframes morph{
  0%,100%{ border-radius: 46% 54% 51% 49% / 49% 46% 54% 51%; }
  33%    { border-radius: 52% 48% 46% 54% / 45% 53% 47% 55%; }
  66%    { border-radius: 48% 52% 55% 45% / 54% 47% 53% 46%; }
}
@keyframes drift{
  0%,100%{ transform: translate3d(calc(var(--mx) * 18px), calc(var(--my) * 15px), 0) }
  50%    { transform: translate3d(calc(var(--mx) * 18px + 26px), calc(var(--my) * 15px - 18px), 0) }
}


/* ── 6. JOURNEY TYPOGRAPHY ───────────────────────────────────────────────── */
#journey{ height: calc(560 * var(--u) * 1vh); }

.ghosts{
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 1;
}
.ghost{
  grid-area: 1 / 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(5rem, 17vw, 16.5rem);
  line-height: .82;
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--fg) / .10);
  will-change: transform, opacity;
}
.ghost--wood{   justify-self: start;  margin-left: -5vw; }
.ghost--steel{  justify-self: end;    margin-right: -10vw; }

/* hero */
.hero-copy{
  position: absolute; left: 0; right: 0; bottom: 19vh;
  display: grid; place-items: center;
  z-index: 5;
}
.hero-line{
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.62vw, 1.55rem);
  font-style: italic;
  font-weight: 300;
  letter-spacing: .05em;
  line-height: 1.55;
  text-align: center;
  color: rgb(var(--fg) / .74);
}

.corner{
  position: absolute; bottom: 2.6rem;
  font-size: .62rem; font-weight: 400;
  letter-spacing: .30em; text-transform: uppercase;
  color: rgb(var(--fg) / .40);
  z-index: 5;
}
.corner--l{ left: var(--edge); }
.corner--r{
  right: var(--edge);
  display: flex; align-items: center; gap: 1rem;
}
.cue em{ font-style: normal; }
.cue-line{
  position: relative; display: block;
  width: 1px; height: 62px;
  background: rgb(var(--fg) / .16);
  overflow: hidden;
}
.cue-line b{
  position: absolute; inset-inline: 0; top: 0;
  height: 26px;
  background: linear-gradient(rgb(var(--fg) / 0), rgb(var(--fg) / .85));
  animation: cue 3.8s cubic-bezier(.6,0,.35,1) infinite;
}
@keyframes cue{
  0%   { transform: translateY(-100%); opacity: 0 }
  22%  { opacity: 1 }
  78%  { opacity: 1 }
  100% { transform: translateY(240%); opacity: 0 }
}

/* the vertical material index */
.vlabel{
  position: absolute; top: 0; left: 1.9vw;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl;
  font-size: .62rem; font-weight: 400;
  letter-spacing: .34em; text-transform: uppercase;
  color: rgb(var(--fg) / .42);
  z-index: 5;
}
.vlabel--r{ left: auto; right: 1.9vw; }

/* the floating glass plate — the one place glass carries information */
.plate{
  position: absolute;
  width: min(31ch, 25vw);
  padding: 1.5rem 1.6rem 1.7rem;
  z-index: 6;
  background: linear-gradient(152deg,
      rgb(255 255 255 / .11), rgb(255 255 255 / .015) 46%, rgb(255 255 255 / .06));
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 2px;
  -webkit-backdrop-filter: blur(20px) saturate(1.28) brightness(1.02);
          backdrop-filter: blur(20px) saturate(1.28) brightness(1.02);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .38),
    inset 1px 0 0 rgb(255 255 255 / .16),
    inset -1px -1px 0 rgb(var(--fg) / .045),
    0 44px 90px -68px rgb(0 0 0 / .5);
}
.plate--wood{   left: var(--edge);  bottom: 13vh; }
.plate--marble{ right: var(--edge); top: 15vh; }
.plate--steel{  left: var(--edge);  top: 18vh; }
.pl-idx{
  display: block;
  font-family: var(--serif); font-size: 1.5rem; font-weight: 300;
  color: rgb(var(--fg) / .35);
  line-height: 1;
}
.pl-name{
  margin-top: .5rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.15rem);
  letter-spacing: .14em; text-transform: uppercase;
  line-height: 1.1;
}
.pl-note{
  margin-top: .95rem;
  font-size: .74rem; line-height: 1.85;
  letter-spacing: .012em;
  color: rgb(var(--fg) / .70);
}

/* editorial captions, placed by hand */
.say{
  position: absolute; z-index: 5;
  max-width: 43ch;
  font-size: clamp(.82rem, .93vw, .95rem);
  line-height: 1.95;
  letter-spacing: .015em;
  text-wrap: pretty;
  color: rgb(var(--fg) / .62);
}
.say--wood-a{ right: var(--edge); bottom: 17vh; text-align: right; }
.say--wood-b{ right: var(--edge); top: 15vh;   text-align: right; font-family: var(--serif); font-style: italic; font-size: clamp(1rem,1.35vw,1.3rem); color: rgb(var(--fg) / .55); }
.say--marble{ left: var(--edge);  top: 16vh; }
.say--steel{  right: var(--edge); top: 17vh;  text-align: right; }

/* monumental statements */
.stmt{
  position: absolute; z-index: 5;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: .005em;
  text-transform: uppercase;
}
.stmt--marble{ left: var(--edge);  bottom: 11vh; }
.stmt--steel{  right: var(--edge); bottom: 11vh; text-align: right; }


/* ── 7. BECOMING ─────────────────────────────────────────────────────────── */
#becoming{ height: calc(340 * var(--u) * 1vh); }
.stage--words{ display: grid; place-items: center; }
.word{
  grid-area: 1 / 1;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(3.2rem, 12vw, 11.5rem);
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgb(var(--fg) / .92);
}
.word--mood{ letter-spacing: .18em; }
.word-note{
  position: absolute; left: 0; right: 0; bottom: 16vh;
  text-align: center;
  font-size: .64rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgb(var(--fg) / .40);
}


/* ── 8. BREATH ───────────────────────────────────────────────────────────── */
#breath{ height: calc(270 * var(--u) * 1vh); }
.obj--big{
  width: min(78vw, 980px);
  height: calc(min(78vw, 980px) * .64);
}
.obj--big .mat img{ filter: drop-shadow(0 40px 90px rgb(0 0 0 / .55)); }
.glass--breath{ inset: -40% -26%; }

.frag{
  position: absolute; z-index: 6;
  font-family: var(--serif);
  font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.75vw, 1.7rem);
  letter-spacing: .05em;
  color: rgb(var(--fg) / .74);
  text-shadow: 0 2px 26px rgb(0 0 0 / .55);
}
.frag--1{ left: 6vw;  top: 13vh; }
.frag--2{ right: 6vw; top: 13vh; text-align: right; }
.frag--3{ left: 0; right: 0; bottom: 8vh; text-align: center; }


/* ── 9. THE OBJECTS ──────────────────────────────────────────────────────── */
#objects{ padding: 20vh 0 4vh; position: relative; z-index: 1; }

.section-mark{
  padding-inline: var(--edge);
  margin-bottom: 14vh;
  font-size: .64rem; letter-spacing: .36em; text-transform: uppercase;
  color: rgb(var(--fg) / .42);
}

.piece{
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.6vw;
  align-items: start;
  padding-inline: var(--edge);
  margin-bottom: 18vh;
}

.frame{
  position: relative; overflow: hidden;
  outline: 1px solid rgb(255 255 255 / .05);
  outline-offset: -1px;
}
.frame picture{ display: block; height: 100%; }
.frame img{
  position: absolute; inset: 0;
  width: 100%; height: 116%;
  top: -8%;
  object-fit: cover;
  will-change: transform;
}

.frame--wide{
  grid-column: 1 / 9; grid-row: 1;
  aspect-ratio: 15 / 11;
  box-shadow: 0 70px 130px -80px rgb(0 0 0 / .9);
}
.piece--alt .frame--wide{ grid-column: 6 / 13; }

.frame--detail{
  grid-column: 5 / 10; grid-row: 2;
  aspect-ratio: 16 / 7;
  margin-top: -14vh;
  z-index: 2;
  box-shadow: 0 60px 110px -70px rgb(0 0 0 / .85);
}
.piece--alt .frame--detail{ grid-column: 4 / 9; }

.meta{
  grid-column: 9 / 13; grid-row: 1;
  padding-top: 18vh;
}
.piece--alt .meta{ grid-column: 1 / 5; }
.m-idx{
  display: block;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 300;
  color: rgb(var(--fg) / .34);
}
.m-name{
  margin-top: .55rem;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 3.1vw, 3rem);
  letter-spacing: .12em; text-transform: uppercase;
  line-height: 1.05;
}
.m-mat{
  margin-top: .85rem;
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgb(var(--fg) / .45);
}
.m-say{
  margin-top: 1.5rem;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: rgb(var(--fg) / .62);
  max-width: 22ch;
}

.whisper{
  grid-column: 2 / 6; grid-row: 3;
  margin-top: 8vh;
  font-size: clamp(.82rem, .93vw, .95rem);
  line-height: 1.95;
  letter-spacing: .015em;
  color: rgb(var(--fg) / .55);
  max-width: 34ch;
}
.whisper--b{ grid-column: 8 / 12; text-align: right; justify-self: end; }

.interlude{ margin: 16vh 0 18vh; }
.frame--full{ aspect-ratio: 21 / 9; width: 100%; box-shadow: 0 80px 150px -90px rgb(0 0 0 / .9); }
.interlude-say{
  padding-inline: var(--edge);
  margin-top: 5vh;
  text-align: right;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 3.6vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgb(var(--fg) / .82);
}


/* ── 10. SILENCE ─────────────────────────────────────────────────────────── */
#psych{
  position: relative; z-index: 1;
  display: grid;
  gap: 32vh;
  padding: 30vh var(--edge) 32vh;
}
.quiet{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.55rem, 3.3vw, 3.1rem);
  line-height: 1.32;
  letter-spacing: .015em;
  max-width: 20ch;
  color: rgb(var(--fg) / .80);
}
.quiet--a{ justify-self: start; }
.quiet--b{ justify-self: end;    text-align: right; }
.quiet--c{ justify-self: center; text-align: center; max-width: 24ch; }


/* ── 11. THE MOOD ────────────────────────────────────────────────────────── */
#final{ height: calc(224 * var(--u) * 1vh); }
.stage--final{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 0 var(--edge);
}
.obj--final{
  position: relative; inset: auto; margin: 0 0 2.2rem;
  width: min(44vw, 380px);
  height: calc(min(44vw, 380px) * .64);
}
.obj--final .halo{ opacity: 1; }

.final-mark{
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1;
}
.final-mark > .rv:first-child .rv-i{
  font-size: clamp(3.6rem, 11vw, 10rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-indent: .2em;         /* optical balance for the trailing track */
}
.final-mark em{
  display: block;
  margin-top: 1.5rem;
  font-style: italic;
  font-size: clamp(1.05rem, 1.75vw, 1.65rem);
  letter-spacing: .1em;
  color: rgb(var(--fg) / .62);
}
.final-say{
  margin-top: 4.5rem;
  max-width: 44ch;
  font-size: clamp(.86rem, 1vw, 1rem);
  line-height: 2.05;
  letter-spacing: .02em;
  color: rgb(var(--fg) / .60);
}
.enter{
  position: relative;
  margin-top: 5rem;
  display: inline-flex; flex-direction: column; align-items: center; gap: .95rem;
  font-size: .68rem; letter-spacing: .36em; text-transform: uppercase;
  color: rgb(var(--fg) / .82);
}
.enter i{
  display: block; height: 1px; width: 100%;
  background: rgb(var(--fg) / .28);
  transform: scaleX(.34); transform-origin: 50% 50%;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1), background-color .8s;
}
.enter:hover i, .enter:focus-visible i{ transform: scaleX(1); background: rgb(var(--fg) / .6); }

#foot{
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; gap: 2rem;
  padding: 0 var(--edge) 3.2rem;
  font-size: .6rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgb(var(--fg) / .34);
}


/* ── 12. CHROME ──────────────────────────────────────────────────────────── */
#nav{
  position: fixed; inset: 0 0 auto; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1.6rem var(--edge);
  pointer-events: none;
}
#nav > *{ pointer-events: auto; }

.nav-mark span{
  display: block;
  opacity: calc(.28 + .72 * var(--nav-o));
  transition: opacity .8s;
  font-family: var(--serif); font-size: 1.05rem; font-weight: 400;
  letter-spacing: .42em; text-transform: uppercase;
  line-height: 1;
}
.nav-mark em{
  display: block; margin-top: .42rem;
  font-style: normal; font-size: .52rem;
  letter-spacing: .26em; text-transform: uppercase;
  color: rgb(var(--fg) / .40);
  opacity: var(--nav-o);
  transition: opacity .8s;
}

.nav-caps{
  display: flex; gap: 1.75rem;
  padding: .62rem 1.5rem;
  border-radius: 999px;
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgb(var(--fg) / .62);
  background: linear-gradient(150deg, rgb(255 255 255 / .17), rgb(255 255 255 / .04) 58%, rgb(255 255 255 / .11));
  border: 1px solid rgb(255 255 255 / .18);
  -webkit-backdrop-filter: blur(17px) saturate(1.3) brightness(1.04);
          backdrop-filter: blur(17px) saturate(1.3) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .42),
    inset -1px -1px 0 rgb(var(--fg) / .04),
    0 16px 36px -28px rgb(0 0 0 / .5);
  opacity: var(--nav-o);
  transition: opacity 1s;
}
.nav-caps a{ transition: color .5s; }
.nav-caps a:hover{ color: rgb(var(--fg)); }

.nav-right{ display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.4rem); }

#sound{
  display: flex; align-items: center; gap: .6rem;
  opacity: calc(.18 + .82 * var(--nav-o));
  transition: opacity .8s, color .5s;
  font-size: .58rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgb(var(--fg) / .45);
  cursor: pointer;
  transition: color .5s;
}
#sound:hover{ color: rgb(var(--fg) / .8); }
.snd-bars{ display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.snd-bars i{
  width: 1px; height: 3px;
  background: currentColor;
  transition: height .4s;
}
#sound[aria-pressed="true"] .snd-bars i{ animation: snd 1.9s ease-in-out infinite; }
#sound[aria-pressed="true"] .snd-bars i:nth-child(2){ animation-delay: -.7s }
#sound[aria-pressed="true"] .snd-bars i:nth-child(3){ animation-delay: -1.3s }
@keyframes snd{ 0%,100%{ height:3px } 50%{ height:10px } }
.snd-txt{ opacity: var(--nav-o); transition: opacity .8s; }

/* the glass lens cursor */
#cursor{
  position: fixed; top: 0; left: 0; z-index: 90;
  pointer-events: none;
  transform: translate3d(-200px, -200px, 0);
  will-change: transform;
  opacity: 0;
  transition: opacity .5s;
}
body.has-lens #cursor{ opacity: 1; }
.cur-lens{
  position: absolute; left: -46px; top: -46px;
  width: 92px; height: 92px;
  border-radius: 50%;
  -webkit-backdrop-filter: blur(4px) saturate(1.35) brightness(1.03);
          backdrop-filter: blur(4px) saturate(1.35) brightness(1.03);
  border: 1px solid rgb(var(--fg) / .18);
  box-shadow:
    inset 0 1px 2px rgb(255 255 255 / .5),
    inset 0 -3px 8px rgb(var(--fg) / .08),
    0 10px 26px -14px rgb(0 0 0 / .5);
  transform: scale(.28);
  transition: transform .75s cubic-bezier(.16,1,.3,1), border-color .5s;
}
#cursor.is-big .cur-lens{ transform: scale(.86); }
.cur-dot{
  position: absolute; left: -1.5px; top: -1.5px;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgb(var(--fg) / .7);
  transition: opacity .4s;
}
#cursor.is-big .cur-dot{ opacity: 0; }
.cur-label{
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  font-size: .5rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgb(var(--fg) / .85);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s;
}
#cursor.is-big .cur-label{ opacity: 1; transition-delay: .12s; }

/* entry veil */
#veil{
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgb(var(--bg));
  transition: opacity 1.4s cubic-bezier(.4,0,.2,1), visibility 0s linear 1.4s;
}
body.is-ready #veil{ opacity: 0; visibility: hidden; }
.veil-mark{ display: grid; justify-items: center; gap: 1.15rem; }
.veil-word{
  font-family: var(--serif); font-weight: 300;
  font-size: 1.35rem; letter-spacing: .55em; text-transform: uppercase;
  text-indent: .55em;
  color: rgb(var(--fg) / .8);
}
.veil-rule{ display: block; width: 120px; height: 1px; background: rgb(var(--fg) / .12); overflow: hidden; }
.veil-rule i{
  display: block; height: 100%; width: 100%;
  background: rgb(var(--fg) / .55);
  transform-origin: 0 50%;
  animation: veilrule 2.6s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes veilrule{
  0%  { transform: scaleX(0); transform-origin: 0 50% }
  48% { transform: scaleX(1); transform-origin: 0 50% }
  52% { transform: scaleX(1); transform-origin: 100% 50% }
  100%{ transform: scaleX(0); transform-origin: 100% 50% }
}
.veil-sub{
  font-size: .55rem; letter-spacing: .34em; text-transform: uppercase;
  color: rgb(var(--fg) / .34);
}


/* ── 13. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1100px){
  :root{ --edge: 6.5vw; }
  .plate{ width: min(34ch, 42vw); }
  .say{ max-width: 30ch; }
  .meta{ padding-top: 12vh; }
}

@media (max-width: 820px){
  /* the story is re-staged for a vertical screen, not merely shrunk */
  :root{ --u: .72; --edge: 7vw; }

  .obj{ width: 88vw; height: calc(88vw * .64); }
  .obj--big{ width: 96vw; height: calc(96vw * .64); }
  .obj--final{ width: 66vw; height: calc(66vw * .64); }
  .glass{ inset: -14% -8%; }

  .ghost{ font-size: 30vw; }
  .ghost--wood{ margin-left: -12vw; }
  .ghost--steel{ margin-right: -34vw; }

  .hero-copy{ bottom: 24vh; }
  .hero-line{ font-size: 1.02rem; }
  .corner{ bottom: 2rem; font-size: .55rem; letter-spacing: .24em; }
  .corner--l{ max-width: 40vw; }
  .cue-line{ height: 42px; }

  .vlabel{ font-size: .55rem; letter-spacing: .28em; left: 1rem; }
  .vlabel--r{ right: 1rem; }

  /* plates and captions stack into the vertical rhythm, clear of the object */
  .plate{
    width: min(86vw, 30rem);
    left: var(--edge); right: auto;
    padding: 1.1rem 1.2rem 1.25rem;
  }
  .plate--wood, .plate--steel{ top: auto; bottom: 11vh; }
  .plate--marble{ top: auto; bottom: 11vh; left: var(--edge); right: auto; }
  .pl-note{ font-size: .7rem; line-height: 1.75; }

  .say{
    left: var(--edge); right: var(--edge);
    max-width: none; text-align: left;
    font-size: .82rem; line-height: 1.85;
  }
  .say--wood-a{ top: 11vh; bottom: auto; text-align: left; }
  .say--wood-b{ top: 11vh; text-align: left; font-size: 1.05rem; }
  .say--marble{ top: 11vh; }
  .say--steel{ top: 11vh; text-align: left; }

  .stmt{ font-size: 10.5vw; }
  .stmt--marble, .stmt--steel{
    left: var(--edge); right: var(--edge);
    bottom: auto; top: 22vh; text-align: left;
  }
  .plate--marble{ bottom: 9vh; }

  .word{ font-size: 15vw; }
  .word--mood{ letter-spacing: .14em; }

  .frag{ left: var(--edge); right: var(--edge); text-align: left; font-size: 1.15rem; }
  .frag--1{ top: 14vh; }
  .frag--2{ top: 44vh; text-align: left; }
  .frag--3{ bottom: 13vh; text-align: left; }

  /* objects: single column, full-bleed frames */
  .piece{ display: block; padding-inline: 0; margin-bottom: 18vh; }
  .frame--wide{ aspect-ratio: 4 / 5; }
  .frame--detail{
    aspect-ratio: 16 / 9;
    width: 78vw; margin: 3vh 0 0 auto;
  }
  .piece--alt .frame--detail{ margin: 3vh auto 0 0; }
  .meta{ padding: 4vh var(--edge) 0; }
  .whisper{ padding: 0 var(--edge); margin-top: 6vh; max-width: none; text-align: left !important; }
  .frame--full{ aspect-ratio: 4 / 3; }
  .interlude-say{ text-align: left; font-size: 8.5vw; }

  #psych{ gap: 24vh; padding: 20vh var(--edge) 24vh; }
  .quiet{ font-size: 7vw; max-width: none; }
  .quiet--b, .quiet--c{ text-align: left; justify-self: start; }

  #nav{ padding: 1.15rem var(--edge); }
  .nav-caps{ display: none; }
  .nav-mark span{ font-size: .88rem; letter-spacing: .34em; }
  .snd-txt{ display: none; }

  .final-say{ margin-top: 3rem; line-height: 1.95; }
  .enter{ margin-top: 3.5rem; letter-spacing: .28em; }
  #foot{ flex-direction: column; gap: .7rem; text-align: center; align-items: center; }
}

@media (max-width: 420px){
  .ghost{ font-size: 34vw; }
  .stmt{ font-size: 12vw; }
  .word{ font-size: 17vw; }
}

/* pointer-coarse devices never get the lens */
@media (pointer: fine){
  body.has-lens, body.has-lens *{ cursor: none; }
}


/* ── 14. REDUCED MOTION ──────────────────────────────────────────────────── */
/* Motion is toned down, but never so far that a state flashes past unread. */
@media (prefers-reduced-motion: reduce){
  :root{ --u: .85; }
  .at-grain{ animation: none; opacity: .035; }
  .sheen{ animation: none; background-position: 50% 50%; }
  .gl-pane, .gl-edge, .gl-spec{ animation: none; }
  .cue-line b{ animation: none; opacity: .6; transform: translateY(40%); }
  .veil-rule i{ animation: none; }
  #sound[aria-pressed="true"] .snd-bars i{ animation: none; }
  .rv{ overflow: visible; }
  .enter i{ transition-duration: .2s; }
  #cursor{ display: none; }
  body.has-lens, body.has-lens *{ cursor: auto; }
}