*{margin:0;padding:0;box-sizing:border-box}
body{overflow-x:hidden;color:white;font-family:'Segoe UI',sans-serif}

html,
body{
  background:#000;
}

body{
  opacity:0;
  transition:opacity .6s ease;
}

body.ready{
  opacity:1;
}

#loader{
    position:fixed;
    inset:0;
    z-index:999999999;
    isolation:isolate;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#000;

    overflow:hidden;
}

.loader-bg{
    position:absolute;
    inset:0;

    background:
      radial-gradient(circle at center,
      rgba(255,79,216,.08),
      transparent 60%);

    filter:blur(40px);

    animation: loaderPulse 4s ease-in-out infinite;
}

.loader-content{
    position:relative;
    z-index:2;

    width:min(85vw,420px);

    text-align:center;
}

.loader-logo{
    width:92px;
    height:92px;
    object-fit:cover;

    border-radius:24px;

    box-shadow:
      0 0 40px rgba(255,119,180,.25),
      0 0 80px rgba(122,44,255,.18);

    animation:
      loaderFloat 4s ease-in-out infinite;
}

.loader-title{
    margin-top:24px;

    font-size:2.4rem;
    font-weight:700;

    letter-spacing:2px;

    background:linear-gradient(
      90deg,
      #fff,
      #ff77b4,
      #b388ff
    );

    -webkit-background-clip:text;
    background-clip: text;
    -webkit-text-fill-color:transparent;
}

.loader-subtitle{
    margin-top:10px;

    opacity:.65;
    letter-spacing:3px;
    font-size:.8rem;
    text-transform:uppercase;
}

.loader-progress-wrapper{
    position:relative;
    margin-top:32px;
}

.loader-bar{
    width:100%;
    height:6px;

    border-radius:999px;

    overflow:hidden;

    background:
      rgba(255,255,255,.08);

    border:
      1px solid rgba(255,255,255,.08);
}

.loader-progress{
    width:0%;
    height:100%;

    border-radius:999px;

    background:linear-gradient(
      90deg,
      #7a2cff,
      #ff4fd8
    );

    box-shadow:
      0 0 20px rgba(255,79,216,.5);
}

.loader-percent{
    margin-top:14px;

    font-size:.95rem;
    opacity:.85;
}

#loader.hidden{
    opacity:0;
    pointer-events:none;

    transition:
      opacity .9s ease,
      visibility .9s ease;

    visibility:hidden;
}

@keyframes loaderFloat{
    0%,100%{
        transform:
          translateY(0px)
          scale(1);
    }

    50%{
        transform:
          translateY(-10px)
          scale(1.03);
    }
}

@keyframes loaderPulse{
    0%,100%{
        opacity:.5;
        transform:scale(1);
    }

    50%{
        opacity:1;
        transform:scale(1.08);
    }
}

#app{
    opacity:0;
    visibility:hidden;

    transition:
      opacity 1s ease,
      visibility 1s ease;

    will-change:opacity;
}

#app.loaded{
    opacity:1;
    visibility:visible;
}

#forceCountdown{

    margin-top:22px;

    font-size:18px;

    font-weight:600;

    color:#ff77b4;

    text-shadow:
        0 0 15px rgba(255,119,180,0.6);

    animation:pulseCountdown 1s infinite;
}

@keyframes pulseCountdown{

    0%,100%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:0.65;
        transform:scale(1.04);
    }

}

.install-btn {
    position: fixed;
    bottom: 80px;
    right: 20px;

    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 1;

    padding: 10px 15px;

    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(0,0,0,0.6);

    color: white;

    backdrop-filter: blur(10px);

    border-radius: 999px;

    cursor: pointer;

    z-index: 9999;

    transition:
        opacity 0.4s ease,
        transform 0.3s ease,
        background 0.3s ease;
}

.install-btn:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.08);
}

.install-btn.hidden {
    opacity: 0;
    pointer-events: none;
}

.install-btn.holding {

    transform: scale(0.92);

    filter:
        brightness(1.35)
        drop-shadow(0 0 12px rgba(255,255,255,0.4))
        drop-shadow(0 0 30px rgba(255,119,180,0.5));

    background: rgba(255,255,255,0.12);

}

canvas{position:fixed;top:0;left:0;z-index:-1}

section{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px}

h1{font-size:4rem}
h2{font-size:2.2rem;margin-bottom:15px}
p{opacity:0.85;line-height:1.6}

.card{
  background:transparent;
  padding:40px;
  border-radius:25px;
  max-width:650px;
  transform:scale(0.85);
  opacity:0;
}

.btn{
  margin-top:20px;
  padding:12px 25px;
  border:none;
  border-radius:25px;
  background:rgba(255,255,255,0.2);
  color:white;
  cursor:pointer;
  transition:0.3s;
}

.btn:hover{background:rgba(255,255,255,0.4)}

.cursor-glow{
  position:fixed;
  width:220px;
  height:220px;

  background: radial-gradient(circle, rgba(255,119,180,0.25), transparent);

  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:999;

  overflow:hidden;
}

.cursor-glow::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;

  background: conic-gradient(
    from 0deg,
    transparent,
    rgba(255,119,180,0.3),
    transparent 30%
  );

  filter: blur(8px);
  opacity:0.8;

  animation: rotateGlow 4s linear infinite;
}

@keyframes rotateGlow{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}

.cursor-glow::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;

  background: conic-gradient(
    from 180deg,
    transparent,
    rgba(255, 149, 180, 0.25),
    transparent 40%
  );

  filter: blur(12px);

  animation: rotateGlowReverse 8s linear infinite;
}

@keyframes rotateGlowReverse{
  from{ transform: rotate(360deg); }
  to{ transform: rotate(0deg); }
}

.music-btn{
  position:fixed;
  bottom:20px;
  right:20px;
  background:rgba(255,255,255,0.2);
  padding:10px 15px;
  border-radius:20px;
  cursor:pointer;
  z-index:100000;
}

.gallery{display:flex;gap:30px;flex-wrap:wrap;justify-content:center;margin-top:20px}
.gallery img{
  width:200px;border-radius:15px;
  transition:0.4s;
}
.gallery img:hover{transform:scale(1.1)}

.hidden{margin-top:20px;display:none}

.menu-toggle{
  position:fixed;
  top:20px;
  right:20px;

  width:45px;
  height:45px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:20px;
  color:white;

  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(15px);

  border-radius:12px;
  border:1px solid rgba(255,255,255,0.1);

  cursor:pointer;
  z-index:100001;

  transition:0.3s ease;
}

.menu-toggle:hover{
  background:rgba(255,255,255,0.15);
  transform: scale(1.05);
}

.top-nav.hidden{
  opacity:0;
  transform: translateY(-20px);
  pointer-events:none;
}

.top-nav{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  max-width:900px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;

  padding:14px 22px;
  border-radius:20px;

  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.08);

  z-index:100000;
  overflow:hidden;
}

.top-nav{
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.top-nav nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.vine-layer{
  position:absolute;
  inset:-30px;

  background-image: url("img/vines.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  opacity:0.15;
  filter: blur(0.5px) brightness(1.1);

  z-index:-1;

  pointer-events:none;

  animation: vineFloat 10s ease-in-out infinite;
}

@keyframes vineFloat{
  0%,100%{
    transform: translateY(0px) scale(1);
  }
  50%{
    transform: translateY(-8px) scale(1.02);
  }
}

.logo{
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:0.9;
}

.nav-links{
  display:flex;
  gap:20px;
}

.nav-links a{
  color:white;
  text-decoration:none;
  font-size:13px;
  opacity:0.7;
  transition:0.3s;
}

.nav-links a:hover{
  opacity:1;
  transform:translateY(-2px);
}

.nav-links a.active{
  opacity: 1;
  color: #ff77b4;
  transform: translateY(-2px);
  position: relative;
}

.nav-links a.active::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #ff77b4, #7a5cff);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255,119,180,0.6);
}

.hint{
  font-size:11px;
  opacity:0.4;
}

@media (max-width: 768px){

  .top-nav{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }

  .nav-links{
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
  }

  .logo{
    order:1;
  }

  .nav-links{
    order:2;
  }

  .hint{
    order:3;
    font-size:10px;
    opacity:0.4;
  }

}

.hero-img{
  height:200px;
  width:auto;
  border-radius:20px;

  margin-bottom:20px;

  box-shadow: 0 20px 60px rgba(255, 119, 180, 0.25);
  
  opacity:0;
  transform: translateY(20px) scale(0.95);
  animation: imgEnter 1.5s ease forwards, glowPulse 4s ease-in-out infinite;

  border: 1px solid rgba(255,255,255,0.1);
}

@keyframes imgEnter {
  to {
    opacity:1;
    transform: translateY(0) scale(1);
  }
}

@keyframes glowPulse {
  0%,100%{
    box-shadow: 0 20px 60px rgba(255, 119, 180, 0.2);
  }
  50%{
    box-shadow: 0 25px 90px rgba(255, 119, 180, 0.4);
  }
}

.hero-img:hover{
  transform: scale(1.03);
  box-shadow: 0 30px 80px rgba(255, 119, 180, 0.35);
  transition: 0.4s ease;
}

#entryFlash{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:black;
  z-index:999999;
  pointer-events:none;
  opacity:0;
}

