@charset "UTF-8";
/* ==========================================================================
   Motion: every animation and keyframe in one place. Content is readable
   without it; hidden entrance states apply only after site.js adds
   .motion-ready, and prefers-reduced-motion switches everything off.
   ========================================================================== */

/* ---------- Scroll entrances ---------- */
.motion-ready [data-reveal]:not([data-reveal=done]):not(.is-revealing) {
  opacity: 0;
  transform: translate3d(0, 34px, 0);
}

.motion-ready [data-reveal].is-revealing {
  transition: opacity .75s var(--ease), transform .9s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.eyebrow::before {
  transform-origin: left;
  transition: transform .9s var(--ease) .25s;
}

.motion-ready [data-reveal]:not([data-reveal=done]):not(.is-revealing) .eyebrow::before {
  transform: scaleX(0);
}

/* ---------- Openings ---------- */
.hero-copy > *,
.page-hero__copy > * {
  animation: rise .9s var(--ease) both;
}

.hero-copy > :nth-child(2),
.page-hero__copy > :nth-child(2) { animation-delay: .1s; }
.hero-copy > :nth-child(3),
.page-hero__copy > :nth-child(3) { animation-delay: .2s; }
.hero-copy > :nth-child(4),
.page-hero__copy > :nth-child(4) { animation-delay: .3s; }
.hero-copy > :nth-child(5),
.page-hero__copy > :nth-child(5) { animation-delay: .4s; }
.hero-copy > :nth-child(6),
.page-hero__copy > :nth-child(6) { animation-delay: .5s; }

.hero .radar-panel {
  animation: fade-in 1.2s var(--ease) .25s both;
}

.highlight {
  animation: shimmer 9s linear infinite;
}

.tiny-cross {
  display: inline-block;
  animation: spin 14s linear infinite;
}

.hero-actions > .button {
  animation: soft-pulse 3.6s ease-out 2s infinite;
}

.hero-actions > .button:hover {
  animation: none;
}

.hero-fx__aurora--blue { animation: drift-c 30s ease-in-out infinite alternate; }
.hero-fx__aurora--purple { animation: drift-b 26s ease-in-out infinite alternate; }
.hero-fx__aurora--deep { animation: drift-a 22s ease-in-out infinite alternate; }

.dark-intro.is-offscreen .hero-fx__aurora {
  animation-play-state: paused;
}

/* The strip lights each layer in turn, then the shared context. */
.intro-strip > div > span:not(.strip-arrow) {
  animation: strip-light 8s ease-in-out infinite;
}

.intro-strip > div > span:nth-of-type(2) { animation-delay: 1s; }
.intro-strip > div > span:nth-of-type(3) { animation-delay: 2s; }
.intro-strip > div > span:nth-of-type(4) { animation-delay: 3s; }

.intro-strip > div > span:not(.strip-arrow)::after {
  content: "";
  position: absolute;
  inset: auto 0 -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-signal);
  transform: scaleX(0);
  transform-origin: left;
  animation: strip-line 8s ease-in-out infinite;
  animation-delay: inherit;
}

.strip-arrow {
  display: inline-block;
  animation: nudge 2s ease-in-out infinite;
}

/* ---------- Radar ---------- */
.radar-scan-layer {
  transform-origin: 50% 46.1538%;
  animation: spin 24s linear infinite;
  will-change: transform;
}

.radar-orbit-layer {
  transform-origin: 50% 46.1538%;
  animation: spin 48s linear infinite;
  will-change: transform;
}

.radar-flow {
  animation: telemetry 5s linear infinite;
  animation-delay: var(--delay);
}

.radar-response {
  animation: telemetry-back 5s linear infinite;
  animation-delay: var(--delay);
}

.core-halo {
  transform-box: view-box;
  transform-origin: 320px 240px;
  animation: spin 36s linear infinite;
}

.radar-node.is-active .node-halo {
  animation: ping 2.4s ease-out infinite;
}

.radar-core.is-receiving .radar-core-pulse {
  animation: core-pulse 1s ease-out;
}

.radar-panel.is-paused :is(.radar-scan-layer, .radar-orbit-layer, .radar-flow, .radar-response, .core-halo, .node-halo) {
  animation-play-state: paused;
}

.radar-insight.is-fresh :is(.radar-insight-title, [data-step-text]) {
  animation: rise-small .5s var(--ease);
}

/* ---------- Homepage sections ---------- */
.scenario::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), #ffffff38, transparent 60%);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none;
}

.scenario.glass--dark::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), #8c7dff40, transparent 60%);
}

.scenario {
  transition: transform .45s var(--ease), box-shadow .45s;
}

.scenario:hover {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
}

.scenario:hover::before {
  opacity: 1;
}

.scenario-graphic img {
  animation: float 7s ease-in-out infinite;
}

.scenario:nth-child(2) .scenario-graphic img { animation-delay: -2.3s; }
.scenario:nth-child(3) .scenario-graphic img { animation-delay: -4.6s; }

.scenario-graphic.is-paused img {
  animation-play-state: paused;
}

.motion-ready .attack-timeline li:not(.is-lit) {
  opacity: .32;
}

.motion-ready .attack-timeline li:not(.is-lit) .attack-timeline__dot {
  background: #1a2150;
  box-shadow: none;
}

