: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,#9e003a,#b45f18,#dce42d,#299a3d,#08776a,#416bde,#343aa0,#9e003a); 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(13px); transform: scale(1.28,1.65); } }
@keyframes chroma { to { background-position: 250% 0; } }
@keyframes illuminate { 0%,25% { color:#20211f; text-shadow:none; } 100% { color:#e1dfb8; text-shadow: -3px 1px 12px #9e003a,3px -1px 14px #416bde,0 0 20px #299a3d; } }
@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; }
.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; } }

/* White landing after the complete 4.2-second liquid-color burst. */
[data-phase="color"] { background:#fff; }
[data-phase="color"] .grain { display:none; }
[data-phase="color"] .landing { transition:none; }
.landing::before { display:none; }
.landing h2 { text-shadow:none; }
[data-phase="charging"] .glow { border-radius:45%; }

/* Shared saturated pigment, softened into a continuous liquid haze. */
#burst { filter:blur(clamp(16px,2.4vw,32px)) saturate(1.18); }
#enter::before { content:''; position:absolute; inset:12px 4px; border-radius:46% 54% 58% 42%; background:conic-gradient(from 30deg,#9e003a,#b45f18,#dce42d,#299a3d,#08776a,#416bde,#343aa0,#9e003a); filter:blur(18px) saturate(1.18); opacity:0; pointer-events:none; }
[data-phase="charging"] #enter::before { animation:liquid-charge 1.7s ease-in forwards; }
@keyframes liquid-charge { 0% { opacity:0; transform:scale(.65,.35) rotate(-8deg); } 40% { opacity:.35; transform:scale(.95,.7) rotate(5deg); border-radius:60% 40% 35% 65%; } 75% { opacity:.8; transform:scale(1.08,1.2) rotate(-4deg); } 100% { opacity:.95; transform:scale(1.18,1.65) rotate(3deg); border-radius:38% 62% 56% 44%; } }