/* Openline marketing site: all motion. Loaded last.
   Rules: everything plays once and stops on its final state, except the
   marquee (the one continuous motion; it pauses on hover and focus and is
   static for reduced motion). Two effects follow the scroll position and stop
   when scrolling stops: the statement line parting around the mark and the
   closing panel's light drifting (experience.js writes --split, --ax, --ay).
   Only transform, opacity, filter and their individual properties move; one
   16px check mark draws with stroke-dashoffset. Every hidden starting state
   is gated on .js, and the preference blocks at the end show final states. */

:root {
  --dur-in: 1000ms;
  --stagger-step: 80ms;
}

@keyframes word-in {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(0.2em);
  }
}

@keyframes wave-intro {
  from {
    opacity: 0.2;
    transform: scaleY(0.15);
  }
  to {
    opacity: 0.6;
    transform: scaleY(1);
  }
}

@keyframes outcome-in {
  from {
    opacity: 0;
    transform: translateY(15px) rotate(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes mark-in {
  from {
    opacity: 0;
    transform: rotate(-160deg) scale(0.8);
  }
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@keyframes answer-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ---------- load: the mark turns in; the hero plays its e845b17 sequence ---------- */

.js .site-header .logo-mark {
  animation: mark-in 1400ms var(--ease-ix) 80ms backwards;
}

.js .hero h1 .w {
  animation: word-in 1000ms var(--ease-out) backwards;
  animation-delay: calc(120ms + var(--i, 0) * 70ms);
}

.js .hero-in {
  animation: fade-up var(--dur-in) var(--ease-out) both;
  animation-delay: calc(480ms + var(--i, 0) * 110ms);
}

/* the waveform settles once and becomes still; the outcome cards land */
.js .waveform i {
  animation: wave-intro 850ms var(--ease-out) both;
  animation-delay: calc(600ms + var(--n) * 24ms);
}

.js .outcome {
  animation: outcome-in 1100ms var(--ease-out) backwards;
}

.js .outcome-document {
  animation-delay: 1000ms;
}

.js .outcome-booking {
  animation-delay: 1400ms;
}

/* ---------- marquee ---------- */

.js .marquee-inner {
  animation: marquee 64s linear infinite;
}

.marquee:hover .marquee-inner,
.marquee:focus-within .marquee-inner {
  animation-play-state: paused;
}

/* ---------- statement: halves part around the mark (scroll-linked) ---------- */

.js [data-split] .split-l,
.js [data-split] .split-r,
.js [data-split] .split-mark {
  will-change: transform;
}

.js [data-split] .split-l {
  transform: translateX(calc((1 - var(--split, 1)) * (var(--split-gap) - 8px)));
}

.js [data-split] .split-r {
  transform: translateX(calc((1 - var(--split, 1)) * (8px - var(--split-gap))));
}

.js [data-split] .split-mark {
  transform: rotate(calc((1 - var(--split, 1)) * -160deg)) scale(calc(0.8 + var(--split, 1) * 0.2));
}

@media (max-width: 600px) {
  .js [data-split] .split-l {
    transform: translateY(calc((1 - var(--split, 1)) * 24px));
  }

  .js [data-split] .split-r {
    transform: translateY(calc((1 - var(--split, 1)) * -24px));
  }
}

/* ---------- section entrances ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 800ms var(--ease-ix),
    transform var(--dur-in) var(--ease-out);
}

.js .reveal.in,
.js .reveal[data-stagger] {
  opacity: 1;
  transform: none;
}

/* lists rise child by child; main.js sets --i on each child */
.js [data-stagger] > * {
  --stagger: calc(var(--i, 0) * var(--stagger-step));
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 800ms var(--ease-ix) var(--stagger),
    transform var(--dur-in) var(--ease-out) var(--stagger);
}

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

/* hairlines draw left to right as their rows arrive */
.js .row::before {
  transition: transform 1200ms var(--ease-ix) calc(var(--i, 0) * 120ms + 150ms);
}

.js .reveal:not(.in) .row::before {
  transform: scaleX(0);
}

/* industry photographs settle as the cards arrive */
.industry-image img {
  transition: transform 1200ms var(--ease-out);
}

.js .industry-grid:not(.in) .industry-image img {
  transform: scale(1.1);
}

/* ---------- product vignettes: play once when the card enters ---------- */

.js [data-viz] [data-a] {
  --delay: calc(350ms + var(--d, 0) * 220ms);
  transition:
    opacity 600ms var(--ease-out) var(--delay),
    transform 700ms var(--ease-out) var(--delay),
    translate 600ms var(--ease-out);
}

.js [data-viz]:not(.on) [data-a] {
  opacity: 0;
  transform: translateY(10px);
}

/* business fact: the answered row lights up */
.js [data-viz] [data-a="hl"]::before,
.js [data-viz] [data-a="hl"] i {
  transition:
    opacity 500ms var(--ease) var(--delay),
    transform 500ms var(--ease-out) var(--delay);
}

.js [data-viz]:not(.on) [data-a="hl"] {
  opacity: 1;
  transform: none;
}

.js [data-viz]:not(.on) [data-a="hl"]::before {
  opacity: 0;
}

.js [data-viz]:not(.on) [data-a="hl"] i {
  opacity: 0;
  transform: scale(0.9);
}

/* caller memory: the check mark draws */
.js [data-viz] [data-a="draw"] {
  transition: stroke-dashoffset 600ms var(--ease-out) var(--delay);
}

.js [data-viz]:not(.on) [data-a="draw"] {
  opacity: 1;
  transform: none;
  stroke-dashoffset: 1;
}

/* ---------- hover, pointer devices only ---------- */

.tile .frag,
.channel .frag {
  transition: translate 600ms var(--ease-out);
}

.industry-copy {
  transition: translate 600ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tile:hover .frag,
  .channel:hover .frag {
    translate: 0 -4px;
  }

  .industry-card:hover .industry-image img {
    transform: scale(1.03);
  }
}

/* ---------- FAQ answer ---------- */

.js .faq details[open] > p {
  animation: answer-in 360ms var(--ease-out);
}

/* ---------- user preferences (keep last) ---------- */

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal,
  .js [data-stagger] > *,
  .js [data-viz] [data-a],
  .js [data-viz] [data-a="hl"] i,
  .js [data-split] :is(.split-l, .split-r, .split-mark),
  .js .industry-grid .industry-image img,
  .atmos-field {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
  }

  .js [data-viz] [data-a="hl"]::before,
  .js .row::before {
    opacity: 1 !important;
    transform: none !important;
  }

  .js [data-viz] [data-a="draw"] {
    stroke-dashoffset: 0 !important;
  }

  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .marquee-inner {
    width: auto;
    justify-content: center;
  }

  .marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 40px;
    padding: 0 var(--gutter);
  }

  .marquee-track[aria-hidden] {
    display: none;
  }

  .btn:active,
  .btn-pill:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header.scrolled .nav,
  .site-header.menu-open .nav {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .btn-glass,
  .btn-pill {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(0, 18, 46, 0.6);
  }
}

@media (forced-colors: active) {
  .btn,
  .btn-pill,
  .nav-toggle,
  .theme-toggle,
  .tile,
  .channel,
  .frag,
  .demo-panel,
  .industry-card,
  .workflow-panel,
  .workflow-stage,
  .cta-card,
  .footer-card {
    border: 1px solid CanvasText;
  }
}

/* print / save as PDF: never print JS-gated content in its hidden start state */
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal,
  .js [data-stagger] > *,
  .js [data-viz] [data-a],
  .js .hero h1 .w,
  .js .hero-in,
  .js .waveform i,
  .js .outcome,
  .js [data-split] :is(.split-l, .split-r, .split-mark) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .site-header,
  .marquee-track[aria-hidden],
  .video-play {
    display: none !important;
  }

  .marquee-inner {
    width: auto;
  }

  .marquee-track {
    flex-wrap: wrap;
  }

  .atmos,
  .hero-panel,
  .tile,
  .channel,
  .industry-card {
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}