/* ==========================================================================
   The Shina Bello — motion layer (v5)
   Hidden "before" states apply only while motion is possible:
   html.js (set in <head>) and not .sbd-static (no GSAP / script failed) and not .sbd-reduced.
   Contract: [data-split], [data-reveal] (+ "stagger" | "image" | "fade"), .reveal, .reveal-img,
   [data-parallax], [data-hero-media], [data-magnetic], [data-cursor], [data-count], [data-marquee].
   ========================================================================== */

/* Lenis (smooth scrolling on desktop) */
html.lenis, html.lenis body { height: auto; }
.lenis.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; }

/* Reveal: rise / fade -------------------------------------------------------- */
html.js:not(.sbd-static):not(.sbd-reduced) :is(.reveal, [data-reveal]:not([data-reveal="stagger"]):not([data-reveal="image"])):not(.is-in) { opacity: 0; transform: translate3d(0, 2.25rem, 0); }
html.js:not(.sbd-static):not(.sbd-reduced) [data-reveal="fade"]:not(.is-in) { transform: none; }
html.js:not(.sbd-static):not(.sbd-reduced) :is(.reveal, [data-reveal]:not([data-reveal="stagger"]):not([data-reveal="image"])).is-in:not(.is-done) {
	transition: opacity 1s var(--ease) var(--rd, 0s), transform 1.3s var(--ease-out) var(--rd, 0s);
	transition-delay: calc(var(--rd, 0s) + var(--i, 0) * 60ms);
}

/* Reveal: stagger children ---------------------------------------------------- */
html.js:not(.sbd-static):not(.sbd-reduced) [data-reveal="stagger"]:not(.is-in) > * { opacity: 0; transform: translate3d(0, 1.75rem, 0); }
html.js:not(.sbd-static):not(.sbd-reduced) [data-reveal="stagger"].is-in:not(.is-done) > * {
	transition: opacity .9s var(--ease), transform 1.2s var(--ease-out);
	transition-delay: calc(var(--rd, 0s) + var(--ri, 0) * 85ms);
}

/* Reveal: images (clip wipe + settle) ---------------------------------------- */
html.js:not(.sbd-static):not(.sbd-reduced) :is(.reveal-img, [data-reveal="image"]):not(.is-in) { clip-path: inset(100% 0 0 0); }
html.js:not(.sbd-static):not(.sbd-reduced) :is(.reveal-img, [data-reveal="image"]):not(.is-in) img { transform: scale(1.22); }
html.js:not(.sbd-static):not(.sbd-reduced) :is(.reveal-img, [data-reveal="image"]).is-in:not(.is-done) { transition: clip-path 1.35s var(--ease-out) var(--rd, 0s); }
html.js:not(.sbd-static):not(.sbd-reduced) :is(.reveal-img, [data-reveal="image"]).is-in:not(.is-done) img { transition: transform 1.8s var(--ease-out) var(--rd, 0s); }

/* Split headlines: hidden until split (masked lines/words/chars rise in) ------ */
html.js:not(.sbd-static):not(.sbd-reduced) [data-split]:not(.is-split) { visibility: hidden; }
[data-split] :is(.sl-mask, .sw-mask) { padding: .08em 0 .16em; margin: -.08em 0 -.16em; }
[data-split] .sw-mask { display: inline-block; vertical-align: top; }
[data-split] .sc { will-change: transform; }

/* Counters keep their width while counting */
[data-count] { font-variant-numeric: tabular-nums; }

/* Marquees driven by motion.js (velocity-aware, paused off-screen) ------------- */
[data-marquee] { overflow: hidden; }
.is-marquee :is([data-marquee-track], .marquee__track) { animation: none !important; will-change: transform; }
[data-marquee] [data-marquee-track] { display: flex; width: max-content; }

/* "How I work": a deck of step cards that stacks while you scroll (desktop) ------- */
@media (min-width: 961px) {
	html.sbd-motion .how { overflow: clip; } /* overflow:hidden would stop the sticky cards */
	html.sbd-motion .floaters.is-stack { gap: 0; padding-bottom: 10vh; }
	html.sbd-motion .floaters.is-stack .floater {
		position: sticky; top: calc(var(--hdr) + 3rem + var(--stack, 0) * 22px);
		width: min(100%, 470px); min-height: 13.5rem; margin: 0 0 22vh calc(var(--stack, 0) * 1.25rem);
		transform-origin: 50% 0; transition: box-shadow .5s var(--ease);
	}
	html.sbd-motion .floaters.is-stack .floater:last-child { margin-bottom: 0; }
	html.sbd-motion .floaters.is-stack .floater:hover { transform: none; }
	html.sbd-motion .floaters.is-stack .floater h3 { font-size: 1.6rem; }
}

