/* =========================================================
   WebsiteV2 Shift5-style Motion Orchestration V5
   ---------------------------------------------------------
   A single shared animation layer for the static WebsiteV2.1
   pages. It preserves layout/content and only animates
   opacity, transform, clip-path masks, and decorative loops.
   ========================================================= */

:root {
  --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --motion-ease-panel: cubic-bezier(.19, 1, .22, 1);
  --motion-ease-shift: cubic-bezier(.76, 0, .24, 1);
  --motion-ease-standard: cubic-bezier(.4, 0, .2, 1);

  --motion-duration-hero: 900ms;
  --motion-duration-section: 620ms;
  --motion-duration-panel: 680ms;
  --motion-duration-diagnostic: 720ms;
  --motion-duration-card: 390ms;
  --motion-duration-row: 280ms;
  --motion-duration-media: 760ms;

  --motion-opacity-duration-hero: 760ms;
  --motion-opacity-duration-section: 520ms;
  --motion-opacity-duration-panel: 580ms;
  --motion-opacity-duration-diagnostic: 620ms;
  --motion-opacity-duration-card: 340ms;
  --motion-opacity-duration-row: 240ms;
  --motion-opacity-duration-media: 660ms;

  --motion-duration-split-hero: 820ms;
  --motion-duration-split-body: 560ms;
  --motion-stagger-char: 10ms;
  --motion-stagger-word: 18ms;
  --motion-stagger-line: 28ms;
  --motion-duration-mask: 860ms;

  --motion-y-hero: clamp(10px, 1.4vw, 22px);
  --motion-y-section: clamp(14px, 2.2vw, 32px);
  --motion-y-panel: clamp(18px, 2.8vw, 42px);
  --motion-y-diagnostic: clamp(18px, 2.6vw, 38px);
  --motion-y-card: clamp(10px, 1.6vw, 18px);
  --motion-y-row: 8px;
  --motion-y-media: clamp(16px, 2.8vw, 34px);

  --motion-cover-color: var(--site-bg, var(--charcoal, #080a0b));
}

html.motion-ready [data-motion-chrome] {
  transition:
    opacity 580ms var(--motion-ease-standard) var(--chrome-delay, 120ms),
    transform 760ms var(--motion-ease-out) var(--chrome-delay, 120ms);
}

html.motion-ready [data-motion-chrome]:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, -8px, 0);
}

html.motion-ready [data-motion-chrome].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-ready [data-reveal] {
  --reveal-y: var(--motion-y-section);
  --reveal-scale: 1;
  --reveal-duration: var(--motion-duration-section);
  --reveal-opacity-duration: var(--motion-opacity-duration-section);
  --reveal-delay: 0ms;
  transform-origin: center bottom;
  transition:
    opacity var(--reveal-opacity-duration) var(--motion-ease-standard) var(--reveal-delay),
    transform var(--reveal-duration) var(--motion-ease-out) var(--reveal-delay);
}

html.motion-ready [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0) scale(var(--reveal-scale));
}

html.motion-ready [data-reveal].is-revealing {
  will-change: opacity, transform;
}

html.motion-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

html.motion-ready [data-reveal].reveal-complete {
  will-change: auto;
}

/* ── Sections, panels, diagnostics: stable containers ─────────────
   These are structural wrappers that define page rhythm. They should
   be visible immediately — only their children (cards, headlines,
   stats, CTAs) animate in on scroll. Eliminates jarring full-block
   fade-ins and removes expensive compositor layers on large rects. */