#hero{
  position:relative;
  overflow:hidden;
}

.hero-content{
  text-align:center;
  transition: all 1.2s ease;
}

.hero-img{
  transition: transform 1.5s ease, filter 1.5s ease;
  transform-origin:center;
}

.galaxy-section{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

.galaxy-glow{
  position:absolute;
  width:600px;
  height:600px;

  background: radial-gradient(circle,
    rgba(122,44,255,0.35),
    rgba(255,79,216,0.18),
    transparent 70%
  );

  filter: blur(40px);
  opacity:0.8;

  animation: pulseGlow 6s ease-in-out infinite;
}

@keyframes pulseGlow{
  0%,100%{
    transform: scale(1);
    opacity:0.6;
  }
  50%{
    transform: scale(1.15);
    opacity:0.9;
  }
}

.galaxy-section h2{
  position:relative;
  z-index:2;
}

.final-section{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}

.final-glow{
  position:absolute;
  width:700px;
  height:700px;

  background: radial-gradient(circle,
    rgba(255,79,216,0.25),
    rgba(122,44,255,0.2),
    transparent 70%
  );

  filter: blur(50px);
  opacity:0.7;

  animation: finalPulse 8s ease-in-out infinite;
}

@keyframes finalPulse{
  0%,100%{
    transform: scale(1);
    opacity:0.5;
  }
  50%{
    transform: scale(1.2);
    opacity:0.85;
  }
}

.final-section h2{
  position:relative;
  z-index:2;
  opacity:0;
  transform: translateY(30px);
}

.mood-buttons{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  margin-top:15px;
}

@media (max-width: 768px){
  .mood-buttons{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px){
  .mood-buttons{
    grid-template-columns: 1fr;
  }
}

.mood-buttons .active{
  background: rgba(255,119,180,0.25);
  box-shadow: 0 0 20px rgba(255,119,180,0.4);
  transform: translateY(-2px);
}

.message-grid{
  display:grid;
  gap:12px;
  margin-top:15px;
}

.msg{
  padding:12px 15px;
  border-radius:12px;

  background:rgba(255,255,255,0.05);
  border:3px solid rgba(255,255,255,0.7);

  color:rgba(255,255,255,0.2);
  opacity:0.05;

  transform: translateY(10px);
  transition: all 0.4s ease;

  cursor:none;
}

.msg:hover{
  opacity:1;
  color:white;

  transform: translateY(0px) scale(1.02);

  background:rgba(255,119,180,0.08);
  box-shadow: 0 0 25px rgba(255,119,180,0.2);
  border-color: rgba(255,119,180,0.25);
}

.hidden-messages:hover .msg{
  opacity:0.1;
}
.hidden-messages:hover .msg:hover{
  opacity:1;
}

.music-panel {
    position: fixed;
    bottom: 80px;
    right: -300px;
    width: 260px;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 15px;
    color: white;
    transition: 0.4s ease;
    z-index: 999;
}

.music-panel.open {
    right: 20px;
}

.music-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.music-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}

.music-controls button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #fff;
    color: fff;
    padding: 5px 10px;
    cursor: pointer;
}

.music-list {
    list-style: none;
    padding: 0;
}

.music-list li {
    padding: 5px;
    cursor: pointer;
    opacity: 0.8;
}

.music-list li:hover {
    opacity: 1;
}

.music-btn.playing {
    animation: musicPulse 2.2s infinite ease-in-out;
}

@keyframes musicPulse {
    0% {
        box-shadow: 
            0 0 6px rgba(180, 100, 255, 0.4),
            0 0 12px rgba(255, 120, 200, 0.2);
        transform: scale(1);
    }

    50% {
        box-shadow: 
            0 0 20px rgba(200, 120, 255, 0.9),
            0 0 40px rgba(255, 80, 180, 0.7),
            0 0 60px rgba(255, 50, 150, 0.5);
        transform: scale(1.1);
    }

    100% {
        box-shadow: 
            0 0 6px rgba(180, 100, 255, 0.4),
            0 0 12px rgba(255, 120, 200, 0.2);
        transform: scale(1);
    }
}

.music-list li.active {
    background: rgba(255,255,255,0.15);
    border-radius: 8px;
    opacity: 1;
    transform: scale(1.03);
}

.music-list li.active::before {
    content: "♪";
    margin-right: 8px;
    color: #fff;
}

.music-list li {
    transition: 0.3s;
}

.gallery-item{
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  cursor: pointer;
}

.gallery-item::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;

  background: radial-gradient(circle,
    rgba(255,255,255,0.8) 0%,
    rgba(255,255,255,0.3) 10%,
    transparent 40%
  );

  opacity: 0;
  transform: rotate(25deg);
  pointer-events: none;
}

.gallery-item:hover::after{
  animation: starGlow 1.2s ease forwards;
  opacity: 1;
}

@keyframes starGlow{
  0%{
    transform: translate(-30%, -30%) rotate(25deg);
    opacity: 0;
  }
  30%{
    opacity: 1;
  }
  100%{
    transform: translate(30%, 30%) rotate(25deg);
    opacity: 0;
  }
}

.gallery-item:hover img{
  transform: scale(1.1);
  filter: brightness(1.2) contrast(1.1);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.25),
              0 0 60px rgba(255, 119, 180, 0.25);
}

.pagination{
  margin-top:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:15px;
}

.pagination button{
  background:rgba(255,255,255,0.1);
  border:none;
  color:white;
  padding:10px 16px;
  border-radius:10px;
  cursor:pointer;
  transition:0.3s;
  display:flex;
  align-items:center;
  justify-content:center;
}

.pagination button:hover{
  background:rgba(255,255,255,0.25);
  transform: scale(1.1);
}

#pageIndicator{
  opacity:0.8;
  font-size:14px;
}

.pagination button.disabled{
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  background: rgba(255,255,255,0.05);
  box-shadow: none;
}

.gallery-item{
  position: relative;
  overflow: hidden;
}

.caption{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;

  padding: 12px;
  font-size: 14px;

  background: linear-gradient(
    rgba(0,0,0,0.9),
    transparent
  );

  color: white;
  opacity: 0;

  transform: translateY(20px);
  transition: all 0.4s ease;
}

.gallery-item:hover .caption{
  opacity: 1;
  transform: translateY(0);
}

.caption{
  text-shadow: 0 0 10px rgba(255,119,180,0.6);
}

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999999;
  overflow-y: auto;
}

.modal.hidden {
  display:none;
}

.modal-content {
  background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(img/galaxy.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  padding:30px;
  border-radius:20px;
  width:80%;
  max-width:600px;
}

#resultContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.close-btn {
  position:absolute;
  top:20px;
  right:20px;
  cursor:pointer;
}

.star {
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s;
}

.star.active {
  background: #ff77b4;
  box-shadow: 0 0 15px #ff77b4;
  transform: scale(1.3);
}

#puzzleContainer {
  position: relative;
  width: 100%;
  height: 400px;
}

#constellationCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.star {
  position: absolute;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 50%;
  z-index: 2;
}

.star.active {
  background: #ff77b4;
  box-shadow: 0 0 15px #ff77b4;
}

.shake {
  animation: shake 0.3s;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.msg-modal {
  text-align: center;
  width: 90vw;
  max-width: 400px;
  background-image: none;
  background: rgba(122,44,255,0.25);
}

#msgContent {
  font-size: 18px;
  line-height: 1.7;

  color: rgba(255,255,255,0.95);

  text-shadow: 0 0 20px rgba(255,119,180,0.6);

  padding: 20px;
  border-radius: 15px;

  background: rgba(2,1,64,0.25);
  box-shadow: 0 0 40px rgba(255,119,180,0.25);
}

.mood-buttons button {
  transition: all 1.3s ease;
}

.constellation-template {
  display: none !important;
}

.active-template {
  display: block !important;
}

.result-active .modal-content {
  background-image: none !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
}

#resultContainer {
  display: flex;
  align-items: center;
  justify-content: center;
}

