/* ==========================================================================
   Maw Poke | Motion
   Depth comes from real 3D transforms and from light moving across glass,
   never from a drop shadow doing the work alone.
   Everything here is gated behind html.motion so a JS failure leaves the
   page fully readable, and behind prefers-reduced-motion.
   ========================================================================== */

/* Word by word cascade on display headlines. */
.split-word {
  display: inline-block;
  /* a touch of right padding so wide tracking is never clipped by the mask */
  padding-right: 0.06em;
  margin-right: -0.06em;
}
.split-word-mask { display: inline-block; overflow: hidden; vertical-align: bottom; }

/* Scroll driven progress bar. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--green), var(--olive));
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  z-index: 120;
  pointer-events: none;
}

/* Page curtain used on internal navigation. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.curtain.is-in { transform: scaleY(1); transform-origin: bottom; transition: transform 0.46s cubic-bezier(0.7, 0, 0.3, 1); }
.curtain.is-out { transform: scaleY(0); transform-origin: top; transition: transform 0.46s cubic-bezier(0.7, 0, 0.3, 1); }

/* Tilt surfaces sit inside their own perspective so a fixed element is never
   trapped by an ancestor transform. */
.tilt-scene { perspective: 900px; }
.tilt-item {
  transform-style: preserve-3d;
  transition: transform 0.45s var(--ease);
  will-change: transform;
}

/* Depth layers driven by scroll. */
.depth { will-change: transform; }

/* A slow idle float, applied to hero furniture so the page is never static. */
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -12px, 0) rotate(1.4deg); }
}
.float-idle { animation: drift 9s ease-in-out infinite; }
.float-idle-slow { animation: drift 13s ease-in-out infinite reverse; }

/* --------------------------------------------------------------------------
   Resting states LAST in source order so nothing later re-shows a hidden
   element. Each state is removed by adding .is-in.
   -------------------------------------------------------------------------- */

html.motion .reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.7s var(--ease-glass), transform 0.8s var(--ease-glass);
}
html.motion .reveal.is-in { opacity: 1; transform: none; }

html.motion .reveal-3d {
  opacity: 0;
  transform: perspective(1000px) rotateX(16deg) translate3d(0, 46px, -80px);
  transform-origin: 50% 100%;
  transition: opacity 0.8s var(--ease-glass), transform 1s var(--ease-glass);
}
html.motion .reveal-3d.is-in { opacity: 1; transform: perspective(1000px) rotateX(0) translate3d(0, 0, 0); }

/* Glass tiles land like a card being set down: they arrive from below and
   from behind, and the rim brightens as they settle. */
html.motion .reveal-glass {
  opacity: 0;
  transform: perspective(1200px) translate3d(0, 34px, -110px) rotateX(9deg);
  transition: opacity 0.75s var(--ease-glass),
              transform 0.9s var(--ease-glass),
              box-shadow 0.9s var(--ease-glass);
}
html.motion .reveal-glass.is-in { opacity: 1; transform: none; }

/* The clip lives on the child, never on the observed element itself: an
   element clipped to nothing never intersects, so it would never reveal. */
html.motion .reveal-media > * {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.06);
  transition: clip-path 0.95s cubic-bezier(0.65, 0, 0.35, 1), transform 1.2s var(--ease);
}
html.motion .reveal-media.is-in > * { clip-path: inset(0 0 0 0); transform: none; }

html.motion .split-word {
  transform: translate3d(0, 108%, 0) rotateX(-38deg);
  opacity: 0;
  transition: transform 0.8s var(--ease-glass), opacity 0.5s var(--ease);
  transition-delay: calc(var(--word-index, 0) * 42ms);
}
html.motion .cascade.is-in .split-word { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html.motion .reveal,
  html.motion .reveal-3d,
  html.motion .reveal-glass,
  html.motion .cascade .split-word { opacity: 1; transform: none; }
  html.motion .reveal-media > * { clip-path: none; transform: none; }
  .ticker-track { animation: none; }
  .float-idle, .float-idle-slow { animation: none; }
  .hero-bowl, .reveal-stack-item, .depth { transform: none !important; }
}