@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=IM+Fell+English:ital@0;1&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { --bg:#0a0a08; --text:#e8e0d0; --gold:#c9a84c; }
body { background:var(--bg); color:var(--text); font-family:'Cormorant Garamond',serif; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
body::before { content:''; position:fixed; inset:0; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); pointer-events:none; z-index:100; opacity:0.35; }
canvas { position:absolute; top:0; left:0; width:100%; height:100%; }
#text-layer { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:9vh; z-index:10; pointer-events:none; }
.narration { font-family:'IM Fell English',serif; font-style:italic; font-size:clamp(1.15rem,2.6vw,1.85rem); color:var(--text); text-align:center; width:min(92vw,760px); line-height:1.8; opacity:0; transform:translateY(10px); transition:opacity 1.1s ease,transform 1.1s ease; text-shadow:0 0 50px rgba(0,0,0,1),0 0 20px rgba(0,0,0,0.9); letter-spacing:0.02em; padding-inline:1rem; }
.narration.visible { opacity:1; transform:translateY(0); }
.narration.fading  { opacity:0; transform:translateY(-6px); }
#scene-label { position:absolute; top:30px; left:50%; transform:translateX(-50%); font-family:'Cormorant Garamond',serif; font-size:1rem; letter-spacing:0.28em; text-transform:uppercase; color:var(--gold); opacity:0; transition:opacity 0.9s ease; z-index:10; }
#controls { position:absolute; bottom:26px; right:34px; z-index:20; display:flex; gap:10px; }
button { background:transparent; border:1px solid rgba(201,168,76,0.35); color:var(--gold); font-family:'Cormorant Garamond',serif; font-size:0.78rem; letter-spacing:0.14em; padding:7px 16px; cursor:pointer; transition:opacity 0.45s ease,border-color 0.45s ease,background-color 0.45s ease,box-shadow 0.9s ease,transform 0.45s ease,color 0.45s ease; }
button:hover { background:rgba(201,168,76,0.08); border-color:var(--gold); }
button:disabled { opacity:0.35; cursor:default; }
button.is-dimmed { opacity:0.52; }
button.is-ready { opacity:1; border-color:rgba(220,190,100,0.9); background:rgba(201,168,76,0.1); box-shadow:0 0 18px rgba(201,168,76,0.22),0 0 38px rgba(201,168,76,0.1); animation:next-ready-pulse 2.4s ease-in-out infinite; }
button.is-ready:hover { background:rgba(201,168,76,0.16); border-color:rgba(220,190,100,1); }
#progress { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); display:flex; gap:9px; z-index:20; }
.dot { width:5px; height:5px; border-radius:50%; background:rgba(201,168,76,0.25); transition:background 0.5s; }
.dot.active { background:var(--gold); }

@keyframes next-ready-pulse {
  0%, 100% { box-shadow:0 0 12px rgba(201,168,76,0.16),0 0 24px rgba(201,168,76,0.06); transform:translateY(0); }
  50% { box-shadow:0 0 20px rgba(201,168,76,0.28),0 0 44px rgba(201,168,76,0.12); transform:translateY(-1px); }
}

@media (max-width: 640px) {
  #text-layer { padding-bottom:12vh; }
  .narration { font-size:clamp(1.2rem,4.9vw,1.55rem); width:min(94vw,34rem); line-height:1.7; padding-inline:1.1rem; }
}