/* ANTA FONT – GOOGLE FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Anta&display=swap');

/* GLOBAL FONT USAGE */
body,
button,
h1, h2, h3, h4,
p,
.nav-logo,
.tagline,
.footer p,
.cta-btn {
  font-family: "Anta", sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.06em;
}

:root {
  --gm-bg: #050608;
  --gm-bg-soft: #0b0f13;
  --gm-green: #6adf70;
  --gm-green-soft: #4db45b;
  --gm-text: #f5f5f5;
  --gm-muted: #9198a1;
}

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

html,
body {
  height: 100%;
  scroll-behavior: smooth;
  cursor: none; /* hide default arrow */
}

/* REMOVE the old HK Modular line here (you had it before) */
body {
  background: var(--gm-bg);
  color: var(--gm-text);
  overflow-x: hidden;
}

/* CUSTOM CURSOR */
/* CUSTOM CURSOR */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 42px;
  height: 42px;
  pointer-events: none;
  z-index: 9999;
  background-image: url("assets/gm-head-logo.png");
  background-size: contain;
  background-repeat: no-repeat;

  /* GSAP controls x / y; we only keep the anchor translate */
  transform: translate(-50%, -50%);

  filter: drop-shadow(0 0 14px rgba(106, 223, 112, 0.7));
  transition: filter 0.15s ease;
  /* ❌ no CSS animation here – GSAP does the breathing */
}

/* when hovering key elements – just stronger glow, NO transform / animation */
.custom-cursor.cursor-active {
  filter: drop-shadow(0 0 30px rgba(106, 223, 112, 1));
}



/* click ripple */
.custom-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(106, 223, 112, 0.9);
  opacity: 0;
}

.custom-cursor.cursor-click::after {
  animation: cursorRipple 0.35s ease-out;
}

@keyframes cursorRipple {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}

/* @keyframes cursorHoverPulse {
  0% {
    transform: translate(-50%, -50%) scale(1.1) rotate(-3deg);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.35) rotate(3deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2) rotate(0deg);
  }
} */


/* mobile: keep normal system cursor (optional) */
@media (max-width: 768px) {
  html,
  body {
    cursor: auto;
  }

  .custom-cursor {
    display: none;
  }

  /* MOBILE: disable hero lasers so no diagonal cut appears */
  .hero-lasers {
    display: none !important;
    animation: none !important;
  }
}


/* NAVBAR */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.1rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0)
  );
  backdrop-filter: blur(10px);
  transition: padding 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.nav-inner {
  position: relative;
}

.nav-logo {
  display: block;
  height: 32px;
  object-fit: contain;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* icon visible by default, wordmark hidden */
.nav-logo-icon {
  opacity: 1;
}
.nav-logo-word {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
}

/* hover reveal – swap icon->wordmark */
.nav-inner:hover .nav-logo-icon {
  opacity: 0;
}
.nav-inner:hover .nav-logo-word {
  opacity: 1;
}

/* neon underline */
.navbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 110px;
  height: 2px;
  transform: translateX(-50%) scaleX(0.6);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(106, 223, 112, 1), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* when scrolled */
.navbar.nav-scrolled {
  padding: 0.55rem 0;
  background: rgba(0, 0, 0, 0.92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.8);
}

.navbar.nav-scrolled::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}


/* SCROLL PROGRESS BAR + DOTS */

.scroll-progress {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  height: 60vh;
  width: 8px;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scroll-progress::before {
  /* track glow */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(to bottom, #050608, #0b0f13);
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.8);
}

/* filling bar */
.scroll-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%; /* updated via GSAP */
  border-radius: 999px;
  background: linear-gradient(
    to top,
    rgba(106, 223, 112, 1),
    rgba(106, 223, 112, 0.1)
  );
  box-shadow:
    0 0 10px rgba(106, 223, 112, 0.8),
    0 0 22px rgba(106, 223, 112, 0.7);
}

/* dots sit on top of the bar
.progress-dots {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}

.progress-dots span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2a2f37;
  box-shadow: 0 0 0 1px rgba(106, 223, 112, 0.3);
  cursor: pointer;
  transition: all 0.2s ease-out;
}

.progress-dots span.active {
  background: var(--gm-green);
  box-shadow:
    0 0 10px rgba(106, 223, 112, 0.9),
    0 0 18px rgba(106, 223, 112, 0.8);
  transform: scale(1.35);
} */

