/* =========================
         BASE
      ========================= */
body {
  margin: 0;
  min-height: 100vh;
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont;
  background: #ffffff;
}

/* =========================
         UNDERLINE ANIMATION
      ========================= */
@keyframes underlineGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hero-underline {
  animation: underlineGrow 0.8s ease-out 1.1s forwards;
  transform-origin: left;
  transform: scaleX(0);
}

/* =========================
         LOAD ANIMATIONS
      ========================= */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Default: content is visible */
.animate-fade-up,
.animate-fade-in {
  opacity: 1;
}

/* Animate only after JS loads */
.js-loaded .animate-fade-up {
  opacity: 0;
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js-loaded .animate-fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
}

.delay-1 {
  animation-delay: 0.15s;
}
.delay-2 {
  animation-delay: 0.3s;
}
.delay-3 {
  animation-delay: 0.45s;
}
.delay-4 {
  animation-delay: 0.6s;
}
.delay-5 {
  animation-delay: 0.75s;
}

/* =========================
   CTA HOVER — CREATE SITE
========================= */

.cta-link {
  text-decoration: none;
}

.cta-text {
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

.cta-arrow {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* underline reacts, not replays */
.hero-underline {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* HOVER */
.cta-link:hover .cta-text {
  transform: translateY(-2px);
}

.cta-link:hover .cta-arrow {
  transform: translateX(6px);
}

.cta-link:hover .hero-underline {
  transform: scaleX(1.08);
}

/* ACCESSIBILITY */
.cta-link:focus-visible {
  outline: none;
}

.cta-link:focus-visible .hero-underline {
  transform: scaleX(1.08);
}

/* =========================
   CTA UNDERLINE — FULL WIDTH
========================= */

/* container controls default width */
.underline-wrap {
  transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* underline animation stays transform-based */
.hero-underline {
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* HOVER → expand to full text width */
.cta-link:hover .underline-wrap {
  max-width: 100%;
}

.cta-link:hover .hero-underline {
  transform: scaleX(1);
}

/* =========================================
   HERO PUSH TEXT (NO CROP, NO SNAP)
========================================= */

.hero-text-mask {
  height: 96px; /* desktop line height */
  overflow: hidden;
}

.hero-text-track {
  display: flex;
  flex-direction: column;
  animation: heroTextSlide 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hero-text {
  height: 96px;
  display: flex;
  align-items: center;
  color: white;
  font-size: clamp(2.8rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  white-space: nowrap;
}

/* vertical push animation */
@keyframes heroTextSlide {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(-96px);
  }
  60% {
    transform: translateY(-96px);
  }

  70% {
    transform: translateY(-192px);
  }
  95% {
    transform: translateY(-192px);
  }

  100% {
    transform: translateY(-288px);
  }
}

/* mobile tuning */
@media (max-width: 768px) {
  .hero-text-mask,
  .hero-text {
    height: 72px;
  }

  @keyframes heroTextSlide {
    0% {
      transform: translateY(0);
    }
    25% {
      transform: translateY(0);
    }

    35% {
      transform: translateY(-72px);
    }
    60% {
      transform: translateY(-72px);
    }

    70% {
      transform: translateY(-144px);
    }
    95% {
      transform: translateY(-144px);
    }

    100% {
      transform: translateY(-216px);
    }
  }
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-text-track {
    animation: none;
  }
}
@media (min-width: 1024px) {
  .cta-link {
    transform: translateY(-12px);
  }
}
/* =========================================
   FILM GRAIN OVERLAY
========================================= */

.hero-grain {
  background-image: url("/images/grain.png");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.08;
  mix-blend-mode: overlay;
  animation: grainMove 6s steps(10) infinite;
}

@keyframes grainMove {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-10%, -5%);
  }
  40% {
    transform: translate(-5%, 10%);
  }
  60% {
    transform: translate(10%, -10%);
  }
  80% {
    transform: translate(-10%, 5%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* =========================================
   HERO TEXT — BIG TYPE + <br> SAFE
========================================= */

.hero-text-mask {
  height: 100%;
  max-height: 55vh; /* stage height = slide height */
  overflow: hidden;
}

.hero-text-track {
  display: flex;
  flex-direction: column;
  animation: heroTextSlide 12s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ONE FULL STAGE PER PHRASE */
.hero-text-block {
  height: 55vh; /* MUST match slide height */
  display: flex;
  align-items: center;
}

/* BIG TYPE */
.hero-text {
  color: white;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-size: clamp(4rem, 12vw, 9rem);
}

/* SLIDE BY FULL STAGES — NOT PIXELS */
@keyframes heroTextSlide {
  0% {
    transform: translateY(0%);
  }
  25% {
    transform: translateY(0%);
  }

  35% {
    transform: translateY(-100%);
  }
  60% {
    transform: translateY(-100%);
  }

  70% {
    transform: translateY(-200%);
  }
  95% {
    transform: translateY(-200%);
  }

  100% {
    transform: translateY(-300%);
  }
}

/* MOBILE TUNING */
@media (max-width: 768px) {
  .hero-text-block {
    height: 55vh;
  }

  .hero-text {
    font-size: clamp(3rem, 11vw, 5.5rem);
    line-height: 0.95;
  }
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  .hero-text-track {
    animation: none;
  }
}