/* =============================================================================
   HEMZO — Animations & Transitions
   -----------------------------------------------------------------------------
   Sections:
   1. Reduced motion guards
   2. Hero entrance
   3. Scroll-triggered reveal (used with IntersectionObserver in main.js)
   4. Hover micro-interactions
   5. Page load fade
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. REDUCED MOTION (guard rail — base resets are in style.css)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* -------------------------------------------------------------------------
     2. HERO ENTRANCE
     ---------------------------------------------------------------------- */
  .hero__logo {
    animation: heroLogoIn 1200ms cubic-bezier(0.16, 1, 0.3, 1) 200ms forwards;
  }
  .hero__title {
    animation: heroFadeUp 900ms cubic-bezier(0.16, 1, 0.3, 1) 600ms forwards;
  }
  .hero__subtitle {
    animation: heroFadeUp 900ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards;
  }
  .hero__cta {
    animation: heroFadeUp 900ms cubic-bezier(0.16, 1, 0.3, 1) 1200ms forwards;
  }

  @keyframes heroLogoIn {
    0%   { opacity: 0; transform: scale(0.82); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes heroFadeUp {
    0%   { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* -------------------------------------------------------------------------
     3. SCROLL REVEAL
     Add class `.reveal` to any element; IntersectionObserver adds `.is-visible`.
     ---------------------------------------------------------------------- */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Stagger support: parent gets .reveal-stagger, children fade in sequence */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
      transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .reveal-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 80ms; }
  .reveal-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 180ms; }
  .reveal-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 280ms; }
  .reveal-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 380ms; }
  .reveal-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 480ms; }
  .reveal-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 580ms; }
  .reveal-stagger.is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 680ms; }
  .reveal-stagger.is-visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 780ms; }

  /* -------------------------------------------------------------------------
     4. PAGE LOAD FADE
     ---------------------------------------------------------------------- */
  .page-fade {
    animation: pageFade 500ms ease-out;
  }
  @keyframes pageFade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }

  /* Subtle parallax for hero glow (mouse-driven via main.js sets --mx/--my) */
  .hero__glow {
    transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* For reduced motion: ensure reveal content is always visible */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero__logo, .hero__title, .hero__subtitle, .hero__cta {
    opacity: 1 !important;
    transform: none !important;
  }
}