:root { color-scheme: dark; --fire: #ed210c; --ember: #ff6a22; --ivory: #f1e4d4; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: #080000; }
body { margin: 0; overflow: hidden; color: var(--ivory); background: #080000; font-family: Manrope, sans-serif; }
button, a { font: inherit; }
#underworld { position: fixed; inset: 0; width: 100%; height: 100%; }

.cinema-bars::before, .cinema-bars::after { content: ""; position: fixed; z-index: 4; right: 0; left: 0; height: clamp(12px, 2.3vh, 28px); background: #030000; pointer-events: none; transition: height 1.2s cubic-bezier(.7,0,.2,1); }
.cinema-bars::before { top: 0; }
.cinema-bars::after { bottom: 0; }
.smoke { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center 41%, transparent 14%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.7) 100%), linear-gradient(to top, rgba(0,0,0,.62), transparent 48%); }
.smoke::after { content: ""; position: absolute; inset: -30%; opacity: .2; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.016 .05' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: screen; animation: smoke-drift 24s linear infinite; }

header { position: fixed; z-index: 6; top: clamp(34px, 5vh, 64px); right: clamp(24px, 4vw, 64px); left: clamp(24px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; }
.monogram { position: relative; display: grid; width: 52px; height: 52px; color: var(--ivory); text-decoration: none; place-items: center; }
.monogram svg { position: absolute; inset: 0; width: 100%; fill: none; stroke: rgba(241,228,212,.46); stroke-width: 1.15; transition: transform .6s ease, stroke .4s ease; }
.monogram span { font: 700 11px Cinzel, serif; letter-spacing: -.04em; }
.monogram:hover svg, .monogram:focus-visible svg { stroke: var(--fire); transform: rotate(30deg); }
.monogram:focus-visible { outline: none; }
header p { margin: 0; color: rgba(241,228,212,.42); font-size: 8px; font-weight: 600; letter-spacing: .34em; text-transform: uppercase; }

main { position: relative; z-index: 5; min-height: 100vh; pointer-events: none; }
.hero { position: absolute; right: 0; bottom: clamp(50px, 7.5vh, 92px); left: 0; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; transition: opacity .65s ease, transform .9s cubic-bezier(.7,0,.2,1), filter .65s ease; }
.invocation { margin: 0 0 clamp(12px, 1.9vh, 23px); color: rgba(241,228,212,.7); font: 500 clamp(8px, .65vw, 11px) Manrope, sans-serif; letter-spacing: .38em; text-transform: uppercase; text-shadow: 0 2px 12px #000; }
h1 { margin: 0; color: var(--ivory); font: 800 clamp(70px, 11.7vw, 190px)/.66 Cinzel, serif; letter-spacing: -.095em; text-shadow: 0 8px 34px #000, 0 0 80px rgba(0,0,0,.85); }
h1 span { display: block; margin: 0 0 .18em; color: transparent; font-size: .21em; line-height: 1; letter-spacing: 1.05em; -webkit-text-stroke: 1px rgba(241,228,212,.72); transform: translateX(.52em); }

#descend { position: absolute; left: 50%; bottom: calc(100% + clamp(45px, 6vh, 75px)); display: flex; align-items: center; gap: 13px; padding: 0; border: 0; color: var(--ivory); background: none; cursor: pointer; text-align: left; pointer-events: auto; transform: translateX(-50%); }
.seal { position: relative; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(241,228,212,.44); border-radius: 50%; box-shadow: 0 0 0 7px rgba(0,0,0,.18); transition: border-color .35s, background .35s, box-shadow .35s, transform .5s; }
.seal::before, .seal::after, .seal i { content: ""; position: absolute; width: 20px; height: 1px; background: currentColor; }
.seal::after { transform: rotate(60deg); }
.seal i { transform: rotate(-60deg); }
.action { display: flex; min-width: 92px; flex-direction: column; gap: 1px; }
.action small { color: rgba(241,228,212,.42); font-size: 7px; letter-spacing: .18em; text-transform: uppercase; }
.action strong { font: 700 15px Cinzel, serif; letter-spacing: .12em; text-transform: uppercase; }
#descend:hover .seal, #descend:focus-visible .seal { border-color: var(--fire); color: #fff; background: rgba(188,15,3,.42); box-shadow: 0 0 28px rgba(237,33,12,.55), inset 0 0 18px rgba(255,70,20,.22); transform: rotate(90deg) scale(1.08); }
#descend:focus-visible { outline: none; }

.awakening, .flare { position: fixed; inset: 0; z-index: 9; pointer-events: none; }
.awakening { display: grid; place-items: center; opacity: 0; }
.awakening p { margin: 0; color: #fff; font: 900 clamp(58px, 13vw, 220px)/.75 Cinzel, serif; letter-spacing: -.08em; text-align: center; text-shadow: 0 0 35px #ff210c, 0 0 90px #a60000; }
.flare { opacity: 0; background: radial-gradient(circle at 50% 43%, #fff 0, #ff310d 5%, rgba(175,0,0,.9) 18%, transparent 58%); mix-blend-mode: screen; }
body.awake .hero { opacity: 0; filter: blur(8px); transform: translateY(50px) scale(.92); }
body.awake .cinema-bars::before, body.awake .cinema-bars::after { height: 0; }
body.awake .flare { animation: flare 2.4s ease-out; }
body.awake .awakening { animation: awakening 2.8s ease-out .65s; }

.noscript { position: fixed; z-index: 20; bottom: 40px; left: 50%; color: var(--fire); font-size: 10px; transform: translateX(-50%); }
@keyframes smoke-drift { to { transform: translate3d(13%, -8%, 0) scale(1.08); } }
@keyframes flare { 0%{opacity:0} 8%{opacity:.95} 15%{opacity:.08} 23%{opacity:.62} 35%{opacity:.12} 100%{opacity:0} }
@keyframes awakening { 0%{opacity:0;transform:scale(1.5)} 10%{opacity:.95;transform:scale(1)} 14%{opacity:.08} 19%{opacity:.78} 38%{opacity:.72} 100%{opacity:0;transform:scale(.94)} }

@media (max-width: 720px) {
    header { top: 30px; right: 20px; left: 20px; }
    .monogram { width: 44px; height: 44px; }
    header p { max-width: 145px; line-height: 1.7; text-align: right; }
    .hero { bottom: 70px; padding: 0 14px; }
    .invocation { width: 90%; line-height: 1.8; letter-spacing: .22em; }
    h1 { font-size: clamp(55px, 19vw, 105px); }
    #descend { bottom: calc(100% + 40px); }
    .smoke { background: radial-gradient(ellipse at center 36%, transparent 8%, rgba(0,0,0,.12) 35%, rgba(0,0,0,.76) 100%), linear-gradient(to top, rgba(0,0,0,.75), transparent 58%); }
}
@media (max-height: 650px) { .hero{bottom:42px}.invocation{display:none}#descend{bottom:calc(100% + 28px)} }
@media (prefers-reduced-motion: reduce) { .smoke::after{animation:none} .monogram svg,.hero{transition:none} }