/* ══════════════════════════════════════
   GLOBAL REVEAL ANIMATIONS
   ══════════════════════════════════════ */

/*
   IMPORTANT:
   Only elements that receive one of these
   animation classes are hidden initially.

   This prevents unrelated elements, such as
   forms, from accidentally disappearing.
*/

.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale,
.reveal-fade {
  opacity: 0;
  will-change: opacity, transform;
}


/* ══════════════════════════════════════
   FADE + RISE
   ══════════════════════════════════════ */

.reveal-up {
  transform: translate3d(0, 42px, 0);

  transition:
    opacity 0.75s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ══════════════════════════════════════
   SLIDE LEFT
   ══════════════════════════════════════ */

.reveal-left {
  transform: translate3d(-55px, 0, 0);

  transition:
    opacity 0.75s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ══════════════════════════════════════
   SLIDE RIGHT
   ══════════════════════════════════════ */

.reveal-right {
  transform: translate3d(55px, 0, 0);

  transition:
    opacity 0.75s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* ══════════════════════════════════════
   SCALE + FADE
   ══════════════════════════════════════ */

.reveal-scale {
  transform: scale(0.94);

  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}


/* ══════════════════════════════════════
   SIMPLE FADE
   ══════════════════════════════════════ */

.reveal-fade {
  transition:
    opacity 0.8s ease;
}

.reveal-fade.is-visible {
  opacity: 1;
}


/* ══════════════════════════════════════
   STAGGER
   ══════════════════════════════════════ */

.stagger-1 {
  transition-delay: 0.05s;
}

.stagger-2 {
  transition-delay: 0.12s;
}

.stagger-3 {
  transition-delay: 0.19s;
}

.stagger-4 {
  transition-delay: 0.26s;
}

.stagger-5 {
  transition-delay: 0.33s;
}

.stagger-6 {
  transition-delay: 0.40s;
}


/* ══════════════════════════════════════
   HERO ENTRANCE
   ══════════════════════════════════════ */

.hero-left > .hero-kicker,
.hero-left > .hero-headline,
.hero-left > .hero-body,
.hero-left > .hero-actions,
.hero-left > .hero-proof,
.hero-right > .mockup-shell {
  opacity: 0;
  will-change: opacity, transform;

  animation:
    hero-enter 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-left > .hero-kicker {
  transform: translate3d(0, 28px, 0);
  animation-delay: 0.10s;
}

.hero-left > .hero-headline {
  transform: translate3d(0, 32px, 0);
  animation-delay: 0.20s;
}

.hero-left > .hero-body {
  transform: translate3d(0, 28px, 0);
  animation-delay: 0.32s;
}

.hero-left > .hero-actions {
  transform: translate3d(0, 25px, 0);
  animation-delay: 0.44s;
}

.hero-left > .hero-proof {
  transform: translate3d(0, 22px, 0);
  animation-delay: 0.56s;
}

.hero-right > .mockup-shell {
  transform: translate3d(45px, 10px, 0) scale(0.97);
  animation-delay: 0.28s;
}

@keyframes hero-enter {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}


/* ══════════════════════════════════════
   FEATURE IMAGE MICRO INTERACTION
   ══════════════════════════════════════ */

.feature-visual img,
.mockup-shell img {
  transition:
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-visual:hover img,
.mockup-shell:hover img {
  transform: scale(1.015);
}


/* ══════════════════════════════════════
   CARD MICRO INTERACTIONS
   ══════════════════════════════════════ */

.problem-card,
.testimonial-card,
.step {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.problem-card:hover,
.testimonial-card:hover,
.step:hover {
  transform: translateY(-5px);
}


/* ══════════════════════════════════════
   STEP CIRCLE
   ══════════════════════════════════════ */

.step-circle {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.step:hover .step-circle {
  transform: scale(1.08);
}


/* ══════════════════════════════════════
   CTA
   ══════════════════════════════════════ */

/*
   The CTA itself is observed.
   Its children are animated individually.

   Crucially, this does NOT hide the form
   until the entire section gets a class.
*/

.cta-animate {
  opacity: 0;
  transform: translate3d(0, 30px, 0);

  transition:
    opacity 0.75s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-animate.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.cta-animate:nth-child(1) {
  transition-delay: 0.05s;
}

.cta-animate:nth-child(2) {
  transition-delay: 0.13s;
}

.cta-animate:nth-child(3) {
  transition-delay: 0.21s;
}

.cta-animate:nth-child(4) {
  transition-delay: 0.29s;
}


/* ══════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-fade,
  .cta-animate,
  .hero-left > *,
  .hero-right > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }

  .feature-visual img,
  .mockup-shell img,
  .problem-card,
  .testimonial-card,
  .step,
  .step-circle {
    transition: none !important;
  }
}