:root{color-scheme:dark;background:#08080a}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
main{height:100svh;position:relative;overflow:hidden;isolation:isolate;background:#08080a}

.reveal{position:absolute;left:50%;top:50%;width:max(110vw,110svh);height:max(160vh,145vw);transform:translate(-50%,-50%) rotate(19deg);isolation:isolate;pointer-events:none}

.reveal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.2) saturate(.85);animation:dawn 3s ease-out both,ken 24s cubic-bezier(.19,1,.22,1) both,driftScale 44s ease-in-out 24s infinite}

.color{position:absolute;inset:0;background:linear-gradient(90deg,#07090d 6%,#151f42 36%,#825edf 48.8%,#edcaff 49.9%,#df98ef 50.7%,#4c2446 54%,#09080b 86%);mix-blend-mode:color;opacity:.55;animation:colorIn 4s ease-out 2.2s both,paletteWash 48s ease-in-out 6s infinite;will-change:opacity}

.spill{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#7f43ec8a,transparent 48%);mix-blend-mode:screen;opacity:.38;animation:spillIn 4s ease-out 2.5s both,presence 9s ease-in-out 6.5s infinite,paletteSpill 52s ease-in-out 6s infinite;will-change:opacity,transform}

.line{position:absolute;top:0;bottom:0;left:49.15%;width:1.7%;background:linear-gradient(180deg,#4c2251 0%,#db72ff 30%,#f8ddff 48%,#84e0ff 64%,#153146 88%);background-size:100% 250%;background-position:50% 55%;mix-blend-mode:screen;box-shadow:0 0 14px #b26bfe55,0 0 64px #8e68ff28;mask-image:linear-gradient(transparent 12%,#000 30%,#000 70%,transparent 88%);animation:beamIn 3.5s cubic-bezier(.4,0,.2,1) 1.2s both,paletteSlow 42s ease-in-out 4.7s infinite;will-change:opacity}

.shadow{position:absolute;inset:0;background:linear-gradient(90deg,#0009,transparent 38%,transparent 53%,#0009),linear-gradient(#000b,transparent 35%,transparent 62%,#000b)}

.grain{position:absolute;inset:-10%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");background-size:150px;mix-blend-mode:overlay;opacity:.04;animation:grainIn 2.5s ease-out 3.4s both,grainShift 1.6s steps(6) infinite;will-change:transform}

.frame{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 10%,#08080a55 58%,#08080af2 100%);pointer-events:none}

button{position:absolute;bottom:24px;right:24px;width:40px;height:40px;display:grid;place-items:center;border:1px solid #ffffff14;border-radius:50%;color:#cabfe099;background:#0a0a0c66;backdrop-filter:blur(12px);cursor:pointer;z-index:3;transition:color .35s,border-color .35s,background .35s;animation:uiIn 1.3s cubic-bezier(.22,1,.36,1) 6.8s both}
button:hover,button:focus-visible{color:#fff;border-color:#cbb6e488;background:#ffffff10}
button:focus-visible{outline:1px solid #c9b6e4;outline-offset:2px}
svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}

.paused *{animation-play-state:paused!important}

@keyframes dawn{from{filter:brightness(.015) saturate(.4)}to{filter:brightness(.2) saturate(.85)}}
@keyframes ken{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes driftScale{0%,100%{transform:scale(1)}50%{transform:scale(1.006)}}
@keyframes beamIn{from{opacity:0}to{opacity:1}}
@keyframes paletteSlow{0%,100%{filter:hue-rotate(-8deg) brightness(1)}50%{filter:hue-rotate(14deg) brightness(1.05)}}
@keyframes colorIn{from{opacity:0}to{opacity:.55}}
@keyframes paletteWash{0%,100%{filter:hue-rotate(6deg)}50%{filter:hue-rotate(28deg)}}
@keyframes spillIn{from{opacity:0;transform:scale(.98)}to{opacity:.38;transform:scale(1)}}
@keyframes presence{0%,100%{opacity:.38;transform:scale(1)}50%{opacity:.46;transform:scale(1.008)}}
@keyframes paletteSpill{0%,100%{filter:hue-rotate(-14deg)}50%{filter:hue-rotate(10deg)}}
@keyframes grainIn{from{opacity:0}to{opacity:.04}}
@keyframes grainShift{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,2%)}}
@keyframes uiIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

@media(max-width:600px){
.reveal{width:160vw;height:140svh;transform:translate(-50%,-50%) rotate(13deg)}
.line{width:1.5%;left:49.25%}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important}
button{display:none}
}