/* ============================================================
   HADRIAN DIGITAL — Animation Tokens & Motion System
============================================================ */

/* ── MOTION TOKENS ── */
:root {
  --dur-fast:    200ms;
  --dur-base:    400ms;
  --dur-slow:    600ms;
  --dur-slower:  800ms;
  --dur-stagger: 100ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ============================================================
   SCROLL REVEAL
   ============================================================ */

/* Initial hidden states — only active when JS is present */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
}

.js .reveal-scale {
  opacity: 0;
  transform: scale(1.05);
}

/* Stagger children: JS sets --stagger-i on each .stagger-item */
.js .reveal .stagger-item,
.js .reveal-scale .stagger-item {
  opacity: 0;
  transform: translateY(16px);
}

/* animations defined in styles.css. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal,
  .js .reveal-scale,
  .js .reveal .stagger-item,
  .js .reveal-scale .stagger-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* Cancel page-load keyframe animations from styles.css */
  .hero-content,
  .hero-photo-wrap,
  .modal-overlay,
  .modal-box {
    animation: none !important;
  }
}

/* Transitions — only when motion is preferred */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transition:
      opacity   var(--dur-slow)   var(--ease-out),
      transform var(--dur-slow)   var(--ease-out);
  }

  .js .reveal-scale {
    transition:
      opacity   var(--dur-slower) var(--ease-out),
      transform var(--dur-slower) var(--ease-out);
  }

  .js .reveal .stagger-item,
  .js .reveal-scale .stagger-item {
    transition:
      opacity   var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out);
    transition-delay: calc(var(--stagger-i, 0) * var(--dur-stagger));
  }
}

/* Revealed state — added by IntersectionObserver */
.js .reveal.in,
.js .reveal-scale.in {
  opacity: 1;
  transform: none;
}

.js .reveal.in .stagger-item,
.js .reveal-scale.in .stagger-item {
  opacity: 1;
  transform: none;
}

.hero-photo-wrap {
  animation: none;
}


/* ============================================================
   HEADER — SCROLL STATE
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .header-inner {
    transition: transform var(--dur-fast) var(--ease-out);
  }

  header {
    transition: box-shadow var(--dur-fast) var(--ease-out);
  }
}

header.header-scrolled .header-inner {
  transform: scale(0.88);
  transform-origin: top center;
}

header.header-scrolled {
  box-shadow:
    0 1px 0 0 var(--line),
    0 4px 20px -8px rgba(0, 0, 0, 0.07);
}


/* ============================================================
   BUTTONS — MICRO-INTERACTIONS
   Overrides styles.css (loads after). All properties are
   GPU-composited or paint-only (no layout reflow).
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition:
      transform  var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out),
      filter     var(--dur-fast) var(--ease-out);
  }

  .btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 6px 20px -6px rgba(0, 64, 80, 0.28);
    filter:     brightness(1.08);
  }

  /* Extra presence on the large footer CTA */
  .btn--xl:hover {
    transform:  translateY(-2px) scale(1.015);
    box-shadow: 0 8px 26px -8px rgba(0, 64, 80, 0.32);
  }
}