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

body {
  background: black;
  color: white;
  font-family: Helvetica, sans-serif;
}

/* HERO */

.poster {
  position: relative;
  /*max-width: 700px;*/
  margin: 0 auto;
  padding: 3rem 3rem;
}

.hero {
  position: relative;
  padding: 3rem 2rem;
  overflow: visible;
}

.title {
  font-size: clamp(120px, 45vw, 2000px);
  line-height: 0.75;
  letter-spacing: -0.05em;
}

.hero-info {
  margin-top: 20vw;
  margin-left: clamp(2rem, 12vw, 10rem);
  max-width: 400px;
}

.small {
  /*padding-left: 10vw;*/
  padding-bottom: 50px;
  font-size: 0.8rem;
  opacity: 0.6;
  margin-bottom: 0.5rem;
}

.hero-info h2 {
  white-space: nowrap;
  font-size: 5rem;
  margin-bottom: 1rem;
}


.date {
  margin-top: 5vh;
  font-size: 5vh;
  font-weight: bold;
  margin-bottom: 0.3rem;
  white-space: nowrap;
}

.location {
  margin-top: 10vh;
  font-size: 1.5rem;
  opacity: 0.8;
  white-space: nowrap;
}

/* DIVIDER */
.divider {
  height: 10vh;
  background: none;
  margin: 2rem 0;
}

/* NAMES */
.names{
  margin-left: clamp(2rem, 12vw, 10rem);
  position: relative;
  z-index: 50;
}

.names ul {
  list-style: none;
  margin-top: 1rem;
}

.names li {
  margin-bottom: 0.5rem;
  font-size: 3rem;
  line-height: 8rem;
}


/* STICKERS (THE MAGIC) */


