@font-face {
  font-family: "Tannenberg Bold";
  src: url("fonts/Tannenberg-Bold.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Tannenberg Contour";
  src: url("fonts/Tannenberg-Contour.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Tannenberg Shadow";
  src: url("fonts/Tannenberg-Shadow.ttf") format("truetype");
  font-display: swap;
}

:root {
  --black: #030303;
  --obsidian: #090909;
  --wine: #4b1118;
  --red: #a6111d;
  --skin: #c6a18f;
  --amber: #a95f28;
  --bone: #d8d3ca;
  --muted: rgba(216, 211, 202, 0.56);
  --heat: 0;
  color-scheme: dark;
  font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { width: 100%; height: 100%; background: var(--black); }
body { width: 100%; height: 100%; margin: 0; background: var(--black); color: var(--bone); overflow: hidden; }
button, a { color: inherit; }
button { font: inherit; }

.stage { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; isolation: isolate; background: #000; }
.ambient-image, .film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #000; }
.ambient-image { z-index: -5; filter: saturate(.56) brightness(.42) contrast(1.18); transform: scale(1.035); transition: opacity 1.1s ease, transform 8s ease; }
.film-video { z-index: -4; opacity: 0; transition: opacity 1.1s ease; }
body[data-state="playing"] .film-video, body[data-state="paused"] .film-video, body[data-state="ended"] .film-video { opacity: 1; }
body[data-state="playing"] .ambient-image, body[data-state="paused"] .ambient-image, body[data-state="ended"] .ambient-image { opacity: 0; }

.vhs-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; opacity: 0; background: #030303; pointer-events: none; transition: opacity 180ms linear; }
body.vhs-error .vhs-canvas { opacity: .68; }
body.vhs-error .film-video { filter: contrast(1.08) saturate(.62) brightness(.9); }
.stage::after { content: ""; position: absolute; z-index: 3; inset: 0; opacity: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(216,211,202,.045) 0 1px, transparent 1px 5px), linear-gradient(180deg, transparent 0 45%, rgba(216,211,202,.055) 48%, rgba(3,3,3,.16) 52%, transparent 56%); mix-blend-mode: screen; }
body.vhs-error .stage::after { opacity: .34; animation: tracking-band 2.2s linear infinite; }

@keyframes tracking-band { from { background-position: 0 0, 0 -55vh; } to { background-position: 0 4px, 0 55vh; } }

.exposure { position: absolute; z-index: -3; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.76), transparent 32%, transparent 68%, rgba(0,0,0,.58)), linear-gradient(0deg, rgba(0,0,0,.84), transparent 36%, rgba(0,0,0,.16)); transition: opacity .8s ease; }
body[data-state="playing"] .exposure, body[data-state="paused"] .exposure { opacity: calc(.08 + var(--heat) * .18); }

.grain { position: absolute; z-index: 8; inset: -60%; pointer-events: none; opacity: .075; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); animation: grain .22s steps(2) infinite; }
.heat-field { position: absolute; z-index: -2; inset: -8%; pointer-events: none; opacity: calc(var(--heat) * .45); background: radial-gradient(circle at 9% 80%, rgba(75,17,24,.72), transparent 22%), radial-gradient(circle at 86% 20%, rgba(169,95,40,.34), transparent 18%); filter: blur(calc(20px + var(--heat) * 30px)); transform: scale(calc(1 + var(--heat) * .04)); }
@keyframes grain { 0% { transform: translate(3%, -2%); } 25% { transform: translate(-4%, 3%); } 50% { transform: translate(2%, 6%); } 75% { transform: translate(5%, -5%); } 100% { transform: translate(-3%, 2%); } }

.entry-panel { position: absolute; z-index: 4; inset: 0; display: grid; grid-template-columns: minmax(1rem, 1fr) minmax(18rem, 80rem) minmax(1rem, 1fr); grid-template-rows: 1fr auto auto 1fr; align-items: center; transition: opacity .8s ease, transform 1.1s cubic-bezier(.22,1,.36,1); }
body:not([data-state="entry"]):not([data-state="loading"]) .entry-panel { opacity: 0; transform: scale(1.08); pointer-events: none; }
.eyebrow { margin: 0 0 1rem; font: 700 .66rem/1.3 monospace; letter-spacing: .17em; color: var(--skin); }
.entry-panel > .eyebrow { grid-column: 2; grid-row: 1; align-self: end; padding-left: 1vw; }

.title { position: relative; pointer-events: none; grid-column: 2; grid-row: 2; margin: 0; width: max-content; max-width: 100%; color: var(--bone); font-family: "Tannenberg Bold", sans-serif; font-size: clamp(5.2rem, 17.4vw, 18rem); font-weight: 400; letter-spacing: .015em; line-height: .66; text-transform: uppercase; filter: drop-shadow(0 1rem 3rem rgba(0,0,0,.8)); }
.title span { display: block; }
.title-top { color: var(--red); text-shadow: 0 0 30px rgba(166,17,29,.16); }
.title-bottom { margin-left: .08em; color: var(--bone); font-family: "Tannenberg Contour", sans-serif; }
.title::before, .title::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1; overflow: hidden; color: var(--wine); opacity: .3; font-family: "Tannenberg Shadow", sans-serif; font-size: .52em; letter-spacing: .03em; transform: translate(13%, 18%) scaleY(2.2) skewX(-12deg); filter: blur(2px); }
.title::after { color: var(--bone); opacity: .09; transform: translate(-7%, 62%) scaleX(1.3) skewX(18deg); }

