/*
 * ─────────────────────────────────────────────────────────────
 *  MOTION.CSS  —  web-starter-kit v2
 *  groupany / webgroeiers
 *
 *  Motion layer: scroll reveals, microinteractions, nav transitions,
 *  fullscreen mobile menu, hero parallax.
 *
 *  Depends on: tokens.css (must be loaded first)
 *  Load AFTER components.css, BEFORE client-theme.css
 *
 *  CONTENTS:
 *  01. prefers-reduced-motion guard
 *  02. Enhanced button microinteractions (fill/slide)
 *  03. Animated link underlines
 *  04. Nav link hover
 *  05. Sticky nav — shrink on scroll
 *  06. Card image hover-zoom (already in components, enhanced here)
 *  07. Gallery image hover-zoom
 *  08. Scroll reveal — .reveal and .reveal-group/.reveal-item
 *  09. Hero parallax container
 *  10. MOBILE MENU — fullscreen overlay + multilevel slide
 *  11. Body scroll lock
 * ─────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════
 *  01 — prefers-reduced-motion GLOBAL GUARD
 *  Strips all transitions/animations site-wide for users who
 *  opt out. Motion.js also respects this flag.
 * ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior:      auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════
 *  02 — BUTTON MICROINTERACTIONS
 *  Enhanced: horizontal fill slide on .btn (brand→accent),
 *  outline fills on .btn-outline. Uses pseudo-element wipe.
 * ═══════════════════════════════════════════════════════════ */

.btn,
.btn-outline {
  position:   relative;
  overflow:   hidden;
  isolation:  isolate;
  /* ensure transition from base.css is extended */
  transition: background  var(--duration-base) var(--ease-out),
              color        var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow   var(--duration-base) var(--ease-out),
              transform    var(--duration-fast) var(--ease-spring);
}

/* Slide-fill pseudo element */
.btn::before,
.btn-outline::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: var(--accent);
  transform:  translateX(-101%);
  transition: transform var(--duration-base) var(--ease-in-out);
  z-index:    -1;
}

.btn:hover::before,
.btn-outline:hover::before {
  transform: translateX(0);
}

/* Override so text/border colour stays correct on filled hover */
.btn:hover {
  background:   var(--brand-2);  /* fallback for no-pseudo browsers */
  border-color: var(--brand-2);
  color:        var(--canvas);
}

.btn-outline:hover {
  background:   transparent;     /* let pseudo handle the fill */
  border-color: var(--accent);
  color:        var(--ink);
}

/* Light variant keeps white */
.btn-light::before { background: var(--accent); }
.btn-light:hover   { background: var(--brand-2); border-color: var(--brand-2); }


/* ═══════════════════════════════════════════════════════════
 *  03 — ANIMATED LINK UNDERLINES
 *  .link-anim: text underline grows from left on hover.
 *  Use on nav-style text links inside sections.
 * ═══════════════════════════════════════════════════════════ */

.link-anim {
  position:        relative;
  text-decoration: none;
  color:           inherit;
}

.link-anim::after {
  content:    '';
  position:   absolute;
  left:       0;
  bottom:     -2px;
  width:      100%;
  height:     1.5px;
  background: currentColor;
  transform:  scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}

.link-anim:hover::after,
.link-anim:focus-visible::after {
  transform: scaleX(1);
}

/* Accent-coloured underline variant */
.link-anim--accent::after { background: var(--accent); }


/* ═══════════════════════════════════════════════════════════
 *  04 — NAV LINK HOVER (enhanced)
 *  Slide-up accent underline on desktop nav links.
 * ═══════════════════════════════════════════════════════════ */

.site-nav__link {
  position:   relative;
  /* keep existing transition from components.css */
}

.site-nav__link::after {
  content:          '';
  position:         absolute;
  left:             0;
  bottom:           -4px;
  width:            100%;
  height:           1.5px;
  background:       var(--brand);
  transform:        scaleX(0);
  transform-origin: left center;
  transition:       transform var(--duration-base) var(--ease-out);
}

.site-nav__link:hover::after,
.site-nav__link.is-active::after {
  transform: scaleX(1);
}

/* Keep underline white when nav is transparent (over hero) */
.site-nav:not(.is-scrolled) .site-nav__link::after {
  background: var(--canvas);
}