.orion-layout {
  position: relative;
  display: inline-block;
  width: min(90vw, 400px);
  aspect-ratio: 9 / 16;
  max-width: 90vw;
  max-height: 80vh;
  background-image: url("constellations/results/orion.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  border-radius: 16px;
  overflow: hidden;

  background-color: transparent;
}

.ursa-major-layout {
  position: relative;
  display: inline-block;
  width: min(90vw, 400px);
  aspect-ratio: 9 / 16;
  max-width: 90vw;
  max-height: 80vh;
  background-image: url("constellations/results/ursa-major.gif");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  border-radius: 16px;
  overflow: hidden;

  background-color: transparent;
}

.comet-star{
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--comet-color);

  z-index: 999999;
  cursor: pointer;

  box-shadow:
    0 0 15px var(--comet-color),
    0 0 40px var(--comet-color),
    0 0 80px var(--comet-color);
}

.comet-star::before{
  content:"";
  position:absolute;
  inset:-20px;
}

.comet-star::after{
  content:"";
  position:absolute;
  top:50%;
  left:0;
  width:120px;
  height:2px;
  transform-origin:right center;
  background: linear-gradient(to right, var(--comet-color), transparent);
  transform: translate(-120px,-50%) rotate(30deg);
  opacity: 0.9;
  filter: blur(1px);
  animation: tailFlow 1.2s linear infinite;
}

.comet-star.reverse::after{

  left:auto;
  right:0;

  transform-origin:left center;

  transform:
    translate(120px,-50%)
    rotate(-30deg);

  background:
    linear-gradient(
      to left,
      var(--comet-color),
      transparent
    );
}

@keyframes tailFlow{
  0%{
    opacity: 0.6;
    filter: blur(2px);
  }
  50%{
    opacity: 1;
    filter: blur(0px);
  }
  100%{
    opacity: 0.6;
    filter: blur(2px);
  }
}

.comet-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 9999999;
}

.comet-modal.hidden{
  display:none;
}

.comet-modal-box{
  width: 90%;
  max-width: 400px;
  padding: 20px;
  border-radius: 20px;

  background: rgba(20,10,40,0.9);
  backdrop-filter: blur(20px);

  box-shadow: 0 0 40px rgba(255,119,180,0.3);
}

#cometName{
  width:100%;
  margin-bottom:10px;
  padding:8px;
  border-radius:10px;
  border:none;
  outline:none;
  background: rgba(255,255,255,0.08);
  color:white;
}

#cometInput{
  width:100%;
  height:120px;
  border:none;
  outline:none;
  resize:none;

  padding:10px;
  border-radius:10px;

  background: rgba(255,255,255,0.08);
  color:white;
}

.comet-actions{
  display:flex;
  justify-content:space-between;
  margin-top:10px;
}

.comet-actions button{
  padding:8px 14px;
  border:none;
  border-radius:10px;
  cursor:pointer;

  background: rgba(255,255,255,0.15);
  color:white;
}

.solar-system{
  position:relative;
  width:100%;
  min-height:100svh;
  height:100svh;
  overflow:hidden;
}

.sun{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:8%;
}

.planet{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -50%);
  width:4%;
  cursor:pointer;
}

.sun img, .planet img{
  width:100%;
  height:auto;
  display:block;
}

.orbit{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-radius:50%;
}

.orbit{
  pointer-events: none;
}

.orbit{
  border: none !important;
}

.planet, .planet-core{
  pointer-events: auto;
  cursor: pointer;
}

.planet, .planet-core{
  opacity: 1 !important;
  filter: none !important;
}

.sun{
  z-index: 1;
}

.planet{
  z-index: 5;
}

.planet.active{
  z-index: 20;
}

.planet img, .sun img{
  display:block;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.sun{
  cursor: pointer;
}

.sun-hidden{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.orbit-1{ width:30%; height:30%; }
.orbit-2{ width:45%; height:45%; }
.orbit-3{ width:60%; height:60%; }
.orbit-4{ width:75%; height:75%; }
.orbit-5{ width:90%; height:90%; }

.sun{ width:12%; }

.planet{ width:8%; }

.orbit-1 .planet{ width:12%; }
.orbit-2 .planet{ width:14%; }
.orbit-4 .planet{ width:10%; }

.back-btn{
  position:absolute;
  top:5%;
  left:5%;
  z-index:1000;
}

.satellite-system{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:120%;
  height:120%;
  pointer-events:none;
}

.satellite{
  position:absolute;
  width:5%;
  aspect-ratio:1;
  border-radius:50%;
  background:white;
  opacity:0.9;
}

.satellite{
  box-shadow:
    0 0 6px white,
    0 0 12px rgba(255,119,180,0.3);
}

.sat-orbit{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  border-radius:50%;
}

.sat-orbit .satellite{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -50%);
}

.planet-label{
  position:absolute;
  bottom:5%;
  left:50%;
  transform:translateX(-50%);

  font-size:1.6rem;
  letter-spacing:2px;

  font-weight: 700;
  font-family: 'Playfair Display', 'Lora', serif;
  font-style: italic;

  color:white;
  opacity:0;

  text-shadow: 0 0 20px rgba(255,119,180,0.6);
}

.back-btn{
  position:absolute;
  top:4%;
  left:4%;

  display:flex;
  align-items:center;
  gap:8px;

  padding:8px 14px;

  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);

  border-radius:20px;
  border:1px solid rgba(255,255,255,0.15);

  color:white;
  font-size:13px;

  cursor:pointer;
  z-index:1000;

  transition:0.3s ease;
}

.back-btn img{
  height:12px;
  opacity:0.8;
}

.back-hidden {
  display: none !important;
}

.back-btn:hover{
  background: rgba(255,255,255,0.2);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 20px rgba(255,119,180,0.3);
}

@media (max-width: 768px){
  .sun{
    width: 24%;
  }

  .planet{
    width: 16%;
  }

  .orbit-1 .planet{ width:18%; }
  .orbit-2 .planet{ width:16%; }
  .orbit-3 .planet{ width:15%; }
  .orbit-4 .planet{ width:14%; }
  .orbit-5 .planet{ width:13%; }

  .satellite{
    width:7%;
  }

  .satellite-system{
    width:100%;
    height:100%;
  }
}

.cassiopeia-layout{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mirror-wrapper{
  position:relative;

  width:clamp(220px, 70vw, 500px);

  aspect-ratio:1024 / 1536;

  overflow:hidden;
  border-radius:20px;

  box-shadow:
    0 0 40px rgba(255,119,180,0.15),
    0 0 100px rgba(122,44,255,0.12);
}

.mirror-base,
.mirror-text,
.mirror-blur,
#cassiopeiaScratch{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
}

.mirror-base,
.mirror-text{
  object-fit:fill;
  user-select:none;
  -webkit-user-drag:none;
}

.mirror-base{
  z-index:1;
}

.mirror-text,
.mirror-blur{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;

    mask-repeat:no-repeat;
    -webkit-mask-repeat:no-repeat;

    mask-size:100% 100%;
    -webkit-mask-size:100% 100%;
}

.mirror-text{
    z-index:2;
    object-fit:fill;
}

.mirror-blur{
    z-index:3;

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    opacity:0;

    transition:
        opacity 500ms ease,
        clip-path 500ms ease;

    will-change:
        clip-path,
        opacity;
}

#cassiopeiaScratch{
  z-index:4;
  touch-action:none;
  cursor:pointer;
}

.comet-search-modal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,0.82);
    backdrop-filter:blur(12px);

    z-index:9999999;
}

.comet-search-modal.hidden{
    display:none;
}

.comet-search-box{
    position:relative;

    width:min(92vw,700px);

    padding:30px;

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(25,15,50,0.95),
            rgba(10,5,25,0.95)
        );

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 0 50px rgba(122,44,255,0.25),
        0 0 100px rgba(255,119,180,0.12);
}

.comet-search-close{
    position:absolute;
    top:18px;
    right:18px;

    background:none;
    border:none;

    color:white;

    font-size:18px;
    cursor:pointer;
}

.comet-search-controls{
    display:flex;
    gap:12px;
    margin-top:20px;
    flex-wrap:wrap;
}

.comet-search-controls input{
    flex:1;

    min-width:180px;

    padding:12px 14px;

    border-radius:14px;
    border:none;

    background:rgba(255,255,255,0.08);

    color:white;
}

.comet-search-controls button{
    padding:12px 18px;

    border:none;
    border-radius:14px;

    background:#7a2cff;
    color:white;

    cursor:pointer;
}

#cometSearchResult{
    margin-top:28px;

    min-height:220px;
    
    max-height: 300px;
    
    overflow-y: scroll;

    padding:22px;

    border-radius:22px;

    background:rgba(255,255,255,0.04);

    line-height:1.7;
}

.comet-result-date{
    opacity:0.6;
    font-size:13px;
    margin-bottom:12px;
}