.entry-note { grid-column: 2; grid-row: 3; margin: 2.4rem 0 0 auto; color: var(--muted); font: 600 clamp(.68rem, 1vw, .84rem)/1.45 monospace; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.enter-button { position: relative; z-index: 1; grid-column: 2; grid-row: 4; align-self: start; justify-self: start; display: flex; align-items: center; gap: 3.8rem; margin-top: 2rem; padding: .9rem 0; border: 0; border-bottom: 1px solid rgba(216,211,202,.5); background: transparent; font: 800 .72rem/1 monospace; letter-spacing: .15em; cursor: pointer; transition: color .25s ease, gap .35s ease, border-color .25s ease; }
.enter-button:hover, .enter-button:focus-visible { color: var(--skin); gap: 5rem; border-color: var(--skin); }
.enter-button:focus-visible, .film-controls button:focus-visible, .end-panel button:focus-visible { outline: 2px solid var(--bone); outline-offset: 5px; }
.enter-button:disabled { opacity: .45; cursor: wait; }
.director-note { position: absolute; right: clamp(1rem, 3vw, 3rem); bottom: clamp(1rem, 3vw, 3rem); display: flex; align-items: baseline; gap: .6rem; margin: 0; font: 700 .55rem/1 monospace; letter-spacing: .13em; }
.director-note span { color: var(--muted); }
.director-note strong { color: var(--bone); font-size: .62rem; }
.loading-copy { position: absolute; left: clamp(1rem, 3vw, 3rem); bottom: clamp(1rem, 3vw, 3rem); margin: 0; color: var(--skin); font: 700 .62rem/1 monospace; letter-spacing: .12em; }

.buffering { position: absolute; z-index: 20; inset: 0; display: none; place-content: center; grid-template-columns: repeat(3, 5px); gap: 5px; background: rgba(3,3,3,.7); }
.buffering span { width: 5px; height: 32px; background: var(--bone); animation: pulse .7s infinite alternate; }
.buffering span:nth-child(2) { animation-delay: .12s; }
.buffering span:nth-child(3) { animation-delay: .24s; }
.buffering b { grid-column: 1 / -1; margin-top: .8rem; font: 700 .55rem/1 monospace; letter-spacing: .16em; }
body.is-buffering .buffering { display: grid; }
@keyframes pulse { to { height: 8px; opacity: .2; } }

.film-controls { position: absolute; z-index: 15; left: clamp(1rem, 2.2vw, 2.1rem); right: clamp(1rem, 2.2vw, 2.1rem); bottom: clamp(1rem, 2.2vw, 2.1rem); display: flex; align-items: center; gap: 1rem; opacity: 0; transform: translateY(1rem); pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
body[data-state="playing"].controls-visible .film-controls, body[data-state="paused"] .film-controls { opacity: 1; transform: translateY(0); pointer-events: auto; }
.film-controls button { width: 2.5rem; height: 2.5rem; border: 1px solid rgba(216,211,202,.28); border-radius: 50%; background: rgba(3,3,3,.42); backdrop-filter: blur(8px); font: 800 .62rem/1 monospace; cursor: pointer; }
.film-controls button:hover { border-color: var(--bone); }
.timeline-wrap { display: flex; flex: 1; align-items: center; gap: 1rem; }
#timeline { flex: 1; height: 1px; accent-color: var(--skin); cursor: pointer; }
#timeDisplay { min-width: 7.6rem; color: var(--muted); font: 700 .58rem/1 monospace; font-variant-numeric: tabular-nums; letter-spacing: .05em; }
.sound-hint { position: absolute; z-index: 12; right: 2rem; bottom: 5rem; margin: 0; color: rgba(216,211,202,.38); font: 700 .52rem/1 monospace; letter-spacing: .1em; opacity: 0; transition: opacity .4s ease; }
body[data-state="playing"].controls-visible .sound-hint { opacity: 1; }

.end-panel { position: absolute; z-index: 18; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; background: rgba(3,3,3,.78); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transition: opacity 1.2s ease, visibility 1.2s ease; }
body[data-state="ended"] .end-panel { opacity: 1; visibility: visible; }
.end-panel h2 { margin: 0; font-family: "Tannenberg Bold", sans-serif; font-size: clamp(4rem, 10vw, 10rem); font-weight: 400; line-height: .82; letter-spacing: .01em; text-align: center; }
.end-panel h2 span { color: var(--red); font-family: "Tannenberg Contour", sans-serif; }
.end-credit { margin: 2rem 0 1.5rem; color: var(--muted); font: 700 .58rem/1 monospace; letter-spacing: .14em; }
.end-panel > button { border: 0; border-bottom: 1px solid var(--muted); padding: .8rem 0; background: transparent; color: var(--bone); font: 800 .62rem/1 monospace; letter-spacing: .12em; cursor: pointer; }

@media (max-width: 760px) {
  .entry-panel { grid-template-columns: 1rem minmax(0, 1fr) 1rem; }
  .title { font-size: clamp(4.6rem, 25vw, 9rem); line-height: .64; }
  .entry-note { margin-top: 2rem; }
  .sound-hint { display: none; }
  .timeline-wrap { gap: .45rem; }
  #timeDisplay { min-width: auto; font-size: .48rem; }
  .film-controls { gap: .45rem; }
  .film-controls button { width: 2.25rem; height: 2.25rem; }
  .director-note { right: 1rem; bottom: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .grain { display: none; }
}