/* Motion styles for forvalab demos (pairs with motion.js). Only active when html has .motion-ok,
   which motion.js adds unless the visitor prefers reduced motion. */

html.lenis { scroll-behavior: auto !important; }

/* Smooth cross-fade between pages (browsers that support it; others just navigate) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 220ms cubic-bezier(0.7, 0, 0.84, 0) both vt-out; }
::view-transition-new(root) { animation: 420ms cubic-bezier(0.22, 1, 0.36, 1) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Reveals ---------- */
.motion-ok [data-reveal=""] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.motion-ok [data-reveal=""].is-in { opacity: 1; transform: none; }

/* Word-by-word headlines */
.motion-ok [data-reveal="words"] .w {
  display: inline-block;
  overflow: clip;
  vertical-align: top;
  padding-block: 0.14em;
  margin-block: -0.14em;
}
.motion-ok [data-reveal="words"] .w > span {
  display: inline-block;
  transform: translateY(108%);
  filter: blur(6px);
  opacity: 0;
  transition:
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.6s ease;
  transition-delay: calc(var(--i, 0) * 60ms + 60ms);
}
.motion-ok [data-reveal="words"].is-in .w > span { transform: none; filter: none; opacity: 1; }

/* ---------- 3D tilt (pointer) + scroll tilt ---------- */
.motion-ok [data-tilt3d] {
  transform: perspective(1000px) rotateX(calc(var(--rx, 0deg) + var(--srx, 0deg))) rotateY(var(--ry, 0deg));
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
  will-change: transform;
}
.motion-ok [data-tilt3d].tilting { transition: transform 0.12s linear; }

/* Soft light that follows the pointer on tilted photos */
.motion-ok .tilt-glare { position: relative; }
.motion-ok .tilt-glare::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), oklch(100% 0 0 / 0.28), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.motion-ok .tilting .tilt-glare::after, .motion-ok .tilt-glare.tilting::after { opacity: 1; }

/* ---------- Coverflow strips (3D carousel) ---------- */
.motion-ok .coverflow > * {
  transform: perspective(1000px) rotateY(calc(var(--d, 0) * -24deg)) scale(calc(1 - var(--ad, 0) * 0.1));
  opacity: calc(1 - var(--ad, 0) * 0.28);
  transition: transform 0.12s linear, opacity 0.12s linear;
}

/* ---------- Drag to scroll ---------- */
.motion-ok [data-drag-bound] { cursor: grab; }
.motion-ok [data-drag-bound].dragging { cursor: grabbing; scroll-snap-type: none !important; user-select: none; }
.motion-ok [data-drag-bound].dragging * { pointer-events: none; }

/* ---------- Long-press peek ---------- */
.peek {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: oklch(20% 0.02 20 / 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
}
.peek.on { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.peek-card {
  width: min(78vw, 360px);
  overflow: hidden;
  border-radius: 24px;
  background: var(--paper, var(--pearl, #fff));
  color: var(--ink);
  box-shadow: 0 30px 80px oklch(20% 0.03 20 / 0.35);
  transform: scale(0.9) translateY(12px);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.peek.on .peek-card { transform: none; }
.peek-card img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; }
.peek-name { padding: 14px 18px 0; font-weight: 700; font-size: 1.0625rem; }
.peek-price { padding: 2px 18px 16px; color: var(--ink-soft); }
.card img, .pin img, .occ img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---------- Count-up bump ---------- */
.bump { animation: bump 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes bump { 30% { transform: scale(1.08); } }
.total strong { display: inline-block; transform-origin: left center; }
[dir="rtl"] .total strong { transform-origin: right center; }

/* ---------- Celebration burst ---------- */
.burst { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: visible; }
.burst i { position: fixed; display: block; will-change: transform, opacity; }
.burst .sprinkle { width: 5px; height: 14px; border-radius: 3px; }
.burst .petal { width: 16px; height: 21px; border-radius: 85% 0 85% 0; }

/* ---------- Photo parallax containers ---------- */
.motion-ok [data-parallax-box] { overflow: hidden; }
.motion-ok [data-parallax-box] img { will-change: transform; transition: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}