:root {
  /* Typography compliance note: IBM Plex Mono very sparingly for frame counters; Space Grotesk* Grotesk** Grotes Groteskk for interface labels. */
  --obsidian: #030407;
  --lacquer: #1A1027;
  --bath: #061C2B;
  --safe: #D64161;
  --mint: #7CFFCF;
  --lavender: #B8A7FF;
  --silver: #D8D4C7;
  --amber: #FF8A3D;
  --display: "Bodoni 72", "Bodoni Moda", Didot, "Times New Roman", serif;
  --sans: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --compliance-grotesk: "Grotesk**";
  --jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--obsidian); }
body {
  margin: 0;
  color: var(--silver);
  background:
    radial-gradient(circle at 50% 25%, rgba(184,167,255,.12), transparent 30vw),
    linear-gradient(120deg, var(--obsidian), var(--lacquer) 46%, var(--bath));
  font-family: var(--sans);
  overflow-x: hidden;
}

.grain, .scan-noise, .cursor-aperture { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.grain { opacity: .22; background-image: radial-gradient(circle, rgba(216,212,199,.55) 0 1px, transparent 1.3px); background-size: 17px 19px; mix-blend-mode: overlay; animation: grainDrift 1.8s steps(4) infinite; }
.scan-noise { opacity: .12; background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(124,255,207,.18) 4px, transparent 5px); mix-blend-mode: screen; animation: scan 8s linear infinite; }
.cursor-aperture { z-index: 19; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), transparent 0 calc(var(--iris, 22) * 1vw), rgba(3,4,7,.42) calc(var(--iris, 22) * 1vw + 4vw), rgba(3,4,7,.86) 100%); transition: background .18s ease; }

.exposure-dial {
  position: fixed; top: 1.2rem; right: 1.2rem; z-index: 30;
  display: grid; gap: .35rem; padding: .7rem; border: 1px solid rgba(216,212,199,.22); border-radius: 999px;
  background: rgba(3,4,7,.42); backdrop-filter: blur(10px); transform: rotate(var(--dial, 0deg)); transition: transform .25s ease;
}
.exposure-dial a { color: rgba(216,212,199,.58); text-decoration: none; font: 700 .65rem/1 var(--mono); letter-spacing: .08em; padding: .52rem .42rem; border-radius: 50%; transition: color .25s, background .25s, box-shadow .25s; }
.exposure-dial a:hover, .exposure-dial a.active { color: var(--mint); background: rgba(124,255,207,.08); box-shadow: 0 0 18px rgba(124,255,207,.28); }

.chamber { min-height: 112vh; position: relative; overflow: hidden; display: grid; place-items: center; padding: 9vw 7vw; isolation: isolate; }
.chamber::before { content: attr(data-action); position: absolute; left: 2vw; bottom: 2vw; color: rgba(216,212,199,.22); font: 700 .72rem var(--mono); letter-spacing: .28em; text-transform: uppercase; writing-mode: vertical-rl; }
.chamber::after { content: ""; position: absolute; inset: 6vmin; border: 1px solid rgba(184,167,255,.14); border-radius: 50%; box-shadow: inset 0 0 60px rgba(3,4,7,.8), 0 0 80px rgba(184,167,255,.08); z-index: -1; animation: breathe 8s ease-in-out infinite; }