/* ═══════════════════════════════════════════════════════════
 *  05 — STICKY NAV SHRINK
 *  Adds height compression + shadow when .is-scrolled.
 *  Matches component CSS but adds the shrink via padding tweak.
 * ═══════════════════════════════════════════════════════════ */

.site-nav {
  /* Already defined in components.css; these extend it */
  transition: background  var(--duration-slow) var(--ease-out),
              box-shadow  var(--duration-slow) var(--ease-out),
              padding     var(--duration-slow) var(--ease-out),
              backdrop-filter var(--duration-slow) var(--ease-out);
}

/* Frosted glass effect while scrolling past hero */
.site-nav.is-scrolled {
  backdrop-filter: blur(0);       /* solid after scroll */
}

/* Optional frosted-glass in-between state (very subtle) — only on browsers that support it */
@supports (backdrop-filter: blur(8px)) {
  .site-nav:not(.is-scrolled) {
    backdrop-filter: blur(0);     /* start clean */
  }
}


/* ═══════════════════════════════════════════════════════════
 *  06 — CARD IMAGE HOVER-ZOOM (enhanced)
 *  Extends components.css; ensures overflow clip is set and
 *  scale is consistent with kit easing.
 * ═══════════════════════════════════════════════════════════ */

.card__image-wrap {
  overflow: hidden; /* already in components but make explicit */
}

.card__image-wrap img {
  transition: transform var(--duration-slow) var(--ease-out);
  transform-origin: center center;
}

.card:hover .card__image-wrap img {
  transform: scale(1.06);
}

/* Subtle card lift — slightly more pronounced than base */
.card {
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform  var(--duration-base) var(--ease-out);
}

.card:hover {
  box-shadow: var(--shadow-l);
  transform:  translateY(-5px);
}


/* ═══════════════════════════════════════════════════════════
 *  07 — GALLERY IMAGE HOVER-ZOOM (enhanced)
 * ═══════════════════════════════════════════════════════════ */

.gallery__item {
  overflow: hidden; /* already in components; explicit */
}

.gallery__item img {
  transition: transform var(--duration-slow) var(--ease-out);
}

.gallery__item:hover img {
  transform: scale(1.055);
}


/* ═══════════════════════════════════════════════════════════
 *  08 — SCROLL REVEAL  (.reveal / .reveal-group)
 *  The JS sets inline opacity/transform; these provide:
 *  a) a no-JS fallback (never hidden without JS)
 *  b) the base transition property so JS can just toggle inline style
 *
 *  .reveal-group wraps a staggered set of .reveal-item elements.
 *  data-reveal-dir="up|left|right|none" on .reveal-group controls direction.
 * ═══════════════════════════════════════════════════════════ */

/* Single element reveal */
.reveal {
  /* Visible by default — JS sets opacity:0 only after it initialises */
  opacity:   1;
  transform: none;
  /* Transition defined inline by JS from token values */
}

/* Stagger container — no styles, just semantic */
.reveal-group {
  /* nothing — JS handles children */
}

/* Stagger item — visible by default, JS sets initial hidden state */
.reveal-item {
  opacity:   1;
  transform: none;
}

/* Accessibility: ensure content is always readable in print */
@media print {
  .reveal, .reveal-item { opacity: 1 !important; transform: none !important; }
}


/* ═══════════════════════════════════════════════════════════
 *  09 — HERO PARALLAX CONTAINER
 *  The .hero-full__bg scale(1.04) gives headroom so the
 *  JS translateY shift never exposes a gap at top/bottom.
 * ═══════════════════════════════════════════════════════════ */

.hero-full__bg {
  /* JS adds translateY dynamically; scale starts at 1.04 to cover gaps */
  will-change: transform;
  transform:   scale(1.04); /* default; JS overrides with scale(1.04) translateY(Xpx) */
}

@media (prefers-reduced-motion: reduce) {
  .hero-full__bg { will-change: auto; transform: scale(1); }
}