.comet-highlight{
    background:#ff77b4;
    color:black;

    padding:2px 4px;

    border-radius:4px;
}

.comet-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;

    margin-top:20px;
}

.comet-pagination button{
    padding:10px 16px;

    border:none;
    border-radius:12px;

    background:rgba(255,255,255,0.08);

    color:white;

    cursor:pointer;
}

.comet-pagination button:disabled{
    opacity:0.3;
    cursor:not-allowed;
}

.comet-memory-satellite{
    background:
        radial-gradient(circle,
            #fff,
            #ff77b4 45%,
            #7a2cff 100%
        );

    box-shadow:
        0 0 15px #ff77b4,
        0 0 35px rgba(122,44,255,0.6);

    animation:
        cometSatellitePulse 2s ease-in-out infinite;
}

@keyframes cometSatellitePulse{

    0%,100%{
        transform: scale(1);
    }

    50%{
        transform: scale(1.18);
    }
}

.comet-password-modal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,0.82);
    backdrop-filter:blur(14px);

    z-index:99999999;
}

.comet-password-modal.hidden{
    display:none;
}

.comet-password-box{
    position:relative;

    width:min(90vw,420px);

    padding:34px;

    border-radius:30px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(30,15,60,0.92),
            rgba(10,5,25,0.96)
        );

    border:1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 0 60px rgba(122,44,255,0.28),
        0 0 120px rgba(255,119,180,0.12);

    text-align:center;
}

.comet-password-glow{
    position:absolute;
    inset:-40%;

    background:
        radial-gradient(
            circle,
            rgba(255,119,180,0.18),
            transparent 60%
        );

    animation: cometPasswordPulse 6s ease-in-out infinite;

    pointer-events:none;
}

@keyframes cometPasswordPulse{

    0%,100%{
        transform:scale(1);
        opacity:0.7;
    }

    50%{
        transform:scale(1.15);
        opacity:1;
    }
}

.comet-password-box h2{
    position:relative;
    z-index:2;

    margin-bottom:10px;

    font-size:2rem;

    background:
        linear-gradient(
            90deg,
            #fff,
            #ff77b4,
            #b388ff
        );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.comet-password-box p{
    position:relative;
    z-index:2;

    opacity:0.72;

    margin-bottom:24px;
}

#cometPasswordInput{
    position:relative;
    z-index:2;

    width:100%;

    padding:14px 16px;

    border:none;
    outline:none;

    border-radius:16px;

    background:rgba(255,255,255,0.08);

    color:white;

    font-size:15px;

    border:1px solid rgba(255,255,255,0.08);

    transition:0.3s ease;
}

#cometPasswordInput:focus{

    border-color:rgba(255,119,180,0.45);

    box-shadow:
        0 0 20px rgba(255,119,180,0.2);
}

.comet-password-actions{
    position:relative;
    z-index:2;

    display:flex;

    gap:12px;

    margin-top:20px;
}

.comet-password-actions button{

    flex:1;

    padding:12px;

    border:none;

    border-radius:16px;

    cursor:pointer;

    color:white;

    background:rgba(255,255,255,0.08);

    transition:0.3s ease;
}

.comet-password-actions button:hover{

    transform:translateY(-2px);

    background:rgba(255,255,255,0.14);
}

.comet-password-error{

    margin-top:14px;

    color:#ff77b4;

    opacity:0;

    transform:translateY(6px);

    transition:0.3s ease;
}

.comet-password-error.show{

    opacity:1;

    transform:translateY(0);
}

.satellite{
    pointer-events:auto;
    cursor:pointer;
    z-index:20;
}

.sat-orbit{
    pointer-events:none;
}

.sat-orbit .satellite{
    pointer-events:auto;
}

.update-modal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,0.82);

    backdrop-filter:blur(12px);

    z-index:99999999;
}

.update-box{
    width:min(90vw,420px);

    padding:28px;

    border-radius:24px;

    background:
        linear-gradient(
            145deg,
            rgba(25,15,50,0.96),
            rgba(10,5,25,0.96)
        );

    border:1px solid rgba(255,255,255,0.08);

    text-align:center;

    box-shadow:
        0 0 40px rgba(122,44,255,0.25),
        0 0 80px rgba(255,119,180,0.15);
}

.update-actions{
    display:flex;
    justify-content:center;
    gap:14px;

    margin-top:22px;
}

.update-actions button,
.check-update-btn{

    padding:12px 18px;

    border:none;
    border-radius:14px;

    cursor:pointer;

    background:#7a2cff;
    color:white;

    transition:0.3s;
}

.update-actions button:hover,
.check-update-btn:hover{

    transform:translateY(-2px);
}

.latest-version-toast{

    position:fixed;

    bottom:20px;
    left:50%;

    transform:
        translateX(-50%)
        translateY(20px);

    opacity:0;

    padding:14px 18px;

    border-radius:16px;

    background:rgba(15,15,30,0.95);

    color:white;

    z-index:99999999;

    transition:0.4s ease;
}

.latest-version-toast.show{

    opacity:1;

    transform:
        translateX(-50%)
        translateY(0px);
}

.lyra-template{
  max-height: 90vh;
  overflow-y: scroll;
}

.lyra-layout{
  display:flex;
  align-items:center;
  justify-content:center;
}

.lyra-musicbox-wrapper{
  margin-top: 80px !important;
  position:relative;
  width:min(90vw,320px);
}

.lyra-musicbox{
  width:100%;
  display:block;
  border-radius:20px;
  user-select:none;
  pointer-events:none;
}

.lyra-click-zone{
  position:absolute;

  left:23.5%;
  width:53.4%;

  top:50.6%;
  height:16.6%;

  cursor:pointer;

  background:transparent;
}

.lyra-click-zone:hover{
  box-shadow:0 0 20px rgba(255,255,255,0.08);
}

#lyraParagraph {
  display: block;
  background-color: rgba(122,44,255,0.35);
  margin-top: 10px;
  border-radius:20px;
  padding: 10px 15px;
  position:relative;
  width:min(90vw, 320px);
}

#lyraParagraph p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 14px;
}

.stardust-section{
    position:relative;

    min-height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:80px 30px;

    overflow:hidden;

    background:transparent;
}

.stardust-container{
    position:relative;

    max-width:850px;

    text-align:center;
}

.stardust-overlay{
    position:absolute;
    inset:0;

    pointer-events:none;
}

.stardust-text{
    position:relative;
    z-index:2;

    opacity:0;

    margin-bottom:24px;

    transform:
        translateY(18px)
        scale(0.985);

    filter:
        blur(8px);

    transition:
        opacity 2.2s ease,
        transform 2.2s cubic-bezier(.19,1,.22,1),
        filter 2.2s ease,
        color 2.2s ease;

    letter-spacing:0.3px;

    text-shadow:none;

    -webkit-text-stroke:0px transparent;
}

.stardust-title{

    font-size:2.7rem;

    font-weight:600;

    line-height:1.2;

    color:rgba(248,250,255,0.34);

    text-shadow:
        0 0 18px rgba(255,255,255,0.04);
}

.stardust-paragraph{

    font-size:1.05rem;

    line-height:1.9;

    font-weight:300;

    max-width:720px;

    margin-inline:auto;

    color:rgba(220,225,235,0.22);
}

.stardust-text.revealed{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

    filter:
        blur(0px);
}

.stardust-title.revealed{

    color:rgba(250,252,255,0.78);

    text-shadow:
        0 0 22px rgba(255,255,255,0.06),
        0 0 40px rgba(180,190,255,0.04);
}

.stardust-paragraph.revealed{

    color:rgba(245,250,255,0.50);
}

.stardust-particle{
    position:absolute;

    width:4px;
    height:4px;

    border-radius:50%;

    background:white;

    opacity:0;

    box-shadow:
        0 0 10px rgba(255,255,255,0.85),
        0 0 24px rgba(180,190,255,0.18),
        0 0 50px rgba(122,44,255,0.10);
}

.mood-buttons{
    display:grid;

    grid-template-columns:1fr;

    gap:14px;

    margin-top:20px;

    min-height:220px;
}

.mood-btn{
    width:100%;
}

.mood-pagination{

    margin-top:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;
}

.mood-pagination button{

    width:42px;
    height:42px;

    border:none;

    border-radius:12px;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    transition:0.3s ease;
}

.mood-pagination button:hover:not(.disabled){

    background:rgba(255,255,255,0.18);

    transform:translateY(-2px);
}

.mood-pagination button.disabled{

    opacity:0.25;

    cursor:not-allowed;

    transform:none;
}

#moodPageIndicator{

    min-width:60px;

    text-align:center;

    font-size:14px;

    letter-spacing:1px;

    color:rgba(255,255,255,0.7);
}

