/* ─── Scrolltide — The Gates of Hell ─── dark variant ─── */
:root {
  --ash:      #070405;
  --ash2:     #0a0506;
  --blood:    #b3121a;
  --ember:    #ff4b1f;
  --ember-dim: #cc3311;
  --bone:     #f4efe8;
  --bone-dim: rgba(244,239,232,0.58);
  --serif:    "Playfair Display", Georgia, serif;
  --mono:     "JetBrains Mono", Consolas, monospace;
  --gate-w:   min(100vw, 150vh);
  --gate-drop: calc(var(--gate-w) * -0.062);
  --plate-w: min(100vw, 178vh);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; height:100%; overflow:hidden; }
body {
  font-family: var(--serif);
  background: linear-gradient(to bottom, #2a060b 0%, #55090f 26%, #3d070c 60%, #0b0304 92%, #060203 100%);
  color: var(--bone);
}

/* ─── STAGE ─── */
.stage {
  position: fixed; inset:0;
  isolation: isolate;
  overflow: hidden;
}

/* ─── LAYER 0: BG PLATE ─── */
.layer-bg { position:absolute; inset:0; z-index:0; }
.bg-plate {
  position:absolute; left:50%; top:50%;
  width:var(--plate-w); height:auto; max-height:100%;
  transform:translate(-50%,-50%);
  filter: brightness(0.74) saturate(1.2) contrast(1.08) hue-rotate(-10deg);
}
.bg-scrim {
  position:absolute; inset:0;
  background:
    radial-gradient(128% 82% at 50% 42%, transparent 34%, rgba(6,2,3,0.52) 76%, rgba(4,1,2,0.85) 100%),
    linear-gradient(to bottom, rgba(5,2,3,0.7) 0%, rgba(5,2,3,0.12) 20%, transparent 42%, rgba(4,1,2,0.55) 88%, rgba(4,1,2,0.85) 100%);
}

/* ─── LAYER 1: CURTAIN (cloth behind gate) ─── */
.layer-curtain { position:absolute; inset:0; z-index:1; pointer-events:none; }
.gate-box {
  position:absolute; left:50%; bottom:var(--gate-drop);
  width:var(--gate-w); aspect-ratio:1536/1024;
  transform:translateX(-50%);
}
.arch-window {
  position:absolute; left:36.4%; top:40.0%;
  width:26.6%; height:45.0%;
  overflow: hidden;
  pointer-events: auto;
}
.arch-glow {
  position:absolute; inset:-20% -30%;
  background:
    radial-gradient(58% 50% at 50% 92%, rgba(255,116,48,0.7) 0%, rgba(176,26,16,0.4) 44%, transparent 78%),
    radial-gradient(86% 66% at 50% 26%, rgba(104,10,12,0.4) 0%, transparent 100%),
    linear-gradient(to bottom, rgba(5,2,3,0.95), rgba(5,2,3,0.85));
  filter: blur(12px);
}
canvas#cloth {
  position:absolute;
  mix-blend-mode: screen;
}
.arch-inner-shadow {
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(4,1,2,0.85) 0%, transparent 14% 86%, rgba(4,1,2,0.75) 100%),
    linear-gradient(to right, rgba(4,1,2,0.45) 0%, transparent 8%, transparent 92%, rgba(4,1,2,0.45) 100%);
  pointer-events: none;
}

/* ─── LAYER 2: GATE ─── */
.layer-gate { position:absolute; inset:0; z-index:2; pointer-events:none; }
.gate-relic {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: fill;
  filter: contrast(1.08) brightness(0.92) saturate(1.15) drop-shadow(0 24px 48px rgba(0,0,0,0.75));
}

