/* ==========================================================================
   Vellox motion engine · /assets/css/motion.css (companion to /assets/js/motion.js)
   Only the mechanics the engine needs. Page styles (colours of the tour
   steps, the progress bar, the band shapes) belong to the page.
   0. Lenis   1. Pre-reveal   2. Gradient fallback   3. Split lines
   4. Pinned tour   5. Section colours   6. Card tilt   7. Utilities
   ========================================================================== */

:root {
  --mo-ease: cubic-bezier(.2, .7, .1, 1);
}

/* 0. Lenis 1.3.26, dist/lenis.css reproduced verbatim (MIT, (c) darkroom.engineering) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
/* Lenis does the smoothing; native smooth scrolling would fight it (and ScrollTrigger's refresh). */
html.lenis { scroll-behavior: auto; }


/* 1. Pre-reveal: hide only between first paint and engine start (html.mo is set by the
      head snippet; .mo-ready by motion.js). Never with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .mo:not(.mo-ready) [data-reveal],
  .mo:not(.mo-ready) [data-reveal-stagger] > *,
  .mo:not(.mo-ready) [data-split] {
    opacity: 0;
  }
}


/* 2. Gradient: the canvas paints its own static fallback. The live WebGL frame is drawn with
      alpha on top of it and fades in. Shown as-is with no JS, no WebGL or reduced motion.
      Colours: --gradient-1 … --gradient-5 (same properties the shader reads). */
canvas[data-gradient] {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--gradient-2, #3B2DBF);
  background-image:
    linear-gradient(172deg, rgb(20 13 51 / .32) 0%, rgb(20 13 51 / 0) 42%),
    radial-gradient(70% 90% at 84% 108%, var(--gradient-5, #FFC23D) 0%, rgb(255 194 61 / 0) 70%),
    linear-gradient(100deg,
      var(--gradient-1, #6B4EFF) 0%,
      var(--gradient-2, #3B2DBF) 30%,
      var(--gradient-3, #FF5FA2) 58%,
      var(--gradient-4, #FF8A5C) 80%,
      var(--gradient-5, #FFC23D) 100%);
}


/* 3. Split lines: each word is its own mask, so lines are never rebuilt (the original markup
      comes back when the reveal ends). The mask reaches past the box for diacritics (Î, Ș, Ț). */
.mo-split { display: contents; }
.mo-w {
  display: inline-block;
  clip-path: inset(-.3em -.14em -.34em -.14em);
}
.mo-wi { display: inline-block; will-change: transform; }
.mo-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* 4. Pinned tour. Default (no JS, reduced motion, small screens): whatever the page CSS says,
      normally a stacked list. Pinned (.is-tour-on): screens share one grid cell and cross-fade. */
.is-tour-on [data-tour-frame] {
  display: grid;
}
.is-tour-on [data-tour-screen] {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(1.012);
  transition: opacity .45s var(--mo-ease), transform .7s var(--mo-ease), visibility 0s linear .45s;
}
.is-tour-on [data-tour-screen].is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s var(--mo-ease), transform .7s var(--mo-ease), visibility 0s;
}
.is-tour-on.is-tour-scrub [data-tour-screen] {
  visibility: visible;
  transform: none;
  transition: none;
}
.is-tour-on [data-tour-step] { cursor: pointer; }


/* 5. Section colours: while the engine runs, sections that declare data-bg let <body> show
      through; <body> carries the interpolated colour. Without it they keep their own CSS colour. */
html.mo-bg [data-bg] { background-color: transparent; }


/* 6. Card tilt: motion.js writes the target angles, CSS eases them (registered properties
      transition; browsers without @property simply snap). Active only while html.mo-tilt is set
      (fine pointer, motion allowed). The tilt owns `transform` on [data-tilt]. */
@property --mo-rx { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --mo-ry { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.mo-tilt [data-tilt] {
  transform: perspective(var(--tilt-perspective, 900px)) rotateX(var(--mo-rx, 0deg)) rotateY(var(--mo-ry, 0deg));
  transition: --mo-rx .55s var(--mo-ease), --mo-ry .55s var(--mo-ease);
}


/* 7. Utilities */
[data-depth] { will-change: translate; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  [data-depth] { will-change: auto; }
}