/* ═══════════════════════════════════════════════════════════
 *  10 — MOBILE MENU — FULLSCREEN OVERLAY + MULTILEVEL SLIDE
 *
 *  Structure:
 *  <div id="mobile-menu" class="mobile-menu" aria-hidden="true">
 *    <!-- Panel level 0 (root) -->
 *    <div class="mobile-menu__panel" data-level="0" data-active="true">
 *      <div class="mobile-menu__header">
 *        <a class="mobile-menu__brand">Brand</a>
 *        <button class="mobile-menu__close">×</button>
 *      </div>
 *      <ul class="mobile-menu__list">
 *        <li><a href="#" class="mobile-menu__link">About</a></li>
 *        <li>
 *          <button class="mobile-menu__link mobile-menu__drill" data-submenu="panel-1">
 *            Assortiment <svg class="mobile-menu__chevron">…</svg>
 *          </button>
 *        </li>
 *      </ul>
 *    </div>
 *    <!-- Panel level 1 (submenu, starts off-screen right) -->
 *    <div class="mobile-menu__panel" id="panel-1" data-level="1">
 *      <button class="mobile-menu__back">
 *        <svg …/>  ← Terug
 *      </button>
 *      <ul class="mobile-menu__list">…</ul>
 *    </div>
 *  </div>
 *
 *  Motion:
 *  - Overlay fades + scales up from 98% on open (spring ease)
 *  - Panels translate horizontally (level 1 starts at translateX(100%))
 *  - Drill: current panel → translateX(-100%), next → translateX(0)
 *  - Back: current → translateX(100%), prev → translateX(0)
 * ═══════════════════════════════════════════════════════════ */

/* ── Overlay wrapper ── */
.mobile-menu {
  display:          none;         /* hidden until JS opens */
  position:         fixed;
  inset:            0;
  z-index:          var(--z-modal);
  background:       var(--canvas);
  overflow:         hidden;       /* clip the sliding panels */
  /* Entrance animation */
  opacity:          0;
  transform:        scale(0.98);
  transition:       opacity  var(--duration-base) var(--ease-out),
                    transform var(--duration-base) var(--ease-spring);
}

.mobile-menu.is-open {
  display: block;
  opacity:   1;
  transform: scale(1);
  /* Force GPU layer for smooth panel slides */
  will-change: transform, opacity;
}

/* ── Panel (each level) ── */
.mobile-menu__panel {
  position:        absolute;
  inset:           0;
  display:         flex;
  flex-direction:  column;
  overflow-y:      auto;
  overflow-x:      hidden;
  /* Slide transition */
  transition:      transform var(--duration-slow) var(--ease-out);
  transform:       translateX(0);
  /* iOS momentum scroll */
  -webkit-overflow-scrolling: touch;
  padding-block:   var(--space-2xl);
  padding-inline:  var(--container-pad);
}

/* Non-root panels start off-screen right */
.mobile-menu__panel:not([data-level="0"]) {
  transform: translateX(100%);
}

/* ── Header row (brand + close button) ── */
.mobile-menu__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   var(--space-3xl);
  flex-shrink:     0;
}

.mobile-menu__brand {
  font-family:     var(--font-display);
  font-size:       var(--step-3);
  font-weight:     var(--weight-display);
  color:           var(--ink);
  text-decoration: none;
  letter-spacing:  var(--letter-spacing-tight);
}

.mobile-menu__close {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            44px;
  height:           44px;
  background:       none;
  border:           none;
  cursor:           pointer;
  color:            var(--ink);
  border-radius:    var(--radius-pill);
  transition:       background var(--duration-fast) var(--ease-out);
  /* Large tap target */
  padding:          0;
}

.mobile-menu__close:hover {
  background: var(--surface);
}

.mobile-menu__close svg {
  width:  20px;
  height: 20px;
  pointer-events: none;
}

/* ── Nav list ── */
.mobile-menu__list {
  list-style:      none;
  padding:         0;
  margin:          0;
  display:         flex;
  flex-direction:  column;
  flex:            1;
}

/* ── Individual link / drill button ── */
.mobile-menu__link {
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  width:            100%;
  font-family:      var(--font-display);
  font-size:        var(--step-4);         /* Large, comfortable tap target */
  font-weight:      300;
  letter-spacing:   var(--letter-spacing-tight);
  color:            var(--ink);
  text-decoration:  none;
  line-height:      var(--line-height-heading);
  padding-block:    var(--space-m);
  padding-inline:   0;
  border:           none;
  background:       none;
  cursor:           pointer;
  text-align:       left;
  border-bottom:    1px solid var(--rule);
  transition:       color  var(--duration-fast) var(--ease-out),
                    opacity var(--duration-fast) var(--ease-out);
  /* min tap target */
  min-height: 52px;
}