/* PANELS / SECTIONS */

main {
  position: relative;
  z-index: 1;
}

.panel {
  min-height: 100vh;
  padding: 5rem 1.5rem 4rem;
  display: flex;
  align-items: center;
  position: relative;
  transform-origin: center center;
  will-change: transform, filter, opacity;

}

/* INTRO SECTION */

.intro {
  justify-content: center;
  align-items: center;
  text-align: center;
  background: radial-gradient(circle at top, #161b22 0, var(--gm-bg) 55%);
  padding-top: 4rem; /* so it sits nicely below navbar */
  overflow: hidden;

}

.intro-inner {
  position: relative;
  z-index: 1;
  margin-top: 0; /* remove the old margin so it's really centered */
}

/* HERO LOGO + VINYL + SHIMMER */

.hero-logo-wrap {
  position: relative;
  width: min(320px, 55vw);   /* responsive circle */
  aspect-ratio: 1 / 1;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  /* overflow: hidden; */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* vinyl-style disk behind the logo */
.hero-vinyl {
  position: absolute;
  inset: 0%;
  border-radius: 50%;
  overflow: hidden;

  /* more contrast + bright wedge so spin is visible */
  background:
    /* dark inner hub */
    radial-gradient(circle at center, #050608 0 26%, transparent 27%),

    /* soft outer glow ring */
    radial-gradient(circle at center,
      rgba(106, 223, 112, 0.25) 0 60%,
      transparent 61%
    ),

    /* bright + dark wedges to show motion */
    conic-gradient(
      from 0deg,
      rgba(0, 0, 0, 0.95) 0deg,
      rgba(106, 223, 112, 0.65) 40deg,
      rgba(0, 0, 0, 0.9) 120deg,
      rgba(106, 223, 112, 0.4) 200deg,
      rgba(0, 0, 0, 0.9) 320deg,
      rgba(0, 0, 0, 0.95) 360deg
    );

  box-shadow:
    0 0 45px rgba(0, 0, 0, 0.9),
    0 0 26px rgba(106, 223, 112, 0.7);
  opacity: 0.95;
  animation: heroVinylSpin 26s linear infinite;
  overflow: hidden;
}

/* moving glow streak on top of the disc */
.hero-vinyl::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.28) 20deg,
    transparent 60deg,
    transparent 360deg
  );
  mix-blend-mode: screen;
  opacity: 0.85;
  animation: heroVinylLight 9s linear infinite;
}

@keyframes heroVinylSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes heroVinylLight {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* logo itself – bigger and centered */
.intro-logo {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}


/* Ambient layer behind hero content */
.hero-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at top, #151b23 0, #050608 55%);
}

/* slow green laser sweep */
.hero-lasers {
  position: absolute;
  inset: -20%;
  background: conic-gradient(
    from 140deg,
    transparent 0 40%,
    rgba(106, 223, 112, 0.15) 45%,
    transparent 55% 100%
  );
  mix-blend-mode: screen;
  opacity: 0.7;
  animation: heroLasers 5s ease-in-out infinite alternate;
}

/* fog from bottom */
.hero-fog {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -40%;
  height: 70%;
  background: radial-gradient(circle at top, rgba(106, 223, 112, 0.14), transparent 65%);
  filter: blur(26px);
  opacity: 0.6;
  animation: heroFog 14s ease-in-out infinite alternate;
}

/* floating particles */
.hero-particles {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(243, 44, 44, 0.12) 0, transparent 55%),
    radial-gradient(circle, rgba(106, 213, 223, 0.2) 0, transparent 65%);
  background-size: 220px 220px, 320px 320px;
  background-position: 0 0, 80px 120px;
  mix-blend-mode: screen;
  opacity: 0.25;
  animation: heroParticles 4s linear infinite alternate;
}

/* equalizer bars */
.hero-eq {
  position: absolute;
  bottom: 95%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  opacity: 1;
}
.hero-eq span {
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(
    to top,
    rgba(106, 223, 112, 0.4),
    rgba(106, 223, 112, 1)
  );
  height: 10px;
  animation: heroEq 1.6s ease-in-out infinite;

}
.hero-eq span:nth-child(2) { animation-delay: 0.1s; }
.hero-eq span:nth-child(3) { animation-delay: 0.2s; }
.hero-eq span:nth-child(4) { animation-delay: 0.3s; }
.hero-eq span:nth-child(5) { animation-delay: 0.4s; }

