/* ==========================================================================
   ANIMATIONS — CREATING THE MAN
   Reveal utilities driven by IntersectionObserver in js/animations.js,
   plus supplementary GSAP hooks. Kept subtle and purposeful.
   ========================================================================== */

/* Base reveal state: elements start slightly displaced + transparent,
   then settle into place when the .in-view class is added */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] { transform: none; }

[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].in-view { transform: translateX(0); }

[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].in-view { transform: translateX(0); }

[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="scale"].in-view { transform: scale(1); }

/* Stagger children automatically via inline --delay custom property */
[data-reveal] { transition-delay: var(--delay, 0s); }

/* Hero entrance sequence */
.hero-media img { animation: heroZoomOut 1.8s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes heroZoomOut { from { transform: scale(1.15); } to { transform: scale(1.05); } }

.hero-content .eyebrow,
.hero-content h1,
.hero-content .accent-text,
.hero-content p.lede,
.hero-content .btn-row {
  opacity: 0;
  animation: heroRise 1s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-content .eyebrow { animation-delay: 0.35s; }
.hero-content h1 { animation-delay: 0.5s; }
.hero-content .accent-text { animation-delay: 0.7s; }
.hero-content p.lede { animation-delay: 0.85s; }
.hero-content .btn-row { animation-delay: 1s; }

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

/* Underline draw for links on hover already handled via transform in style.css */

/* Loader brand pulse */
.loader .brand { animation: loaderPulse 1.6s ease-in-out infinite; }
@keyframes loaderPulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* Parallax layer helper (translateY applied via JS on scroll) */
.parallax-layer { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-content .eyebrow, .hero-content h1, .hero-content .accent-text, .hero-content p.lede, .hero-content .btn-row {
    opacity: 1 !important; animation: none !important;
  }
  .hero-media img { animation: none !important; }
}