.mobile-menu__list > li:first-child .mobile-menu__link {
  border-top: 1px solid var(--rule);
}

.mobile-menu__link:hover {
  color:       var(--brand);
  opacity:     1;
  text-decoration: none;
}

/* Chevron icon inside drill buttons */
.mobile-menu__chevron {
  flex-shrink:  0;
  width:        20px;
  height:       20px;
  color:        var(--muted);
  transition:   transform var(--duration-fast) var(--ease-out);
}

.mobile-menu__drill:hover .mobile-menu__chevron {
  transform:    translateX(4px);
  color:        var(--brand);
}

/* ── Back button ── */
.mobile-menu__back {
  display:         flex;
  align-items:     center;
  gap:             var(--space-s);
  background:      none;
  border:          none;
  cursor:          pointer;
  font-family:     var(--font-body);
  font-size:       var(--step--1);
  font-weight:     var(--weight-ui);
  letter-spacing:  var(--letter-spacing-caps);
  text-transform:  uppercase;
  color:           var(--muted);
  padding:         var(--space-s) 0;
  margin-bottom:   var(--space-2xl);
  transition:      color var(--duration-fast) var(--ease-out);
  min-height:      44px; /* tap target */
}

.mobile-menu__back:hover {
  color: var(--ink);
}

.mobile-menu__back svg {
  width:      16px;
  height:     16px;
  flex-shrink: 0;
  transition:  transform var(--duration-fast) var(--ease-out);
}

.mobile-menu__back:hover svg {
  transform: translateX(-3px);
}

/* ── Submenu heading label (optional, shown in sub-panel header) ── */
.mobile-menu__sub-title {
  font-family:     var(--font-body);
  font-size:       var(--step--1);
  font-weight:     var(--weight-ui);
  letter-spacing:  var(--letter-spacing-caps);
  text-transform:  uppercase;
  color:           var(--muted);
  margin-bottom:   var(--space-l);
}

/* ── Footer area of the menu (CTA + social) ── */
.mobile-menu__footer {
  margin-top:    auto;
  padding-top:   var(--space-2xl);
  border-top:    1px solid var(--rule);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-l);
}

.mobile-menu__footer-cta {
  width: 100%;
  justify-content: center;
  font-size: var(--step-0);
  padding: var(--space-m) var(--space-xl);
}

.mobile-menu__footer-meta {
  font-size:  var(--step--1);
  color:      var(--muted);
  max-width:  none;
}

/* ── Hamburger → × animation ── */
.site-nav__toggle {
  position:   relative;
  z-index:    calc(var(--z-modal) + 1); /* always above overlay */
}

/* Transform bars into × when open */
.site-nav__toggle.is-open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle.is-open .bar:nth-child(2) {
  opacity:   0;
  transform: scaleX(0);
}
.site-nav__toggle.is-open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Bars (use .bar class in HTML for clarity; JS/CSS targets both) */
.site-nav__toggle .bar,
.site-nav__toggle span {
  display:     block;
  width:       22px;
  height:      2px;
  background:  currentColor;
  border-radius: 2px;
  transition:  transform var(--duration-base) var(--ease-out),
               opacity   var(--duration-fast) var(--ease-out),
               background var(--duration-fast) var(--ease-out);
}

/* Show toggle on mobile, hide desktop links */
@media (max-width: 960px) {
  /* Hide the original nav links list on mobile —
     the mobile-menu overlay replaces it */
  .site-nav__links {
    display: none !important;
  }

  .site-nav__cta {
    display: none;
  }

  .site-nav__toggle {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
    color: inherit;
  }
}

@media (min-width: 961px) {
  /* Desktop: hide toggle, show links */
  .site-nav__toggle {
    display: none;
  }

  /* Hide mobile menu on desktop */
  .mobile-menu {
    display: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════
 *  11 — BODY SCROLL LOCK
 *  Applied by JS when menu is open.
 * ═══════════════════════════════════════════════════════════ */

body.mobile-menu-open {
  overflow:   hidden;
  /* Prevent layout shift from scrollbar disappearing */
  padding-right: var(--scrollbar-width, 0px);
}