/* ─── LAYER 3: CHROME (UI overlay) ─── */
.layer-chrome {
  position:absolute; inset:0; z-index:3;
  display:flex; flex-direction:column; align-items:center;
  padding: clamp(22px,4.4vh,52px) clamp(18px,2.6vw,38px) clamp(12px,1.8vh,20px);
  pointer-events: none;
}
.layer-chrome > * { pointer-events: auto; }
.layer-chrome::before {
  content:''; position:absolute; left:0; bottom:0;
  width:66%; height:62%;
  background:
    radial-gradient(78% 92% at 6% 100%, rgba(4,1,2,0.92) 0%, rgba(4,1,2,0.65) 40%, transparent 78%),
    linear-gradient(to top, rgba(4,1,2,0.75) 0%, transparent 46%);
  pointer-events: none;
}

/* ─── NAVBAR ─── */
.navbar { width:100%; display:flex; justify-content:center; }
.pill {
  display:flex; align-items:center;
  gap: clamp(12px,1.8vw,28px);
  padding: 6px 6px 6px clamp(16px,1.8vw,24px);
  background: #0f0708;
  border: 1px solid rgba(255,75,31,0.2);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,75,31,0.1) inset, 0 12px 40px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.5);
}
.wordmark {
  font-family: var(--serif); font-weight:700;
  font-size: clamp(15px,1.4vw,19px);
  color: #f4e8dc; text-decoration:none;
  letter-spacing:-0.015em;
}
.wordmark span { color: var(--ember); }
.pill-links {
  display:flex; align-items:center; gap:10px; list-style:none;
  font-family: var(--mono); font-size:11px; font-weight:500;
  letter-spacing:0.06em; text-transform:uppercase;
}
.pill-links a {
  color: rgba(244,232,220,0.5); text-decoration:none;
  transition: color 0.2s;
}
.pill-links a:hover { color: var(--bone); }
.pill-links a.is-current { color: var(--bone); }
.pill-links .dot { color: rgba(244,232,220,0.2); }

.sound {
  background: transparent;
  border: 1px solid rgba(244,232,220,0.15);
  border-radius: 999px;
  display:flex; align-items:center; gap:6px;
  padding: 6px 14px;
  cursor: pointer;
  color: rgba(244,232,220,0.6);
  font-family: var(--mono); font-size:11px;
  text-transform:uppercase; letter-spacing:0.06em;
  transition: all 0.2s;
}
.sound:hover { border-color: rgba(244,232,220,0.3); color: var(--bone); }
.sound-bars { display:flex; align-items:center; gap:2px; height:11px; }
.sound-bars i {
  width:2px; height:11px;
  background: var(--ember);
  border-radius:1px;
  transform-origin: bottom;
  animation: sound-bar 0.9s alternate infinite;
}
.sound-bars i:nth-child(1) { animation-delay:-0.6s; }
.sound-bars i:nth-child(2) { animation-delay:-0.3s; }
.sound-bars i:nth-child(3) { animation-delay:0s; }
.sound.is-off .sound-bars i {
  background: rgba(244,232,220,0.2);
  animation: none;
  scaleY: 0.28;
}
@keyframes sound-bar { from{scaleY:0.32} to{scaleY:1} }

