:root{
  --pink:#ff4fa3;
  --orange:#ff8a3d;
  --yellow:#ffd84d;
  --green:#49d17d;
  --blue:#42b8ff;
  --purple:#8b5cf6;
  --bg:#0b0b0f;
  --bg-deep:#151522;
  --text:#ffffff;
}

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

html{
  min-height:100%;
}

body{
  min-height:100%;
  font-family:'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.65), transparent 38%),
    radial-gradient(circle at top right, rgba(255,79,163,.55), transparent 38%),
    linear-gradient(180deg, var(--bg), var(--bg-deep));
  color:var(--text);
  overflow-x:hidden;
}

.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:2rem;
  position:relative;
  isolation:isolate;
  overflow:hidden;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size:22px 22px;
  opacity:.22;
  z-index:-4;
}

.hero::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 50% 20%, rgba(255,255,255,.18), transparent 10%),
    radial-gradient(circle at 45% 30%, rgba(255,216,77,.12), transparent 16%);
  filter:blur(20px);
  opacity:.8;
  z-index:-3;
}

.light-beam{
  position:absolute;
  top:-25%;
  width:34vw;
  height:150vh;
  min-width:220px;
  background:linear-gradient(
    180deg,
    transparent,
    rgba(255,255,255,.15),
    rgba(255,216,77,.12),
    transparent
  );
  filter:blur(14px);
  opacity:.35;
  transform-origin:top center;
  z-index:-2;
  pointer-events:none;
}

.beam-one{
  left:10%;
  transform:rotate(25deg);
  animation:sweepOne 11s ease-in-out infinite alternate;
}

.beam-two{
  right:6%;
  transform:rotate(-25deg);
  animation:sweepTwo 13s ease-in-out infinite alternate;
}

.sparkles{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 1px, transparent 2px) 10% 20% / 180px 180px,
    radial-gradient(circle, rgba(255,216,77,.9) 0 1px, transparent 2px) 80% 18% / 220px 220px,
    radial-gradient(circle, rgba(66,184,255,.85) 0 1px, transparent 2px) 20% 80% / 240px 240px,
    radial-gradient(circle, rgba(255,79,163,.85) 0 1px, transparent 2px) 75% 75% / 200px 200px;
  animation:twinkle 4s ease-in-out infinite alternate;
  opacity:.55;
}

.disco-ball{
  font-size:5rem;
  margin-bottom:1.5rem;
  animation:spin 12s linear infinite, float 4s ease-in-out infinite;
  text-shadow:0 0 28px rgba(255,255,255,.35);
}

.logo{
  position:relative;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:.05em;
  font-size:clamp(2.5rem,8vw,7rem);
  line-height:.9;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#ffffff;
  overflow:hidden;
  filter:drop-shadow(0 0 16px rgba(255,255,255,.18));
  animation:logoGlow 6s ease-in-out infinite;
}

.logo span{
  display:block;
  background:linear-gradient(
    90deg,
    var(--pink),
    var(--orange),
    var(--yellow),
    var(--green),
    var(--blue),
    var(--purple),
    var(--pink)
  );
  background-size:400% 400%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rainbowShift 12s ease infinite;
}

.logo::after{
  content:"";
  position:absolute;
  top:-20%;
  left:-45%;
  width:35%;
  height:140%;
  background:linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,.7),
    transparent
  );
  transform:skewX(-18deg);
  opacity:.0;
  animation:shimmer 9s ease-in-out infinite;
  pointer-events:none;
  mix-blend-mode:screen;
}

.pride-message{
  margin-top:1.5rem;
  font-size:clamp(1.1rem,2vw,1.6rem);
  line-height:1.4;
  max-width:720px;
}

.cta{
  margin-top:2rem;
  display:inline-block;
  text-decoration:none;
  color:#08080c;
  font-weight:800;
  padding:1rem 2rem;
  border-radius:999px;
  background:linear-gradient(90deg,var(--pink),var(--yellow));
  box-shadow:0 10px 30px rgba(255,79,163,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}

.cta:hover,
.cta:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 38px rgba(255,216,77,.28);
}

.footer{
  margin-top:3rem;
  opacity:.82;
  font-size:.9rem;
}

@keyframes rainbowShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

@keyframes logoGlow{
  0%,100%{
    filter:drop-shadow(0 0 14px rgba(255,255,255,.14));
  }
  50%{
    filter:drop-shadow(0 0 32px rgba(255,255,255,.34));
  }
}

@keyframes shimmer{
  0%, 72%{
    left:-45%;
    opacity:0;
  }
  78%{
    opacity:.4;
  }
  86%{
    left:115%;
    opacity:0;
  }
  100%{
    left:115%;
    opacity:0;
  }
}

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

@keyframes float{
  0%,100%{translate:0 0;}
  50%{translate:0 -8px;}
}

@keyframes sweepOne{
  from{transform:rotate(18deg) translateX(-4vw);}
  to{transform:rotate(35deg) translateX(8vw);}
}

@keyframes sweepTwo{
  from{transform:rotate(-18deg) translateX(6vw);}
  to{transform:rotate(-34deg) translateX(-8vw);}
}

@keyframes twinkle{
  from{opacity:.35; transform:scale(1);}
  to{opacity:.75; transform:scale(1.03);}
}

@media (max-width:600px){
  .hero{
    padding:1.5rem;
  }

  .disco-ball{
    font-size:3.75rem;
  }

  .logo{
    letter-spacing:.055em;
  }

  .cta{
    width:100%;
    max-width:280px;
  }

  .footer{
    font-size:.8rem;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
  }
}