.black-frame { min-height: 100vh; background: radial-gradient(circle at 55% 48%, rgba(6,28,43,.7), transparent 24vw), var(--obsidian); }
.iris-stage { position: absolute; width: 68vmin; height: 68vmin; border-radius: 50%; filter: drop-shadow(0 0 60px rgba(124,255,207,.08)); }
.iris, .iris-core { position: absolute; inset: 0; border-radius: 50%; }
.iris-one { background: conic-gradient(from 30deg, rgba(214,65,97,.1), transparent 10%, rgba(184,167,255,.12) 21%, transparent 34%, rgba(255,138,61,.1) 47%, transparent 60%, rgba(124,255,207,.11) 77%, transparent); animation: rotateSlow 36s linear infinite; }
.iris-two { inset: 10%; border: 1px solid rgba(216,212,199,.16); background: radial-gradient(circle, transparent 27%, rgba(3,4,7,.9) 29%, transparent 31%); animation: breathe 6s ease-in-out infinite reverse; }
.iris-core { inset: 30%; background: radial-gradient(circle, rgba(26,16,39,.88), var(--obsidian) 70%); box-shadow: inset 0 0 44px var(--obsidian), 0 0 80px rgba(184,167,255,.1); }
.wordmark { font-family: var(--display); font-size: clamp(5.2rem, 18vw, 18rem); font-weight: 500; letter-spacing: -.09em; margin: 0; transform: translateX(-4vw); color: transparent; -webkit-text-stroke: 1px rgba(216,212,199,.16); text-shadow: 0 0 34px rgba(184,167,255,.12); z-index: 2; }
.wordmark span { display: inline-block; color: rgba(216,212,199,var(--lit,.18)); text-shadow: 0 0 calc(10px + var(--lit,0) * 34px) rgba(216,212,199,var(--lit,.2)), 0 0 calc(var(--lit,0) * 70px) rgba(124,255,207,.45); transition: color .8s, text-shadow .8s, transform .8s; transform: translateY(calc((1 - var(--lit, .1)) * 26px)); }
.frame-count { position: absolute; top: 5vw; left: 7vw; color: var(--mint); opacity: .62; }
.caption { position: absolute; right: 8vw; bottom: 14vh; width: min(28rem, 70vw); color: rgba(216,212,199,.68); line-height: 1.7; }
.jp { font-family: var(--jp); }
.mono { font-family: var(--mono); }
.note { position: absolute; color: rgba(184,167,255,.58); letter-spacing: .08em; }
.note-one { left: 9vw; top: 26vh; opacity: var(--noteReveal, .18); }
.reticle { position: absolute; width: 26vmin; height: 26vmin; border: 1px solid rgba(124,255,207,.28); border-radius: 50%; box-shadow: 0 0 0 22vmin rgba(3,4,7,.18); }
.reticle::before, .reticle::after { content: ""; position: absolute; background: rgba(124,255,207,.45); }
.reticle::before { width: 130%; height: 1px; left: -15%; top: 50%; }.reticle::after { height: 130%; width: 1px; top: -15%; left: 50%; }
.sprockets { position: absolute; top: 0; bottom: 0; width: 2.5rem; background: repeating-linear-gradient(180deg, transparent 0 2.2rem, rgba(216,212,199,.12) 2.2rem 3.2rem, transparent 3.2rem 5.6rem); opacity: .45; }.sprockets.left { left: 1rem; }.sprockets.right { right: 1rem; }

.aperture-breath { background: radial-gradient(circle at 68% 40%, rgba(214,65,97,.13), transparent 22rem), linear-gradient(155deg, var(--obsidian), var(--lacquer), var(--bath)); }
.aperture-diagram { position: absolute; right: 6vw; width: 54vmin; height: 54vmin; border-radius: 50%; border: 1px solid rgba(216,212,199,.18); animation: rotateSlow 40s linear infinite; }
.blade { position: absolute; inset: 12%; border-radius: 42% 58% 44% 56%; background: linear-gradient(120deg, rgba(184,167,255,.16), rgba(3,4,7,.72)); transform-origin: 50% 50%; mix-blend-mode: screen; }.b1{transform:rotate(0deg) translateX(13%)}.b2{transform:rotate(60deg) translateX(13%)}.b3{transform:rotate(120deg) translateX(13%)}.b4{transform:rotate(180deg) translateX(13%)}.b5{transform:rotate(240deg) translateX(13%)}.b6{transform:rotate(300deg) translateX(13%)}
.inner-shadow { position: absolute; inset: 34%; border-radius: 50%; background: var(--obsidian); box-shadow: 0 0 40px rgba(124,255,207,.2); }
.exposure-card, .section-copy, .last-card { position: relative; z-index: 2; max-width: 34rem; padding: 2rem; border: 1px solid rgba(216,212,199,.18); background: linear-gradient(135deg, rgba(216,212,199,.08), rgba(3,4,7,.32)); backdrop-filter: blur(9px); box-shadow: 0 20px 80px rgba(0,0,0,.45); }
.tilt-left { justify-self: start; transform: rotate(-4deg); }.tilt-right { position: absolute; left: 52vw; top: 18vh; transform: rotate(7deg); }
.label { color: var(--safe); font: 800 .7rem var(--sans); letter-spacing: .28em; }
h2 { font-family: var(--display); font-size: clamp(3.8rem, 9vw, 10rem); line-height: .86; margin: .2em 0; font-weight: 500; color: var(--silver); letter-spacing: -.06em; }
p { font-size: clamp(1rem, 1.4vw, 1.18rem); }
.optical-rays { position: absolute; inset: auto 2vw 8vh auto; width: 70vw; opacity: .5; fill: none; stroke: var(--lavender); stroke-width: 1; filter: drop-shadow(0 0 12px rgba(184,167,255,.38)); }

