:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{margin:0;height:100vh;overflow:hidden;background:#000;color:#fafafa}.movie-container{position:relative;width:100vw;height:100vh;overflow:hidden;background:#000}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;pointer-events:none;background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.7) 100%)}.film-grain{position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;z-index:55;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain .5s steps(4) infinite}@keyframes grain{0%,to{transform:translate(0)}25%{transform:translate(-5%,-5%)}50%{transform:translate(5%,5%)}75%{transform:translate(-5%,5%)}}.scene-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;transition:background 1.5s ease}.scene-bg.transitioning{opacity:0;transition:opacity 1.2s ease}.scene-content{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center}.scene-content.fade-in{animation:sceneFadeIn 1.5s ease forwards}.scene-content.fade-out{animation:sceneFadeOut 1.2s ease forwards}@keyframes sceneFadeIn{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes sceneFadeOut{0%{opacity:1}to{opacity:0}}.scene-text{position:absolute;bottom:15%;text-align:center;z-index:20}.scene-title{font-family:Georgia,serif;font-size:clamp(2rem,6vw,4.5rem);font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:#fff;margin-bottom:.5rem;animation:titleReveal 2s ease forwards;text-shadow:0 0 40px rgba(255,255,255,.3)}.scene-subtitle{font-family:Georgia,serif;font-size:clamp(.85rem,2vw,1.2rem);color:#fff9;font-style:italic;letter-spacing:.05em;animation:subtitleReveal 2.5s ease forwards;animation-delay:.5s;opacity:0}@keyframes titleReveal{0%{opacity:0;letter-spacing:.8em}to{opacity:1;letter-spacing:.3em}}@keyframes subtitleReveal{0%{opacity:0;transform:translateY(10px)}to{opacity:.6;transform:translateY(0)}}.star-field{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle 3s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.2}50%{opacity:1}}.spark-scene{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.spark-core{width:8px;height:8px;background:#fff;border-radius:50%;box-shadow:0 0 20px 10px #fffc,0 0 60px 30px #6496ff99,0 0 100px 50px #6464ff4d;animation:sparkPulse 2s ease-in-out infinite;z-index:5}@keyframes sparkPulse{0%,to{transform:scale(1);box-shadow:0 0 20px 10px #fffc,0 0 60px 30px #6496ff99}50%{transform:scale(1.5);box-shadow:0 0 30px 15px #ffffffe6,0 0 80px 40px #6496ffb3,0 0 120px 60px #5050ff66}}.spark-ring{position:absolute;border:1px solid rgba(100,150,255,.3);border-radius:50%;animation:ringExpand 4s ease-out infinite}.spark-ring-1{width:50px;height:50px;animation-delay:0s}.spark-ring-2{width:50px;height:50px;animation-delay:1.3s}.spark-ring-3{width:50px;height:50px;animation-delay:2.6s}@keyframes ringExpand{0%{transform:scale(0);opacity:1}to{transform:scale(12);opacity:0}}.nebula-scene{position:absolute;top:0;right:0;bottom:0;left:0}.nebula-cloud{position:absolute;border-radius:50%;filter:blur(60px);animation:nebulaFloat 8s ease-in-out infinite}.nebula-1{width:40vw;height:40vw;top:20%;left:10%;background:radial-gradient(circle,rgba(120,50,200,.4),transparent)}.nebula-2{width:35vw;height:35vw;top:40%;right:15%;background:radial-gradient(circle,rgba(50,100,220,.35),transparent);animation-delay:-2s}.nebula-3{width:30vw;height:30vw;bottom:10%;left:30%;background:radial-gradient(circle,rgba(200,50,100,.3),transparent);animation-delay:-4s}.nebula-4{width:25vw;height:25vw;top:10%;right:30%;background:radial-gradient(circle,rgba(50,200,150,.25),transparent);animation-delay:-6s}@keyframes nebulaFloat{0%,to{transform:translate(0) scale(1)}33%{transform:translate(20px,-15px) scale(1.05)}66%{transform:translate(-15px,10px) scale(.95)}}.planets-scene{position:absolute;top:0;right:0;bottom:0;left:0}.planet{position:absolute;border-radius:50%}.planet-1{width:120px;height:120px;top:30%;left:25%;background:radial-gradient(circle at 35% 35%,#c4956a,#8b5e3c 50%,#5a3825);box-shadow:inset -15px -5px 30px #00000080,0 0 40px #c896641a;animation:planetFloat 12s ease-in-out infinite}.planet-ring{position:absolute;width:200px;height:40px;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-15deg);border:2px solid rgba(200,180,150,.3);border-radius:50%}.planet-2{width:60px;height:60px;top:55%;right:25%;background:radial-gradient(circle at 35% 35%,#6aa5c4,#3a6b8a 50%,#1a3a4a);box-shadow:inset -8px -3px 15px #00000080,0 0 20px #6496c81a;animation:planetFloat 15s ease-in-out infinite reverse}.planet-3{width:30px;height:30px;top:20%;right:35%;background:radial-gradient(circle at 35% 35%,#d4a06a,#a07040);box-shadow:inset -4px -2px 8px #00000080;animation:planetFloat 10s ease-in-out infinite;animation-delay:-3s}@keyframes planetFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.earth-scene{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.earth{position:relative;width:200px;height:200px;border-radius:50%;overflow:hidden;box-shadow:0 0 60px #3264c84d,0 0 120px #3264c81a,inset -20px -5px 40px #0006;animation:earthFloat 20s ease-in-out infinite}.earth-atmosphere{position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:50%;border:2px solid rgba(100,180,255,.15);box-shadow:0 0 20px #64b4ff1a}.earth-surface{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(circle at 40% 35%,#2d8a4e 0%,transparent 30%),radial-gradient(circle at 65% 55%,#3a7a3a 0%,transparent 25%),radial-gradient(circle at 30% 65%,#2a6a3a 0%,transparent 20%),radial-gradient(circle at 50% 50%,#1a4a8a,#0a2a5a)}.earth-clouds{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(ellipse at 30% 40%,rgba(255,255,255,.25) 0%,transparent 25%),radial-gradient(ellipse at 70% 30%,rgba(255,255,255,.2) 0%,transparent 20%),radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.15) 0%,transparent 30%);animation:cloudsRotate 30s linear infinite}@keyframes earthFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}@keyframes cloudsRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.life-particle{position:absolute;width:3px;height:3px;background:#4ade80;border-radius:50%;box-shadow:0 0 6px #4ade80;animation:lifeFloat 3s ease-in-out infinite}@keyframes lifeFloat{0%,to{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-20px)}}.humanity-scene{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.telescope{position:relative;width:100px;height:100px;animation:telescopeSway 6s ease-in-out infinite}.telescope-body{position:absolute;bottom:20px;left:50%;transform:translate(-50%) rotate(-30deg);width:80px;height:16px;background:linear-gradient(to right,#666,#888,#666);border-radius:8px 4px 4px 8px;box-shadow:0 2px 10px #00000080}.telescope-lens{position:absolute;top:10px;left:50%;transform:translate(-50%) rotate(-30deg);width:28px;height:28px;background:radial-gradient(circle,#64b4ff4d,#64b4ff1a);border:2px solid #888;border-radius:50%;box-shadow:0 0 15px #64b4ff4d}@keyframes telescopeSway{0%,to{transform:rotate(0)}50%{transform:rotate(3deg)}}.thought-bubble{position:absolute;top:10%;display:flex;gap:8px}.thought-dot{width:8px;height:8px;background:#ffffff4d;border-radius:50%;animation:thoughtPulse 1.5s ease-in-out infinite}@keyframes thoughtPulse{0%,to{opacity:.2;transform:scale(.8)}50%{opacity:.8;transform:scale(1.2)}}.fade-scene{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.fade-glow{width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.15),transparent);animation:fadeGlow 5s ease-in-out infinite}@keyframes fadeGlow{0%,to{transform:scale(.8);opacity:.3}50%{transform:scale(1.5);opacity:.8}}.start-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0a0a12,#000);animation:startFadeIn 2s ease forwards}@keyframes startFadeIn{0%{opacity:0}to{opacity:1}}.start-content{text-align:center}.movie-title{font-family:Georgia,serif;font-size:clamp(3rem,10vw,7rem);font-weight:400;letter-spacing:.5em;text-transform:uppercase;color:#fff;margin-bottom:.5rem;text-shadow:0 0 60px rgba(255,255,255,.2);animation:titleGlow 3s ease-in-out infinite}@keyframes titleGlow{0%,to{text-shadow:0 0 60px rgba(255,255,255,.2)}50%{text-shadow:0 0 80px rgba(255,255,255,.4),0 0 120px rgba(100,150,255,.1)}}.movie-tagline{font-family:Georgia,serif;font-size:clamp(.9rem,2vw,1.2rem);color:#fff6;font-style:italic;margin-bottom:3rem}.play-button{display:inline-flex;align-items:center;gap:10px;background:transparent;color:#fffc;border:1px solid rgba(255,255,255,.2);padding:14px 36px;font-family:Georgia,serif;font-size:1rem;letter-spacing:.3em;cursor:pointer;transition:all .3s ease;border-radius:2px}.play-button:hover{background:#ffffff14;border-color:#fff6;color:#fff;box-shadow:0 0 30px #ffffff1a}.movie-hint{margin-top:2rem;font-size:.75rem;color:#fff3;letter-spacing:.1em}.end-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#000;animation:endFadeIn 3s ease forwards}@keyframes endFadeIn{0%{opacity:0}to{opacity:1}}.end-content{text-align:center}.end-text{font-family:Georgia,serif;font-size:clamp(1.5rem,5vw,3rem);letter-spacing:.5em;color:#fff9;margin-bottom:2rem}.replay-button{background:transparent;color:#ffffff80;border:1px solid rgba(255,255,255,.15);padding:10px 28px;font-family:Georgia,serif;font-size:.85rem;letter-spacing:.2em;cursor:pointer;transition:all .3s ease;border-radius:2px}.replay-button:hover{color:#fff;border-color:#fff6}.progress-bar{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff0d;z-index:60}.progress-fill{height:100%;background:#ffffff4d;width:0;animation-fill-mode:forwards}@keyframes progress{0%{width:0}to{width:100%}}.scene-counter{position:absolute;top:1.5rem;right:2rem;z-index:60;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;color:#ffffff40;letter-spacing:.15em}