.mood-btn{
    position:relative;

    overflow:hidden;

    transition:
        transform 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;

    will-change:
        transform,
        opacity,
        filter;
}

.mood-sad{
    animation:sadFloat 5s ease-in-out infinite;
}

@keyframes sadFloat{

    0%,100%{
        transform:translateY(0px);
        opacity:0.72;
    }

    50%{
        transform:translateY(4px);
        opacity:0.55;
    }
}

.mood-tired{
    animation:tiredPulse 4s ease-in-out infinite;
}

@keyframes tiredPulse{

    0%,100%{
        transform:scale(1);
        opacity:0.7;
    }

    50%{
        transform:scale(0.97);
        opacity:0.5;
    }
}

.mood-anxious{
    animation:anxiousShake 2.5s ease-in-out infinite;
}

@keyframes anxiousShake{

    0%,100%{
        transform:translateX(0px);
    }

    20%{
        transform:translateX(-1px);
    }

    40%{
        transform:translateX(1px);
    }

    60%{
        transform:translateX(-1px);
    }

    80%{
        transform:translateX(1px);
    }
}

.mood-lonely{
    animation:lonelyDrift 6s ease-in-out infinite;
}

@keyframes lonelyDrift{

    0%,100%{
        transform:translateX(0px);
        opacity:0.7;
    }

    50%{
        transform:translateX(6px);
        opacity:0.45;
    }
}

.mood-overthinking{
    animation:overthinkPulse 3s ease-in-out infinite;
}

@keyframes overthinkPulse{

    0%,100%{
        filter:blur(0px);
    }

    50%{
        filter:blur(0.6px);
    }
}

.mood-missing{
    animation:missFade 4.5s ease-in-out infinite;
}

@keyframes missFade{

    0%,100%{
        opacity:0.8;
    }

    50%{
        opacity:0.35;
    }
}

.mood-happy{
    animation:happyBounce 3.5s ease-in-out infinite;
}

@keyframes happyBounce{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-5px);
    }
}

.mood-love{
    animation:loveBeat 2.6s ease-in-out infinite;
}

@keyframes loveBeat{

    0%,100%{
        transform:scale(1);
    }

    25%{
        transform:scale(1.04);
    }

    40%{
        transform:scale(1);
    }

    60%{
        transform:scale(1.05);
    }
}

.mood-proud{
    animation:proudRise 5s ease-in-out infinite;
}

@keyframes proudRise{

    0%,100%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-3px);
    }
}

.mood-btn:hover{

    animation-play-state:paused;

    transform:translateY(-4px) scale(1.03);

    box-shadow:
        0 0 20px rgba(255,255,255,0.08),
        0 0 35px rgba(180,190,255,0.08);
}

#cometDateSearch{
    position: relative;
    color: transparent;
}

#cometDateSearch::after{
    content: attr(data-display);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    pointer-events: none;
}

#cometDateSearch::-webkit-datetime-edit{
    opacity: 0;
}

.non-clickable-clone{
  pointer-events:none;
}

.solar-scroll-section{
  width:100%;
  overflow:hidden;
}

.solar-scroll-wrapper{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;

  scrollbar-width:thin;
  scrollbar-color:rgba(255,119,180,0.6) transparent;

  padding-bottom:10px;

  -webkit-overflow-scrolling:touch;
}

.solar-scroll-wrapper::-webkit-scrollbar{
  height:8px;
}

.solar-scroll-wrapper::-webkit-scrollbar-track{
  background:rgba(255,255,255,0.05);
  border-radius:999px;
}

.solar-scroll-wrapper::-webkit-scrollbar-thumb{
  background:linear-gradient(
    90deg,
    rgba(122,44,255,0.8),
    rgba(255,119,180,0.8)
  );

  border-radius:999px;

  box-shadow:
    0 0 10px rgba(255,119,180,0.35);
}

@media (max-width:768px){

  .solar-system{
    min-width:800px;
  }

}

.cygnus-layout{
  position:relative;

  width:min(92vw, 450px);

  aspect-ratio:4 / 5;

  max-height:90vh;

  overflow:hidden;

  border-radius:24px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:black;
}

.cygnus-scene{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:black;
}

.cygnus-sky{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  animation: skyFloat 14s ease-in-out infinite;
}

@keyframes skyFloat{
  0%,100%{
    transform:scale(1.08) translateY(0px);
  }

  50%{
    transform:scale(1.12) translateY(-10px);
  }
}

.cygnus-swan{
  position:absolute;

  top:18%;

  left:-70%;

  width:75%;

  opacity:0;

  z-index:3;

  pointer-events:none;

  filter:
    drop-shadow(0 0 20px rgba(255,255,255,0.45))
    drop-shadow(0 0 60px rgba(255,255,255,0.25));
}

.cygnus-feather-wrapper{
  position:absolute;

  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;

  transform:scale(0.2);

  z-index:5;
}

.cygnus-feather{
  width:78%;

  filter:
    drop-shadow(0 0 30px rgba(255,255,255,0.2))
    drop-shadow(0 0 80px rgba(255,119,180,0.3));
}

.cygnus-feather-wrapper.active{
  animation: featherReveal 2.6s cubic-bezier(.19,1,.22,1) forwards;
}

@keyframes featherReveal{

  0%{
    opacity:0;
    transform:scale(0.2);
    filter:blur(12px);
  }

  55%{
    opacity:1;
    transform:scale(1.08);
    filter:blur(0px);
  }

  100%{
    opacity:1;
    transform:scale(1);
    filter:blur(0px);
  }
}

.scorpius-layout{
    position:relative;

    aspect-ratio:9/16;

    width:min(92vw, 430px);
    max-height:90vh;

    overflow:hidden;
    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:black;
}

.scorpius-bg{
    position:absolute;
    inset:0;

    background-image:url("constellations/results/scorpius-bg.png");
    background-size:cover;
    background-position:center;

    animation: scorpiusBgReveal 2s ease forwards;
}

@keyframes scorpiusBgReveal{
    from{
        opacity:0;
        transform:scale(1.05);
        filter:blur(10px);
    }
    to{
        opacity:1;
        transform:scale(1);
        filter:blur(0px);
    }
}

.scorpius-content{
    position:relative;
    z-index:2;

    width:100%;
    padding:30px;

    text-align:center;
}

.scorpius-line{
    opacity:0;
    transform:translateY(20px);

    animation: scorpiusTextReveal 1.8s ease forwards;

    font-family:'Playfair Display', serif;
    text-shadow:
        0 0 20px rgba(255,120,180,.55);

    letter-spacing:1px;
}

.scorpius-line-1{
    animation-delay:1.2s;

    font-size:2rem;
    line-height:1.4;
}

.scorpius-line-2{
    animation-delay:3.2s;

    margin-top:40px;
    margin-bottom:24px;

    font-size:1rem;
    opacity:.85;
}

@keyframes scorpiusTextReveal{
    to{
        opacity:1;
        transform:translateY(0px);
    }
}

.scorpius-bottles{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-top:20px;
    gap:40px;

    opacity:0;
    animation: bottleReveal 1.5s ease forwards;
    animation-delay:4s;
}

@keyframes bottleReveal{
    to{
        opacity:1;
    }
}

.scorpius-bottle{
    width:110px;
    cursor:pointer;

    transition:
        transform .4s ease,
        filter .4s ease;
}

.scorpius-bottle:hover{
    transform:translateY(-10px) scale(1.05);

    filter:
        brightness(1.2)
        drop-shadow(0 0 20px rgba(255,120,180,.55));
}

.scorpius-gif-wrapper{
    position:absolute;
    inset:0;

    z-index:10;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.65);
}

.scorpius-gif-wrapper{
    opacity:0;
    padding:20px;
    visibility:hidden;
    pointer-events:none;

    transition:opacity .8s ease;
}

.scorpius-gif-wrapper.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.scorpius-gif{
    max-width:100%;
    max-height:100%;

    width:auto;
    height:auto;

    object-fit:contain;

    transform:scale(.9);
}

.scorpius-ending{
    position:absolute;
    inset:0;

    z-index:20;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    text-align:center;

    font-size:2rem;
    line-height:1.5;

    font-family:'Playfair Display', serif;

    background:rgba(0,0,0,.7);
    backdrop-filter:blur(6px);

    color:white;

    text-shadow:
        0 0 25px rgba(255,120,180,.7);

    opacity:0;
    visibility:hidden;

    transform:scale(.96);
    filter:none;

    transition:
        opacity 1.8s ease,
        transform 1.8s ease,
        filter 1.8s ease;

    pointer-events:none;
}

.scorpius-ending.show{
    opacity:1;
    visibility:visible;

    transform:scale(1);
    filter:blur(0px);
}

