/* ==========================================================================
   INNOVANATEC — Motion system
   Rules:
   1. Animate transform / opacity / filter only (compositor-friendly).
   2. Content is always in the DOM — CSS hides it visually only, so crawlers
      and screen readers see everything even if JS never runs.
   3. Everything collapses under prefers-reduced-motion.
   ========================================================================== */

/* ==========================================================================
   1. SCROLL REVEAL  (js/reveal.js toggles .is-in)
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: var(--delay, 0ms);
  will-change: transform, opacity;
}

[data-reveal="left"] {
  transform: translate3d(-32px, 0, 0);
}
[data-reveal="right"] {
  transform: translate3d(32px, 0, 0);
}
[data-reveal="scale"] {
  transform: scale(0.94);
}
[data-reveal="fade"] {
  transform: none;
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* On narrow screens a horizontal reveal on a full-width block would push the
   page sideways for a moment. Below the tablet breakpoint they travel up. */
@media (max-width: 767px) {
  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translate3d(0, 26px, 0);
  }
}

/* stagger children: --i is set inline or by reveal.js */
[data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--t-reveal) var(--ease-out),
    transform var(--t-reveal) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

[data-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

/* JS-off safety net: if the script never runs, show everything after 1s */
.no-js [data-reveal],
.no-js [data-stagger] > * {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   2. HERO HEADLINE — line-by-line mask reveal
   ========================================================================== */
.reveal-lines {
  display: grid;
}

.reveal-lines__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
}

.reveal-lines__line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  animation: lineUp 900ms var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}

@keyframes lineUp {
  to {
    transform: none;
  }
}

/* generic entrance for hero support elements */
.hero-in {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: heroIn 800ms var(--ease-out) forwards;
  animation-delay: var(--delay, 400ms);
}

@keyframes heroIn {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   3. HERO BACKGROUND — breathing grid + pointer parallax
   ========================================================================== */
.hero__grid-svg .grid-line {
  stroke: var(--ink-700);
  stroke-width: 1;
}

.hero__grid-svg .grid-dot {
  fill: var(--brand-blue);
  opacity: 0.55;
  animation: pulse 5.5s var(--ease-in-out) infinite;
}

.hero__grid-svg .grid-dot:nth-of-type(3n) {
  fill: var(--brand-orange);
  animation-duration: 7s;
  animation-delay: -2s;
}

.hero__grid-svg .grid-dot:nth-of-type(4n) {
  animation-duration: 9s;
  animation-delay: -4s;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(0.85);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.25);
  }
}

/* set by effects.js — max 10px of travel, never enough to disorient */
.hero__bg {
  transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0);
  transition: transform 700ms var(--ease-out);
}

/* floating diamond cluster in the hero's right column */
.hero__art {
  position: relative;
  display: none;
  aspect-ratio: 1;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}

.hero__art svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero__art .ring {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spin 44s linear infinite;
}

.hero__art .ring--rev {
  animation-duration: 62s;
  animation-direction: reverse;
}

.hero__art .float {
  animation: float 7s var(--ease-in-out) infinite alternate;
}

.hero__art .float--b {
  animation-duration: 9s;
  animation-delay: -3s;
}

.hero__art .float--c {
  animation-duration: 11s;
  animation-delay: -6s;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes float {
  to {
    transform: translateY(-16px);
  }
}

@media (min-width: 1024px) {
  .hero__art {
    display: block;
  }
}

/* ==========================================================================
   4. SVG ICON DRAW-ON (value icons)
   ========================================================================== */
.draw path,
.draw circle,
.draw rect,
.draw line,
.draw polyline {
  stroke-dasharray: var(--len, 200);
  stroke-dashoffset: var(--len, 200);
  transition: stroke-dashoffset 1200ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

.draw.is-in path,
.draw.is-in circle,
.draw.is-in rect,
.draw.is-in line,
.draw.is-in polyline {
  stroke-dashoffset: 0;
}

/* ==========================================================================
   5. SECTION DIVIDER PARALLAX (set by effects.js)
   ========================================================================== */
.divider svg {
  transform: translate3d(var(--slide, 0px), 0, 0);
}

/* ==========================================================================
   6. PAGE TRANSITIONS (progressive — ignored where unsupported)
   ========================================================================== */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vtOut 220ms var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: vtIn 320ms var(--ease-out) both;
}

@keyframes vtOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes vtIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* ==========================================================================
   7. REDUCED MOTION — hard stop
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  [data-stagger] > *,
  .hero-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal-lines__line > span {
    transform: none !important;
  }

  .draw path,
  .draw circle,
  .draw rect,
  .draw line,
  .draw polyline {
    stroke-dashoffset: 0 !important;
  }

  .hero__bg,
  .divider svg {
    transform: none !important;
  }

  @view-transition {
    navigation: none;
  }
}