@font-face {
  font-family: 'Balloon';
  src: url('../fonts/Balloon.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

:root {
  --orange: #F26522;
  --orange-d: #D94F0A;
  --green: #3DB61A;
  --green-d: #2E9012;
  --green-l: #5FD62E;
  --slime: #B7FF00;
  --purple: #7B00CC;
  --cyan: #00C8E0;
  --magenta: #E8006A;
  --yellow: #FFD200;
  --white: #FFFFFF;
  --black: #0D0D0D;
  --offblack: #1A1A1A;
}

html,
body {
  width: 100%;
  height: 100%;
  height: 100svh;
  overflow: hidden;
}

/* ============================
   SPLASH — full-viewport header
============================ */
.splash {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  background: var(--green);
  overflow: hidden;
}

/* Top slime drip bar */
.drip-top {
  position: relative;
  height: 90px;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.35));
  z-index: 4;
  animation: drip-anim 3.5s ease-in-out infinite;
  transform-origin: top;
}

.drip-top svg {
  display: block;
  width: 100%;
  height: 100%;
}

.drip-top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--green-l) 0%, transparent 50%);
  opacity: 0.4;
  pointer-events: none;
}

/* Title block — vertically centered in the remaining space */
.header-inner {
  position: absolute;
  top: 0;
  bottom: 70px;
  /* clear the carpet */
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  padding: 0 20px;
  text-align: center;
  /* push down past the drip bar */
  padding-top: 90px;
}

.page-title {
  font-family: 'Balloon', 'Chewy', cursive;
  font-size: clamp(3.5rem, 12vw, 9rem);
  color: var(--white);
  text-transform: uppercase;
  line-height: 0.92;
  -webkit-text-stroke: 4px var(--black);
  text-shadow: 6px 6px 0 var(--black), 3px 3px 0 var(--black);
  display: block;
  transform: rotate(-2deg);
}

.page-title .green-word {
  color: var(--slime);
  -webkit-text-stroke: 4px var(--black);
  text-shadow: 6px 6px 0 var(--black);
}

.page-subtitle {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  font-size: clamp(0.75rem, 2vw, 1.1rem);
  letter-spacing: 8px;
  text-transform: uppercase;
  background: var(--slime);
  color: var(--black);
  padding: 8px 22px;
  margin-top: 18px;
  transform: rotate(1.5deg);
}

/* Slime pool — flush with bottom, overlaps carpet via z-index */
.slime-collect {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110px;
  z-index: 3;
  filter: drop-shadow(0 -4px 5px rgba(0, 0, 0, 0.15));
  line-height: 0;
  pointer-events: none;
  transform-origin: bottom center;
  animation: slime-breathe 4.5s ease-in-out infinite;
}

.slime-collect svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Carpet locked to bottom */
.carpet-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  line-height: 0;
}

.carpet-bottom svg {
  display: block;
  width: 100%;
  height: 70px;
}

/* Falling droplets */
.droplet {
  position: absolute;
  background: var(--slime);
  border-radius: 45% 45% 50% 50% / 38% 38% 58% 58%;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.35));
}

/* ============================
   ANIMATIONS
============================ */
@keyframes drip-anim {

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

  50% {
    transform: scaleY(1.08);
  }
}

@keyframes slime-breathe {

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

  50% {
    transform: scaleY(1.05);
  }
}

/* Droplets start at top:50px; travel full height into the slime pool at bottom */
@keyframes droplet-fall {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 0;
  }

  3% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }

  90% {
    transform: translateX(-50%) translateY(calc(100svh - 80px));
    opacity: 1;
  }

  100% {
    transform: translateX(-50%) translateY(calc(100svh - 30px));
    opacity: 0;
  }
}

/* ============================
   MOBILE — TABLET ≤ 768px
============================ */
@media (max-width: 768px) {
  .drip-top {
    height: 60px;
  }

  .droplet {
    top: 34px !important;
  }

  .droplet:nth-child(1) {
    width: 14px !important;
    height: 21px !important;
  }

  .droplet:nth-child(2) {
    width: 19px !important;
    height: 28px !important;
  }

  .droplet:nth-child(3) {
    width: 17px !important;
    height: 24px !important;
  }

  .droplet:nth-child(4) {
    width: 13px !important;
    height: 19px !important;
  }

  .droplet:nth-child(5) {
    width: 20px !important;
    height: 30px !important;
  }

  .carpet-bottom svg {
    height: 46px;
  }

  .slime-collect {
    height: 76px;
  }

  .header-inner {
    padding-top: 60px;
    bottom: 46px;
  }
}

/* ============================
   MOBILE — PHONE ≤ 480px
============================ */
@media (max-width: 480px) {
  .drip-top {
    height: 48px;
  }

  .droplet {
    top: 26px !important;
  }

  .droplet:nth-child(1) {
    width: 10px !important;
    height: 15px !important;
  }

  .droplet:nth-child(2) {
    width: 14px !important;
    height: 20px !important;
  }

  .droplet:nth-child(3) {
    width: 12px !important;
    height: 17px !important;
  }

  .droplet:nth-child(4) {
    width: 9px !important;
    height: 14px !important;
  }

  .droplet:nth-child(5) {
    width: 15px !important;
    height: 22px !important;
  }

  .carpet-bottom svg {
    height: 38px;
  }

  .slime-collect {
    height: 62px;
  }

  .header-inner {
    padding-top: 48px;
    bottom: 38px;
  }
}