/* ============================================================
   Marie-Astrid Holemans — motion layer
   Confirmed set: intro reveal, split-text, clip-path reveal,
   hover-flourish, magnetic buttons.
   (No custom cursor, no parallax, no smooth scroll.)

   Initial "from" states are gated behind html.anim-on, which is
   added by an inline head snippet BEFORE paint and removed by a
   2.5s failsafe (or reduced-motion), so text can never stay
   hidden if GSAP fails to load.
   ============================================================ */

/* Split-text mask lines */
.anim-line { display: block; }

/* --- Pageload curtain intro (shown once per visit; gated by html.intro-play) --- */
#mah-preloader { position: fixed; inset: 0; z-index: 9999; overflow: hidden; display: none;
  background: var(--ink, #1f1416); will-change: transform; }
html.intro-play #mah-preloader { display: block; }
#mah-preloader .mah-pre-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
/* Logo as CSS background: only downloads when html.intro-play is set (once per visit),
   instead of on every page view like an <img> would. width=900 keeps it ~10x lighter. */
#mah-preloader .mah-pre-logo { width: min(82vw, 59vh); aspect-ratio: 3375 / 4219;
  opacity: 0; transform: scale(0.92); will-change: opacity, transform; }
html.intro-play #mah-preloader .mah-pre-logo {
  background: center / contain no-repeat
    url("https://cdn.shopify.com/s/files/1/1024/8378/8119/files/Ontwerp_zonder_titel_37.png?v=1785271627&width=900");
}

/* --- Initial hidden states (only while anim-on is active) --- */
html.anim-on h1,
html.anim-on h2 { opacity: 0; }

html.anim-on .eyebrow,
html.anim-on .kicker-label,
html.anim-on .copy,
html.anim-on .addr,
html.anim-on .lede,
html.anim-on .cta,
html.anim-on .menu-row { opacity: 0; }

html.anim-on .gallery .g-cell { clip-path: inset(0 0 100% 0); }

/* --- Hover flourishes (safe, additive) --- */
html.anim-on .g-cell::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(31, 20, 22, 0); transition: background 0.5s ease;
}
html.anim-on .g-cell:hover::after { background: rgba(31, 20, 22, 0.10); }

html.anim-on .nav nav a { position: relative; }
html.anim-on .nav nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--rose, #d97a86); transition: width 0.28s ease;
}
html.anim-on .nav nav a:hover::after { width: 100%; }

/* Respect reduced motion: never hide, never transform */
@media (prefers-reduced-motion: reduce) {
  html h1, html h2, html .eyebrow, html .kicker-label, html .copy,
  html .addr, html .lede, html .cta, html .menu-row { opacity: 1 !important; transform: none !important; }
  html .gallery .g-cell { clip-path: none !important; }
  html #mah-preloader { display: none !important; }
}