/* ============================================================
   S·GONZÁLEZ — Scroll-Driven Animations
   Native CSS animations tied to scroll position
   Progressive enhancement: fallback for unsupported browsers
   ============================================================ */

@layer animations {

  /* ========== Hero entrance (CSS only, initial load) ========== */

  .hero__headline,
  .hero__subheadline,
  .hero__cta-group {
    opacity: 0;
    transform: translateY(30px);
    animation: hero-fade-in var(--duration-glacial) var(--ease-out-expo) forwards;
  }

  .hero__headline {
    animation-delay: 300ms;
  }

  .hero__subheadline {
    animation-delay: 600ms;
  }

  .hero__cta-group {
    animation-delay: 900ms;
  }

  @keyframes hero-fade-in {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ========== Scroll-driven reveal (native) ========== */

  @keyframes scroll-reveal-up {
    from {
      opacity: 0;
      transform: translateY(60px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes scroll-reveal-scale {
    from {
      opacity: 0;
      transform: scale(0.92);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes scroll-reveal-left {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes scroll-reveal-right {
    from {
      opacity: 0;
      transform: translateX(40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {

    .scroll-reveal {
      animation: scroll-reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }

    .scroll-reveal--scale {
      animation: scroll-reveal-scale linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .scroll-reveal--left {
      animation: scroll-reveal-left linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }

    .scroll-reveal--right {
      animation: scroll-reveal-right linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }

    .bento-grid__item:nth-child(odd),
    .personal-grid__item:nth-child(odd) {
      animation: scroll-reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .bento-grid__item:nth-child(even),
    .personal-grid__item:nth-child(even) {
      animation: scroll-reveal-scale linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;
    }

    .service-card:nth-child(1) {
      animation: scroll-reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }

    .service-card:nth-child(2) {
      animation: scroll-reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 85%;
    }

    .service-card:nth-child(3) {
      animation: scroll-reveal-up linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 90%;
    }
  }

  /* ========== Fallback: JS-driven class toggle ========== */

  @supports not ((animation-timeline: view()) and (animation-range: entry)) {

    .scroll-reveal,
    .scroll-reveal--scale,
    .scroll-reveal--left,
    .scroll-reveal--right,
    .bento-grid__item,
    .personal-grid__item,
    .service-card {
      opacity: 0;
      transform: translateY(40px);
      transition:
        opacity var(--duration-slow) var(--ease-out-expo),
        transform var(--duration-slow) var(--ease-out-expo);
    }

    .scroll-reveal--scale {
      transform: scale(0.92);
    }

    .scroll-reveal--left {
      transform: translateX(-40px);
    }

    .scroll-reveal--right {
      transform: translateX(40px);
    }

    .scroll-reveal.is-visible,
    .scroll-reveal--scale.is-visible,
    .scroll-reveal--left.is-visible,
    .scroll-reveal--right.is-visible,
    .bento-grid__item.is-visible,
    .personal-grid__item.is-visible,
    .service-card.is-visible {
      opacity: 1;
      transform: translateY(0) scale(1) translateX(0);
    }
  }

  /* ========== Accessibility: reduced motion ========== */

  @media (prefers-reduced-motion: reduce) {
    .hero__headline,
    .hero__subheadline,
    .hero__cta-group {
      animation: none;
      opacity: 1;
      transform: none;
    }

    .scroll-reveal,
    .scroll-reveal--scale,
    .scroll-reveal--left,
    .scroll-reveal--right,
    .bento-grid__item,
    .personal-grid__item,
    .service-card {
      animation: none;
      opacity: 1;
      transform: none;
      transition: none;
    }

    .hero__scroll-indicator {
      animation: none;
    }

    .morph-word {
      transition: none !important;
    }
  }
}