/* Sentient orb, R3 echorb region. Every selector carries an .orb-echorb-* hook (or body.orb-echorb-page).
   Loads right after style.css; the page's inline <style> follows. Still state = html[data-motion="still"]
   (JS contract) and, for no-JS visitors, @media (prefers-reduced-motion: reduce) on html:not([data-motion]);
   both set the same custom properties, so the declarations are identical by construction. */
body.orb-echorb-page { --orb-echorb-nav: 77px; --orb-echorb-tint: 0.75; --oe-ps: running; --oe-md: 2.5s, 0s, 2.5s; --oe-ed: 0s, 0s; --oe-od: 0s; --oe-pool: 0.35; --oe-lift: translateY(-4px); --oe-stick: sticky; --oe-step-h: 40vh; --oe-step-o: 0.45; }

/* ---- hero: the orb field is the one time-based full-viewport layer; wash held at its 25% frame, grid static ---- */
.orb-echorb-hero { min-height: 100vh; min-height: 100svh; }
.orb-echorb-hero.echorb-hero::before { animation-play-state: paused; animation-delay: -5s; }
.orb-echorb-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, rgba(10, 0, 21, 0) 0%, rgba(10, 0, 21, 0.92) 100%); z-index: 1; pointer-events: none; }
.orb-echorb-texture { position: absolute; top: -12%; left: 0; width: 100%; height: 124%; background: url(../../../images/sentient/sentient2-tile-768.webp) center / 120% repeat; opacity: 0.5; z-index: 0; pointer-events: none; }
.orb-echorb-field { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.orb-echorb-bubble { position: absolute; top: 0; left: 0; border-radius: 50%; }
.orb-echorb-field.is-running .orb-echorb-bubble { will-change: transform, opacity; }
/* style.css .data-stream came alive with cec684d and restyles + slides this paragraph; hold the 22ef7f0 look */
.orb-echorb-hero .hero-content .data-stream { animation: none; font-family: inherit; color: inherit; text-shadow: none; }
/* held frames: the mascot float, the title shimmer and glow, the badge pulse; the one-shot title entrance jumps to its end under still */
.orb-echorb-hero .hero-orb-frame img, .orb-echorb-hero .trial-badge, .orb-echorb-hero .trial-badge::after, .orb-echorb-hero .echo-text, .orb-echorb-hero .orb-text, .orb-echorb-hero .merged-text, .orb-echorb-hero .hero-title-container::after { animation-play-state: var(--oe-ps); }
.orb-echorb-hero .merged-text { animation-delay: var(--oe-md); }
.orb-echorb-hero .echo-text, .orb-echorb-hero .orb-text { animation-delay: var(--oe-ed); }
.orb-echorb-hero .hero-title-container::after { animation-delay: var(--oe-od); }
/* hero scrolled away: the header's own keyframes pause under the same observer as the engine */
.orb-echorb-hero.is-away { --oe-ps: paused; }
.orb-echorb-hero.is-away *, .orb-echorb-hero.is-away *::before, .orb-echorb-hero.is-away *::after { animation-play-state: paused; }
@media (max-width: 768px) {
  .orb-echorb-hero.echorb-hero { min-height: 100vh; min-height: 100svh; padding-top: calc(var(--orb-echorb-nav, 77px) + 52px); padding-bottom: 48px; }
}
/* page chrome that loops forever: nav pulse, brand shimmer, the section chevron */
body.orb-echorb-page .logo-pulse-bg, body.orb-echorb-page .insight-icon-shimmer, body.orb-echorb-page .scroll-arrow, body.orb-echorb-page .scroll-arrow i { animation-play-state: var(--oe-ps); }

/* ---- sections: transparent over the document gradient, one static light pool each. Opacity only (a non-composited translate was attributed to CLS by Chrome); the ellipse is sized to fade out inside its box and the box is capped at 640px so tall sections never show a clipped edge ---- */
section.orb-echorb-section { background: transparent; position: relative; isolation: isolate; overflow: clip; }
.orb-echorb-pool { position: absolute; inset: 0 -20% auto -20%; height: min(60%, 640px); pointer-events: none; z-index: -1; opacity: var(--oe-pool); background: radial-gradient(ellipse 55% 45% at 50% 40%, rgba(var(--oe-key, 0, 212, 255), 0.26) 0%, rgba(var(--oe-key, 0, 212, 255), 0.08) 38%, rgba(var(--oe-key, 0, 212, 255), 0) 66%); }
#whats-new.orb-echorb-section { --oe-key: 255, 107, 0; }
#loop-modes.orb-echorb-section { --oe-key: 153, 69, 255; }
#knowledge-graph.orb-echorb-section { --oe-key: 0, 212, 255; }
#mobile.orb-echorb-section { --oe-key: 0, 255, 255; }
#see-it.orb-echorb-section { --oe-key: 255, 0, 153; }
#how-it-works.orb-echorb-section { --oe-key: 0, 212, 255; }
#download.orb-echorb-section { --oe-key: 0, 255, 255; }
#requirements.orb-echorb-section { --oe-key: 153, 69, 255; }
#faq.orb-echorb-section { --oe-key: 255, 0, 255; }
section.orb-echorb-section.download-section { background: transparent; }
.orb-echorb-section.download-section::after { animation: none; }
.orb-echorb-section .insight-card::before { animation-play-state: var(--oe-ps); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="still"]) .orb-echorb-pool { animation: oe-pool linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@supports not (animation-timeline: view()) {
  html[data-motion-js]:not([data-motion="still"]) .orb-echorb-pool { transition: opacity 0.9s ease; }
  html[data-motion-js]:not([data-motion="still"]) .orb-echorb-section.is-lit .orb-echorb-pool { opacity: 1; }
}
@keyframes oe-pool { from { opacity: 0.35; } to { opacity: 1; } }

/* ---- reveals: hidden only when JS ran and motion is on; wrappers carry the transform, planes stay clean ---- */
.orb-echorb-reveal { transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: calc(var(--i, 0) * 90ms); }
html[data-motion-js]:not([data-motion="still"]) .orb-echorb-section:not(.is-in) .orb-echorb-reveal { opacity: 0; transform: translateY(24px); }

/* ---- planes ---- */
.orb-echorb-plane { position: relative; isolation: isolate; background: rgba(10, 0, 21, var(--orb-echorb-tint, 0.75)); border: 1px solid rgba(0, 212, 255, 0.25); border-radius: 16px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 0, 255, 0.06) inset; }
a.orb-echorb-plane { display: block; padding: 0.75rem 0.75rem 0.15rem; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
a.orb-echorb-plane .shot-caption { margin-top: 0.6rem; margin-bottom: 0.55rem; }
a.orb-echorb-plane:hover, a.orb-echorb-plane:focus-visible { border-color: rgba(0, 212, 255, 0.55); z-index: 60; }
@media (hover: hover) and (pointer: fine) {
  a.orb-echorb-plane:hover { transform: var(--oe-lift); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45), 0 18px 52px rgba(255, 0, 255, 0.2); }
  a.orb-echorb-plane:hover > .win-shot:not(.win-zoom) { transform: none; }
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .orb-echorb-plane.is-glass { -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); }
}
@media (max-width: 767px) {
  .orb-echorb-plane.is-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.dl-tile.orb-echorb-plane { background: rgba(10, 0, 21, var(--orb-echorb-tint, 0.75)); border-color: rgba(0, 212, 255, 0.3); }
#faq .accordion-item.orb-echorb-plane { background: rgba(10, 0, 21, var(--orb-echorb-tint, 0.75)); border-color: rgba(0, 212, 255, 0.25); }
#faq .orb-echorb-plane .accordion-button { color: #fff; }
.orb-echorb-picker { max-width: 652px; margin: 0.5rem auto 0; }

/* ---- loop-modes scene: five steps, one stage; sticky from 992px, stacked below ---- */
.orb-echorb-stage { position: relative; display: grid; place-items: center; margin: 0 auto 0.5rem; }
.orb-echorb-stage-fig { position: relative; width: 260px; height: 260px; margin: 0; display: grid; place-items: center; }
.orb-echorb-halo { position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity 0.6s ease; filter: blur(6px); background: radial-gradient(circle, rgba(var(--oe-c), 0.5) 0%, rgba(var(--oe-c), 0.16) 46%, rgba(var(--oe-c), 0) 70%); }
.orb-echorb-halo:nth-child(1) { --oe-c: 0, 212, 255; }
.orb-echorb-halo:nth-child(2) { --oe-c: 153, 69, 255; }
.orb-echorb-halo:nth-child(3) { --oe-c: 255, 107, 0; }
.orb-echorb-halo:nth-child(4) { --oe-c: 255, 0, 255; }
.orb-echorb-halo:nth-child(5) { --oe-c: 0, 255, 255; }
.orb-echorb-stage[data-step="1"] .orb-echorb-halo:nth-child(1), .orb-echorb-stage[data-step="2"] .orb-echorb-halo:nth-child(2), .orb-echorb-stage[data-step="3"] .orb-echorb-halo:nth-child(3), .orb-echorb-stage[data-step="4"] .orb-echorb-halo:nth-child(4), .orb-echorb-stage[data-step="5"] .orb-echorb-halo:nth-child(5) { opacity: 1; }
.orb-echorb-stage-field { position: absolute; inset: -18%; overflow: hidden; pointer-events: none; }
.orb-echorb-stage-orb { position: relative; width: 170px; height: 170px; filter: drop-shadow(0 0 22px rgba(255, 0, 255, 0.45)); animation: float 6s ease-in-out infinite; animation-play-state: var(--oe-ps); }
.orb-echorb-steps .orb-echorb-step { align-items: center; padding: 1.15rem 0 1.15rem 0.9rem; border-left: 3px solid transparent; }
@media (min-width: 992px) {
  .orb-echorb-stage { position: var(--oe-stick); top: calc(var(--orb-echorb-nav, 77px) + 24px + 30px); margin: 0; padding: 1.5rem 0; }
  .orb-echorb-stage-fig { width: 330px; height: 330px; }
  .orb-echorb-stage-orb { width: 220px; height: 220px; }
  .orb-echorb-steps .orb-echorb-step { min-height: var(--oe-step-h); padding: 1.5rem 0 1.5rem 1.25rem; opacity: var(--oe-step-o); transition: opacity 0.5s ease, border-color 0.5s ease; }
  .orb-echorb-steps .orb-echorb-step.is-current { opacity: 1; border-left-color: var(--ai-cyan); }
  .orb-echorb-steps .orb-echorb-step h3 { font-size: 1.25rem; }
  .orb-echorb-steps .orb-echorb-step p { font-size: 1rem; max-width: 34rem; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
    html:not([data-motion="still"]) .orb-echorb-steps .orb-echorb-step { animation: oe-step linear both; animation-timeline: view(); animation-range: entry 40% cover 50%; transition: none; }
  }
}
@keyframes oe-step { from { opacity: 0.45; border-left-color: transparent; } to { opacity: 1; border-left-color: var(--ai-cyan); } }

/* ---- orb returns: constellation behind the knowledge graph, speaking orb in voice ---- */
.orb-echorb-graph .container { position: relative; z-index: 1; }
.orb-echorb-graph-field { position: absolute; left: 0; right: 0; top: 6%; height: 72%; z-index: 0; overflow: hidden; pointer-events: none; }
.orb-echorb-thinker { position: absolute; top: -34px; right: -14px; width: 96px; height: 96px; z-index: 3; pointer-events: none; filter: drop-shadow(0 0 14px rgba(0, 212, 255, 0.5)); animation: float 6s ease-in-out infinite; animation-play-state: var(--oe-ps); }
@media (max-width: 767px) {
  .orb-echorb-thinker { width: 64px; height: 64px; top: -22px; right: -6px; }
}

/* ---- hero texture plane, scroll-linked (scroll(root)); JS writes the same transform where unsupported ---- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-motion="still"]) .orb-echorb-texture { animation: oe-tex linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes oe-tex { from { transform: none; } to { transform: translate3d(0, -12%, 0); } }

/* The mascot artwork carries its own navy ground. Screen blending and a soft radial mask drop that
   ground on this page's dark sections, so the one correct pose can be reused without re-cutting or
   regenerating any art. */
.orb-echorb-thinker {
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(circle at 50% 47%, #000 56%, rgba(0, 0, 0, 0) 76%);
  mask-image: radial-gradient(circle at 50% 47%, #000 56%, rgba(0, 0, 0, 0) 76%);
}

/* ---- still composition: identical declarations under the JS attribute and, for no-JS visitors, the OS preference ---- */
html[data-motion="still"] body.orb-echorb-page { --oe-ps: paused; --oe-md: -10s, -1.5s, -10s; --oe-ed: -10s, -1.5s; --oe-od: -10s; --oe-pool: 1; --oe-lift: none; --oe-stick: static; --oe-step-h: 0px; --oe-step-o: 1; }
/* Item 7: echorb.html defines its own dataFlow keyframes (inline styles) and .data-stream::after
   runs them forever. Line 17 holds the element itself but not its pseudo, so a cyan line kept
   sweeping under the hero lead with motion reduced. Hold the pseudo at its start frame. */
html[data-motion="still"] .orb-echorb-hero .hero-content .data-stream::after { animation: none; transform: none; }
/* Item 8: .orb-echorb-stage[data-step="n"] .orb-echorb-halo:nth-child(n) is (0,4,0) and outranked
   the old (0,3,1) still rules, so the step's halo stayed lit alongside the still one and two halos
   read at opacity 1. These carry the stage and its data-step attribute so they win on depth, not on
   !important, and the still composition lights exactly the fifth halo. */
html[data-motion="still"] .orb-echorb-stage[data-step] .orb-echorb-halo { opacity: 0; }
html[data-motion="still"] .orb-echorb-stage[data-step] .orb-echorb-halo:nth-child(5) { opacity: 1; }
html[data-motion="still"] .orb-echorb-halo { opacity: 0; }
html[data-motion="still"] .orb-echorb-halo:nth-child(5) { opacity: 1; }
html[data-motion="still"] .orb-echorb-texture { transform: none; }
html[data-motion="still"] .orb-echorb-reveal { transition: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) body.orb-echorb-page { --oe-ps: paused; --oe-md: -10s, -1.5s, -10s; --oe-ed: -10s, -1.5s; --oe-od: -10s; --oe-pool: 1; --oe-lift: none; --oe-stick: static; --oe-step-h: 0px; --oe-step-o: 1; }
  html:not([data-motion]) .orb-echorb-hero .hero-content .data-stream::after { animation: none; transform: none; }
  html:not([data-motion]) .orb-echorb-stage[data-step] .orb-echorb-halo { opacity: 0; }
  html:not([data-motion]) .orb-echorb-stage[data-step] .orb-echorb-halo:nth-child(5) { opacity: 1; }
  html:not([data-motion]) .orb-echorb-halo { opacity: 0; }
  html:not([data-motion]) .orb-echorb-halo:nth-child(5) { opacity: 1; }
  html:not([data-motion]) .orb-echorb-texture { transform: none; }
  html:not([data-motion]) .orb-echorb-reveal { transition: none; }
}

/* THE DENSITY BUDGET, echorb's own.

   The shared defaults (0.30 / 0.50 / 0.72) measured 49.9% combined transmission over the hero lead
   at 1440x900: half the painting's light removed behind the copy, and because all three layers are
   radial-masked flat fills, what that reads as is a soft dark ellipse. Giovanni's words were "the
   blurred shadow behind the copy is making the image less visible".

   Contrast had a lot of headroom at those levels, tightest 6.87 against a 4.5 floor, so the density
   was over-specified for what this page's text actually needs. Lowered here rather than in the
   shared file, because guardian-forge is approved at the defaults and stays there. */
.orb-echorb-page {
  --pw-scrim: 0.16;
  --pw-copy: 0.26;
  --pw-band: 0.46;
}

/* Act 1: the echo. The filaments sit under the orbs, so a line reads as coming from behind the orb
   it leaves, and the whole field stays behind the copy where it already was. */
.orb-echorb-echo { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.orb-echorb-field .orb-echorb-bubble { z-index: 1; }