/* Projection light, film stock and a moving opening sequence. */
:root { --bg:#101512; --paper:#eeece3; --muted:#a1a799; --line:#3d4438; --cinema-accent:#c2b18e; }
body { background:#0e1310; isolation:isolate; }
#site-shell { position:relative; z-index:1; }
html.auto-reading-active { scroll-behavior:auto; }
.ambient-stage { position:fixed; z-index:0; inset:0; pointer-events:none; overflow:hidden; }
.ambient-glow { position:absolute; width:900px; height:1100px; border-radius:50%; filter:blur(30px); }
.ambient-glow-one { top:-450px; left:-430px; background:radial-gradient(ellipse,#9caf7c10,transparent 67%); }
.ambient-glow-two { right:-580px; bottom:-450px; background:radial-gradient(ellipse,#d0ad7010,transparent 66%); }
.ambient-grain { position:absolute; inset:0; background:url("assets/grain.svg") repeat; opacity:.035; mix-blend-mode:screen; }
.ambient-rails { position:absolute; inset:0; border-inline:1px solid #c8d3b709; margin-inline:24px; }
.ambient-rails::before,.ambient-rails::after { content:""; position:absolute; top:0; bottom:0; width:5px; background:repeating-linear-gradient(to bottom,#bec8ad15 0 10px,transparent 10px 27px); }
.ambient-rails::before { left:-12px; }
.ambient-rails::after { right:-12px; }
.page-section { position:relative; }
.page-section[data-scene]::before { content:attr(data-scene); position:absolute; z-index:-1; top:66px; left:-25px; font:200px/.9 Georgia,serif; -webkit-text-stroke:1px #c8d2b5; color:transparent; opacity:.04; pointer-events:none; }
.section-top { border-color:#89937b38; }
.section-top>.eyebrow { color:#c4cab9; }
.hero-figure,.memory .media-placeholder,.group-figure .media-placeholder { box-shadow:0 0 0 1px #d6dfc81a,0 18px 40px #00000016; }
.hero-figure { position:relative; }
.hero-figure::before { content:""; position:absolute; z-index:-1; inset:-12px -12px 14px 12px; border:1px solid #a8b99521; }
.hero-figure .media-placeholder { background:#263529; }
.hero-figure>figcaption { margin-bottom:0; }
.hero h1:focus { outline:none; }
.short-line { background:var(--cinema-accent); }
.letter-asterisk { color:#c2b18e; }
.letter-body { color:#c2c6b8; }
.letter-signature { color:var(--cinema-accent); }
.signature-line { background:var(--cinema-accent); }
.lightbox-media { background:#0b100c; }
.lightbox-media>.media-center { background:var(--green); color:var(--green-ink); }
.ending { background-color:#eae6d9; background-image:radial-gradient(ellipse at 100% 0,#d1ccb441,transparent 55%),repeating-linear-gradient(0deg,transparent 0 45px,#565c4305 45px 46px); isolation:isolate; overflow:hidden; }
.ending::before { content:""; position:absolute; z-index:-1; width:700px; height:700px; border:1px solid #8b90701a; border-radius:50%; left:calc(50% - 350px); top:-380px; box-shadow:0 0 0 80px #8b907008,0 0 0 160px #8b907005; }
.ending .section-top>.eyebrow { color:#535e46; }
.cinema-reveal { opacity:0; transform:translateY(24px); transition:opacity .9s,transform .9s cubic-bezier(.2,.65,.25,1); }
.cinema-reveal.is-visible { opacity:1; transform:translateY(0); }

/* Living cover: real film frames pass behind the letter. */
.entry-screen { background:#101512; isolation:isolate; }
.entry-screen::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:url("assets/grain.svg"); opacity:.045; }
.entry-visuals { position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.entry-visuals::after { content:""; position:absolute; inset:0; z-index:3; background:radial-gradient(ellipse at center,#101512eb 0%,#101512b0 34%,#10151225 100%); }
.entry-orbit { position:absolute; top:50%; left:50%; width:850px; height:600px; border:1px solid #a9b59524; border-radius:50%; animation:orbit-turn 38s linear infinite; }
.entry-orbit-one { box-shadow:0 0 0 22px #a9b59505,0 0 0 45px #a9b59504; }
.entry-orbit-two { width:680px; height:850px; border-color:#e1c29620; animation-direction:reverse; animation-duration:47s; }
.entry-filmstrip { position:absolute; z-index:1; display:flex; gap:15px; padding:20px 12px; border-block:1px solid #dbe3ca26; background:#11170f; width:max-content; opacity:.3; animation:film-drift 29s ease-in-out infinite alternate; --strip-angle:-13deg; }
.entry-filmstrip::before,.entry-filmstrip::after { content:""; position:absolute; left:0; right:0; height:6px; background:repeating-linear-gradient(90deg,#b7c1a43d 0 10px,transparent 10px 28px); }
.entry-filmstrip::before { top:6px; }
.entry-filmstrip::after { bottom:6px; }
.entry-filmstrip img { width:215px; height:135px; object-fit:cover; filter:grayscale(.7); }
.entry-filmstrip-one { top:12%; left:-140px; }
.entry-filmstrip-two { bottom:10%; right:-160px; --strip-angle:12deg; animation-direction:alternate-reverse; animation-duration:34s; opacity:.2; }
.entry-sweep { position:absolute; z-index:4; top:-30%; bottom:-30%; width:360px; background:linear-gradient(90deg,transparent,#e7e8bd04 30%,#e7e8bd12 50%,transparent); filter:blur(12px); animation:projection-sweep 15s ease-in-out infinite; }
.entry-motes { position:absolute; inset:0; z-index:5; }
.entry-motes i { position:absolute; width:2px; height:2px; border-radius:50%; background:#e4ddbc; animation:dust-float 9s ease-in-out infinite; }
.entry-motes i:nth-child(1) { left:15%; top:63%; animation-delay:-2s; }
.entry-motes i:nth-child(2) { left:30%; top:24%; animation-delay:-5s; }
.entry-motes i:nth-child(3) { left:75%; top:53%; animation-delay:-7s; }
.entry-motes i:nth-child(4) { left:84%; top:29%; animation-delay:-1s; }
.entry-motes i:nth-child(5) { left:65%; top:76%; animation-delay:-3s; }
.entry-motes i:nth-child(6) { left:20%; top:82%; animation-delay:-6s; }
.entry-camera-label,.entry-timecode { position:absolute; z-index:5; top:118px; font:8px/1.5 "SFMono-Regular",Consolas,monospace; letter-spacing:1px; color:#9ca78c; opacity:.7; }
.entry-camera-label { left:56px; }
.entry-timecode { right:56px; }
.entry-content h2 { animation:title-hover 7s ease-in-out 1.2s infinite; }
.entry-title-line { display:block; animation:title-arrive 1.1s cubic-bezier(.16,1,.3,1) both; }
.entry-title-line:nth-child(2) { animation-delay:.15s; }
.entry-content>.eyebrow { color:#c5cab9; animation:title-arrive 1.1s .1s both; }
.entry-description { animation:title-arrive 1.1s .35s both; }
.entry-top { border-color:#89937b45; }
.entry-touch { background:#141c1666; border-color:#bfcbb0; box-shadow:0 0 38px #9cb27a0d; }
.entry-touch::before { border-color:#9bb47e49; }
.entry-open:hover .entry-touch { box-shadow:0 0 45px #c5ce9f28; }
.entry-open-hint { letter-spacing:.4px; }
.entry-screen.is-launching { pointer-events:none; }
.entry-screen.is-launching .entry-content { animation:cover-launch .75s ease-in forwards; }
.entry-screen.is-launching .entry-top { opacity:0; transition:opacity .5s; }

@keyframes orbit-turn { from { transform:translate(-50%,-50%) rotate(-20deg); } to { transform:translate(-50%,-50%) rotate(340deg); } }
@keyframes film-drift { from { transform:translateX(-7%) rotate(var(--strip-angle)); } to { transform:translateX(7%) rotate(var(--strip-angle)); } }
@keyframes projection-sweep { 0% { transform:translateX(-450px) rotate(23deg); opacity:0; } 15%,80% { opacity:1; } 100% { transform:translateX(120vw) rotate(23deg); opacity:0; } }
@keyframes dust-float { 0%,100% { transform:translate(0,20px); opacity:0; } 40% { opacity:.65; } 75% { transform:translate(18px,-60px); opacity:0; } }
@keyframes title-arrive { from { opacity:0; transform:translateY(26px); filter:blur(5px); } to { opacity:1; transform:translateY(0); filter:blur(0); } }
@keyframes title-hover { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-5px); } }
@keyframes cover-launch { to { transform:scale(1.08); opacity:0; filter:blur(8px); } }

/* Open the cover directly onto the page, without an intermediate screen. */
.entry-screen.is-launching { animation:cover-unveil 1.15s cubic-bezier(.76,0,.24,1) both; }
.site-revealing .hero-copy { animation:hero-copy-arrive 1.3s .1s both; }
.site-revealing .hero-figure { animation:hero-image-arrive 1.5s .1s both; }
@keyframes cover-unveil { 0%,20% { clip-path:inset(0); } 100% { clip-path:inset(0 0 100% 0); } }
@keyframes hero-copy-arrive { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-image-arrive { from { opacity:0; transform:translateY(30px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Music stays in the small dock; reading feedback is part of the top line. */
.playback-dock { position:fixed; z-index:25; bottom:24px; right:24px; display:flex; align-items:stretch; gap:8px; }
.playback-dock .music-control { position:relative; inset:auto; min-height:54px; background:#101711f5; border-color:#7e8a6859; backdrop-filter:blur(12px); }

/* One line switches between reading position and the six-second countdown. */
.reading-progress { height:3px; z-index:35; background:#11181055; transition:height .3s,background .3s; }
.reading-progress.has-status { height:31px; background:#111810f5; backdrop-filter:blur(12px); }
.progress-caption { position:absolute; left:24px; right:24px; top:0; height:28px; display:flex; align-items:center; justify-content:space-between; gap:12px; opacity:0; transform:translateY(-4px); transition:opacity .2s,transform .3s; font-size:10px; letter-spacing:.6px; color:#d9dfcf; }
.has-status .progress-caption { opacity:1; transform:translateY(0); }
.progress-status { display:flex; align-items:baseline; gap:6px; white-space:nowrap; }
#reader-countdown { font-size:12px; color:var(--cinema-accent); }
#reader-hint { font-size:9px; color:var(--muted); }
.progress-track { position:absolute; bottom:0; left:0; right:0; height:3px; background:#a7b49114; }
#reading-progress-bar,#reader-timer-fill { position:absolute; inset:0; height:100%; width:100%; transform-origin:left; }
#reading-progress-bar { background:#dce3d0; opacity:1; transition:opacity .2s; box-shadow:0 0 10px #c7d5af28; }
#reader-timer-fill { transform:scaleX(0); background:var(--cinema-accent); opacity:0; transition:opacity .2s; }
.has-status #reading-progress-bar { opacity:0; }
.has-status #reader-timer-fill { opacity:1; }
.is-held #reader-timer-fill { opacity:.35; }

@media(max-width:1100px) { .ambient-rails { margin-inline:14px; } }
@media(max-width:760px) {
  .ambient-rails { margin-inline:10px; border-color:#c8d3b708; }
  .ambient-rails::before { left:-7px; width:3px; }
  .ambient-rails::after { right:-7px; width:3px; }
  .ambient-glow-one { width:600px; height:800px; top:-300px; left:-350px; }
  .ambient-glow-two { width:600px; height:800px; right:-350px; }
  .page-section[data-scene]::before { font-size:135px; left:-8px; top:49px; opacity:.035; }
  .hero-figure::before { inset:-7px -5px 14px 7px; }
  .entry-filmstrip img { width:140px; height:95px; }
  .entry-filmstrip { gap:10px; padding:15px 10px; opacity:.3; }
  .entry-filmstrip-one { top:14%; left:-210px; }
  .entry-filmstrip-two { bottom:14%; right:-210px; }
  .entry-filmstrip::before,.entry-filmstrip::after { height:4px; background-size:auto; }
  .entry-filmstrip::before { top:5px; }
  .entry-filmstrip::after { bottom:5px; }
  .progress-caption { left:20px; right:20px; font-size:9px; }
  #reader-hint { font-size:8px; }
  .entry-orbit-one { width:570px; height:380px; }
  .entry-orbit-two { width:400px; height:570px; }
  .entry-camera-label,.entry-timecode { top:91px; font-size:6px; letter-spacing:.5px; }
  .entry-camera-label { left:24px; }
  .entry-timecode { right:24px; }
  .entry-sweep { width:160px; }
  .playback-dock { bottom:calc(67px + env(safe-area-inset-bottom)); right:15px; gap:7px; }
  .playback-dock .music-control { width:44px; height:44px; min-height:44px; border-radius:50%; }
}
@media(prefers-reduced-motion:reduce) {
  html:not(.motion-full) .cinema-reveal { opacity:1; transform:none; }
  html:not(.motion-full) :is(.entry-orbit,.entry-filmstrip,.entry-sweep,.entry-motes i,.entry-content h2,.entry-title-line,.entry-content>.eyebrow,.entry-description,.entry-screen.is-launching .entry-content,.site-revealing .hero-copy,.site-revealing .hero-figure) { animation:none !important; }
  html:not(.motion-full) .entry-screen.is-launching { animation:none; }
  html:not(.motion-full) .entry-filmstrip { transform:rotate(var(--strip-angle)); }
  html:not(.motion-full) .entry-orbit { transform:translate(-50%,-50%); }
}