/* ==========================================================================
   Motion site starter — shared motion components (fx-*). Theme + page styles live in larimar.css (Lit + Lenis + CSS-variable driven effects)
   ========================================================================== */

:root {
  /* The easing used for nearly every transition on the reference site */
  --base-ease: cubic-bezier(.6, 0, .05, 1);

  --c-ink: #202124;
  --c-ink-2: #3c4043;
  --c-muted: #5f6368;
  --c-line: #dadce0;
  --c-surface: #f8f9fa;
  --c-bg: #ffffff;
  --c-accent: #1a73e8;
  --c-accent-dark: #174ea6;

  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;

  /* 12-col grid, capped at 1520px — same numbers as the reference */
  --grid-columns: 12;
  --grid-gap: 24px;
  --grid-padding: max(20px, 50% - 760px);
}
@media (width <= 1023.98px) {
  :root { --grid-columns: 4; --grid-padding: max(48px, 50% - 270px); }
}
@media (width <= 599.98px) {
  :root { --grid-padding: max(16px, 50% - 250px); }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a { color: var(--c-accent); }

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

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
  padding-inline: var(--grid-padding);
}

/* ---------- Type scale (display-large / medium from the reference) ---------- */
.display-l { font-family: var(--font-display); font-weight: 400; letter-spacing: -.5px; font-size: 60px; line-height: 72px; margin: 0; }
.display-m { font-family: var(--font-display); font-weight: 400; letter-spacing: -.25px; font-size: 44px; line-height: 52px; margin: 0; }
.eyebrow { font-size: 14px; font-weight: 500; letter-spacing: .4px; text-transform: uppercase; color: var(--c-muted); }
.body-l { font-size: 20px; line-height: 32px; color: var(--c-ink-2); }
@media (width <= 1023.98px) { .display-l { font-size: 48px; line-height: 56px; } .display-m { font-size: 36px; line-height: 44px; } }
@media (width <= 599.98px)  { .display-l { font-size: 36px; line-height: 44px; } .display-m { font-size: 28px; line-height: 36px; } }

/* ==========================================================================
   <fx-preloader>
   ========================================================================== */
fx-preloader {
  position: fixed; inset: 0; z-index: 10000;
  background: #fff;
  display: grid; place-items: center;
  transition: opacity 1.3s var(--base-ease), visibility 0s 1.3s;
}
.preload-complete fx-preloader { opacity: 0; visibility: hidden; pointer-events: none; }

fx-preloader .stack { position: relative; width: min(290px, 60vw); aspect-ratio: 3 / 2; }
fx-preloader .stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transform: rotate(var(--r, 0deg)) translateY(12px) scale(.96);
  transition: opacity .35s ease, transform .6s var(--base-ease);
  box-shadow: 0 2px 10px #0002;
}
fx-preloader .stack img.on { opacity: 1; transform: rotate(var(--r, 0deg)); }
fx-preloader .pct { position: absolute; bottom: 44px; left: 50%; translate: -50%; font-size: 15px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
fx-preloader .bar {
  position: absolute; left: 0; bottom: 0; height: 10px;
  width: var(--progress, 0%); background: #000;
  transition: width .1s linear, transform .4s var(--base-ease);
}
.preload-complete fx-preloader .bar { transform: translateY(100%); }

/* ==========================================================================
   <fx-reveal type="text">  — line-by-line masked rise, staggered
   ========================================================================== */
fx-reveal { display: block; --base-delay: 0s; --stagger: .1s; }
fx-reveal[type="text"] { visibility: hidden; }
fx-reveal[type="text"][ready] { visibility: visible; }
fx-reveal .fx-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
fx-reveal .fx-line > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1.2s var(--base-ease);
  transition-delay: calc(var(--base-delay) + var(--i) * var(--stagger));
}
fx-reveal[inview] .fx-line > span { transform: translateY(0); }

/* <fx-reveal type="translate" variant="up|down|fade"> */
fx-reveal[type="translate"] > * {
  --up: 30px;
  opacity: 0;
  transform: translateY(var(--up));
  transition: transform 1.3s var(--base-ease), opacity .6s var(--base-ease);
  transition-delay: var(--base-delay);
}
fx-reveal[type="translate"][variant="down"] > * { --up: -20px; }
fx-reveal[type="translate"][variant="fade"] > * { --up: 0px; }
fx-reveal[type="translate"][inview] > * { opacity: 1; transform: none; }

/* ==========================================================================
   <fx-parallax amount=".2">   — scroll-driven image drift inside a mask
   ========================================================================== */