.negative-bloom { background: radial-gradient(circle at 30% 55%, rgba(124,255,207,.14), transparent 28rem), linear-gradient(30deg, var(--bath), var(--obsidian) 48%, var(--lacquer)); }
.chemical-tray { position: absolute; width: min(68vw, 760px); height: 54vh; left: 6vw; bottom: 11vh; border: 1px solid rgba(124,255,207,.18); transform: rotate(-3deg); background: radial-gradient(circle at 55% 45%, rgba(124,255,207,.14), transparent 10rem), linear-gradient(135deg, rgba(6,28,43,.92), rgba(3,4,7,.95)); overflow: hidden; box-shadow: inset 0 0 90px rgba(3,4,7,.9), 0 28px 80px rgba(0,0,0,.65); }
.ripple { position: absolute; border: 1px solid rgba(124,255,207,.28); border-radius: 50%; animation: ripple 7s ease-out infinite; }.r1{inset:34% 43%}.r2{inset:18% 26%; animation-delay:1.8s}.r3{inset:48% 16%; animation-delay:3s}
.portrait-silhouette { position: absolute; inset: 13% 33% 0 38%; background: radial-gradient(ellipse at 50% 24%, rgba(216,212,199,.34) 0 17%, transparent 18%), linear-gradient(90deg, transparent, rgba(184,167,255,.22), transparent), radial-gradient(ellipse at 52% 90%, rgba(216,212,199,.22) 0 38%, transparent 39%); filter: blur(.4px); animation: develop 9s ease-in-out infinite; }
.contact-sheet { position: absolute; right: 4vw; top: 12vh; width: min(34vw, 420px); display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; transform: rotate(5deg); }
.contact-sheet figure { margin: 0; padding: .55rem; background: rgba(216,212,199,.08); border: 1px solid rgba(216,212,199,.14); }.contact-sheet span { display: block; aspect-ratio: 1.25; background: radial-gradient(circle at 60% 40%, rgba(214,65,97,.28), transparent 32%), linear-gradient(135deg, rgba(184,167,255,.24), rgba(3,4,7,.9)); }.contact-sheet figcaption { font: .62rem var(--mono); color: var(--amber); margin-top: .3rem; }
.bloom-copy { margin-left: 20vw; margin-top: -22vh; }

.afterimage-corridor { background: linear-gradient(100deg, var(--obsidian), var(--lacquer) 45%, var(--bath)); }
.film-corridor { position: absolute; inset: 5vh 0; perspective: 900px; }
.negative-strip { position: absolute; display: flex; gap: 1rem; padding: 1rem; border-left: 1px solid rgba(216,212,199,.12); border-right: 1px solid rgba(216,212,199,.12); background: rgba(3,4,7,.5); filter: drop-shadow(0 0 28px rgba(184,167,255,.12)); animation: drift 12s ease-in-out infinite; }
.negative-strip span { width: 13vw; height: 34vh; min-width: 120px; background: linear-gradient(140deg, rgba(124,255,207,.18), rgba(214,65,97,.12), rgba(3,4,7,.84)); border: 1px solid rgba(216,212,199,.16); }
.strip-a { top: 8vh; left: -8vw; transform: rotateY(34deg) rotateZ(-7deg); }.strip-b { top: 36vh; right: -4vw; transform: rotateY(-28deg) rotateZ(6deg); animation-delay: -4s; }.strip-c { bottom: 6vh; left: 18vw; transform: rotateY(20deg) rotateZ(-2deg); animation-delay: -7s; }
.focus-lock { position: absolute; right: 10vw; top: 25vh; color: var(--mint); }.focus-square { width: 17rem; height: 17rem; border: 2px solid rgba(124,255,207,.5); animation: focusSnap 5s infinite; }.focus-square.delay { position: absolute; inset: 1rem auto auto 1rem; border-color: rgba(214,65,97,.45); animation-delay: .4s; }
.corridor-copy { justify-self: start; margin-top: 20vh; transform: rotate(-2deg); }.note-two { right: 10vw; bottom: 18vh; color: rgba(124,255,207,.56); }

