/* ==========================================================================
   animations.css
   Scroll-triggered animation styles and transitions for sandrocazzato.com

   All scroll-based reveal animations are driven by JavaScript (Intersection
   Observer in animations.js) which adds/removes the .is-visible class.
   This stylesheet defines the hidden (before) and visible (after) states,
   hero entrance keyframes, interactive hover/active effects, mobile-nav
   transitions, a loading spinner, and a reduced-motion override.
   ========================================================================== */

/* ==========================================================================
   Scroll-Triggered Animations
   Elements start hidden and animate in when they enter the viewport.
   JavaScript adds the .is-visible class via Intersection Observer.
   ========================================================================== */

/* Base state for all animated elements - hidden */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade in from left */
.fade-in-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade in from right */
.fade-in-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up */
.scale-in {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Stagger children animation delays */
.stagger-children > *:nth-child(1) { transition-delay: 0s; }
.stagger-children > *:nth-child(2) { transition-delay: 0.12s; }
.stagger-children > *:nth-child(3) { transition-delay: 0.24s; }
.stagger-children > *:nth-child(4) { transition-delay: 0.36s; }
.stagger-children > *:nth-child(5) { transition-delay: 0.42s; }
.stagger-children > *:nth-child(6) { transition-delay: 0.48s; }

/* Hero-specific animations */
.hero__headline {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.hero__subheadline {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

.hero__cta {
  opacity: 0;
  transform: translateY(16px);
  animation: heroFadeIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
}

@keyframes heroFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero scroll cue line: slides in from above, drains out below */
@keyframes scrollCue {
  0% { transform: translateY(-100%); }
  50% { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* Number counter animation */
.numbers__value {
  transition: text-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.numbers__value.counted {
  text-shadow: 0 0 30px rgba(220, 208, 192, 0.25);
}

/* Button hover effects */
.hero__cta,
.nav__cta,
.guide__form button,
.course__cta,
.closing__cta,
.academy__form button {
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero__cta:hover,
.nav__cta:hover,
.guide__form button:hover,
.course__cta:hover,
.closing__cta:hover,
.academy__form button:hover {
  transform: translateY(-2px);
}

.hero__cta:active,
.nav__cta:active,
.guide__form button:active,
.course__cta:active,
.closing__cta:active,
.academy__form button:active {
  transform: translateY(0);
}

/* Card hover effects */
.content-section__pillar {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.content-section__pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  border-color: rgba(220, 208, 192, 0.3);
}

/* Live marker pulse on the Monday slot */
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Book buy button hover */
.book__btn {
  transition: border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.book__btn:hover {
  transform: translateY(-2px);
}

/* Beige accent line animation for guide section */
.guide__container {
  position: relative;
}

.guide__container::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--color-beige, #dcd0c0), var(--color-bg-tertiary, #16305a));
  transition: height 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.guide__container.is-visible::before {
  height: 100%;
}

/* Navigation transitions */
.nav {
  transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              padding 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              backdrop-filter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Mobile overlay animation */
.nav__mobile-overlay {
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav__mobile-overlay a {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.nav__mobile-overlay--active a {
  opacity: 1;
  transform: translateY(0);
}

.nav__mobile-overlay--active a:nth-child(1) { transition-delay: 0.08s; }
.nav__mobile-overlay--active a:nth-child(2) { transition-delay: 0.14s; }
.nav__mobile-overlay--active a:nth-child(3) { transition-delay: 0.2s; }
.nav__mobile-overlay--active a:nth-child(4) { transition-delay: 0.26s; }
.nav__mobile-overlay--active a:nth-child(5) { transition-delay: 0.32s; }
.nav__mobile-overlay--active a:nth-child(6) { transition-delay: 0.38s; }
.nav__mobile-overlay--active a:nth-child(7) { transition-delay: 0.44s; }
.nav__mobile-overlay--active a:nth-child(8) { transition-delay: 0.5s; }

/* Hamburger animation */
.nav__hamburger span {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav__hamburger--active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav__hamburger--active span:nth-child(2) {
  opacity: 0;
}

.nav__hamburger--active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Parallax helper (JS will adjust transform) */
.parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Loading spinner for form submission */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(5, 6, 8, 0.3);
  border-top-color: #050608;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

  .fade-in,
  .fade-in-left,
  .fade-in-right,
  .scale-in {
    opacity: 1;
    transform: none;
  }

  .hero__headline,
  .hero__subheadline,
  .hero__cta {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__scroll {
    display: none;
  }
}