.scorpius-ending.show{
    opacity:1;
}

@keyframes finalTextReveal{
    from{
        opacity:0;
        transform:scale(.96);
        filter:blur(8px);
    }
    to{
        opacity:1;
        transform:scale(1);
        filter:blur(0px);
    }
}

.hidden-element{
    opacity:0;
    transform:translateY(25px);
    pointer-events:none;
}

.reveal-element{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0px);
    transition:
        opacity 1.6s ease,
        transform 1.6s ease;
}

.scorpius-choice{
    margin-top:40px;
}

.scorpius-sequence{
    position:relative;
    z-index:2;

    width:100%;
    padding:30px;

    text-align:center;
}

.scorpius-layout,
.scorpius-sequence,
.scorpius-line-1,
.scorpius-line-2,
.scorpius-bottles,
.scorpius-bottle,
.scorpius-ending{

    transform: translateZ(0);

    backface-visibility: hidden;

    -webkit-font-smoothing: antialiased;

    will-change:
        transform,
        opacity;

}

.scorpius-bottles{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:clamp(12px, 4vw, 40px);

    width:100%;
    flex-wrap:nowrap;
}

.scorpius-bottle{
    width:clamp(90px, 28vw, 180px);
    height:auto;

    max-height:55vh;
    object-fit:contain;

    transition:transform .35s ease;
}

@media (max-width: 768px){

    .scorpius-template,
    .scorpius-layout{
        width:100%;
        padding:20px 12px;
    }

    .scorpius-bottles{
        gap:14px;
    }

    .scorpius-bottle{
        width:min(38vw, 140px);
        max-height:42vh;
    }

    .scorpius-choice{
        width:100%;
    }
}

@media (max-width: 420px){

    .scorpius-bottle{
        width:min(42vw, 120px);
        max-height:38vh;
    }

    .scorpius-line-1,
    .scorpius-line-2{
        font-size:clamp(1rem, 4vw, 1.3rem);
    }
}

.andromeda-layout{
    position:relative;

    aspect-ratio:9/16;

    width:min(92vw, 430px);
    max-height:85vh;

    padding:clamp(16px, 4vw, 40px);

    overflow-y:auto;
    overflow-x:hidden;
    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:black;
}

.andromeda-bg{
    position:absolute;
    inset:0;

    background-image:
        url("constellations/results/andromeda-bg.png");

    background-size:cover;
    background-position:center;

    filter:brightness(.8);
}

.walkie-wrapper{
    position:relative;
    z-index:2;

    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:30px;
}

.walkie-image{
    width:100%;

    user-select:none;
    pointer-events:none;

    filter:
        drop-shadow(0 0 25px rgba(120,180,255,.2));

    transition:
        transform .4s ease,
        filter .4s ease;
}

.walkie-button-hitbox{
    position:absolute;

    cursor:pointer;

    z-index:5;
}

.walkie-button-hitbox:hover{
    filter:brightness(1.1);
}

.walkie-subtitle{

    margin-top:24px;

    min-height:72px;

    width:100%;

    text-align:center;

    font-size:clamp(.9rem, 3vw, 1.15rem);
    line-height:1.7;

    color:white;

    opacity:0;

    transition:opacity .8s ease;

    text-shadow:
        0 0 15px rgba(180,220,255,.35);

    font-family:
        'Playfair Display',
        serif;

    letter-spacing:.5px;

    padding-inline:16px;

    overflow-wrap:break-word;

    display:flex;
    align-items:center;
    justify-content:center;
}

.walkie-subtitle.show{
    opacity:1;
}

.andromeda-final-text{
    position:absolute;
    inset:0;

    z-index:10;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    text-align:center;

    font-size:2.6rem;
    line-height:1.4;

    color:white;

    opacity:0;
    visibility:hidden;

    transition:
        opacity 2s ease;

    text-shadow:
        0 0 30px rgba(180,220,255,.35);

    font-family:
        'Playfair Display',
        serif;

    background:
        rgba(0,0,0,.35);

    backdrop-filter:
        blur(3px);
}

.andromeda-final-text.show{
    opacity:1;
    visibility:visible;
}

.walkie-image.active{
    animation:walkiePulse 2s infinite;
}

@keyframes walkiePulse{

    0%,100%{
        filter:
            drop-shadow(0 0 10px rgba(120,255,180,.2));
    }

    50%{
        filter:
            drop-shadow(0 0 30px rgba(120,255,180,.55));
    }

}

.walkie-container{
    position:relative;

    width:80%;
    max-width:280px;

    display:flex;
    align-items:center;
    justify-content:center;
}

@media (max-height: 740px){

    .walkie-wrapper{
        justify-content:flex-start;
        padding-top:40px;
    }

    .walkie-container{
        width:70%;
    }

    .walkie-subtitle{
        min-height:auto;
        margin-top:18px;
    }

    .andromeda-final-text{
        font-size:clamp(1.5rem, 6vw, 2.2rem);
        padding:24px;
    }

}

.leo-layout{
    position:relative;

    width:min(92vw, 430px);

    height:90vh;
    max-height:90vh;

    overflow:hidden !important;

    border-radius:24px;

    background:black;

    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.leo-bg{
    position:absolute;
    inset:0;

    background-image:
        url("constellations/results/leo-sky-bg.png");

    background-size:cover;
    background-position:center;

    filter:
        brightness(.82)
        saturate(1.08);

    z-index:1;
}

#leoFireworks{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    z-index:2;
}

.leo-image-wrapper{
    position:absolute;

    left:0;
    bottom:0;

    width:100%;

    z-index:5;

    display:flex;
    justify-content:center;
    align-items:flex-end;

    opacity:0;

    transition:
        opacity 2.5s ease,
        transform 2.5s ease;

    transform:
        translateY(40px)
        scale(.96);

    pointer-events:none;
}

.leo-image-wrapper::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:100%;
    height:120px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.45),
            transparent
        );

    pointer-events:none;
}

.leo-image-wrapper.show{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}

.leo-final-image{

    width:100%;
    max-width:420px;

    object-fit:contain;
    object-position:bottom;

    display:block;

    filter:
        drop-shadow(0 0 25px rgba(255,180,220,.22));

    animation:
        leoFloat 5s ease-in-out infinite,
        leoGlow 4s ease-in-out infinite;
}

@keyframes leoFloat{

    0%,100%{
        transform:
            translateY(0px);
    }

    50%{
        transform:
            translateY(-10px);
    }

}

@keyframes leoGlow{

    0%,100%{
        filter:
            drop-shadow(0 0 25px rgba(255,180,220,.2));
    }

    50%{
        filter:
            drop-shadow(0 0 45px rgba(255,180,220,.45));
    }

}

.pisces-layout{
    position:relative;

    width:min(92vw, 430px);

    height:90vh;
    max-height:90vh;

    overflow:hidden;

    border-radius:24px;

    background:black;

    display:flex;
    align-items:center;
    justify-content:center;
}

.pisces-video{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:2;

    transition:
        opacity 2.5s ease,
        transform 3s ease,
        filter 3s ease;
}

.pisces-video.fade-out{

    opacity:0;

    transform:scale(1.06);

    filter:
        blur(12px)
        brightness(.45);
}

.pisces-bg{
    position:absolute;
    inset:0;

    background-image:
        url("constellations/results/pisces-sea.gif");

    background-size:cover;
    background-position:center;

    opacity:0;

    z-index:1;

    transform:scale(1.05);

    filter:
        brightness(.5)
        saturate(1.15)
        blur(1px);

    transition:
        opacity 2.5s ease,
        transform 6s ease;
}

.pisces-bg.active{

    opacity:1;

    transform:scale(1);
}

.pisces-ending{
    position:absolute;
    inset:0;

    z-index:5;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:40px;

    opacity:0;

    transition:
        opacity 3s ease;
}

.pisces-ending.show{
    opacity:1;
}

.pisces-text{

    position:relative;

    max-width:92%;

    text-align:center;

    color:white;

    font-size:
        clamp(1.15rem, 3vw, 1.9rem);

    line-height:1.9;

    font-family:
        'Playfair Display',
        serif;

    font-style:italic;

    letter-spacing:.5px;

    text-shadow:
        0 0 12px rgba(180,220,255,.35),
        0 0 30px rgba(130,170,255,.35),
        0 0 60px rgba(120,180,255,.2);

    animation:
        piscesWaterFloat 3.6s ease-in-out infinite,
        piscesTextReveal 1.4s ease-out;

    will-change:
        transform,
        opacity;
}

.pisces-glow{
    position:absolute;

    width:75%;
    aspect-ratio:1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(130,170,255,.16),
            transparent 70%
        );

    filter:blur(40px);

    animation:
        piscesPulse 6s ease-in-out infinite;
}

