@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600&family=Poppins:wght@300;400&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at top, #063459 0%, #010811 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Poppins", sans-serif;
    color: #d6ffff;
}

/* Aurora */
body::before {
    content:"";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(0,255,255,0.25), transparent 60%),
                radial-gradient(circle at 70% 80%, rgba(0,200,255,0.2), transparent 60%),
                radial-gradient(circle at 10% 90%, rgba(0,128,255,0.15), transparent 60%);
    mix-blend-mode: screen;
    filter: blur(32px);
    animation: auroraMove 15s infinite alternate ease-in-out;
}
@keyframes auroraMove { 0%{transform:translate(-5%,-5%)scale(1);}100%{transform:translate(5%,5%)scale(1.1);}}

/* Portal Intro */
#intro {
    position: fixed; inset: 0; background: black;
    display: flex; justify-content: center; align-items: center;
    z-index: 2000; animation: fadeOut 2s ease 4.2s forwards;
}
@keyframes fadeOut {100%{opacity:0; pointer-events:none;}}
.portal-circle {
    width:300px;height:300px;border-radius:50%;
    border:4px solid cyan;box-shadow:0 0 40px cyan,inset 0 0 60px cyan;
    animation:portalExpand 4s ease forwards;opacity:0;
}
@keyframes portalExpand{0%{opacity:1;transform:scale(.1);}90%{transform:scale(4);}100%{opacity:0;transform:scale(8);}}

/* Fog */
.layer1{animation:fogMove 60s linear infinite;}
.layer2{animation:fogMove 120s linear infinite reverse;opacity:.15;}
@keyframes fogMove{0%{transform:translateX(0);}100%{transform:translateX(-2000px);}}

/* Particle Canvas */
#particles{position:fixed;width:100%;height:100%;z-index:1;pointer-events:none;}

/* Content */
#content { position: relative; z-index: 5; text-align: center;
opacity:0; animation:contentFade 2s ease 5s forwards;}
@keyframes contentFade {100%{opacity:1;transform:scale(1.02);}}

.logo{
    width:420px;max-width:85vw;opacity:0;transform:scale(.7);
    animation:logoReveal 2.2s ease forwards 5.2s;
}
@keyframes logoReveal {20%{opacity:1;}100%{opacity:1;transform:scale(1);}}

/* Text */
.glow{
    font-family:"Cinzel",serif;font-size:3.3rem;margin-top:20px;
    text-shadow:0 0 15px #00eaff,0 0 35px #0088cc,0 0 70px #00cfff;
    animation:pulse 2.7s ease-in-out infinite;
}
@keyframes pulse{0%,100%{text-shadow:0 0 12px #00eaff;}50%{text-shadow:0 0 100px #00fff5;}}

/* Form */
.newsletter{margin-top:18px;display:flex;gap:10px;justify-content:center;}
.newsletter input{
    padding:13px;border-radius:6px;border:1px solid rgba(0,255,255,.35);
    width:250px;color:#cfffff;background:rgba(0,255,255,.08);backdrop-filter:blur(4px);
}
.newsletter button{
    padding:13px 20px;border:none;cursor:pointer;color:white;
    background:linear-gradient(90deg,#018fd6,#00eaff);box-shadow:0 0 12px #00dff8;
    transition:.2s;
}
.newsletter button:hover{transform:scale(1.07);box-shadow:0 0 18px #00ffff;}

/* Secret track message */
.hidden-secret-text {
    opacity: 0;margin-top:20px;font-size:1.1rem;color:#00faff;
    font-family:"Cinzel",serif;text-shadow:0 0 10px #00eaff;
    transition:opacity 1.6s ease-in-out;
}
.hidden-secret-text.revealed{opacity:1;}

/* Hidden Runes */
.hidden-runes{position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity1.8s;z-index:100;}
.hidden-runes.active{opacity:1;}
.rune{
    position:absolute;font-size:3rem;color:rgba(0,255,255,.8);
    text-shadow:0 0 25px cyan;animation:floatRune 6s infinite ease-in-out;
    pointer-events:auto;
}
@keyframes floatRune{0%{transform:translateY(0);opacity:.7;}50%{transform:translateY(-25px);opacity:1;}100%{transform:translateY(0);opacity:.7;}}
.rune:nth-child(1){top:20%;left:15%;}
.rune:nth-child(2){top:40%;right:20%;}
.rune:nth-child(3){bottom:30%;left:25%;}
.rune:nth-child(4){top:60%;right:10%;}
.rune:nth-child(5){bottom:15%;left:50%;}

/* Gate message */
.gate-message{
    position:fixed;bottom:15%;width:100%;text-align:center;
    font-family:"Cinzel",serif;font-size:1.8rem;color:#00eaff;
    text-shadow:0 0 18px cyan;opacity:0;transition:opacity2s;z-index:200;
}
.gate-message.visible{opacity:1;}

/* Dimensional Rift */
.rift{
    position:fixed;width:0;height:0;border-radius:50%;
    pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(0,255,255,0.9),transparent70%);
    box-shadow:0 0 30px 10px rgba(0,255,255,0.6);
    transform:translate(-50%,-50%);z-index:3000;
    transition:opacity .8s,width .4s,height .4s;
}
.rift.active{pointer-events:auto;opacity:1;width:150px;height:150px;}

/* Rune pulse when clicked in sequence */
.rune.sequence-highlight{
    filter:drop-shadow(0 0 12px cyan);animation:runePulse1s infinite alternate;
}
@keyframes runePulse{0%{transform:scale(1);}100%{transform:scale(1.2);}}

Object.assign(msg.style, {
    position: "absolute",
    top: "calc(50% + 260px)",  // move it further down
    left: "50%",
    transform: "translateX(-50%)",
    fontFamily: "Cinzel, serif",
    color: "#00ffd9",
    textShadow: "0 0 15px #00ffee",
    opacity: 0,
    transition: "opacity 2s",
    fontSize: "1.4rem",
    zIndex: "3000",
    pointerEvents: "none"
});

.spark{
  position: fixed;
  width: 4px;
  height: 4px;
  background: cyan;
  border-radius: 50%;
  box-shadow: 0 0 8px cyan;
  pointer-events: none;
  animation: sparkFade .6s forwards;
}
@keyframes sparkFade{
  to{ transform: scale(0); opacity: 0; }
}

.burst{
  position: fixed;
  width: 60px;
  height: 60px;
  border: 2px solid cyan;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: burst .5s forwards;
}
@keyframes burst{
  to{ transform: translate(-50%, -50%) scale(2); opacity: 0; }
}