html.motion-ready [data-reveal="section"]:not(.is-revealed),
html.motion-ready [data-reveal="panel"]:not(.is-revealed),
html.motion-ready [data-reveal="diagnostic"]:not(.is-revealed) {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

html.motion-ready [data-reveal="section"].is-revealing,
html.motion-ready [data-reveal="panel"].is-revealing,
html.motion-ready [data-reveal="diagnostic"].is-revealing {
  will-change: auto;
}

html.motion-ready [data-reveal="section"][data-mask]:not(.is-revealed):not(.reveal-complete),
html.motion-ready [data-reveal="panel"][data-mask]:not(.is-revealed):not(.reveal-complete),
html.motion-ready [data-reveal="diagnostic"][data-mask]:not(.is-revealed):not(.reveal-complete) {
  clip-path: inset(0 0 0 0 round 0);
  transition: none;
}

html.motion-ready [data-reveal="hero"] {
  --reveal-y: var(--motion-y-hero);
  --reveal-scale: 1;
  --reveal-duration: var(--motion-duration-hero);
  --reveal-opacity-duration: var(--motion-opacity-duration-hero);
}

html.motion-ready [data-reveal="section"] {
  --reveal-y: var(--motion-y-section);
  --reveal-scale: 1;
  --reveal-duration: var(--motion-duration-section);
  --reveal-opacity-duration: var(--motion-opacity-duration-section);
}

html.motion-ready [data-reveal="panel"] {
  --reveal-y: var(--motion-y-panel);
  --reveal-scale: .992;
  --reveal-duration: var(--motion-duration-panel);
  --reveal-opacity-duration: var(--motion-opacity-duration-panel);
}

html.motion-ready [data-reveal="diagnostic"] {
  --reveal-y: var(--motion-y-diagnostic);
  --reveal-scale: .992;
  --reveal-duration: var(--motion-duration-diagnostic);
  --reveal-opacity-duration: var(--motion-opacity-duration-diagnostic);
}

html.motion-ready [data-reveal="card"] {
  --reveal-y: var(--motion-y-card);
  --reveal-scale: .986;
  --reveal-duration: var(--motion-duration-card);
  --reveal-opacity-duration: var(--motion-opacity-duration-card);
}

html.motion-ready [data-reveal="row"] {
  --reveal-y: var(--motion-y-row);
  --reveal-scale: 1;
  --reveal-duration: var(--motion-duration-row);
  --reveal-opacity-duration: var(--motion-opacity-duration-row);
}

html.motion-ready [data-reveal="media"] {
  --reveal-y: var(--motion-y-media);
  --reveal-scale: .992;
  --reveal-duration: var(--motion-duration-media);
  --reveal-opacity-duration: var(--motion-opacity-duration-media);
  position: relative;
  overflow: hidden;
}

html.motion-ready [data-reveal="media"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: var(--motion-cover-color);
  transform: scaleY(1);
  transform-origin: top center;
  transition: transform var(--mask-duration, var(--motion-duration-mask)) var(--motion-ease-shift) var(--mask-delay, var(--reveal-delay, 0ms));
}

html.motion-ready [data-reveal="media"].is-revealed::after {
  transform: scaleY(0);
}

html.motion-ready [data-reveal="media"] > :is(img, video, picture, canvas, svg) {
  transform-origin: center;
  transition: transform var(--motion-duration-media) var(--motion-ease-out) var(--reveal-delay, 0ms);
}

html.motion-ready [data-reveal="media"]:not(.is-revealed) > :is(img, video, picture, canvas, svg) {
  transform: scale(1.02) translate3d(0, 8px, 0);
}

html.motion-ready [data-reveal="media"].is-revealed > :is(img, video, picture, canvas, svg) {
  transform: scale(1) translate3d(0, 0, 0);
}

html.motion-ready [data-mask] {
  --mask-duration: var(--motion-duration-mask);
  --mask-delay: var(--reveal-delay, 0ms);
  --mask-radius: 0px;
  transition: clip-path var(--mask-duration) var(--motion-ease-shift) var(--mask-delay);
}

html.motion-ready [data-mask]:not(.is-revealed):not(.reveal-complete) {
  clip-path: inset(0 0 100% 0 round var(--mask-radius));
}

html.motion-ready [data-mask="left"]:not(.is-revealed):not(.reveal-complete),
html.motion-ready [data-mask="x"]:not(.is-revealed):not(.reveal-complete) {
  clip-path: inset(0 100% 0 0 round var(--mask-radius));
}

html.motion-ready [data-mask="center"]:not(.is-revealed):not(.reveal-complete) {
  clip-path: inset(48% 48% 48% 48% round 8px);
}

html.motion-ready [data-mask].is-revealed,
html.motion-ready [data-mask].reveal-complete {
  clip-path: inset(0 0 0 0 round 0);
}

.motion-split-word {
  display: inline-block;
  white-space: pre;
}

.motion-split-char {
  display: inline-block;
}

.motion-split-line {
  display: block;
  overflow: hidden;
}

.motion-split-line-inner {
  display: inline-block;
}

html.motion-ready [data-split] {
  --split-stagger: var(--motion-stagger-word);
  --split-duration: var(--motion-duration-split-body);
  --split-delay: var(--reveal-delay, 0ms);
  --split-ease: var(--motion-ease-out);
}

html.motion-ready [data-reveal="hero"] [data-split],
html.motion-ready [data-split][data-reveal="hero"] {
  --split-duration: var(--motion-duration-split-hero);
}

html.motion-ready .motion-split.motion-split-chars {
  --split-stagger: var(--motion-stagger-char);
}

html.motion-ready .motion-split.motion-split-lines {
  --split-stagger: var(--motion-stagger-line);
}

html.motion-ready .motion-split :is(.motion-split-char, .motion-split-word, .motion-split-line-inner) {
  transition:
    opacity var(--split-duration) var(--motion-ease-standard) calc(var(--split-delay, 0ms) + var(--split-unit-delay, 0ms)),
    transform var(--split-duration) var(--split-ease) calc(var(--split-delay, 0ms) + var(--split-unit-delay, 0ms));
  will-change: transform, opacity;
}

html.motion-ready .motion-split:not(.is-revealed) :is(.motion-split-char, .motion-split-word, .motion-split-line-inner),
html.motion-ready [data-reveal]:not(.is-revealed) .motion-split :is(.motion-split-char, .motion-split-word, .motion-split-line-inner) {
  opacity: 0;
  transform: translate3d(0, 104%, 0);
}

html.motion-ready .motion-split.is-revealed :is(.motion-split-char, .motion-split-word, .motion-split-line-inner),
html.motion-ready .is-revealed .motion-split :is(.motion-split-char, .motion-split-word, .motion-split-line-inner) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-ready [data-reveal-child]:not([data-reveal]) {
  --child-y: 10px;
  --child-delay: 72ms;
  --child-duration: 560ms;
  opacity: 0;
  transform: translate3d(0, var(--child-y), 0);
  transition:
    opacity var(--child-duration) var(--motion-ease-standard) var(--child-delay),
    transform var(--child-duration) var(--motion-ease-out) var(--child-delay);
}

html.motion-ready .is-revealed [data-reveal-child]:not([data-reveal]),
html.motion-ready [data-reveal-child].is-revealed:not([data-reveal]) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.motion-ready [data-line]:not(.is-revealed) {
  opacity: 0;
}

html.motion-ready [data-line="x"]:not(.is-revealed) {
  transform: scaleX(0);
  transform-origin: left center;
}

html.motion-ready [data-line="y"]:not(.is-revealed) {
  transform: scaleY(0);
  transform-origin: top center;
}

html.motion-ready [data-line] {
  transition:
    opacity 460ms var(--motion-ease-standard) var(--reveal-delay, 0ms),
    transform 820ms var(--motion-ease-out) var(--reveal-delay, 0ms);
}

html.motion-ready [data-line].is-revealed {
  opacity: 1;
  transform: scaleX(1) scaleY(1);
}

html.motion-ready [data-motion-loop]:not(.is-motion-inview) :is([data-motion-loop-item], .motion-loop-item, .number-track, .route-line, .workflow-link-energy, .workflow-packet, .reactor-ring, .reactor-scan, .energy-beam, .energy-pulse) {
  animation-play-state: paused !important;
  will-change: auto !important;
}

html.motion-ready [data-motion-loop].is-motion-inview :is([data-motion-loop-item], .motion-loop-item, .number-track, .route-line, .workflow-link-energy, .workflow-packet, .reactor-ring, .reactor-scan, .energy-beam, .energy-pulse) {
  animation-play-state: running;
}

html.motion-ready [data-motion-loop]:not(.is-motion-inview) .workflow-core-reactor::after,
html.motion-ready .workflow-visual[data-motion-loop]:not(.is-motion-inview)::before,
html.motion-ready .workflow-visual[data-motion-loop]:not(.is-motion-inview)::after {
  animation-play-state: paused !important;
}

@supports (content-visibility: auto) {
  [data-motion-section="defer"] {
    content-visibility: visible;
    contain-intrinsic-size: none;
  }
}

@media (max-width: 720px) {
  :root {
    --motion-y-hero: 16px;
    --motion-y-section: 16px;
    --motion-y-panel: 20px;
    --motion-y-diagnostic: 20px;
    --motion-y-card: 12px;
    --motion-y-row: 7px;
    --motion-y-media: 20px;

    --motion-duration-hero: 700ms;
    --motion-duration-section: 520ms;
    --motion-duration-panel: 600ms;
    --motion-duration-diagnostic: 640ms;
    --motion-duration-card: 340ms;
    --motion-duration-row: 240ms;
    --motion-duration-media: 680ms;

    --motion-opacity-duration-hero: 620ms;
    --motion-opacity-duration-section: 460ms;
    --motion-opacity-duration-panel: 520ms;
    --motion-opacity-duration-diagnostic: 560ms;
    --motion-opacity-duration-card: 300ms;
    --motion-opacity-duration-row: 220ms;
    --motion-opacity-duration-media: 600ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

html.motion-failsafe [data-motion-chrome],
html.motion-failsafe [data-reveal],
html.motion-failsafe [data-reveal-child],
html.motion-failsafe [data-line],
html.motion-failsafe [data-split] :is(.motion-split-char, .motion-split-word, .motion-split-line-inner),
html.motion-reduce [data-motion-chrome],
html.motion-reduce [data-reveal],
html.motion-reduce [data-reveal-child],
html.motion-reduce [data-line],
html.motion-reduce [data-split] :is(.motion-split-char, .motion-split-word, .motion-split-line-inner),
html.motion-reduce [data-reveal="media"] > :is(img, video, picture, canvas, svg) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  will-change: auto !important;
}

html.motion-failsafe [data-mask],
html.motion-reduce [data-mask] {
  clip-path: inset(0 0 0 0) !important;
  transition: none !important;
}

html.motion-failsafe [data-reveal="media"]::after,
html.motion-reduce [data-reveal="media"]::after {
  transform: scaleY(0) !important;
  transition: none !important;
}

html.motion-reduce :is([data-motion-loop-item], .motion-loop-item, .number-track, .route-line, .workflow-link-energy, .workflow-packet, .reactor-ring, .reactor-scan, .energy-beam, .energy-pulse),
html.motion-reduce .workflow-core-reactor::after,
html.motion-reduce .workflow-visual::before,
html.motion-reduce .workflow-visual::after {
  animation: none !important;
}