@keyframes piscesWaterFloat{

    0%{

        transform:
            translateX(0px)
            translateY(0px)
            rotate(0deg);

    }

    20%{

        transform:
            translateX(4px)
            translateY(-6px)
            rotate(.4deg);

    }

    50%{

        transform:
            translateX(-5px)
            translateY(4px)
            rotate(-.4deg);

    }

    75%{

        transform:
            translateX(3px)
            translateY(-3px)
            rotate(.3deg);

    }

    100%{

        transform:
            translateX(0px)
            translateY(0px)
            rotate(0deg);

    }

}

@keyframes piscesTextReveal{

    from{

        opacity:0;

        transform:
            translateY(25px)
            scale(.92);

        filter:
            blur(10px);

    }

    to{

        opacity:1;

        transform:
            translateY(0)
            scale(1);

        filter:
            blur(0px);

    }

}

@keyframes piscesPulse{

    0%,100%{
        transform:scale(1);
        opacity:.6;
    }

    50%{
        transform:scale(1.08);
        opacity:1;
    }
    
}

@media (max-width: 768px){
    .pisces-text{
        line-height:1.75;
        padding-inline:10px;
    }
}

.draco-layout{
    position:relative;

    width:min(90vw, 500px);
    height:90vh;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
}

.draco-scene{
    position:relative;

    width:100%;
    height:100%;

    display:flex;
    align-items:center;
    justify-content:center;
}

.draco-dragon{
    position:relative;

    width:100%;
    height:100%;

    max-height:90vh;

    object-fit:contain;
    object-position:center;

    display:block;
}

.wake-dragon-btn{
    position:absolute;

    top:7%;
    left:50%;

    transform:translateX(-50%);

    z-index:100;

    padding:12px 30px;

    border:none;
    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(255,90,120,0.35),
            rgba(255,60,0,0.25)
        );

    color:white;

    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;

    backdrop-filter:blur(12px);

    border:
        1px solid rgba(255,255,255,0.15);

    cursor:pointer;

    box-shadow:
        0 0 25px rgba(255,80,80,0.35),
        inset 0 0 20px rgba(255,255,255,0.05);

    transition:0.35s ease;
}

.wake-dragon-btn:hover{

    transform:
        translateX(-50%)
        scale(1.05);

    box-shadow:
        0 0 45px rgba(255,60,0,0.55),
        0 0 90px rgba(255,0,0,0.25);
}

.wake-dragon-btn:active{

    transform:
        translateX(-50%)
        scale(0.96);
}

.dragon-eye{

    position:absolute;

    width:16%;
    height:7.5%;

    opacity:0;

    transform:scaleY(0);

    overflow:hidden;

    isolation:isolate;

    filter:blur(0.5px);

    clip-path: polygon(
        0% 50%,
        10% 28%,
        25% 12%,
        50% 0%,
        75% 12%,
        90% 28%,
        100% 50%,
        90% 72%,
        75% 88%,
        50% 100%,
        25% 88%,
        10% 72%
    );

    z-index:20;
}

.dragon-eye::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,220,1) 0%,
            rgba(255,220,120,1) 12%,
            rgba(255,140,0,0.95) 28%,
            rgba(255,60,0,0.92) 55%,
            rgba(120,0,0,0.8) 100%
        );

    filter:
        blur(1px)
        brightness(1.2);

    mask-image:
        radial-gradient(
            ellipse at center,
            black 55%,
            transparent 100%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 55%,
            transparent 100%
        );

    animation:
        dragonEyeFlicker 0.14s infinite alternate,
        dragonEyeMorph 2.2s infinite ease-in-out;

    box-shadow:
        0 0 18px rgba(255,120,0,0.6),
        0 0 40px rgba(255,60,0,0.4),
        0 0 70px rgba(255,0,0,0.25);
}

.dragon-eye::after{

    content:"";

    position:absolute;

    top:14%;
    left:50%;

    width:8%;
    height:72%;

    transform:
        translateX(-50%);

    border-radius:
        60% 40%
        50% 50%
        /
        15% 15%
        85% 85%;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.95),
            rgba(20,0,0,1),
            rgba(0,0,0,0.95)
        );

    filter:
        blur(0.4px);

    box-shadow:
        0 0 8px rgba(0,0,0,0.8),
        0 0 15px rgba(255,80,0,0.3);

    animation:
        pupilPulse 3s ease-in-out infinite;
}

@keyframes pupilPulse{

    0%,100%{

        transform:
            translateX(-50%)
            scaleY(1);
    }

    50%{

        transform:
            translateX(-50%)
            scaleY(0.82);
    }
}

@keyframes dragonEyeFlicker{

    from{
        filter:
            brightness(1)
            blur(1px);
    }

    to{
        filter:
            brightness(1.5)
            blur(2px);
    }
}

@keyframes dragonEyeMorph{

    0%,100%{
        clip-path: polygon(
            0% 50%,
            10% 30%,
            25% 15%,
            50% 5%,
            75% 15%,
            90% 30%,
            100% 50%,
            90% 70%,
            75% 85%,
            50% 95%,
            25% 85%,
            10% 70%
        );
    }

    50%{
        clip-path: polygon(
            0% 50%,
            8% 25%,
            20% 10%,
            50% 0%,
            80% 10%,
            92% 25%,
            100% 50%,
            92% 75%,
            80% 90%,
            50% 100%,
            20% 90%,
            8% 75%
        );
    }
}

.left-eye{
    left:18%;
    top:50%;
}

.right-eye{
    right:18%;
    top:50%;
}

.dragon-eye.awaken{

    animation:
        dragonEyeAppear 2.5s cubic-bezier(.16,.84,.44,1) forwards;

}

@keyframes dragonEyeAppear{

    0%{

        opacity:0;

        transform:
            scaleY(0)
            scaleX(0.2)
            rotate(-2deg);

        filter:
            blur(12px)
            brightness(2);
    }

    25%{

        opacity:1;
    }

    55%{

        transform:
            scaleY(1.5)
            scaleX(1.15)
            rotate(1deg);

        filter:
            blur(4px)
            brightness(2.5);
    }

    100%{

        opacity:1;

        transform:
            scaleY(1)
            scaleX(1);

        filter:
            blur(1px)
            brightness(1.2);
    }
}

.smoke-container{
    position:absolute;
    width:10%;
    height:10%;
    pointer-events:none;
}

.left-smoke{
    left:30.07%;
    top:78.16%;
}

.right-smoke{
    right:30.07%;
    top:78.16%;
}

.smoke{

    position:absolute;

    width:40px;
    height:40px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.18),
            rgba(120,120,120,0.08),
            transparent 75%
        );

    filter:blur(12px);

    mix-blend-mode:screen;

    animation:dragonSmoke 4s linear forwards;
}

@keyframes dragonSmoke{

    0%{
        opacity:0;
        transform:
            translate(0px,0px)
            scale(0.3);
    }

    10%{
        opacity:1;
    }

    100%{
        opacity:0;

        transform:
            translate(
                var(--xDrift),
                -220px
            )
            scale(3.5);
    }
}

.fire-particle{

    position:absolute;

    width:5px;
    height:5px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #fff6a8,
            #ff7b00 50%,
            #ff2200
        );

    box-shadow:
        0 0 12px #ff6600,
        0 0 25px #ff2200;

    animation:emberFly 1.8s linear forwards;
}

@keyframes emberFly{

    0%{
        opacity:1;

        transform:
            translate(0px,0px)
            scale(1);
    }

    100%{
        opacity:0;

        transform:
            translate(
                var(--xDrift),
                -140px
            )
            scale(0);
    }
}

.dragon-fire-burst{

    position:absolute;

    width:45px;
    height:45px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,220,0.95) 0%,
            rgba(255,180,0,0.95) 18%,
            rgba(255,90,0,0.85) 45%,
            rgba(255,0,0,0) 75%
        );

    filter:
        blur(6px)
        brightness(1.4);

    mix-blend-mode:screen;

    animation:
        dragonBurst 0.9s ease-out forwards;
}

@keyframes dragonBurst{

    0%{

        opacity:0;

        transform:
            scale(0.2)
            translateY(0px);
    }

    20%{

        opacity:1;
    }

    100%{

        opacity:0;

        transform:
            scale(2.8)
            translateY(-50px);
    }
}

.draco-overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,0.8);

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    padding:40px;

    opacity:0;
    pointer-events:none;

    transition:1.2s ease;

    z-index:50;
}

.draco-overlay.show{
    opacity:1;
}

.draco-overlay p{
    font-size:1.8rem;
    line-height:1.6;

    color:white;

    text-shadow:
        0 0 20px rgba(255,80,80,0.6);

    animation:overlayText 2s ease;
}