fx-parallax { display: block; overflow: hidden; border-radius: var(--radius, 8px); }
fx-parallax > .inner {
  --p: 0;           /* -1 … 1, set by JS as the element crosses the viewport */
  height: 100%;
  transform: scale(calc(1 + var(--amount, .2))) translateY(calc(var(--p) * var(--amount, .2) * 50%));
  will-change: transform;
}
fx-parallax[hover-zoom] > .inner { transition: scale 1.2s var(--base-ease); }
fx-parallax[hover-zoom]:hover > .inner { scale: 1.05; }
fx-parallax img, fx-parallax video { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   <fx-tilt angle="2">   — mouse-driven 3D tilt
   ========================================================================== */
fx-tilt { display: block; }
fx-tilt > .inner {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: scale .9s ease-out;
  will-change: transform;
  border-radius: 6px; overflow: hidden;
}
fx-tilt[zoom-on-hover]:hover > .inner { --s: 1.04; }

/* ==========================================================================
   <fx-follow>  — button that trails the cursor inside [data-follow]
   ========================================================================== */
[data-follow] { position: relative; }
@media (hover: hover) and (width >= 1024px) { [data-follow] { cursor: none; } }
fx-follow { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; }
fx-follow .follow-btn {
  display: grid; place-items: center;
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--c-accent); color: #fff; font-size: 14px; font-weight: 500;
  translate: -50% -50%;
  scale: var(--follow-scale, 0);
  opacity: var(--follow-scale, 0);
}
/* Touch / small screens: render as a static button */
@media (hover: none), (width < 1024px) {
  fx-follow { position: static; pointer-events: auto; }
  fx-follow .follow-btn { translate: none; scale: 1; opacity: 1; margin-top: 16px; }
}

/* ==========================================================================
   <fx-scroll-progress>   — sticky, scroll-scrubbed chapter section
   ========================================================================== */
fx-scroll-progress { display: block; height: calc(var(--steps, 3) * 100vh); --progress: 0; }
fx-scroll-progress .sticky {
  position: sticky; top: 0; height: 100vh;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px;
  padding-inline: var(--grid-padding);
  overflow: hidden;
}
fx-scroll-progress .steps { position: relative; }
fx-scroll-progress .step {
  position: absolute; inset: 0 auto auto 0;
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--base-ease), transform .9s var(--base-ease);
}
fx-scroll-progress .step.active { opacity: 1; transform: none; }
fx-scroll-progress .meter { height: 2px; background: var(--c-line); margin-top: 260px; }
fx-scroll-progress .meter i { display: block; height: 100%; width: calc(var(--progress) * 100%); background: var(--c-accent); }
fx-scroll-progress .visual {
  aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(var(--c-accent) calc(var(--progress) * 360deg), var(--c-surface) 0);
  transform: rotate(calc(var(--progress) * 90deg)) scale(calc(.8 + var(--progress) * .2));
}
@media (width < 1024px) {
  fx-scroll-progress .sticky { grid-template-columns: 1fr; align-content: center; }
  fx-scroll-progress .visual { max-width: 260px; }
  fx-scroll-progress .meter { margin-top: 200px; }
}

/* ==========================================================================
   <fx-story-modal>   — full-screen, clip-path wipe, horizontal scroll track
   ========================================================================== */
fx-story-modal {
  position: fixed; inset: 0; z-index: 10003;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  transform: translateY(-20vw);
  transition: clip-path 1.3s var(--base-ease), transform 1.3s var(--base-ease);
  visibility: hidden;
}
fx-story-modal[open] {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transform: none; visibility: visible;
}
fx-story-modal .track {
  height: 100%; display: flex; gap: 64px; align-items: center;
  padding: 0 10vw; overflow: auto hidden;
  scrollbar-width: none;
  opacity: 0; transition: opacity 1.3s var(--base-ease);
}
fx-story-modal[open] .track { opacity: 1; transition-delay: .8s; }
fx-story-modal .panel { flex: 0 0 auto; }
fx-story-modal .panel.text { width: min(420px, 80vw); }
fx-story-modal .panel.media { width: min(560px, 80vw); height: 70vh; }
fx-story-modal .close {
  position: fixed; top: 24px; left: 24px; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--c-ink); color: #fff; font-size: 20px; cursor: pointer;
  opacity: 0; transition: opacity .3s var(--base-ease);
}
fx-story-modal[open] .close { opacity: 1; transition-delay: 1s; }
@media (width <= 599.98px) {
  fx-story-modal .track { flex-direction: column; overflow: hidden auto; padding: 96px 16px; height: 100%; align-items: stretch; }
  fx-story-modal .panel.media { width: 100%; height: 60vh; }
  fx-story-modal .close { left: auto; right: 24px; }
}

/* ==========================================================================
   Reduced motion: show everything, no transforms
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  fx-reveal[type="text"] { visibility: visible; }
  fx-reveal .fx-line > span, fx-reveal[type="translate"] > * { transform: none !important; opacity: 1 !important; }
  fx-parallax > .inner, fx-tilt > .inner { transform: none !important; }
}