.console-gallery__view.is-switching {
  animation: rise-small .3s ease-out;
}

/* ---------- Diagrams ---------- */
.stack__live {
  animation: live 2s ease-out infinite;
}

.stack__uplink::after {
  animation: travel-up 1.6s linear infinite;
}

.stack__flows > span::after {
  animation: travel-up 2.4s cubic-bezier(.4, 0, .6, 1) infinite;
}

.stack__flows > span:nth-child(2)::after { animation-delay: -.4s; }
.stack__flows > span:nth-child(3)::after { animation-delay: -1.6s; }
.stack__flows > span:nth-child(4)::after { animation-delay: -.9s; }
.stack__flows > span:nth-child(5)::after { animation-delay: -2s; }
.stack__flows > span:nth-child(6)::after { animation-delay: -1.2s; }

.stack__scan {
  animation: scan 4.5s ease-in-out infinite;
}

.stack__modules a {
  animation: module-glow 7.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.2s);
}

.emblem__ring--inner,
.emblem__orbit {
  animation: spin 14s linear infinite;
}

.emblem__ring--inner {
  animation-duration: 40s;
}

.emblem__orbit--inner {
  animation-duration: 22s;
  animation-direction: reverse;
}

.emblem .icon-tile {
  animation: float 6s ease-in-out infinite;
}

.flow::after {
  animation: flow-signal 5s cubic-bezier(.6, 0, .4, 1) infinite;
}

.map__wire::after {
  animation: wire-run 2.4s linear infinite;
  animation-delay: calc(var(--i) * .5s);
}

.hub__ring {
  animation: spin 50s linear infinite;
}

.hub__node i::after {
  animation: hub-in 2.6s linear infinite;
  animation-delay: calc(var(--i) * -.45s);
}

.hub__core,
.tenants__console {
  animation: breathe 5s ease-in-out infinite alternate;
}

.tenants__client i::after {
  animation: tenant-out 2.8s linear infinite;
  animation-delay: calc(var(--i) * -.55s);
}

.logo-link i::after {
  animation: up-down 2.4s ease-in-out infinite alternate;
}

.timeline-list::before {
  transform-origin: top;
  animation: draw-down 1.6s var(--ease) .3s both;
}

.timeline-list li {
  animation: rise .7s var(--ease) both;
  animation-delay: calc(.4s + var(--i) * .25s);
}

.blog-orbit,
.blog-art-orbit {
  animation: spin 40s linear infinite;
}

/* ---------- Interaction details ---------- */
.accordion details[open] > p {
  animation: rise-small .24s ease-out;
}

.js .nav-group.is-open .nav-mega {
  animation: drop-in .22s ease-out;
}

/* ---------- Keyframes ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes rise-small { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade-in { from { opacity: 0; transform: scale(.96); } }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes shimmer { to { background-position: -220% 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes nudge { 50% { transform: translateX(6px); } }
@keyframes breathe { from { opacity: .85; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@keyframes soft-pulse { 0% { box-shadow: 0 0 0 0 #ff2f7055; } 60%, 100% { box-shadow: 0 0 0 16px #ff2f7000; } }
@keyframes drift-a { to { transform: translate(18vw, -14vh) scale(1.15); } }
@keyframes drift-b { to { transform: translate(-12vw, 16vh) scale(.9); } }
@keyframes drift-c { to { transform: translate(-10vw, 22vh) scale(1.2); } }
@keyframes strip-light { 0%, 30%, 100% { color: #d4def2; } 8%, 22% { color: #fff; } }
@keyframes strip-line { 0%, 30%, 100% { transform: scaleX(0); } 8%, 22% { transform: scaleX(1); } }
@keyframes telemetry { to { stroke-dashoffset: -100; } }
@keyframes telemetry-back { to { stroke-dashoffset: 100; } }
@keyframes ping { 0% { transform: scale(.85); stroke-opacity: .7; } 100% { transform: scale(1.45); stroke-opacity: 0; } }
@keyframes core-pulse { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
@keyframes live { to { box-shadow: 0 0 0 10px #3ddc9700; } from { box-shadow: 0 0 0 0 #3ddc9788; } }
@keyframes travel-up { from { top: 100%; } to { top: -12px; } }
@keyframes up-down { from { top: -12px; } to { top: 100%; } }
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@keyframes module-glow { 0%, 12%, 100% { border-color: #8ea6ff40; box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%); } 5% { border-color: var(--periwinkle); box-shadow: 0 0 22px #4d7cff55; } }
@keyframes flow-signal { 0% { left: 28px; opacity: 0; } 8%, 92% { opacity: 1; } 100% { left: calc(100% - 40px); opacity: 0; } }
@keyframes wire-run { to { left: 100%; } }
@keyframes hub-in { to { left: 25%; } }
@keyframes tenant-out { to { left: 100%; } }
@keyframes draw-down { from { transform: scaleY(0); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-fx__grid,
  .hero-fx__spot,
  .flow::after,
  .map__wire::after,
  .hub__node i::after,
  .tenants__client i::after,
  .stack__flows,
  .stack__scan {
    display: none;
  }
  .scenario:hover {
    transform: none;
  }
}

@media (hover: none) {
  .scenario:hover {
    transform: none;
  }
}