/* Page curtain: first-visit intro and page-to-page transitions ----------------- */
.curtain { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--dark); color: #fff; visibility: hidden; clip-path: inset(100% 0 0 0); pointer-events: none; }
.curtain::before { content: ""; position: absolute; inset: 0 var(--gutter); background: linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 25% 100%; border-right: 1px solid rgba(255, 255, 255, .07); }
html.sbd-intro .curtain, html.sbd-pt-in .curtain { visibility: visible; clip-path: inset(0 0 0 0); pointer-events: auto; animation: curtainFailsafe .01s linear 2.8s forwards; }
.curtain.is-driven { animation: none !important; }
.curtain.is-leaving { visibility: visible; pointer-events: auto; }
@keyframes curtainFailsafe { to { visibility: hidden; clip-path: inset(0 0 100% 0); pointer-events: none; } }
.curtain__inner { position: relative; display: grid; justify-items: center; gap: 1.1rem; padding: 0 var(--gutter); text-align: center; }
.curtain__brand { display: flex; align-items: baseline; gap: .14em; margin: 0; overflow: hidden; padding: .1em 0 .18em; font-size: clamp(2.6rem, 8vw, 6.5rem); font-weight: 600; line-height: 1; letter-spacing: -.055em; }
.curtain__by { font-size: .42em; font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--sky-2); }
.curtain__label { margin: 0; overflow: hidden; font: 500 .7rem/1.4 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--sky-2); }
.curtain__bar { position: relative; display: block; width: min(220px, 50vw); height: 1px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.curtain__bar i { position: absolute; inset: 0; background: var(--yellow); transform: scaleX(0); transform-origin: 0 50%; }
html.sbd-pt-in .curtain__brand, .curtain.is-leaving .curtain__brand { font-size: clamp(1.4rem, 3vw, 2rem); }

/* Custom cursor (fine pointers only; never replaces the system cursor) --------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 3000; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); }
.cursor.is-on { opacity: 1; }
.cursor__ring { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #fff; mix-blend-mode: difference; transition: transform .45s var(--ease-out), opacity .3s, background-color .3s; }
.cursor.is-link .cursor__ring { transform: scale(2.6); background: rgba(255, 255, 255, .1); }
.cursor.is-label .cursor__ring { transform: scale(0); opacity: 0; }
.cursor.is-down .cursor__ring { transform: scale(.7); }
.cursor__label { position: absolute; left: -46px; top: -46px; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--yellow); color: var(--dark); font: 500 .66rem/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; transform: scale(0); transition: transform .5s var(--ease-out); }
.cursor.is-label .cursor__label { transform: scale(1); }
.cursor.is-hidden { opacity: 0; }

/* Hover preview image for rows with [data-preview] ----------------------------- */
.hover-preview { position: fixed; left: 0; top: 0; z-index: 70; width: 280px; aspect-ratio: 4 / 3; margin: -105px 0 0 -140px; overflow: hidden; pointer-events: none; background: var(--royal); clip-path: inset(50% 50% 50% 50%); transition: clip-path .55s var(--ease-out); box-shadow: 0 30px 60px -30px rgba(11, 31, 75, .6); }
.hover-preview.is-on { clip-path: inset(0 0 0 0); }
.hover-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Reduced motion / static: everything visible, nothing moving ------------------ */
html.sbd-reduced .curtain, html.sbd-static .curtain:not(.is-leaving) { display: none; }
html.sbd-reduced .cursor, html.sbd-reduced .hover-preview { display: none; }
@media (prefers-reduced-motion: reduce) {
	.curtain, .cursor, .hover-preview { display: none !important; }
}

/* Section theme shift (opt-in: data-theme-shift on a section) */
[data-theme-shift] { transition: background-color 1s var(--ease), color 1s var(--ease); }
[data-theme-shift].is-themed { background-color: var(--dark); color: #fff; --fg: #fff; --muted: #A9BAD6; --line: rgba(255, 255, 255, .14); --line-2: rgba(255, 255, 255, .3); }