* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin: 0;
  background: url("https://i.imgur.com/1EZlHYr.png") center/cover fixed no-repeat;
  color: #111;
}
#page{ position: relative; min-height: 100dvh; }

:root{
  --tabsGap: clamp(16px, 3vh, 40px);
  --stageGap: 34vh;
  --pop: 1.04;
  --uiScale: .92;
}
@media (max-width: 1024px){ :root{ --uiScale: 1; } }
#page{ transform: scale(var(--uiScale)); transform-origin: top center; }

.hero{
  padding: 24px 16px 0;
  display: grid; place-items: center; gap: 6px;
  position: relative; z-index: 10;
}
.hero__logo{ width: min(720px, 90vw); height:auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.25)); }
.hero__tagline{ width: min(900px, 92vw); height:auto; filter: drop-shadow(0 4px 8px rgba(0,0,0,.18)); }

.tabs{
  position: relative; z-index: 9;
  display: flex; justify-content: center; align-items: center;
  gap: clamp(18px, 3vw, 42px); margin-top: var(--tabsGap);
}
.tabs .tab img{
  display:block; width: clamp(170px, 20vw, 260px); height:auto;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.28));
  transition: transform .18s ease, filter .18s ease;
}
.tabs .tab img:hover, .tabs .tab img:focus-visible{
  transform: translateY(-3px) scale(1.05);
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.35));
}

.intro{
  --pad: clamp(16px, 3vw, 28px);
  font-family: "Kalam", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 12px auto 0; padding: var(--pad); max-width: 1100px;
  border-radius: 18px;
  background:
    radial-gradient(1200px 300px at 50% -240px, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.88));
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(16px, 3vw, 28px); align-items: center;
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .45s ease;
}
.intro.is-in{ opacity:1; transform: none; }
.intro__text h2{ margin:0 0 8px; font-size: clamp(26px, 4vw, 40px); }
.intro__text p{ margin:10px 0; font-size: clamp(16px, 2.2vw, 20px); line-height:1.45; }
.intro__media{ display:grid; place-items:center; }
#intro-cards{ width: min(360px, 38vw); height:auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.25)); transition: transform .25s ease; }

.lineup-divider{
  max-width: 980px; height: 16px; margin: 18px auto 4px; border-radius: 10px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 14px, transparent 14px 28px),
    linear-gradient(90deg, #ffd3d3, #d3e9ff, #d7ffd3, #ffe9a8, #e8d3ff);
  background-size: auto, 300% 100%;
  animation: paint 6s linear infinite;
  box-shadow: 0 8px 16px rgba(0,0,0,.08) inset;
}
@keyframes paint{
  0%{ background-position: 0 0, 0 0; }
  100%{ background-position: 0 0, 300% 0; }
}
.lineup-divider--big{
  margin: 14vh auto 10px;
  max-width: 1100px;
}

.scroll-cue{
  display:block; width:14px; height:14px; margin:10px auto 0;
  border-right:3px solid rgba(0,0,0,.6); border-bottom:3px solid rgba(0,0,0,.6);
  transform: rotate(45deg); animation: bounce 1.2s infinite ease-in-out; opacity:.75;
}
@keyframes bounce{ 0%,100%{ transform: translateY(0) rotate(45deg);} 50%{ transform: translateY(6px) rotate(45deg);} }

.cliques{
  position: relative; z-index: 1;
  margin: var(--stageGap) 22vw 10vh; height: 55vh; scroll-margin-top: 12vh;
}
.clique{
  position: absolute; aspect-ratio: var(--ar, .45/1);
  transition: opacity .28s ease, filter .28s ease, z-index .001s; will-change: opacity, filter;
}
.clique:hover{ z-index: 50; }
.clique::before{ content:""; position:absolute; left:50%; transform: translateX(-50%); bottom:-8vh; width:80%; height:10vh; }
.clique .img{
  position:absolute; left:50%; bottom:0; height:100%; width:auto;
  transform: translateX(-50%); transform-origin: center bottom;
  transition: transform .34s cubic-bezier(.2,.7,.2,1), opacity .34s ease; will-change: transform, opacity;
}
.clique .base{ opacity:1; }
.clique .hover{ opacity:0; transform: translateX(-50%) scale(.985); pointer-events: none; }
.clique:hover .hover{ opacity:1; transform: translateX(-50%) scale(var(--pop)); }
.clique:hover .base{ opacity:0; }
.cliques:hover .clique{ opacity:.50; filter: blur(1.2px) saturate(.94); transition-duration:.24s; }
.cliques:hover .clique:hover{ opacity:1; filter:none; }
.clique .logo{
  position:absolute; left:50%; top: calc(100% + .6vh); width:50%;
  transform: translateX(-50%) scale(1.5); opacity:0; pointer-events:none; z-index:5;
  transition: opacity .28s ease, transform .28s ease;
}
.clique:hover .logo{ opacity:1; transform: translateX(-50%) scale(1.02); }

.clique--jock    { --ar:.46/1; width: 19.0vw; left:  0.5vw; bottom: -20%; z-index: 6; }
.clique--prep    { --ar:.44/1; width: 14.5vw; left: 13.5vw; bottom:   0%; z-index: 5; }
.clique--cheer   { --ar:.45/1; width: 14.2vw; left: 24.0vw; bottom:   8%; z-index: 4; }
.clique--bullies { --ar:.50/1; width: 10.75vw; left: 33.8vw; bottom: 21%; z-index: 3; }
.clique--nerds   { --ar:.43/1; width:  7.50vw; left: 44.2vw; bottom: 31.5%; z-index: 2; }
.clique--goths   { --ar:.38/1; width:  6.20vw; left: 52.0vw; bottom: 31%; z-index: 1; }

.made-by{
  font-family: "Kalam", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  max-width: 1100px; margin: 20vh auto 6vh; padding: clamp(12px, 2.6vw, 24px);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(16px, 3vw, 32px);
  align-items: center;
  opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease;
}
.made-by.is-in{ opacity: 1; transform: none; }
.made-by__img-wrap{ overflow: hidden; border-radius: 14px; box-shadow: 0 10px 22px rgba(0,0,0,.18); }
.made-by__img-wrap img{ display:block; width:100%; height:auto; transform: translateX(-12px); transition: transform .6s ease .05s; }
.made-by.is-in .made-by__img-wrap img{ transform: none; }
.made-by__title{
  font-size: clamp(28px, 5vw, 62px);
  line-height: 1.05;
  text-shadow: 0 6px 14px rgba(0,0,0,.15);
  transform: translateX(12px); transition: transform .6s ease .05s;
}
.made-by__title span{ color: #6c41d8; }
.made-by.is-in .made-by__title{ transform: none; }

@media (max-width: 900px){
  .intro{ grid-template-columns: 1fr; text-align: center; }
  .intro__media{ order: -1; }
  .made-by{ grid-template-columns: 1fr; text-align: center; }
  .made-by__title{ transform: none; }
}

@media (prefers-reduced-motion: reduce){
  #page{ transform: none; }
  .tabs .tab img, .intro, #intro-cards, .lineup-divider, .clique .img, .clique .logo,
  .made-by, .made-by__img-wrap img, .scroll-cue{ transition: none; animation: none; }
}

.site-footer{
  display:flex; justify-content:flex-end; align-items:center;
  padding: 12px 2.5vw 16px; font-size: 14px; opacity:.8;
}