.play {
  display:flex; align-items:center; gap:8px;
  padding: 9px 18px 9px 15px;
  background: #1a080a;
  border: 1px solid rgba(255,75,31,0.3);
  color: #f6f2ec;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--mono); font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:0.08em;
  transition: all 0.2s;
}
.play:hover { background: #2c1512; border-color: var(--ember); translateY:-1px; }
.play-glyph {
  display:inline-block;
  border-left: 7px solid var(--ember);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

/* ─── BASELINE (footer) ─── */
.baseline {
  position:relative; margin-top:auto; width:100%;
  display:flex; justify-content:space-between; align-items:flex-end;
  gap: clamp(20px,6vw,90px);
}
.copy { max-width:clamp(300px,32vw,480px); }
.eyebrow {
  font-family: var(--mono);
  font-size: clamp(8px,0.62vw,10px);
  letter-spacing:0.26em; text-transform:uppercase;
  color: rgba(244,239,232,0.45);
  margin-bottom:clamp(8px,1.2vh,14px);
  text-shadow:0 1px 14px rgba(0,0,0,0.95);
}
.headline {
  font-family: var(--serif); font-weight:500;
  font-size: clamp(28px,2.9vw,48px);
  line-height:1.0; letter-spacing:-0.028em;
  color: #fdfaf6;
  text-shadow: 0 2px 30px rgba(0,0,0,0.9), 0 0 70px rgba(0,0,0,0.75);
}
.headline em {
  display:block; font-style:italic; font-weight:400;
  background: linear-gradient(180deg, #ffd0a0 0%, #ff5a1f 40%, #b3121a 85%, #4a0505 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede {
  font-family: var(--mono);
  font-size: clamp(10px,0.74vw,11.5px);
  font-weight:300; line-height:1.75;
  color: rgba(244,239,232,0.58);
  margin-top:clamp(10px,1.6vh,18px);
}
.hint {
  display:block; margin-top:5px;
  color: rgba(255,124,66,0.85);
  letter-spacing:0.03em;
}
.meta {
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
  font-family: var(--mono); font-size:9.5px;
  letter-spacing:0.2em; text-transform:uppercase;
  color: rgba(244,239,232,0.3);
}
.meta [data-fps] { letter-spacing:0.12em; color: rgba(255,124,66,0.45); }

/* ─── CONTROLS PANEL ─── */
.panel {
  position:fixed; right:0; top:0;
  width:min(340px,92vw); height:100%;
  background: rgba(7,2,4,0.95);
  backdrop-filter:blur(18px);
  border-left:1px solid rgba(255,75,31,0.15);
  translateX:100%;
  transition: translateX 0.3s cubic-bezier(0.22,0.8,0.28,1);
  z-index:100;
  overflow-y:auto;
  padding:24px;
  font-family: var(--mono);
  color: var(--bone-dim);
}
.panel.open { translateX:0; }
.panel h2 {
  font-family: var(--serif);
  font-size:1.2rem; color: var(--bone);
  margin-bottom:20px;
}
.panel section {
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(255,75,31,0.08);
}
.panel section:last-child { border-bottom:none; }
.panel h3 {
  font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--ember); margin-bottom:12px;
}
.slider-group { margin-bottom:10px; }
.slider-group label {
  display:flex; justify-content:space-between;
  font-size:11px; color: rgba(244,239,232,0.6);
  margin-bottom:4px;
}
.slider-group input[type=range] {
  width:100%; height:4px;
  -webkit-appearance:none; appearance:none;
  background: rgba(255,75,31,0.2);
  border-radius:4px; outline:none;
}
.slider-group input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none;
  width:14px; height:14px; border-radius:50%;
  background: var(--ember); border:none;
  cursor:pointer;
}
.panel-footer {
  font-size:9.5px; color: rgba(244,239,232,0.3);
  margin-top:16px; padding-top:12px;
  border-top:1px solid rgba(255,75,31,0.08);
}
.panel .reset {
  background: transparent;
  border:1px solid rgba(255,75,31,0.2);
  color: var(--bone-dim);
  padding:8px 16px; border-radius:6px;
  cursor:pointer;
  font-family: var(--mono); font-size:10px;
  margin-top:12px;
  transition: all 0.2s;
}
.panel .reset:hover { border-color:var(--ember); color:var(--bone); }
.panel .close-panel {
  position:absolute; top:14px; right:16px;
  background:none; border:none;
  color: var(--bone-dim); cursor:pointer;
  font-size:18px; line-height:1;
}
.panel .close-panel:hover { color: var(--bone); }

/* ─── RESPONSIVE ─── */
@media (max-aspect-ratio: 1/1) {
  :root { --gate-w: min(150vw, 120vh); }
}
@media (max-width: 760px) {
  :root { --gate-w: min(215vw,118vh); --gate-drop: calc(var(--gate-w)*-0.075); }
  .pill { gap:10px; }
  .pill-links { display:none; }
  .headline { white-space:normal; }
  .baseline { flex-direction:column; align-items:flex-start; }
  .meta { align-items:flex-start; }
  .meta span:nth-child(3) { display:none; }
}
@media (max-height: 560px) {
  .lede { display:none; }
  .eyebrow { display:none; }
}