/*! GROW Motion kit 1.0 — base styles for grow-motion.js (README.md next to this file).
 * The page's own CSS owns colours and type; this file only owns the moving parts.
 * Initial (hidden) states exist only under html.gm-ready, so no-JS and a failed script show the finished page. */

:root {
  --gm-bg: #fff; --gm-fg: #111; --gm-accent: #c8102e;
  --gm-ease: cubic-bezier(.16, 1, .3, 1);
  --gm-wipe: cubic-bezier(.76, 0, .24, 1);
}
html, body { overflow-x: clip; }

/* ---------- split words (Arabic-safe: words only, with room for dots and tails above and below) */
.gm-w { display: inline-block; overflow: clip; vertical-align: top; padding-block: .14em; margin-block: -.14em; overflow-clip-margin: .1em; }
.gm-wi { display: inline-block; will-change: transform; }

/* ---------- before the script runs: hide only what will be revealed (with a fail-safe) */
.js:not(.gm-ready) [data-gm~="words"], .js:not(.gm-ready) [data-gm~="rise"] > *, .js:not(.gm-ready) [data-gm~="mask"] { opacity: 0; animation: gm-failsafe 0s 2.5s forwards; }
@keyframes gm-failsafe { to { opacity: 1; } }

/* ---------- mask */
[data-gm~="mask"] { overflow: hidden; }
[data-gm~="mask"] img, [data-gm~="mask"] video { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 50% 60%; }

/* ---------- zoom: section > .gm-zoom-stage (sticky) > .gm-zoom-frame > img, + overlay [data-gm-after] */
.gm-zoom { position: relative; height: 260vh; height: 260svh; }
.gm-zoom-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.gm-zoom-frame { position: absolute; inset: 0; clip-path: inset(22% 30% 22% 30% round 999px 999px 24px 24px); }
.gm-zoom-frame img, .gm-zoom-frame video { width: 100%; height: 100%; object-fit: cover; }
.gm-zoom-over { position: relative; z-index: 2; }
@media (max-width: 767px) { .gm-zoom-frame { clip-path: inset(26% 14% 26% 14% round 999px 999px 20px 20px); } .gm-zoom { height: 200svh; } }
.gm-static .gm-zoom { height: auto; }
.gm-static .gm-zoom-stage { position: relative; min-height: 80svh; }
.gm-static .gm-zoom-frame { clip-path: none; }

/* ---------- hscroll: section[data-gm=hscroll] > .gm-track > cards */
[data-gm~="hscroll"] { overflow: hidden; }
.gm-track { display: flex; gap: clamp(16px, 2.5vw, 32px); width: max-content; will-change: transform; }
.gm-track-bar { height: 2px; background: currentColor; transform-origin: right; transform: scaleX(0); opacity: .5; }
[dir="ltr"] .gm-track-bar { transform-origin: left; }
.gm-static [data-gm~="hscroll"] { overflow-x: auto; scroll-snap-type: x mandatory; }
.gm-static .gm-track > * { scroll-snap-align: start; }
.gm-static .gm-track-bar { display: none; }

/* ---------- stack: [data-gm=stack] > .gm-card (each sticks a little lower than the last) */
[data-gm~="stack"] { display: grid; gap: 6vh; }
.gm-card { position: sticky; top: calc(var(--gm-stack-top, 12vh) + var(--i, 0) * 18px); transform-origin: 50% 0; --dim: 0; }
.gm-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--dim); pointer-events: none; }

/* ---------- story: [data-gm=story] with [data-frame] pictures (stacked) and [data-step] texts */
[data-gm~="story"] [data-frame] { transition: opacity .9s var(--gm-ease), transform 1.2s var(--gm-ease), clip-path 1.1s var(--gm-wipe); }
.gm-ready:not(.gm-static) [data-gm~="story"] [data-frame]:not(.is-on) { opacity: 0; transform: scale(1.08); }
[data-gm~="story"] [data-step] { transition: opacity .6s var(--gm-ease); }
.gm-ready:not(.gm-static) [data-gm~="story"] [data-step]:not(.is-on) { opacity: .35; }
.gm-meter-fill { transform-origin: 50% 0; }

/* ---------- marquee: [data-gm=marquee] > .gm-mq > items */
[data-gm~="marquee"] { overflow: hidden; white-space: nowrap; }
.gm-mq { display: flex; width: max-content; will-change: transform; }

/* ---------- spin badge */
[data-gm~="spin"] { will-change: transform; }

/* ---------- spotlight: light follows the pointer (static glow on touch) */
[data-gm~="spotlight"] { --mx: 70%; --my: 30%; position: relative; isolation: isolate; }
[data-gm~="spotlight"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx) var(--my), color-mix(in srgb, var(--gm-accent) 38%, transparent), transparent 62%); }

/* ---------- tilt: glare follows the pointer */
[data-gm~="tilt"] { transform-style: preserve-3d; --gx: 50%; --gy: 50%; }

/* ---------- reveal-list picture + custom cursor (desktop) */
.gm-follow { position: fixed; top: 0; left: 0; z-index: 60; width: 260px; aspect-ratio: 4/5; margin: -160px 0 0 -130px; pointer-events: none; opacity: 0; transform: scale(.85); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.gm-follow img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (pointer: coarse) { .gm-follow { display: none; } }

.gm-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--gm-accent); opacity: 0; display: grid; place-items: center; transition: width .35s var(--gm-ease), height .35s var(--gm-ease), margin .35s var(--gm-ease), opacity .3s, background-color .3s; }
.gm-cursor.is-on { opacity: 1; }
.gm-cursor.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: color-mix(in srgb, var(--gm-accent) 30%, transparent); }
.gm-cursor.is-label { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--gm-accent); }
.gm-cursor span { font-size: 13px; font-weight: 600; color: #fff; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.gm-cursor.is-label span { opacity: 1; }

/* ---------- intro: .gm-intro > .gm-intro-panel × 3–5 (+ optional .gm-intro-mark) */
.gm-intro { position: fixed; inset: 0; z-index: 100; display: flex; pointer-events: none; }
.gm-intro-panel { flex: 1; height: 100%; }
.gm-intro-mark { position: absolute; inset: 0; display: grid; place-items: center; }
.gm-intro { animation: gm-intro-failsafe 0s 2.4s forwards; }
@keyframes gm-intro-failsafe { to { visibility: hidden; } }
html:not(.js) .gm-intro, .gm-static .gm-intro { display: none; }

/* ---------- film grain overlay: <div class="gm-grain" aria-hidden="true"></div> */
.gm-grain { position: fixed; inset: -50%; z-index: 80; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: gm-grain 1s steps(6) infinite; }
@keyframes gm-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 2%); } 100% { transform: translate(0, 0); } }

/* ---------- press feedback for every button and button-like link */
.gm-btn { transition: transform .2s var(--gm-ease), background-color .25s, color .25s, box-shadow .3s; }
.gm-btn:active { transform: scale(.97); }

/* ---------- reduced motion: the finished composition, plain */
@media (prefers-reduced-motion: reduce) {
  .gm-grain, .gm-intro, .gm-cursor, .gm-follow { display: none !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}