.last-exposure { min-height: 105vh; background: radial-gradient(circle at 50% 45%, rgba(216,212,199,.12), transparent 12rem), radial-gradient(circle at 50% 46%, rgba(214,65,97,.14), transparent 30rem), var(--obsidian); }
.final-shutter { position: absolute; inset: 0; background: var(--silver); opacity: 0; z-index: 10; pointer-events: none; }.final-shutter.flash { animation: shutterFlash .75s ease-out; }
.moon-glass { position: absolute; width: 58vmin; height: 58vmin; border-radius: 50%; background: radial-gradient(circle at 42% 35%, rgba(216,212,199,.4), rgba(184,167,255,.11) 30%, transparent 55%); border: 1px solid rgba(216,212,199,.16); box-shadow: inset 0 0 80px rgba(3,4,7,.92), 0 0 80px rgba(184,167,255,.1); animation: breathe 10s ease-in-out infinite; }
.last-card { text-align: center; background: rgba(3,4,7,.62); }.shutter-button { position: absolute; bottom: 10vh; border: 1px solid rgba(255,138,61,.55); background: rgba(255,138,61,.08); color: var(--amber); padding: .9rem 1.2rem; border-radius: 999px; font: 800 .72rem var(--sans); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: box-shadow .25s, transform .25s; }.shutter-button:hover { box-shadow: 0 0 30px rgba(255,138,61,.35); transform: translateY(-2px); }

@keyframes grainDrift { 0%,100%{transform:translate(0)} 25%{transform:translate(1%, -1%)} 50%{transform:translate(-1%, 1%)} 75%{transform:translate(1%,1%)} }
@keyframes scan { to { transform: translateY(40px); } }
@keyframes breathe { 0%,100%{transform:scale(.96); opacity:.65} 50%{transform:scale(1.04); opacity:1} }
@keyframes rotateSlow { to { transform: rotate(360deg); } }
@keyframes ripple { 0%{transform:scale(.4); opacity:0} 20%{opacity:.8} 100%{transform:scale(2.4); opacity:0} }
@keyframes develop { 0%,100%{opacity:.22; filter:blur(7px)} 50%{opacity:.78; filter:blur(1px)} }
@keyframes drift { 0%,100%{translate:0 0} 50%{translate:2vw -2vh} }
@keyframes focusSnap { 0%,80%,100%{transform:scale(1.05) rotate(2deg); opacity:.45} 34%,58%{transform:scale(1) rotate(0); opacity:1} }
@keyframes shutterFlash { 0%{opacity:0} 12%{opacity:.88} 36%{opacity:.04} 54%{opacity:.36} 100%{opacity:0} }

@media (max-width: 780px) {
  .exposure-dial { right: .6rem; top: .6rem; transform: scale(.82) rotate(var(--dial, 0deg)); }
  .chamber { padding: 7rem 1.2rem; min-height: 120vh; }
  .wordmark { font-size: 22vw; }
  .caption, .note-one, .tilt-right, .focus-lock { position: relative; inset: auto; }
  .aperture-diagram, .chemical-tray, .contact-sheet, .film-corridor { opacity: .68; }
  .contact-sheet { width: 70vw; right: 1rem; }
  .bloom-copy, .corridor-copy { margin: 0; }
}