/* style.css */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--color-bg, #000); width: 100vw; height: 100vh; overflow: hidden; font-family: sans-serif; color: white; }
.scene { position: relative; width: 100%; height: 100%; touch-action: none; user-select: none; background-color: var(--color-bg); perspective: 1000px; overflow: hidden;}

/* --- EXISTING COSMIC BURST STYLES --- */
.sky { position: absolute; inset: 0; background: radial-gradient(ellipse at bottom, var(--color-sky-light), var(--color-sky-dark)); opacity: 0; transform: scale(0.01); transform-origin: center center; pointer-events: none; overflow: hidden; }
.scene.unlocked .sky { opacity: 1; transform: scale(1); transition: opacity var(--burst-duration) ease-out, transform var(--burst-duration) cubic-bezier(0.1, 0.9, 0.2, 1); pointer-events: auto; }

/* THE LIVING WORLD CANVAS (300vw x 300vh) */
.sky-layer { position: absolute; width: 300vw; height: 300vh; left: -100vw; top: -100vh; will-change: transform; }
.sky-orbit-container { position: absolute; top: 50%; left: 50%; width: 300vmax; height: 300vmax; transform: translate(-50%, -50%) rotate(0deg); animation: cosmic-orbit var(--orbit-duration) linear infinite; pointer-events: none; }
@keyframes cosmic-orbit { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }

.nebula { position: absolute; inset: 0; background: radial-gradient(circle at 30% 40%, var(--color-nebula), transparent 50%), radial-gradient(circle at 70% 60%, var(--color-nebula), transparent 50%); opacity: 0.8; pointer-events: none; }
.stars-layer { position: absolute; inset: 0; pointer-events: none; }
.star { position: absolute; background-color: #ffffff; border-radius: 50%; box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.2); animation: twinkle linear infinite; }
@keyframes twinkle { 0%, 100% { opacity: 0.1; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.1); } }

/* CINEMATIC MORPH MESSAGE */
.morph-message { position: fixed; top: 50%; left: 50%; width: 90vw; transform: translate(-50%, -50%); color: rgba(255, 255, 255, 0.95); font-family: serif; font-size: clamp(1.2rem, 4vw, 1.8rem); text-align: center; letter-spacing: 2px; line-height: 1.4; pointer-events: none; z-index: 100; opacity: 0; filter: blur(20px); }
.morph-message.show { animation: morph-blur-anim 5s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes morph-blur-anim { 0% { opacity: 0; filter: blur(20px); transform: translate(-50%, -50%) scale(1.1); } 20% { opacity: 1; filter: blur(0px); transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; filter: blur(0px); transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; filter: blur(15px); transform: translate(-50%, -50%) scale(0.95); } }

/* LIVING MOON */
.moon-wrapper { position: absolute; width: var(--moon-size); height: var(--moon-size); opacity: 0; pointer-events: none; animation: moon-drift 120s ease-in-out infinite alternate; }
.scene.unlocked .moon-wrapper { opacity: 1; transition: opacity 4s ease-out 1.5s; }
.moon-wrapper.glow { filter: brightness(1.5) drop-shadow(0 0 40px rgba(255,255,255,0.6)); }
.moon-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 15px rgba(252, 253, 254, 0.8)); }
@keyframes moon-drift { 0% { margin-top: 0; margin-left: 0; transform: scale(1); } 100% { margin-top: 5vh; margin-left: -5vw; transform: scale(1.05); } }

