/* ==========================================================================
   LYVEK SIGNATURE EFFECTS (demo mode) — loaded only by pages that use one.
   Catalogue: references/signature-effects.md. Motion lives in js/effects.js;
   this file owns layout, the no-JS state and the reduced-motion state.
   ========================================================================== */

/* Baseline on every demo: cross-document page transitions (progressive). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--ease); }

/* ---------- split headline ---------- */
.fx-word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fx-word > span { display: inline-block; }
/* Pre-hidden only while effects.js is pending; the failsafe reveals it if the module never runs. */
.fx-pending [data-fx="split"] .fx-word > span { transform: translateY(110%); animation: fx-failsafe 0s 2.5s forwards; }
@keyframes fx-failsafe { to { transform: none; } }

/* ---------- scrub (generated film follows scroll) ---------- */
.fx-scrub { position: relative; height: var(--fx-scrub-len, 320vh); background: var(--ink); color: #fff; }
.fx-scrub-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.fx-scrub-stage video,
.fx-loop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fx-scrub-stage::after,
.fx-loop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.55)); pointer-events: none; }
.fx-scrub-chapters { position: relative; z-index: 1; margin-top: -100svh; }
.fx-scrub-chapter { min-height: 100svh; display: flex; align-items: center; }
.fx-scrub-chapter > .wrap > * { max-width: 34rem; }
.fx-scrub-chapter h2 { color: #fff; }
.fx-scrub-chapter p { color: rgba(255, 255, 255, 0.86); }

/* ---------- loop (ambient generated clip) ---------- */
.fx-loop { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--ink); }
.fx-loop > .wrap { position: relative; z-index: 1; }

/* ---------- parallax ---------- */
.fx-parallax { position: relative; overflow: hidden; }
.fx-parallax [data-depth] { will-change: transform; }

/* ---------- carousel ---------- */
.fx-carousel { --card-w: min(82vw, 420px); }
.fx-car-track {
  position: relative; /* Motion measures card offsets against a positioned scroll container */
  display: flex; gap: clamp(0.9rem, 0.6rem + 1vw, 1.4rem);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter); padding: 1.5rem var(--gutter) 2rem;
  scrollbar-width: none; perspective: 1200px;
}
.fx-car-track::-webkit-scrollbar { display: none; }
.fx-car-track:focus-visible { outline: 2px solid var(--green-bright); outline-offset: -2px; }
.fx-card { flex: 0 0 var(--card-w); scroll-snap-align: start; }
.fx-card > * { height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--card); box-shadow: var(--shadow-sm); transform-style: preserve-3d; }
.fx-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fx-card-body { padding: 1.2rem 1.3rem 1.4rem; }
.fx-car-ui { display: flex; align-items: center; gap: 1rem; padding-inline: var(--gutter); max-width: var(--container); margin-inline: auto; }
.fx-car-ui button {
  inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 1.1rem;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast);
}
.fx-car-ui button:hover { transform: scale(1.06); }
.fx-car-ui button:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }
.fx-car-progress { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.fx-car-progress span { display: block; height: 100%; background: var(--green-bright); transform-origin: left; transform: scaleX(0.08); }

/* ---------- stack ---------- */
/* The gap is the scroll room each card is held for before the next one covers it. */
.fx-stack { display: grid; gap: clamp(2rem, 28vh, 16rem); padding-bottom: 8vh; }
.fx-stack-card { position: sticky; top: calc(5.5rem + var(--i, 0) * 1rem); transform-origin: top center; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow); padding: clamp(1.4rem, 1rem + 2vw, 2.6rem); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .fx-pending [data-fx="split"] .fx-word > span { transform: none; animation: none; }
  .fx-scrub { height: auto; }
  .fx-scrub-stage { position: absolute; inset: 0; height: auto; }
  .fx-scrub-chapters { margin-top: 0; }
  .fx-car-ui button { transition: none; }
}