/* ==========================================================================
   Treat Your Teacher -- Animations (animations.css)
   Scroll reveal states, hover transitions, CSS keyframes,
   reduced-motion overrides. GSAP handles runtime animation;
   these classes provide the declarative states GSAP targets.
   ========================================================================== */

/* ==========================================================================
   SCROLL REVEAL BASE STATES
   ========================================================================== */

/* Default reveal: fade-up */
[data-reveal] {
  transition:
    opacity 0.5s var(--ease-expo),
    transform 0.6s var(--ease-expo);
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
}

.is-revealed,
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger items get the same base state */
[data-stagger-item] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s var(--ease-expo),
    transform 0.6s var(--ease-expo);
}

[data-stagger-item].is-revealed {
  opacity: 1;
  transform: translateY(0);
}


/* ==========================================================================
   HOVER LIFT (Cards)
   ========================================================================== */

.hover-lift {
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}


/* ==========================================================================
   BUTTON HOVER / ACTIVE TRANSITIONS
   ========================================================================== */

.btn {
  transition:
    transform var(--dur-button) ease,
    box-shadow var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}


/* ==========================================================================
   FORM FIELD TRANSITIONS
   ========================================================================== */

.form-input {
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}


/* ==========================================================================
   NAV SCROLL TRANSITION
   ========================================================================== */

.main-nav {
  transition:
    box-shadow 0.3s ease,
    padding 0.3s ease,
    background-color 0.3s ease;
}


/* ==========================================================================
   TAB CONTENT TRANSITION
   ========================================================================== */

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeSlideIn 0.3s var(--ease-expo) forwards;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ==========================================================================
   HERO FLOATING EMOJI KEYFRAMES
   ========================================================================== */

@keyframes float-emoji {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes float-emoji-alt {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}


/* ==========================================================================
   CTA BREATHING GLOW
   ========================================================================== */

@keyframes cta-glow {
  0%, 100% {
    box-shadow: 0 6px 24px rgba(244, 132, 95, 0.3);
  }
  50% {
    box-shadow: 0 10px 40px rgba(244, 132, 95, 0.55);
  }
}

.cta-glow {
  animation: cta-glow 2.2s ease-in-out infinite;
}


/* ==========================================================================
   PHONE TILT
   ========================================================================== */

.phone-tilt {
  transform: rotate(3deg);
  transition: transform 0.5s var(--ease-expo);
}

.phone-tilt:hover {
  transform: rotate(0deg);
}


/* ==========================================================================
   SIGNATURE MOMENT ELEMENTS
   These classes provide initial hidden state; GSAP reveals them.
   ========================================================================== */

.signature-book-exchange .hero-book,
.signature-reframe .dollar-amount,
.signature-reframe .book-reveal,
.signature-reframe .gift-card-visual,
.signature-pool .pool-books,
.signature-card .print-card,
.signature-feed .feed-card,
.signature-thermometer .thermo-fill {
  /* GSAP controls these; inline opacity:0 on HTML prevents FOUC */
}


/* ==========================================================================
   GSAP FALLBACK -- CSS-only reveal if GSAP CDN fails to load
   Content stays invisible with inline opacity:0 if GSAP never runs.
   This keyframe fires after 0.8s delay, ensuring content is visible.
   When GSAP DOES load, it sets inline styles that override CSS animations.
   ========================================================================== */

@keyframes revealFallback {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-reveal] {
  animation: revealFallback 0.6s ease forwards;
  animation-delay: 0.8s;
}

[data-stagger-item] {
  animation: revealFallback 0.6s ease forwards;
  animation-delay: 1.0s;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  [data-reveal],
  [data-stagger-item] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .floating-emoji {
    animation: none !important;
  }

  .cta-glow {
    animation: none !important;
  }

  .phone-tilt {
    transform: none;
  }

  .hover-lift:hover {
    transform: none;
  }
}