@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&display=swap');
:root{color-scheme:dark;--gold:#b49c70;--black:#050607;--scroll:0;--pointer-x:0;--pointer-y:0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:#e1d9c9;overflow-x:hidden;font-family:Georgia,serif}main{position:relative}.scene{position:relative;min-height:100svh;display:grid;place-items:center;isolation:isolate;overflow:hidden}.scene-one{height:130svh;background:radial-gradient(ellipse at 50% 43%,#25251e 0%,#101210 27%,#050607 67%)}.scene-one:before,.scene-two:before,.scene-three:before{content:"";position:absolute;inset:0;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 3px,#0003 4px 5px);opacity:.25;pointer-events:none}.halo{position:absolute;width:min(80vw,690px);aspect-ratio:1;border-radius:50%;top:calc(43% - min(40vw,345px));background:radial-gradient(circle,transparent 26%,#9b875e09 37%,#be9d601d 49%,transparent 64%);filter:blur(12px);transform:translate3d(calc(var(--pointer-x)*-12px),calc(var(--pointer-y)*-12px),0)}.rings{position:absolute;width:min(73vw,650px);aspect-ratio:1;top:calc(43% - min(36.5vw,325px));display:grid;place-items:center;transform:rotate(calc(var(--scroll)*65deg))}.rings i{position:absolute;border:1px solid #a48c5b58;border-radius:50%;box-shadow:0 0 22px #d4a86810,inset 0 0 22px #d4a8680c}.rings i:nth-child(1){width:100%;height:100%;border-style:dashed;animation:spin 110s linear infinite}.rings i:nth-child(2){width:83%;height:83%;border-color:#a48c5b35}.rings i:nth-child(3){width:64%;height:64%;border-style:dotted;animation:spin 70s linear infinite reverse}.rings i:nth-child(4){width:46%;height:46%;border-color:#a48c5b24}.rings:after,.rings:before{content:"";position:absolute;height:1px;width:100%;background:linear-gradient(90deg,transparent,#a48c5b45,transparent);transform:rotate(60deg)}.rings:after{transform:rotate(-60deg)}.phrase{position:absolute;top:43%;left:50%;width:95%;margin:0;display:flex;flex-direction:column;align-items:center;gap:.16em;transform:translate(-50%,-50%) translateY(calc(var(--scroll)*-80px));font-family:Cinzel,Georgia,serif;font-weight:400;font-size:clamp(1.55rem,5.4vw,5.4rem);letter-spacing:.21em;text-align:center;text-shadow:0 2px 25px #000,0 0 40px #000;line-height:1.38;white-space:nowrap}.phrase span{opacity:0;animation:reveal 2s ease forwards}.phrase span:nth-child(2){animation-delay:.45s}.scroll-sigil{position:absolute;top:calc(100svh - 105px);height:55px;width:1px;background:#baa6784a}.scroll-sigil span{display:block;width:1px;height:18px;background:var(--gold);animation:drip 2.5s ease-in-out infinite}.scene-two{height:155svh;background:radial-gradient(ellipse at 50% 50%,#202019,#080909 50%,#030405 74%)}.tunnel{position:absolute;width:min(92vw,850px);aspect-ratio:1;border-radius:50%;border:1px solid #8c78502c;box-shadow:0 0 0 24px #ad916507,0 0 0 68px #ad916506,0 0 0 130px #ad916504,0 0 130px #aa8b4c12;transform:scale(calc(.35 + var(--scroll)*1.55)) rotate(calc(var(--scroll)*125deg));transition:transform .08s linear}.tunnel:before,.tunnel:after{content:"";position:absolute;inset:9%;border:1px dashed #a58c5b55;border-radius:50%}.tunnel:after{inset:25%;border-style:solid;border-color:#a58c5b30}.tunnel-core{position:absolute;inset:40%;background:#050607;border-radius:50%;box-shadow:0 0 80px 55px #000}.echo{font-family:Cinzel,Georgia,serif;letter-spacing:.25em;font-size:clamp(.9rem,2.2vw,1.7rem);text-align:center;padding:2rem;opacity:clamp(0,calc((var(--scroll) - .18)*2),.7);text-shadow:0 0 25px #000}.scene-three{height:110svh;background:radial-gradient(ellipse at 50% 46%,#161811,#050607 56%)}.eclipse{position:absolute;width:min(70vw,560px);aspect-ratio:1;border-radius:50%;background:#030404;box-shadow:0 0 30px #bea56b28,0 0 75px 7px #b69d5130,0 0 200px 35px #98804a12}.end-phrase{font-family:Cinzel,Georgia,serif;font-size:clamp(1.3rem,3.2vw,3.3rem);letter-spacing:.21em;text-align:center;line-height:1.7;text-shadow:0 0 30px #000;transform:translateY(calc((1 - var(--scroll))*30px))}.grain{position:fixed;inset:-30%;z-index:20;pointer-events:none;opacity:.11;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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");animation:noise .25s steps(3) infinite}.progress{position:fixed;top:0;left:0;width:100%;height:1px;transform-origin:left;transform:scaleX(var(--scroll));background:var(--gold);z-index:30}#dust{position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;opacity:.65}@keyframes reveal{from{opacity:0;filter:blur(15px);transform:translateY(24px);letter-spacing:.32em}to{opacity:1;filter:blur(0);transform:translateY(0);letter-spacing:.21em}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes drip{0%{transform:translateY(0);opacity:0}40%{opacity:1}100%{transform:translateY(37px);opacity:0}}@keyframes noise{to{transform:translate(3%,2%)}}@media(max-width:600px){.phrase{font-size:clamp(1.15rem,6vw,2rem);letter-spacing:.12em}.phrase span{animation-name:revealMobile}.rings{width:94vw;top:calc(43% - 47vw)}.halo{width:100vw;top:calc(43% - 50vw)}.end-phrase{letter-spacing:.12em}}@keyframes revealMobile{from{opacity:0;filter:blur(12px);transform:translateY(20px)}to{opacity:1;filter:blur(0);transform:translateY(0)}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.phrase span{opacity:1}}