:root { color-scheme: light; background: #aaa9a5; }
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { overflow: hidden; }
.scene {
  position: relative;
  width: 100%; height: 100svh; min-height: 280px;
  overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse at 50% 60%, #b7b6b2 0%, #aaa9a5 60%, #989793 100%);
}
#weather { position: absolute; inset: 0; width: 100%; height: 100%; }
.grain {
  pointer-events: none; position: absolute; inset: 0; z-index: 1; opacity: .095;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.75' d='M0 0h200v200H0z'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.title {
  position: absolute; z-index: 2; top: 50%; left: 50%;
  transform: translate(-50%, -50%); margin: 0;
  padding: 16px; white-space: nowrap; color: #20211f;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(29px, 3.2vw, 46px); font-weight: 400;
  line-height: 1.2; letter-spacing: -.055em;
  opacity: 0; animation: arrive 3.2s ease 1.1s forwards;
}
@keyframes arrive { from { opacity: 0; filter: blur(4px); } to { opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) { .title { animation: none; opacity: 1; } }
/* Color world: glass planes over a moving spectrum, with no external assets. */
button { font: inherit; }
.title { z-index: 5; padding: 0; }
#enter { position: relative; display: block; border: 0; padding: 16px; background: transparent; color: inherit; letter-spacing: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#enter:focus-visible { outline: 1px solid currentColor; outline-offset: 12px; border-radius: 3px; }
.letters { position: relative; display: block; }
.glow { position: absolute; inset: 16px; color: transparent; background: linear-gradient(100deg,#ff3983,#ffaf53,#ffeea1,#5fffc8,#3dbbff,#a15cff,#ff3983); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; filter: blur(8px); opacity: 0; }
[data-phase="charging"] .glow { animation: awaken 1.7s ease-in forwards, chroma 1s linear infinite; }
[data-phase="charging"] .letters { animation: tremble .105s linear infinite, illuminate 1.7s ease-in forwards; }
[data-phase="charging"] #enter { cursor: default; }
@keyframes awaken { 0% { opacity: 0; filter: blur(5px); transform: scale(1); } 45% { opacity: .7; } 100% { opacity: 1; filter: blur(14px); transform: scale(1.19,1.5); } }
@keyframes chroma { to { background-position: 250% 0; } }
@keyframes illuminate { 0%,25% { color:#20211f; text-shadow:none; } 100% { color:#fff9ff; text-shadow: -2px 0 8px #f67cff,2px 0 12px #8cffff,0 0 28px white; } }
@keyframes tremble { 0%,100% { transform:translate(0,0) rotate(0); } 25% { transform:translate(-1px,1px) rotate(-.25deg); } 50% { transform:translate(1.2px,-.7px) rotate(.2deg); } 75% { transform:translate(-.8px,-1px); } }
#weather { z-index: 1; transition: opacity 1.2s ease; }
.grain { z-index: 3; }
#burst { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6; }
.prism-world { position:absolute; inset:0; overflow:hidden; background:#c4bcf4; opacity:0; transition:opacity 1.2s ease; }
.spectrum { position:absolute; inset:-25%; background: radial-gradient(ellipse at 18% 35%,#ff7db4 0%,transparent 43%), radial-gradient(ellipse at 78% 26%,#73f4f2 0%,transparent 42%),radial-gradient(ellipse at 68% 82%,#ffbd76 0%,transparent 42%),conic-gradient(from 35deg at 50% 50%,#c6d9ff,#8f95fa,#f5a6d9,#ffd6a3,#d9ffc5,#91e7ec,#c6d9ff); filter: saturate(1.25); animation: drift 24s ease-in-out infinite alternate; }
.glass { position:absolute; inset:-25%; transform-origin:center; border:1px solid #ffffff7a; background:linear-gradient(110deg,#ffffff00 20%,#ffffff70 49.5%,#ffffffb8 50%,#a7e7ff12 50.3%,#a375ff20 70%); box-shadow:inset 1px 0 20px #fff8; }
.glass-one { clip-path:polygon(0 0,54% 0,77% 100%,35% 100%); transform:rotate(-22deg); backdrop-filter: hue-rotate(40deg); }
.glass-two { clip-path:polygon(48% 0,100% 0,57% 100%,21% 100%); transform:rotate(18deg); background:linear-gradient(115deg,#ffb8e700 25%,#fff8 48%,#ffffffcf 48.2%,#7b8cff40 49%,#ffffff08 75%); backdrop-filter: hue-rotate(-30deg); }
.glass-three { clip-path:polygon(0 62%,100% 26%,100% 42%,0 89%); background:linear-gradient(160deg,#fff0 30%,#ffffffab 49%,#bb93ff36 51%,#faffff76 76%); backdrop-filter: hue-rotate(75deg); }
.glass-four { clip-path:polygon(0 12%,100% 76%,100% 100%,0 35%); background:linear-gradient(28deg,#ffa3cb36,#fff2 40%,#fff9 50%,#fff0 51%); mix-blend-mode:soft-light; }
.caustic { position:absolute; width:160%; height:24%; left:-30%; top:45%; background:linear-gradient(180deg,transparent, #fff0 36%,#fff8 48%,#fff 50%,#a2eaff60 52%,transparent 65%); filter:blur(3px); mix-blend-mode:soft-light; transform:rotate(-40deg); }
.caustic-two { transform:rotate(33deg); top:30%; opacity:.65; }
@keyframes drift { from { transform:rotate(-8deg) scale(1); } to { transform:rotate(9deg) scale(1.12) translate(2%,-2%); } }
.landing { position:absolute; z-index:4; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; font-family:'Helvetica Neue',Helvetica,Arial,sans-serif; color:#242137; opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity 1.7s ease,transform 1.7s ease,visibility 0s 1.7s; }
.landing::before { content:''; position:absolute; width:min(75vw,760px); height:280px; background:radial-gradient(ellipse,#ffffff55,transparent 68%); pointer-events:none; }
.landing h2 { position:relative; font-size:clamp(48px,7.6vw,112px); font-weight:400; line-height:1.1; letter-spacing:-.065em; margin:0 20px 36px; text-shadow:0 1px 14px #ffffff60; outline:none; }
.landing nav { display:flex; gap:clamp(36px,5vw,80px); }
.landing nav button { color:inherit; background:transparent; border:0; padding:12px 0; font-size:clamp(16px,1.5vw,20px); letter-spacing:-.025em; cursor:pointer; position:relative; }
.landing nav button::after { content:''; height:1px; position:absolute; bottom:5px; left:0; right:0; background:currentColor; transform:scaleX(0); transition:transform .25s; }
.landing nav button:hover::after,.landing nav button:focus-visible::after { transform:scaleX(1); }
[data-phase="burst"] .title,[data-phase="color"] .title { visibility:hidden; }
[data-phase="burst"] #weather,[data-phase="color"] #weather { opacity:0; }
[data-phase="burst"] .prism-world,[data-phase="color"] .prism-world { opacity:1; }
[data-phase="color"] .landing { opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; }
dialog { border:1px solid #fffc; border-radius:20px; background:#f7f0f6db; backdrop-filter:blur(22px); color:#242137; max-width:320px; padding:42px 32px 28px; font:18px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif; text-align:center; box-shadow:0 20px 80px #30233a33; }
dialog::backdrop { background:#34243922; backdrop-filter:blur(8px); }
.close { position:absolute; right:12px; top:6px; border:0; background:none; color:inherit; font-size:28px; cursor:pointer; }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } .title { opacity:1; } }