/* Motion Kit — styles for the attribute-driven effects in motion-kit.js.
   All classes are prefixed `mk-` so they never collide with the host site.
   RE-SKIN BY SETTING THESE VARIABLES to the host brand's tokens (see HANDOFF.md for the Madame Vault mapping). */
:root {
  --mk-accent: #D11A1F;          /* every call to action, cursor fill, active states */
  --mk-accent-hot: #FF5A1F;      /* accent hover */
  --mk-dark: #000000;            /* dark section ground */
  --mk-light: #F2EFE9;           /* light section ground */
  --mk-font-display: Georgia, serif;          /* marquee + big titles */
  --mk-font-ui: Helvetica, Arial, sans-serif; /* cursor label, menu buttons */
  --mk-marquee-size: clamp(64px, 10vw, 180px);
  --mk-nav-glass-dark: rgba(0, 0, 0, 0.22);
  --mk-nav-glass-light: rgba(242, 239, 233, 0.6);
  --mk-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Lenis requirement */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── nav ── */
.mk-nav { transition: color 0.4s, transform 0.4s; }
.mk-nav::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: var(--mk-nav-glass-dark); opacity: 0; transition: opacity 0.4s, background-color 0.4s;
}
.mk-nav--scrolled::before { opacity: 1; }
.mk-nav--light::before { background: var(--mk-nav-glass-light); }
/* The host decides what "light" means for its own logo/links, e.g.
   .mk-nav--light { color: var(--ink); }   .mk-nav--light .logo-white { opacity: 0; } */

/* ── sticky hero ── */
.mk-sticky { position: sticky; top: 0; z-index: 0; overflow: hidden; }
.mk-sticky__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 1; }
.mk-over { position: relative; z-index: 1; }                 /* the section that slides over the hero */

/* ── marquee titles ── */
.mk-marquee { overflow: hidden; white-space: nowrap; }
.mk-marquee__run { display: inline-flex; will-change: transform; }
.mk-marquee__word, .mk-marquee__slash {
  font-family: var(--mk-font-display); font-size: var(--mk-marquee-size);
  line-height: 0.95; letter-spacing: -0.02em; padding-right: 0.28em; text-transform: uppercase;
}
.mk-marquee__word { font-style: italic; }
.mk-marquee__slash { color: var(--mk-accent); }

/* ── opposing rows ── */
.mk-rows { overflow: hidden; display: flex; flex-direction: column; gap: 18px; }
.mk-row { display: flex; gap: 18px; width: max-content; margin-left: -6vw; will-change: transform; }

/* ── letter reveal ── */
.mk-chars { perspective: 600px; }
.mk-char { display: inline-block; }

/* ── cover wipe ── */
.mk-wipe { position: relative; overflow: hidden; }
.mk-wipe__cover { position: absolute; inset: 0; z-index: 3; background: var(--mk-wipe-color, currentColor); transform-origin: bottom; pointer-events: none; }
/* set --mk-wipe-color to the section's background, e.g. [data-mk-theme="light"] { --mk-wipe-color: var(--mk-light); } */
[data-mk-theme="light"] { --mk-wipe-color: var(--mk-light); }
[data-mk-theme="dark"] { --mk-wipe-color: var(--mk-dark); }

/* ── black & white → colour on hover (photography only — never artwork for sale) ── */
[data-mk-bw] img, img[data-mk-bw] { filter: grayscale(1) contrast(1.05); transition: filter 0.7s var(--mk-ease-out), transform 1.4s var(--mk-ease-out); }
[data-mk-bw]:hover img, img[data-mk-bw]:hover { filter: none; }

/* ── hover video ── */
.mk-preview { position: relative; overflow: hidden; }
.mk-preview__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--mk-ease-out); z-index: 2; }
.mk-preview.is-previewing .mk-preview__video { opacity: 1; }

/* ── cursor ── */
@media (hover: hover) and (pointer: fine) {
  html.mk-has-cursor, html.mk-has-cursor a, html.mk-has-cursor button { cursor: none; }
}
.mk-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; width: 84px; height: 84px; margin: -42px 0 0 -42px; display: grid; place-items: center; }
.mk-cursor::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; transform: scale(0.1); mix-blend-mode: difference; transition: transform 0.5s var(--mk-ease-out), background-color 0.3s; }
.mk-cursor__label { position: relative; font: 700 10px/1 var(--mk-font-ui); letter-spacing: 0.12em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity 0.3s; }
.mk-cursor.is-media::before { transform: scale(1); background: var(--mk-accent); mix-blend-mode: normal; }
.mk-cursor.is-media .mk-cursor__label { opacity: 1; }
.mk-cursor.is-link::before { transform: scale(0.3); }
@media (hover: none), (pointer: coarse) { .mk-cursor { display: none; } }

/* ── mobile menu overlay ── */
.mk-menu { position: fixed; inset: 0; z-index: 45; background: var(--mk-dark); color: var(--mk-light); overflow-y: auto; }
.mk-menu[hidden] { display: none !important; }
html.mk-menu-open { overflow: hidden; }

/* ── lightbox ── */
.mk-lightbox { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; background: rgba(0, 0, 0, 0.94); padding: 6vh 6vw; }
.mk-lightbox[hidden] { display: none !important; }
.mk-lightbox img { max-width: 100%; max-height: 86vh; width: auto; height: auto; object-fit: contain; }

/* ── optional button styles from the BLVKWELL site (use or ignore) ── */
.mk-pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding-inline: 28px; border-radius: 999px; font: 600 14px/1 var(--mk-font-ui); white-space: nowrap; text-decoration: none; transition: background-color 0.35s, color 0.35s, transform 0.5s var(--mk-ease-out); }
.mk-pill:hover { transform: scale(1.04); }
.mk-pill--accent { background: var(--mk-accent); color: #fff; }
.mk-pill--accent:hover { background: var(--mk-accent-hot); }
.mk-pill--ghost { border: 1px solid currentColor; color: inherit; }
.mk-round { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--mk-accent); color: #fff; border: 0; transition: transform 0.5s var(--mk-ease-out); }
.mk-round:hover { transform: scale(1.1); }

/* ── reduced motion: everything visible, nothing moves ── */
.mk-reduced .mk-cursor { display: none; }