/*
 * Clone-only overrides.
 *
 * The site's own stylesheet (assets/css/main.css) is served verbatim and is the
 * source of truth for everything visual. This file only covers the seams where
 * the original relied on React inline styles that no longer exist, plus a
 * no-JS fallback so the page is readable if the runtime fails to load.
 */

/* Lenis 1.3.11 base styles: the source ships these from the npm package. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Word reveal masks. The source produced these as inline styles from its split
   routine; they are reproduced as rules so the markup stays clean. */
[data-anim="word-mask"] {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
[data-anim="word"] {
  display: inline-block;
  transform-origin: left bottom;
  will-change: transform;
}

/* Scrub targets get promoted so the rAF loop stays cheap. */
[data-anim="parallax-media"],
[data-anim="parallax-card"],
[data-anim="gallery-zoom"],
[data-anim="hero-clip"] {
  will-change: transform, clip-path;
}

/* Without the runtime every animated element must still be visible: the
   scrub styles are applied by JS, never baked into the markup. */
html:not(.clone-ready) [data-anim="word"] { transform: none; }
html:not(.clone-ready) [data-anim="divider"] { opacity: 1; transform: none; }
html:not(.clone-ready) [data-anim="gallery-zoom"] { transform: none; clip-path: inset(0); }

/* The burger menu is fixed-position chrome; the source toggles .is-open on it. */
.NavigationBurger-menuButon { cursor: pointer; }

/*
 * Responsive variant switch.
 *
 * The source is a React app that swaps whole subtrees on screenWidth >= 1024
 * (BlockCardProjects renders three offset cards on desktop and two stacked ones
 * on mobile, for example). A static clone cannot reproduce that with CSS alone,
 * so both renders are emitted and toggled at the source's own breakpoint. Only
 * sections whose structure actually differs are duplicated.
 */
@media (max-width: 1023px) {
  section.v-desktop { display: none !important; }
}
@media (min-width: 1024px) {
  section.v-mobile { display: none !important; }
}