@keyframes heroLasers {
  0% {
    transform: translate3d(-12%, -4%, 0) rotate(-8deg);
  }
  100% {
    transform: translate3d(12%, 4%, 0) rotate(8deg);
  }
}
@keyframes heroFog {
  0% { transform: translateY(0); opacity: 0.5; }
  100% { transform: translateY(-18px); opacity: 0.8; }
}
@keyframes heroParticles {
  0% {
    background-position: 0 0, 80px 120px;
  }
  100% {
    background-position: -260px -260px, -160px -220px;
  }
}
@keyframes heroEq {
  0%, 100% { height: 8px; }
  50% { height: 32px; }
}

.tagline-main {
  margin-top: 1.6rem;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.tagline-sub {
  margin-top: 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gm-green);
}

.tagline-mini {
  margin-top: 1.1rem;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gm-muted);
}

.hero-actions {
  margin-top: 2.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.hero-socials {
  display: flex;
  gap: 0.8rem;
}

.hero-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(106, 223, 112, 0.45);
  background: rgba(0, 0, 0, 0.4);
  color: var(--gm-green);
  text-decoration: none;

  font-size: 1.4rem;
  opacity: 0.8;
  box-shadow:
    0 0 10px rgba(106, 223, 112, 0.35),
    0 0 18px rgba(106, 223, 112, 0.28);
  transition:
    opacity 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

/* hover state */
.hero-social:hover {
  opacity: 1;
  background: rgba(106, 223, 112, 0.16);
  box-shadow:
    0 0 12px rgba(106, 223, 112, 0.75),
    0 0 22px rgba(106, 223, 112, 0.7);
  transform: translateY(-1px);
}


/* hero layout tweak on bigger screens */
@media (min-width: 768px) {
  .hero-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* Scroll hint */

.scroll-hint {
  margin-top: 2.5rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gm-muted);
}

.scroll-arrow {
  width: 16px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  position: relative;
  overflow: hidden;
}

.scroll-arrow::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  width: 4px;
  height: 8px;
  border-radius: 999px;
  background: var(--gm-green);
  transform: translateX(-50%);
  animation: scrollDot 1.3s ease-in-out infinite;
}

@keyframes scrollDot {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
  40% {
    opacity: 1;
    transform: translate(-50%, 8px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 15px);
  }
}

/* HIDE SCROLLBAR EVERYWHERE */
body::-webkit-scrollbar {
  display: none;
}
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* EVENT SECTIONS */

.event-section {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.event-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.8),
    rgba(0, 0, 0, 0.9)
  );
  mix-blend-mode: multiply;
  z-index: 0;
}

/* Replace these with your actual images */
.event-clubs {
  background-image: url("assets/bg-club.webp");
}

.event-college {
  background-image: url("assets/bg-college.webp");
}

.event-private {
  background-image: url("assets/bg-private.webp");
}

.event-birthday {
  background-image: url("assets/bg-birthday.webp");
}

.event-content {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

.event-content h2 {
  font-size: clamp(1.5rem, 3.3vw, 2.4rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;

  color: #ffffff; /* white text */
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.6),
    0 0 12px rgba(255, 255, 255, 0.45),
    0 0 18px rgba(106, 223, 112, 0.5),
    0 0 28px rgba(106, 223, 112, 0.35);

  /* slight breathing pulse */
  animation: titlePulse 3.2s ease-in-out infinite;
}


.event-content p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--gm-muted);
  margin-bottom: 1.6rem;
}

.align-right {
  margin-left: auto;
  text-align: right;
}

.align-left {
  margin-right: auto;
  text-align: left;
}

/* CTA button */