@keyframes overlayText{

    from{
        opacity:0;
        transform:
            translateY(20px)
            scale(0.95);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

.wake-dragon-btn.vanish{

    opacity:0;

    transform:
        translateX(-50%)
        translateY(-15px)
        scale(0.8);

    pointer-events:none;
}

.pegasus-layout{

    position:relative;

    width:min(90vw, 500px);
    height:90vh;

    aspect-ratio:9/16;

    overflow:hidden;

    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#000;

    box-shadow:
        0 0 40px rgba(180,220,255,0.12),
        0 0 90px rgba(120,180,255,0.08);
}

.pegasus-scene{

    position:relative;

    width:100%;
    height:100%;
}

.pegasus-bg{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    filter:
        brightness(0.9)
        contrast(1.08)
        saturate(1.05);

    transform:scale(1.02);
}

.pegasus-text{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:40%;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:40px;

    z-index:20;

    pointer-events:none;
}

.pegasus-text h2{

    display:flex;
    flex-direction:column;
    gap:18px;

    font-size:clamp(1.7rem, 4vw, 2.6rem);

    font-weight:300;

    line-height:1.25;

    letter-spacing:1px;

    color:white;

    text-shadow:
        0 0 10px rgba(255,255,255,0.25),
        0 0 25px rgba(180,220,255,0.22),
        0 0 60px rgba(120,180,255,0.18);

    animation:
        pegasusTextReveal 3s ease;
}

.pegasus-text h2 span{

    opacity:0;

    transform:
        translateY(25px);

    animation:
        pegasusLineReveal 1.6s ease forwards;
}

.pegasus-text h2 span:nth-child(1){
    animation-delay:0.4s;
}

.pegasus-text h2 span:nth-child(2){
    animation-delay:1.2s;
}

.pegasus-fly{

    position:absolute;

    left:50%;
    bottom:0;

    transform:
        translateX(-50%);

    width:100%;

    max-height:40%;

    object-fit:contain;
    object-position:bottom center;

    z-index:15;

    filter:
        drop-shadow(0 0 20px rgba(255,255,255,0.25))
        drop-shadow(0 0 45px rgba(160,220,255,0.18));

    animation:
        pegasusFloat 5s ease-in-out infinite;
}

@keyframes pegasusFloat{

    0%,100%{

        transform:
            translateX(-50%)
            translateY(0px);
    }

    50%{

        transform:
            translateX(-50%)
            translateY(-14px);
    }
}

@keyframes pegasusLineReveal{

    to{

        opacity:1;

        transform:
            translateY(0px);
    }
}

.pegasus-scene::after{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.12),
            transparent 30%,
            transparent 70%,
            rgba(0,0,0,0.25)
        );

    z-index:5;

    pointer-events:none;
}

.aquarius-layout{

    position:relative;

    width:min(90vw, 500px);
    height:90vh;

    aspect-ratio:9/16;

    overflow:hidden;

    border-radius:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#000;
}

.aquarius-scene{

    position:relative;

    width:100%;
    height:100%;
}

.aquarius-bg{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

.aquarius-puddle::before{

    content:"";

    position:absolute;

    inset:-20%;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255,255,255,0.08) 40%,
            transparent 60%
        );

    transform:
        translateX(-120%)
        rotate(8deg);

    pointer-events:none;

    opacity:0;
}

.aquarius-puddle.active::before{

    animation:
        waterLightSweep 2s ease forwards;
}

@keyframes waterLightSweep{

    0%{

        opacity:0;

        transform:
            translateX(-120%)
            rotate(8deg);
    }

    20%{
        opacity:1;
    }

    100%{

        opacity:0;

        transform:
            translateX(120%)
            rotate(8deg);
    }
}

.aquarius-puddle{

    position:absolute;

    top:63.8%;
    left:14.55%;

    width:58.88%;
    height:20.86%;

    overflow:hidden;

    cursor:pointer;

    border-radius:50%;

    z-index:10;
}

.aquarius-puddle::after{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.06),
            transparent,
            rgba(180,220,255,0.04)
        );

    mix-blend-mode:screen;

    opacity:0.5;

    pointer-events:none;
}

.water-ripple{

    position:absolute;
    inset:-20%;

    opacity:0;

    pointer-events:none;

    background:
        repeating-radial-gradient(
            circle at center,
            rgba(255,255,255,0.08) 0px,
            rgba(255,255,255,0.03) 12px,
            transparent 26px,
            transparent 40px
        );

    filter:
        blur(10px);

    transform:
        scale(0.6);

}

.aquarius-puddle.active .water-ripple{

    animation:
        puddleRipple 2s ease forwards;
}

.aquarius-puddle.active{

    animation:
        puddleDistort 2s ease-in-out,
        puddleWave 2s ease-in-out;
}

.aquarius-memory{

    position:absolute;

    left:54%;
    top:42%;

    width:62%;

    aspect-ratio:4/3;

    object-fit:cover;
    object-position:center;

    transform:
        translate(-50%, -50%)
        scale(0.7);

    opacity:0;

    z-index:20;

    border-radius:14px;

    filter:
        brightness(0.38)
        saturate(0.65)
        contrast(0.9)
        blur(1.2px);

    transition:
        opacity 3s ease,
        transform 3s ease,
        filter 3s ease;

    pointer-events:none;

    mix-blend-mode:screen;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 42%,
            transparent 88%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 42%,
            transparent 88%
        );
}

.aquarius-memory.show{

    opacity:0.55;

    transform:
        translate(-50%, -50%)
        scale(1);

    filter:
        brightness(0.52)
        saturate(0.8)
        contrast(0.95)
        blur(0.3px);
}

@keyframes puddleDistort{

    0%{

        transform:
            scale(1)
            skewX(0deg);
    }

    12%{

        transform:
            scale(1.02,0.97)
            skewX(-1deg);
    }

    24%{

        transform:
            scale(0.98,1.03)
            skewX(1deg);
    }

    38%{

        transform:
            scale(1.03,0.96)
            skewX(-0.5deg);
    }

    52%{

        transform:
            scale(0.99,1.01)
            skewX(0.4deg);
    }

    100%{

        transform:
            scale(1)
            skewX(0deg);
    }
}

@keyframes puddleWave{

    0%{
        filter:
            brightness(1)
            blur(0px);
    }

    30%{
        filter:
            brightness(1.08)
            blur(0.8px);
    }

    60%{
        filter:
            brightness(0.95)
            blur(0.4px);
    }

    100%{
        filter:
            brightness(1)
            blur(0px);
    }
}

@keyframes puddleRipple{

    0%{

        opacity:0;

        transform:
            scale(0.4)
            rotate(0deg);
    }

    20%{

        opacity:0.6;
    }

    100%{

        opacity:0;

        transform:
            scale(1.8)
            rotate(8deg);
    }
}

.aquarius-text{

    position:absolute;

    top:10%;
    left:50%;

    transform:translateX(-50%);

    width:80%;

    text-align:center;

    z-index:30;

    pointer-events:none;
}

.aquarius-text h2{

    display:flex;
    flex-direction:column;

    gap:16px;

    color:white;

    font-size:
        clamp(1.5rem, 3vw, 2.4rem);

    font-weight:400;
    font-style: italic;

    line-height:1.35;

    letter-spacing:1px;

    text-shadow:
        0 0 12px rgba(255,255,255,0.2),
        0 0 30px rgba(120,180,255,0.18);

    animation:
        aquariusTextReveal 2.5s ease;
}

.aquarius-text span{

    opacity:0;

    transform:
        translateY(20px);

    animation:
        aquariusLineReveal 1.6s ease forwards;
}

.aquarius-text span:nth-child(1){
    animation-delay:0.4s;
}

.aquarius-text span:nth-child(2){
    animation-delay:1.2s;
}

@keyframes aquariusLineReveal{

    to{

        opacity:1;

        transform:
            translateY(0px);
    }
}

@media (max-width: 768px){
  .draco-layout{
    max-width: 90vw;
    height: 80svh;
    aspect-ratio: 9 / 16;
  }

  .draco-layout img{
    object-fit: cover;
  }

   .aquarius-layout{
    transform: scale(0.85);
  }

  .pegasus-layout{
    aspect-ratio: 9 / 13;
    transform: scale(0.85);
    transform-origin: top center;
    max-height: 80svh;
    overflow: hidden;
  }

  .pegasus-layout img,
  .pegasus-layout video,
  .pegasus-layout canvas{
    max-width: 100%;
    height: 80svh;
  }

  .pegasus-layout h2 {
    padding-top: 30px;
  }

  .pegasus-fly {
    padding-bottom: 110px;
  }

}