/* Interaction Singularity */
.interactive-layer { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 10; }
.circle-container { position: relative; width: 80px; height: 80px; cursor: pointer; display: flex; justify-content: center; align-items: center; transform: scale(calc(1 + (var(--charge) * 0.4))); transition: transform 0.1s linear, filter 0.1s linear; }
.breathing-circle { width: 25px; height: 25px; background-color: var(--color-glow); border-radius: 50%; box-shadow: 0 0 15px 2px rgba(255, 255, 255, 0.8), 0 0 40px 10px rgba(255, 255, 255, 0.3); animation: breathe 4s ease-in-out infinite; filter: brightness(calc(1 + (var(--charge) * 1.5))); }
.scene.charging .breathing-circle { animation-play-state: paused; }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 25px 5px rgba(255, 255, 255, 0.9), 0 0 60px 20px rgba(255, 255, 255, 0.4); } }
.charge-ring { position: absolute; inset: -20px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); transform: scale(calc(0.5 + (var(--charge) * 0.5))); opacity: var(--charge); box-shadow: 0 0 20px rgba(255, 255, 255, 0.5); pointer-events: none; }
.scene.imploding .circle-container { transform: scale(0.01) !important; filter: brightness(10) blur(2px) !important; transition: transform var(--implosion-delay) cubic-bezier(0.5, 0, 0.1, 1), filter var(--implosion-delay) ease-in !important; }
.scene.unlocked .interactive-layer { opacity: 0; pointer-events: none; transition: opacity 0.2s; }
/* Add inside the Interaction Singularity section, right after .scene.unlocked .interactive-layer { ... } */
.hold-cta { position: absolute; top: calc(50% + 70px); left: 50%; transform: translateX(-50%); font-family: 'Spectral', 'Georgia', serif; font-size: 0.9rem; letter-spacing: 3px; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); pointer-events: none; transition: opacity 0.4s ease; animation: hold-pulse 2.5s infinite ease-in-out; }
.scene.charging .hold-cta, .scene.imploding .hold-cta, .scene.unlocked .hold-cta { opacity: 0; animation: none; }
@keyframes hold-pulse { 0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); } 50% { opacity: 0.9; transform: translateX(-50%) scale(1.05); text-shadow: 0 0 10px rgba(255, 255, 255, 0.4); } }

/* Update the Global Reduced Motion block at the bottom of the file to include .hold-cta */
@media (prefers-reduced-motion: reduce) { 
    .breathing-circle, .star, .sky-orbit-container, .hold-cta { animation: none !important; } 
    .sky { transition-duration: 1s; } 
}


/* Burst Particles */
.burst-container { position: absolute; inset: 0; pointer-events: none; z-index: 15; overflow: hidden; }
.burst-particle { position: absolute; top: 50%; left: 50%; background-color: #ffffff; border-radius: 50%; transform: translate(-50%, -50%) scale(1); opacity: var(--start-opacity); box-shadow: 0 0 2px rgba(255,255,255,0.8); animation: particle-fly var(--fly-duration) cubic-bezier(0.1, 0.9, 0.2, 1) forwards; }
@keyframes particle-fly { 0% { transform: translate(-50%, -50%) scale(1); opacity: var(--start-opacity); } 100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; } }
.shockwave-ring { position: absolute; top: 50%; left: 50%; border: 3px solid rgba(255, 255, 255, 0.8); border-radius: 50%; transform: translate(-50%, -50%) scale(0); opacity: 1; box-shadow: 0 0 30px var(--color-glow), inset 0 0 30px var(--color-glow); animation: expand-ring 1.5s cubic-bezier(0.1, 0.8, 0.2, 1) forwards; }
@keyframes expand-ring { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: 4px; } 100% { transform: translate(-50%, -50%) scale(150vw); opacity: 0; border-width: 0px; } }
.core-bloom { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--color-glow); transform: translate(-50%, -50%) scale(0); filter: blur(30px); animation: expand-bloom 3s cubic-bezier(0.1, 0.9, 0.3, 1) forwards; }
@keyframes expand-bloom { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(20); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(80); opacity: 0; } }

/* Global Reduced Motion for Base Elements */
@media (prefers-reduced-motion: reduce) { 
    .breathing-circle, .star, .sky-orbit-container { animation: none !important; } 
    .sky { transition-duration: 1s; } 
}