.cta-btn {
  position: relative;
  border-radius: 999px;
  padding: 0.9rem 2.6rem;
  border: 1px solid rgba(0, 0, 0, 0.8);
  cursor: pointer;
  overflow: hidden;

  /* FILLED NEON BACKGROUND */
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.35), transparent 45%),
    linear-gradient(
      135deg,
      rgba(106, 223, 112, 1) 0%,
      rgba(77, 180, 91, 1) 40%,
      rgba(45, 120, 55, 1) 100%
    );

  color: #020303; /* dark text over neon */
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;

  /* main neon glow */
  box-shadow:
    0 0 10px rgba(106, 223, 112, 0.9),
    0 0 22px rgba(106, 223, 112, 0.85),
    0 0 40px rgba(106, 223, 112, 0.75);

  /* swing hangs from top */
  transform-origin: top center;

  /* neon breathing + flicker + slight swing */
  animation:
    neonPulse 2.8s ease-in-out infinite alternate,
    neonFlicker 4.2s linear infinite,
    signSwing 6.5s ease-in-out infinite;

  transition:
    box-shadow 0.18s ease-out,
    background 0.18s ease-out,
    transform 0.18s ease-out,
    filter 0.18s ease-out;
}

/* subtle light sweep on the surface */
.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.05),
    transparent 55%
  );
  mix-blend-mode: screen;
  opacity: 0.6;
  transform: translateX(-130%);
  pointer-events: none;
  transition: transform 0.55s ease-out, opacity 0.3s ease-out;
}

/* extra outer neon aura */
.cta-btn::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 1px solid rgba(106, 223, 112, 0.5);
  box-shadow:
    0 0 14px rgba(106, 223, 112, 0.9),
    0 0 32px rgba(106, 223, 112, 0.8);
  opacity: 0.6;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* HOVER – brighter, no swing (feels more “locked in” when pointed) */
.cta-btn:hover {
  animation-play-state: paused; /* pause swing + flicker while focused */
  transform: translateY(-1px) scale(1.03);
  box-shadow:
    0 0 12px rgba(106, 223, 112, 1),
    0 0 30px rgba(106, 223, 112, 0.95),
    0 0 50px rgba(106, 223, 112, 0.85);
  filter: brightness(1.08);
}

.cta-btn:hover::before {
  transform: translateX(130%);
  opacity: 0.9;
}

/* Neon breathing glow for signboard */
@keyframes neonPulse {
  0% {
    box-shadow:
      0 0 6px rgba(106, 223, 112, 0.7),
      0 0 16px rgba(106, 223, 112, 0.6),
      0 0 26px rgba(106, 223, 112, 0.45);
    filter: brightness(0.96);
  }
  100% {
    box-shadow:
      0 0 10px rgba(106, 223, 112, 1),
      0 0 28px rgba(106, 223, 112, 0.95),
      0 0 46px rgba(106, 223, 112, 0.85);
    filter: brightness(1.05);
  }
}

/* Small random flicker like real neon */
@keyframes neonFlicker {
  0%, 8%, 100% {
    opacity: 1;
  }
  3% {
    opacity: 0.55;
  }
  4% {
    opacity: 0.22;
  }
  30% {
    opacity: 1;
  }
  32% {
    opacity: 0.65;
  }
  60% {
    opacity: 1;
  }
  61% {
    opacity: 0.4;
  }
  62% {
    opacity: 1;
  }
}

/* Hanging sign swing – very subtle */
@keyframes signSwing {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(1px) rotate(0.6deg);
  }
  50% {
    transform: translateY(0) rotate(0deg);
  }
  75% {
    transform: translateY(-1px) rotate(-0.6deg);
  }
}

/* FOOTER */

.footer-top {
  margin: 1.2rem auto 0.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.8rem;
  border-radius: 999px;
  border: 1px solid rgba(106, 223, 112, 0.7);
  background: rgba(0, 0, 0, 0.85);
  color: var(--gm-green);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: center;
  gap: 0.35rem;
  box-shadow:
    0 0 8px rgba(106, 223, 112, 0.65),
    0 0 18px rgba(106, 223, 112, 0.5);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.footer-top::after {
  content: "↑";
  font-size: 0.9rem;
}

.footer-top:hover {
  background: rgba(106, 223, 112, 0.12);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 0 12px rgba(106, 223, 112, 0.9),
    0 0 26px rgba(106, 223, 112, 0.8);
}

.footer {
  position: relative;
  width: 100%;
  padding: 3rem 1.5rem 2.2rem;
  background: radial-gradient(circle at top, #13171e 0%, #050608 65%);
  z-index: 10;
  overflow: hidden;
}

.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 160px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(106, 223, 112, 0.9), transparent 70%);
  opacity: 0.55;
}

