/* =========================
         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);
}