/* Core sticker behavior (applies to every image) */
.sticker {
  position: absolute;
  width: var(--size, clamp(60px, 20vw, 120px));
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

/* Layers */
.hero-stickers {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.page-stickers {
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* =========================
   HERO ANIMATION
========================= */

/* starting state */
.hero-stickers .sticker {
  opacity: 0;
  transform: scale(0.5) rotate(0deg);
  animation-name: slapIn;
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(.3,1.6,.4,1);
  animation-fill-mode: forwards;
}

@keyframes slapIn {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.3) rotate(0deg);
  }

  60% {
    opacity: 1;
    transform: translateY(0) scale(1.15) rotate(calc(var(--rot) + 8deg));
  }

  80% {
    transform: scale(0.95) rotate(calc(var(--rot) - 4deg));
  }

  100% {
    opacity: 1; /* ← THIS WAS MISSING */
    transform: scale(1) rotate(var(--rot));
  }
}


/*BASE STYLES (appearance ONLY)*/

.aj { --rot: -15deg; transform: rotate(-15deg); --size: clamp(70px, 10vw, 200px); }
.amanda { --rot: 10deg;transform: rotate(10deg); --size: clamp(70px, 10vw, 300px); }
.ashlyn {--rot: 25deg; transform: rotate(25deg); --size: clamp(80px, 20vw, 400px); }
.ciara { --rot: -20deg;transform: rotate(-20deg); --size: clamp(80px, 30vw, 300px); }
.jack { --rot: -40deg; transform: rotate(-40deg); --size: clamp(80px, 20vw, 400px); }
.kamrin { --rot: -10deg; transform: rotate(-10deg); --size: clamp(70px, 10vw, 400px); }
.katelyn { --rot: -10deg;transform: rotate(-10deg); --size: clamp(70px, 10vw, 400px); }
.kaylee { --rot: -30deg; transform: rotate(-30deg); --size: clamp(80px, 20vw, 400px); }
.keira  { --rot: 20deg; transform: rotate(20deg); --size: clamp(80px, 20vw, 400px); }
.lana { --rot: 20deg; transform: rotate(20deg); --size: clamp(80px, 20vw, 400px); }
.lauren { --rot: 20deg; transform: rotate(20deg); --size: clamp(60px, 15vw, 400px); }
.lyndee { --rot: -50deg; transform: rotate(-50deg); --size: clamp(80px, 20vw, 400px); }
.lyndie { --rot: 40deg; transform: rotate(40deg); --size: clamp(80px, 20vw, 400px); }
.mal { --rot: 40deg; transform: rotate(40deg); --size: clamp(70px, 10vw, 400px); }
.morgan { --rot: 40deg;transform: rotate(40deg); --size: clamp(70px, 25vw, 400px); }
.myles { --rot: 40deg; transform: rotate(40deg); --size: clamp(80px, 25vw, 400px); }
.zac { --rot: 40deg; transform: rotate(40deg); --size: clamp(80px, 25vw, 400px); }
.caution { --rot: 20deg; transform: rotate(20deg); --size: clamp(80px, 10vw, 400px); }
.two26 { --rot: 5deg; transform: rotate(5deg); --size: clamp(80px, 30vw, 400px); }
.arch { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.bubbles { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.dashow { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.dino { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.etcblue { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.etcpink { --rot: 12deg;transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.global { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.message { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.mypassion { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.pointer { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.stars { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }
.nodes { --rot: 12deg; transform: rotate(12deg); --size: clamp(80px, 15vw, 400px); }


/*HERO STICKERS (locked to ETC)*/

.aj--hero { top: 80%; left: 40%; z-index: 4; animation-delay: 1s}
.amanda--hero { top: 80%; left: 60%; z-index: 5; animation-delay: 2.2s}
.ashlyn--hero { top: 85%; left: 50%; z-index: 3; animation-delay: .94s}
.ciara--hero { top: 100%; right: 15%; z-index: 2; animation-delay: .90s}
.jack--hero { top: 70%; left: 5%; z-index: 9; animation-delay: 2s}
.kamrin--hero { top: 65%; right: 10%; z-index: 3; animation-delay: 1.2s}
.katelyn--hero { top: -8%; left: 3%; z-index: 3; animation-delay: 3.5s}
.kaylee--hero { top: 100%; left: 30%; z-index: 5; animation-delay: 1.5s}
.keira--hero { top: 90%; right: 85%; z-index: 2; animation-delay: .01s}
.lana--hero { top: 50%; left: 90%; z-index: 2; animation-delay: .60s}
.lauren--hero { top: 110%; left: 50%; z-index: 5; animation-delay: 1.2s}
.lyndee--hero { top: 80%; left: 10%; z-index: 5; animation-delay: 1.3s}
.lyndie--hero { top: 50%; left: -5%; z-index: 4; animation-delay: 1.7s}
.mal--hero { top: 50%; right: 5%; z-index: 7; animation-delay: 2.5s}
.morgan--hero { top: 70%; left: 90%; z-index: 4; animation-delay: 2.7s}
.myles--hero { top: 70%; right: 60%; z-index: 2; animation-delay: .10s}
.zac--hero { top: 70%; left: 65%; z-index: 1; animation-delay: .30s}
.caution { top: -10%; left: 85%; z-index: 7; animation-delay: 3s}
.dino { top: -8%; left: 60%; z-index: 7; animation-delay: 3.2s}
.nodes { top: 132%; left: 45%; z-index: 3; animation-delay: 1.8s}





/* FLOATING STICKERS (page-wide)*/

.aj--float { top: 330vh; left: 85vw; --size: clamp(80px, 18vw, 400px); z-index: 1; }
.jack--float { top: 200vh; left: 60vw; --size: clamp(80px, 18vw, 400px);}
.kamrin--float { top: 295vh; left: 30vw; --size: clamp(80px, 18vw, 400px);}
.katelyn--float { top: 430vh; left: 50vw;--size: clamp(80px, 18vw, 400px); }
.kaylee--float { top: 365vh; left: 40vw;--size: clamp(80px, 18vw, 400px); }
.keira--float { top: 330vh; left: -5vw; --size: clamp(80px, 18vw, 400px);}
.lana--float { top: 375vh; left: 70vw; --size: clamp(80px, 18vw, 400px);}
.lauren--float { top: 240vh; left: 50vw; --size: clamp(80px, 18vw, 400px);}
.lyndee--float { top: 240vh; left: 10vw; --size: clamp(80px, 18vw, 400px);}
.lyndie--float { top: 260vh; left: 80vw; --size: clamp(80px, 18vw, 400px); z-index:8; }
.mal--float { top: 285vh; left: 60vw;--size: clamp(80px, 18vw, 400px); }
.morgan--float { top: 520vh; left: 30vw; --size: clamp(80px, 18vw, 400px);}
.myles--float { top: 200vh; left: 30vw; --size: clamp(80px, 18vw, 400px); }
.zac--float { top: 400vh; left: 20vw; --size: clamp(80px, 18vw, 400px);}
.two26--float { top: 165vh; right: 15vw; z-index: 10;}
.arch--float { top: 340vh; right: 30vw; z-index: 10;}
.bubbles--float { top: 220vh; right: 10vw; z-index: 10;}
.dashow--float { top: 185vh; left: 2vw; z-index: 10;}
.dino--float { top: 400vh; left: -5vw; z-index: 10;}
.etcblue--float { top: 275vh; left: -5vw; z-index: 10;}
.etcpink--float { top: 110vh; right: 30vw; z-index: 10;}
.global--float { top: 480vh; right: 20vw; z-index: 10;}
.message--float { top: 250vh; right: 10vw; z-index: 2;}
.mypassion--float { top: 420vh; right: 10vw; z-index: 2;}
.pointer--float { top: 185vh; left: 42vw; z-index: 10; --size: clamp(80px, 5vw, 400px);}
.stars--float { top: 400vh; right: 30vw; z-index: 2;}



.footer {
  margin-left: clamp(2rem, 12vw, 10rem);
  font-size: 2rem;
  white-space: normal;
  z-index: 50;
}

/* FOOTER SPONSORS */

.footer {
  margin-left: clamp(2rem, 12vw, 10rem);
  margin-top: 4rem;

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

.footer p {
  width: 100%; /* forces text to sit above logos */
}

.footer img {
  width: clamp(80px, 12vw, 180px);
  height: auto;
  object-fit: contain;
  z-index: 100;
}

.logo-large {
  width: clamp(100px, 17vw, 220px);
  z-index: 100;
}


/* default state */
.name {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease;
}

.name {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease;
}

.name:visited{
  color: #888888;
}

/* ONLY hover changes color */
.name.pink:hover {
  color: #ff00aa;
}

.name.blue:hover {
  color: #3131ff;
}

.name.green:hover {
  color: #deff02;
}


@media (max-width: 400px) {
  .title {
    font-size: 70vw;
  }

  .names ul li {
    font-size: 20px;
    line-height: 3rem;
  }

}

@media (max-width: 600px) {

  .title{
    font-size: 40vw;
  }

  .hero-info h2 {
    white-space: normal;
    font-size: clamp(2rem, 8vw, 3rem);
  }

  .date{
    white-space: normal;
  }

  .names ul li {
    font-size: 1rem;
    line-height: 3rem;
  }

  .location{
    white-space: normal;
  }

  .hero-stickers{
    transform: translateY(-10%);
  }

  .page-stickers {
    transform: translateY(-50%);
  }



  .two26--float { top: 100vh; right: -10vw; z-index: 10;}

}