.footer-glow {
  position: absolute;
  top: -60px;
  left: 50%;
  width: 260px;
  height: 260px;
  background: radial-gradient(
    circle,
    rgba(106, 223, 112, 0.55),
    transparent 70%
  );
  transform: translateX(-50%);
  opacity: 0.25;
  filter: blur(14px);
  animation: footerPulse 4s ease-in-out infinite;
}

@keyframes footerPulse {
  0%,
  100% {
    opacity: 0.15;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 0.35;
    transform: translateX(-50%) scale(1.15);
  }
}

.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0 auto;
  text-align: center; /* 🔥 center EVERYTHING inside */
}

.footer p {
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-sub {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  color: var(--gm-muted);
}

.footer-logo-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 0.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* subtle spinning halo behind GM icon */
.footer-logo-wrap::before {
  content: "";
  position: absolute;
  inset: -25%;
  border-radius: 50%;
  background: conic-gradient(
    rgba(106, 223, 112, 0.32),
    transparent,
    rgba(106, 223, 112, 0.4),
    transparent
  );
  filter: blur(10px);
  opacity: 0.7;
  animation: footerDiscSpin 18s linear infinite;
}

.footer-logo {
  position: relative;
  width: 64px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(106, 223, 112, 0.9));
}

@keyframes footerDiscSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.footer-tagline {
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.footer-divider {
  width: 100%;
  max-width: 420px;
  height: 1px;
  margin: 0.6rem auto 0.9rem;
  background: radial-gradient(circle, rgba(106, 223, 112, 0.8), transparent 70%);
  opacity: 0.45;
}

.footer-block {
  margin-bottom: 0.7rem;
}

.footer-title {
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gm-green);
  margin-bottom: 0.4rem;
  opacity: 0.85;
}

.footer-text {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--gm-muted);
  margin-bottom: 0.15rem;
}

.footer-text a {
  color: var(--gm-green);
  text-decoration: none;
}

.footer-text a:hover {
  text-decoration: underline;
}

/* socials */
.footer-socials {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 0.2rem;
}

.footer-social {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(106, 223, 112, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  box-shadow:
    0 0 8px rgba(106, 223, 112, 0.4),
    0 0 18px rgba(106, 223, 112, 0.35);
  color: var(--gm-green);
  text-decoration: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.footer-social i {
  font-size: 1.05rem;
}

.footer-social:hover {
  background: rgba(106, 223, 112, 0.18);
  color: #ffffff;
  transform: translateY(-1px) scale(1.04);
  box-shadow:
    0 0 12px rgba(106, 223, 112, 0.85),
    0 0 26px rgba(106, 223, 112, 0.75);
}

/* bottom text */
.footer-bottom {
  margin-top: 0.8rem;
}

.footer-copy,
.footer-madness {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-madness {
  margin-top: 0.35rem;
  color: var(--gm-green);
}

/* small screen tightening */
@media (max-width: 640px) {
  .footer {
    padding-bottom: 1.8rem;
  }

  .footer-tagline {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
  }

  .footer-text {
    font-size: 0.75rem;
  }

  .footer-copy,
  .footer-madness {
    font-size: 0.65rem;
    letter-spacing: 0.16em;
  }
}



/* RESPONSIVE TWEAKS */

@media (max-width: 640px) {
  .scroll-progress {
    right: 8px;
    height: 50vh;
    width: 6px;
  }

  .progress-dots {
    gap: 10px;
  }

  .progress-dots span {
    width: 7px;
    height: 7px;
  }
}

@media (min-width: 768px) {
    button,
  a,
  .cta-btn,
  .hero-social,
  .footer-top,
  .footer-social,
  .nav-inner,
  .scroll-progress {
    cursor: none !important;
  }
  .panel {
    padding-inline: 4rem;
  }

  .intro-inner {
    margin-top: 2.5rem;
  }

  .intro-logo {
    width: 290px;
  }

  .event-content p {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .panel {
    padding-inline: 7rem;
  }

  .nav-logo {
    height: 48px;
  }
}

/* SOCIAL ICON POSITION ADJUSTMENT ON MOBILE */
@media (max-width: 768px) {
  .hero-actions {
    gap: 2.4rem; /* increases space between button and socials */
  }

  .hero-socials {
    margin-top: 1rem; /* moves socials further down */
  }
}

/* EXTRA TWEAK for very small screens */
@media (max-width: 480px) {
  .hero-actions {
    gap: 2rem;
  }

  .hero-socials {
    margin-top: 0.2rem;
  }
}