@import "https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&display=swap";
:root{--gold-primary:#d4af37;--gold-light:#f4e4ba;--gold-dark:#8b6914;--purple-mystic:#9b4dca;--cyan-glow:#00d4ff;--space-dark:#050510;--space-mid:#0a0a1a}*{box-sizing:border-box;margin:0;padding:0}.main{background:radial-gradient(#0d0d1a 0%,#030308 100%);justify-content:center;align-items:center;min-height:100vh;font-family:Rajdhani,sans-serif;display:flex;position:relative;overflow:hidden}.stars{background-image:radial-gradient(1px 1px at 20px 30px,#fffc,#0000),radial-gradient(1.5px 1.5px at 40px 70px,#fff9,#0000),radial-gradient(1px 1px at 90px 40px,#ffffffb3,#0000),radial-gradient(1.2px 1.2px at 130px 80px,#ffffff80,#0000),radial-gradient(1px 1px at 160px 120px,#ffffffe6,#0000),radial-gradient(1.5px 1.5px at 200px 50px,#fff6,#0000),radial-gradient(1px 1px at 250px 160px,#ffffffb3,#0000),radial-gradient(1.3px 1.3px at 300px 90px,#fff9,#0000),radial-gradient(1px 1px at 350px 200px,#fffc,#0000),radial-gradient(1.5px 1.5px at 400px 150px,#ffffff80,#0000),radial-gradient(1px 1px at 450px 250px,#ffffffe6,#0000),radial-gradient(1.2px 1.2px at 500px 100px,#fff9,#0000),radial-gradient(1px 1px at 550px 300px,#ffffffb3,#0000),radial-gradient(1.4px 1.4px at 600px 180px,#ffffff80,#0000),radial-gradient(1px 1px at 650px 220px,#fffc,#0000);background-size:700px 400px;animation:60s linear infinite starfield;position:absolute;inset:0}@keyframes starfield{0%{background-position:0 0}to{background-position:700px 400px}}.nebula{background:radial-gradient(at 20% 30%,#9b4dca26 0%,#0000 50%),radial-gradient(at 80% 70%,#00d4ff1a 0%,#0000 50%),radial-gradient(at 60% 20%,#d4af3714 0%,#0000 40%);animation:15s ease-in-out infinite nebulaPulse;position:absolute;inset:0}@keyframes nebulaPulse{0%,to{opacity:.6}50%{opacity:1}}.particles{position:absolute;inset:0;overflow:hidden}.particles:before,.particles:after{content:"";background:var(--gold-primary);width:4px;height:4px;box-shadow:0 0 10px var(--gold-primary),0 0 20px var(--gold-light),100px 100px 0 2px var(--cyan-glow),200px -50px 0 1px var(--purple-mystic),-100px 200px 0 3px var(--gold-primary),150px 300px 0 2px var(--cyan-glow),-200px 100px 0 1px var(--gold-light);border-radius:50%;animation:20s linear infinite particleFloat;position:absolute}.particles:after{animation-direction:reverse;animation-delay:-10s}@keyframes particleFloat{0%{opacity:0;transform:translateY(100vh)rotate(0)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:translateY(-100vh)rotate(720deg)}}.content{z-index:10;text-align:center;padding:2rem;position:relative}.labelContainer{margin-bottom:1.5rem}.label{letter-spacing:.5em;color:var(--gold-primary);text-transform:uppercase;background:linear-gradient(90deg,#0000,#d4af371a,#0000);border:1px solid #d4af374d;border-radius:2px;padding:.5rem 1.5rem;font-family:Orbitron,sans-serif;font-size:.75rem;font-weight:500;animation:3s ease-in-out infinite labelGlow;display:inline-block}@keyframes labelGlow{0%,to{border-color:#d4af374d;box-shadow:0 0 10px #d4af371a}50%{border-color:#d4af3799;box-shadow:0 0 20px #d4af374d}}.portalContainer{width:200px;height:200px;margin:0 auto 3rem;position:relative}.portalRing{border:2px solid #0000;border-radius:50%;position:absolute}.ring1{border-color:var(--gold-primary);border-top-color:#0000;animation:8s linear infinite ringSpin;inset:0;box-shadow:0 0 20px #d4af3780,inset 0 0 20px #d4af3733}.ring2{border-color:var(--purple-mystic);border-bottom-color:#0000;animation:12s linear infinite reverse ringSpin;inset:15px;box-shadow:0 0 20px #9b4dca66,inset 0 0 15px #9b4dca33}.ring3{border-color:var(--cyan-glow);border-left-color:#0000;animation:16s linear infinite ringSpin;inset:30px;box-shadow:0 0 15px #00d4ff4d,inset 0 0 10px #00d4ff33}@keyframes ringSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.portalCore{background:radial-gradient(circle,#d4af37cc 0%,#9b4dca80 40%,#00d4ff4d 70%,#0000 100%);border-radius:50%;width:80px;height:80px;animation:4s ease-in-out infinite corePulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes corePulse{0%,to{transform:translate(-50%,-50%)scale(1);box-shadow:0 0 40px #d4af3780}50%{transform:translate(-50%,-50%)scale(1.1);box-shadow:0 0 60px #d4af37cc}}.portalGlow{background:radial-gradient(circle,#d4af3733 0%,#9b4dca1a 30%,#0000 70%);border-radius:50%;animation:4s ease-in-out infinite glowExpand;position:absolute;inset:-30px}@keyframes glowExpand{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.title{letter-spacing:.15em;margin-bottom:1rem;font-family:Orbitron,sans-serif;font-size:clamp(2.5rem,8vw,5rem);font-weight:900;position:relative}.titleInner{background:linear-gradient(180deg,var(--gold-light)0%,var(--gold-primary)30%,var(--gold-dark)70%,var(--gold-primary)100%);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px #d4af3799)drop-shadow(0 0 60px #d4af374d);-webkit-background-clip:text;background-clip:text;animation:3s ease-in-out infinite titleShimmer;display:inline-block}@keyframes titleShimmer{0%,to{filter:drop-shadow(0 0 30px #d4af3799)drop-shadow(0 0 60px #d4af374d)}50%{filter:drop-shadow(0 0 40px #d4af37cc)drop-shadow(0 0 80px #d4af3780)drop-shadow(0 0 100px #9b4dca4d)}}.subtitle{margin-bottom:2rem}.subtitleText{letter-spacing:.25em;color:#fff9;text-transform:uppercase;font-family:Rajdhani,sans-serif;font-size:1.1rem;font-weight:400}.energyField{pointer-events:none;position:absolute;inset:0}.energyOrb{background:var(--gold-light);width:8px;height:8px;box-shadow:0 0 10px var(--gold-primary),0 0 20px var(--gold-primary),0 0 40px var(--gold-light);border-radius:50%;animation:15s linear infinite energyOrbit;position:absolute}.orb2{background:var(--cyan-glow);box-shadow:0 0 10px var(--cyan-glow),0 0 20px var(--cyan-glow),0 0 40px #00d4ff80;animation-duration:20s;animation-delay:-5s}.orb3{background:var(--purple-mystic);box-shadow:0 0 10px var(--purple-mystic),0 0 20px var(--purple-mystic),0 0 40px #9b4dca80;animation-duration:25s;animation-delay:-10s}@keyframes energyOrbit{0%{opacity:0;transform:rotate(0)translate(150px)rotate(0)}10%{opacity:1}90%{opacity:1}to{opacity:0;transform:rotate(360deg)translate(150px)rotate(-360deg)}}@media (max-width:768px){.portalContainer{width:150px;height:150px;margin-bottom:2rem}.ring1{inset:0}.ring2{inset:12px}.ring3{inset:24px}.portalCore{width:60px;height:60px}.title{letter-spacing:.1em}.subtitleText{letter-spacing:.15em;font-size:.9rem}.label{letter-spacing:.3em;font-size:.65rem}}