/* ══════════════════════════════════════════════════════════
   MOTION LAYER, shared across every page of matdufour.com
   Rewritten in versions/v2-homepage-build (Sept 17 2026) for the
   two page architectures: the spread (home, about, vertigo) and
   the quiet page (coaching, organisations).
   Linked after design-system.css. Gated behind html.js so
   no-JS visitors see everything; fully disabled under
   prefers-reduced-motion at the bottom of this file.

   ┌──────────────────────────────────────────────────┐
   │  CONTROL PANEL, tune the feel here.               │
   │  (JS-side dials live at the top of js/motion.js)  │
   └──────────────────────────────────────────────────┘
   ══════════════════════════════════════════════════════════ */
:root {
  --reveal-distance:     28px;    /* how far elements travel into view */
  --reveal-speed:        0.7s;    /* spread pages: slide from the seam */
  --fade-speed:          1.1s;    /* quiet pages: fade only, no travel */
  --reveal-ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --entrance-speed:      0.9s;    /* panel / hero pieces on load */
  --nav-underline-speed: 0.35s;
  --nav-elevation:       0 8px 30px rgba(26, 46, 63, 0.20);
  --btn-lift:            2px;
}

/* Scroll reveal, spread pages: content slides in from the seam */
.js .spread [data-reveal] {
  opacity: 0; transform: translateX(var(--reveal-distance));
  transition: opacity var(--reveal-speed) var(--reveal-ease), transform var(--reveal-speed) var(--reveal-ease);
  will-change: opacity, transform;
}
@media (max-width: 959px) { .js .spread [data-reveal] { transform: translateY(var(--reveal-distance)); } }
.js .spread [data-reveal].is-visible { opacity: 1; transform: none; }

/* Scroll reveal, quiet pages: fade only, slowly */
.js .quiet [data-reveal] { opacity: 0; transition: opacity var(--fade-speed) ease; }
.js .quiet [data-reveal].is-visible { opacity: 1; }

/* Any other page (404, language landings): a gentle rise */
.js [data-reveal]:not(.spread [data-reveal]):not(.quiet [data-reveal]) {
  opacity: 0; transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-speed) var(--reveal-ease), transform var(--reveal-speed) var(--reveal-ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Entrance on load: the panel (spread) and the hero (quiet) */
.js .panel__kicker, .js .panel__headline, .js .panel__sub, .js .panel__meta, .js .panel__actions, .js .panel__extra, .js .index,
.js .hero-quiet__kicker, .js .hero-quiet__headline, .js .hero-quiet__sub, .js .hero-quiet__actions,
.js .page-hero__kicker, .js .page-hero__headline, .js .page-hero__lead, .js .page-hero__meta, .js .page-hero__actions {
  opacity: 0; animation: entrance var(--entrance-speed) var(--reveal-ease) forwards;
}
.js .panel__kicker, .js .hero-quiet__kicker, .js .page-hero__kicker      { animation-delay: 0.10s; }
.js .panel__headline, .js .hero-quiet__headline, .js .page-hero__headline { animation-delay: 0.25s; }
.js .panel__sub, .js .panel__meta, .js .hero-quiet__sub, .js .page-hero__lead, .js .page-hero__meta { animation-delay: 0.45s; }
.js .panel__actions, .js .panel__extra, .js .hero-quiet__actions, .js .page-hero__actions { animation-delay: 0.60s; }
.js .index { animation-delay: 0.90s; }
@keyframes entrance { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Nav gains depth once you leave the top */
.nav { transition: box-shadow 0.4s ease, border-color 0.4s ease; }
.nav--scrolled { box-shadow: var(--nav-elevation); border-bottom-color: rgba(242, 237, 228, 0.16); }

/* Nav links: amber underline draws in on hover */
.nav__link { position: relative; }
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px;
  background-color: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--nav-underline-speed) var(--reveal-ease);
}
.nav__link:hover::after { transform: scaleX(1); }

/* Solid buttons lift softly on hover */
.btn-primary, .btn-secondary, .btn-book, .btn-amber {
  transition: background-color var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-normal),
              box-shadow var(--transition-normal);
}
.btn-primary:hover, .btn-secondary:hover, .btn-book:hover, .btn-amber:hover {
  transform: translateY(calc(var(--btn-lift) * -1));
  box-shadow: 0 6px 18px rgba(26, 46, 63, 0.14);
}
.btn-primary:active, .btn-secondary:active, .btn-book:active, .btn-amber:active { transform: translateY(0); }

/* Respect reduced-motion: show everything, move nothing */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .js .panel__kicker, .js .panel__headline, .js .panel__sub, .js .panel__meta, .js .panel__actions, .js .panel__extra, .js .index,
  .js .hero-quiet__kicker, .js .hero-quiet__headline, .js .hero-quiet__sub, .js .hero-quiet__actions,
  .js .page-hero__kicker, .js .page-hero__headline, .js .page-hero__lead, .js .page-hero__meta, .js .page-hero__actions {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .btn-primary:hover, .btn-secondary:hover, .btn-book:hover, .btn-amber:hover { transform: none; box-shadow: none; }
}