@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500&display=swap');
:root{--mouse-x:50vw;--mouse-y:50vh;--velocity:0;--ivory:#eee5d5}
body{font-family:"Cormorant Garamond",Georgia,serif;cursor:crosshair}
.scene{outline:none}.scene-one:focus-visible{box-shadow:inset 0 0 0 1px #c8ae7355,inset 0 0 130px #bfa15a10}
.scene:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(circle 190px at var(--mouse-x) var(--mouse-y),#d5b87210,transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .7s}.scene:hover:after{opacity:1}
.halo{transform:translate3d(calc(var(--pointer-x)*-18px),calc(var(--pointer-y)*-18px),0) scale(calc(1 + var(--velocity)*.018));transition:filter .8s}.scene-one:hover .halo{filter:blur(7px)}
.rings{transform:translate(calc(var(--pointer-x)*10px),calc(var(--pointer-y)*10px)) rotate(calc(var(--scroll)*65deg));transition:filter .8s}.rings i{transition:border-color .8s,box-shadow .8s,scale .8s}.scene-one:hover .rings{filter:drop-shadow(0 0 15px #c3a86a24)}.scene-one:hover .rings i{border-color:#cbb27d91;box-shadow:0 0 35px #d4a86820,inset 0 0 28px #d4a86812}.scene-one:hover .rings i:nth-child(even){scale:1.025}
.phrase{font-family:Italiana,"Cormorant Garamond",serif;letter-spacing:.195em;gap:.08em}.phrase span{position:relative;transition:letter-spacing .9s cubic-bezier(.2,.8,.2,1),color .6s,text-shadow .6s}.phrase span:after{content:attr(data-text);position:absolute;inset:0;color:transparent;-webkit-text-stroke:1px #dec78b00;transform:translate(calc(var(--pointer-x)*7px),calc(var(--pointer-y)*7px));transition:-webkit-text-stroke-color .7s,filter .7s;filter:blur(3px);pointer-events:none}.phrase:hover span{letter-spacing:.235em;color:var(--ivory);text-shadow:0 0 18px #d0ad6040,0 3px 30px #000}.phrase:hover span:after{-webkit-text-stroke-color:#dec78b37;filter:blur(.2px)}
.scroll-sigil:before,.scroll-sigil:after{content:"";position:absolute;left:50%;top:-12px;width:7px;height:7px;border:1px solid #baa67870;transform:translateX(-50%) rotate(45deg);transition:transform .8s,box-shadow .8s}.scroll-sigil:after{width:19px;height:19px;top:-18px;border-color:#baa67835}.scroll-sigil:hover:before{transform:translateX(-50%) rotate(225deg);box-shadow:0 0 12px #d2b66a}.scroll-sigil:hover:after{transform:translateX(-50%) rotate(-135deg)}
.tunnel{transform:translate(calc(var(--pointer-x)*22px),calc(var(--pointer-y)*22px)) scale(calc(.35 + var(--scroll)*1.55)) rotate(calc(var(--scroll)*125deg));transition:filter .7s}.tunnel:before,.tunnel:after{transition:inset 1s cubic-bezier(.2,.8,.2,1),border-color .6s}.tunnel-core{transition:inset .9s,box-shadow .9s}.scene-two:hover .tunnel{filter:drop-shadow(0 0 24px #bea15f22)}.scene-two:hover .tunnel:before{inset:7%;border-color:#c5aa6f7a}.scene-two:hover .tunnel:after{inset:28%}.scene-two:hover .tunnel-core{inset:42%;box-shadow:0 0 95px 65px #000}
.echo,.end-phrase{font-family:Italiana,"Cormorant Garamond",serif;transition:letter-spacing 1s,color .8s}.echo:hover{letter-spacing:.36em;color:#f0e4cc}.eclipse{transform:translate(calc(var(--pointer-x)*-18px),calc(var(--pointer-y)*-18px));transition:box-shadow 1.2s,scale 1.2s}.eclipse:after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:conic-gradient(from calc(var(--scroll)*360deg),transparent 0 38%,#d8bf7a 49%,transparent 55%);z-index:-1;filter:blur(9px);opacity:.25;transition:opacity .8s}.scene-three:hover .eclipse{scale:1.025;box-shadow:0 0 25px #f0d79148,0 0 95px 10px #b69d5140,0 0 220px 45px #98804a1c}.scene-three:hover .eclipse:after{opacity:.7}.end-phrase{transform:translate(calc(var(--pointer-x)*7px),calc(var(--pointer-y)*7px)) translateY(calc((1 - var(--scroll))*30px))}.end-phrase:hover{letter-spacing:.28em;color:#f5ead5}
.cursor-aura{position:fixed;left:0;top:0;width:54px;height:54px;margin:-27px 0 0 -27px;border:1px solid #d6bc7a5c;border-radius:50%;z-index:50;pointer-events:none;transform:translate3d(var(--mouse-x),var(--mouse-y),0) scale(calc(1 + var(--velocity)*.03));transition:width .35s,height .35s,margin .35s,border-color .35s,opacity .3s;mix-blend-mode:screen}.cursor-aura:before,.cursor-aura:after{content:"";position:absolute;left:50%;top:-7px;width:1px;height:68px;background:linear-gradient(transparent,#cbb1748f,transparent)}.cursor-aura:after{transform:rotate(90deg)}.cursor-aura i{position:absolute;inset:9px;border:1px dotted #cbb17470;border-radius:50%;animation:spin 8s linear infinite}.cursor-aura.is-hovering{width:82px;height:82px;margin:-41px 0 0 -41px;border-color:#e4ca858f}.progress{box-shadow:0 0 8px #c5a75c}
@media(pointer:coarse){body{cursor:auto}.cursor-aura{display:none}}@media(max-width:600px){.phrase:hover span{letter-spacing:.145em}.end-phrase:hover{letter-spacing:.15em}}@media(prefers-reduced-motion:reduce){.cursor-aura{display:none}}

/* Full-page occult composition */
main:before{content:"";position:absolute;z-index:4;left:50%;top:0;bottom:0;width:1px;pointer-events:none;background:linear-gradient(transparent 1%,#bda46c20 8%,#bda46c08 48%,#bda46c24 92%,transparent 99%)}
.ritual-frame{position:absolute;inset:clamp(22px,4vw,64px);z-index:3;pointer-events:none;border:1px solid #bda46c13;clip-path:polygon(0 0,26% 0,26% 1px,74% 1px,74% 0,100% 0,100% 100%,74% 100%,74% calc(100% - 1px),26% calc(100% - 1px),26% 100%,0 100%)}
.ritual-frame i{position:absolute;width:34px;height:34px;border-color:#bda46c55;border-style:solid}.ritual-frame i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.ritual-frame i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}.ritual-frame i:nth-child(3){right:0;bottom:0;border-width:0 1px 1px 0}.ritual-frame i:nth-child(4){left:0;bottom:0;border-width:0 0 1px 1px}.ritual-frame-end{inset:clamp(32px,6vw,90px)}
.triquetra{overflow:visible;pointer-events:none}.triquetra .knot{stroke:#c5aa6d;stroke-width:1;vector-effect:non-scaling-stroke}.triquetra-main{position:absolute;z-index:-1;top:43%;left:50%;width:min(54vw,480px);transform:translate(-50%,-50%) rotate(calc(var(--scroll)*-32deg)) scale(.82);opacity:.12;filter:drop-shadow(0 0 12px #d1b46a44);transition:opacity .9s,filter .9s,scale .9s}.scene-one:hover .triquetra-main{opacity:.38;filter:drop-shadow(0 0 16px #d8ba7080);scale:.9}.triquetra-main .knot{stroke-width:1.35}
.triquetra-ghost{position:absolute;width:min(38vw,390px);opacity:.07;filter:blur(.2px);transition:opacity 1s,transform 1.5s}.triquetra-left{left:-8%;top:14%;transform:rotate(-24deg)}.triquetra-right{right:-7%;bottom:8%;transform:rotate(21deg)}.scene:hover .triquetra-ghost{opacity:.2}.scene-two:hover .triquetra-left{transform:rotate(-18deg) translate(12px,-8px)}.scene-three:hover .triquetra-right{transform:rotate(15deg) translate(-12px,-8px)}
.glyph-field{position:absolute;inset:0;height:395svh;z-index:6;overflow:hidden;pointer-events:none;mix-blend-mode:screen}.glyph-field i{position:absolute;left:var(--x);top:var(--y);font-family:"Noto Sans Runic","Segoe UI Historic",serif;font-style:normal;font-size:var(--size);font-weight:300;color:#d6bd7d;opacity:0;text-shadow:0 0 9px #d8b663;transform:translate3d(0,var(--drift),0) rotate(var(--rot));animation:glyphPulse var(--duration) steps(1,end) var(--delay) infinite}.glyph-field i:nth-child(3n){filter:blur(.45px)}.glyph-field i:nth-child(4n){color:#e9ddbd;animation-timing-function:ease-in-out}
@keyframes glyphPulse{0%,11%,19%,46%,52%,78%,100%{opacity:0}12%,18%{opacity:.16}47%,51%{opacity:.46}79%,82%{opacity:.12}}
@media(max-width:600px){.ritual-frame{inset:18px}.triquetra-main{width:82vw}.triquetra-ghost{width:70vw;opacity:.05}.glyph-field{height:395svh}.glyph-field i{font-size:calc(var(--size)*.8)}}
@media(prefers-reduced-motion:reduce){.glyph-field i{animation:none;opacity:.12}.triquetra-main{transform:translate(-50%,-50%)}}

/* Monumental triquetra: intentionally cropped beyond the viewport */
.triquetra-main{width:145vmax;max-width:none;top:43%;transform:translate(-50%,-50%) rotate(calc(var(--scroll)*-18deg)) scale(1);opacity:.22;filter:drop-shadow(0 0 22px #d1b46a52)}
.triquetra-main .knot{stroke-width:5.5}
.scene-one:hover .triquetra-main{opacity:.48;filter:drop-shadow(0 0 32px #d8ba7090);scale:1.035}
@media(max-width:600px){.triquetra-main{width:165vmax}.triquetra-main .knot{stroke-width:4.5}}
@media(prefers-reduced-motion:reduce){.triquetra-main{transform:translate(-50%,-50%) scale(1)}}

/* Keep the monumental knot faint while it turns continuously */
.triquetra-main{opacity:.05;transform:translate(-50%,-50%) scale(1);animation:triquetraTurn 90s linear infinite}
.scene-one:hover .triquetra-main{opacity:.05}
@keyframes triquetraTurn{from{transform:translate(-50%,-50%) rotate(0deg) scale(1)}to{transform:translate(-50%,-50%) rotate(360deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.triquetra-main{animation:none}}

/* Display typography from the supplied Google Fonts families */
.phrase,.echo,.end-phrase{font-family:"Bebas Neue", "Cormorant Garamond", serif;font-weight:400;color:#fff9ed;text-shadow:0 0 18px #ead9b73b,0 2px 30px #000;-webkit-text-stroke:.35px currentColor}
.phrase span{font-weight:400}
.glyph-field i{font-family:"Noto Sans Marchen", "Noto Sans Runic", "Segoe UI Historic", serif}

/* Larger, brighter display lettering with tighter leading */
.phrase,.echo,.end-phrase{font-weight:700;color:#fffdf8;-webkit-text-stroke:1px currentColor;text-shadow:0 0 22px #fff4dc55,0 2px 30px #000;scale:1.3}
.phrase{line-height:1.02;gap:.015em}
.end-phrase{line-height:1.15}
.phrase span{font-weight:700}
.phrase:hover span,.echo:hover,.end-phrase:hover{color:#fff;text-shadow:0 0 28px #fff5df80,0 2px 30px #000}

/* Solid lettering */
.phrase,.echo,.end-phrase,.phrase span{background:none!important;background-image:none!important;background-clip:border-box!important;-webkit-background-clip:border-box!important;-webkit-text-fill-color:currentColor!important}
.phrase span:after{content:none!important}
.echo,.end-phrase{transform:none}
.phrase:hover span,.echo:hover,.end-phrase:hover{color:#fffdf7;text-shadow:0 0 24px #f3e5c66b,0 2px 30px #000}

/* Viewport-based title layer, independent from the long scene and canvas */
html{overflow-x:clip}
.title-stage{position:absolute;inset:0 auto auto 0;width:100vw;height:100svh;min-height:100svh;display:grid;place-items:center;z-index:10;pointer-events:none;overflow:clip}
.title-stage .phrase{position:relative;inset:auto;width:max-content;max-width:calc(100vw - 32px);margin:0;display:grid;place-items:center;gap:0;line-height:normal;text-align:center;white-space:normal;transform:none;translate:none;pointer-events:auto;transform-origin:center}
.phrase-motion{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:.86;translate:calc(var(--pointer-x)*-5px) calc(var(--pointer-y)*-5px + var(--scroll)*-80px)}
.title-stage .phrase-motion{opacity:1;animation:none}
.title-stage .phrase-motion>span{display:block;max-width:100%;white-space:nowrap}
@media(max-width:600px){.title-stage .phrase{font-size:clamp(1.15rem,6vw,2rem);letter-spacing:.12em;line-height:.82}.title-stage .phrase:hover span{letter-spacing:.145em}}