/* ============================================================================
   PANPRUKSA MOTION LAYER  (v0.8.0)
   ---------------------------------------------------------------------------
   Loaded AFTER styles.css. Adds subtle scroll-reveal, hover micros, and
   sticky-shrink nav on top of the existing design. Everything in this file
   respects `prefers-reduced-motion: reduce` — when that media query matches,
   transforms and reveals collapse to a no-op (no flash, no jump).
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Scroll reveal — real fade-up
   ---------------------------------------------------------------------------
   Default state of `.fade-up` in styles.css only translates; opacity stays 1.
   We override that ONLY when JS has confirmed it is running (`html.js-loaded`)
   so no-JS users never see hidden content. Stagger is opt-in via a CSS custom
   property `--stagger-index` on each child of a `.fade-up-group`.
   --------------------------------------------------------------------------- */
html.js-loaded .fade-up:not(.visible) {
  opacity: 0;
  transform: translateY(28px);
}

html.js-loaded .fade-up {
  transition:
    opacity   var(--duration-xslow, 0.8s) var(--ease-out, ease)
              calc(var(--stagger-index, 0) * 90ms),
    transform var(--duration-xslow, 0.8s) var(--ease-out, ease)
              calc(var(--stagger-index, 0) * 90ms);
}

html.js-loaded .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   2. Sticky-shrink header
   ---------------------------------------------------------------------------
   The header.scrolled class is already toggled by main.js at scrollY > 80.
   Today it only swaps the background; we add a subtle vertical pad reduction
   and slightly smaller logo so the masthead "settles" into the page.
   --------------------------------------------------------------------------- */
.header {
  transition:
    padding var(--duration-fast, 0.3s) var(--ease-out, ease),
    background var(--duration-base, 0.4s) var(--ease-out, ease);
}

.header.scrolled {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

.header.scrolled .logo {
  font-size: clamp(1.3rem, 1.6vw, 1.5rem);
}

/* ---------------------------------------------------------------------------
   3. Card hover micros
   ---------------------------------------------------------------------------
   project-card + collection-card already scale their image on hover. We add
   a small lift to the card itself and a subtle copper accent line that
   wipes in from the left on hover — quiet, premium-feeling.
   --------------------------------------------------------------------------- */
.project-card,
.collection-card {
  transition: transform var(--duration-base, 0.4s) var(--ease-out, ease),
              box-shadow var(--duration-base, 0.4s) var(--ease-out, ease);
  will-change: transform;
}

.project-card:hover,
.collection-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
}

.project-card::before,
.collection-card::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--color-accent, #B87333);
  transition: width var(--duration-slow, 0.6s) var(--ease-out, ease);
  z-index: 2;
  pointer-events: none;
}

.project-card:hover::before,
.collection-card:hover::before {
  width: 100%;
}

/* ---------------------------------------------------------------------------
   4. Button micro
   ---------------------------------------------------------------------------
   The .btn already has a color invert on hover. Add a 1px lift so it feels
   tactile without breaking the flat aesthetic.
   --------------------------------------------------------------------------- */
.btn {
  transition:
    background var(--duration-base, 0.4s) var(--ease-out, ease),
    color      var(--duration-base, 0.4s) var(--ease-out, ease),
    transform  var(--duration-fast, 0.3s) var(--ease-out, ease),
    box-shadow var(--duration-fast, 0.3s) var(--ease-out, ease);
  will-change: transform;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* ---------------------------------------------------------------------------
   5. Nav-link reveal
   ---------------------------------------------------------------------------
   The full-screen nav-menu already has an underline grow on hover. Add a
   subtle stagger when the nav opens so links feel like they "drop in" one
   after another instead of all at once.
   --------------------------------------------------------------------------- */
.nav-menu a {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity   var(--duration-base, 0.4s) var(--ease-out, ease),
    transform var(--duration-base, 0.4s) var(--ease-out, ease),
    padding   var(--duration-base, 0.4s) var(--ease-out, ease);
}

body.nav-open .nav-menu a {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--nav-stagger, 0) * 60ms + 120ms);
}

/* ---------------------------------------------------------------------------
   6. Reduced motion — opt out of everything above
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.js-loaded .fade-up:not(.visible),
  html.js-loaded .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .header.scrolled {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .project-card:hover,
  .collection-card:hover,
  .btn:hover,
  .btn:active {
    transform: none !important;
    box-shadow: none !important;
  }

  .project-card::before,
  .collection-card::before {
    display: none !important;
  }

  .nav-menu a {
    opacity: 1 !important;
    transform: none !important;
    transition-delay: 0s !important;
  }
}