/* SarvSync v0.4.6 — Hero: independent composited orbital layers.
   Core/radial lighting is STATIC. Only a few isolated transforms rotate. */
:root { --hero-orbit-period: 20s; --ring-turn: var(--hero-orbit-period); }
.hero-motion-stage { contain: layout paint; perspective: none; }
.hero-motion-stage .hero-code-scene { transform: none !important; transition: none !important; }
/* Eliminate oversized animated blurs and redundant full-scene animation layers. */
.hero-motion-stage .orbit-ring-b,
.hero-motion-stage .orbit-ring-d,
.hero-motion-stage .hero-orbit-trail,
.hero-motion-stage .binary-track-b,
.hero-motion-stage .icon-track-stack,
.hero-motion-stage .scene-grid,
.hero-motion-stage .aura-two,
.hero-cosmos .hero-stars-glint,
.hero-cosmos .hero-nebula { display: none !important; }
.hero-cosmos .hero-stars-far { animation: none !important; opacity: .68; }
.hero-cosmos .hero-stars-near { animation: starsTwinkleNear 12s ease-in-out infinite; opacity: .3; }
.hero-motion-stage .hero-orbit-ring { filter: none !important; box-shadow: none !important; border-width: 1.5px; }
.hero-motion-stage .orbit-ring-a { animation: heroRingSpin var(--hero-orbit-period) linear infinite !important; border-color: rgba(224,141,255,.62); }
.hero-motion-stage .orbit-ring-c { animation: heroRingSpinReverse var(--hero-orbit-period) linear infinite !important; border-color: rgba(236,161,255,.76); }
.hero-motion-stage .binary-track-a { animation: trackSpin var(--hero-orbit-period) linear infinite !important; }
.hero-motion-stage .icon-track-code { animation: trackSpin var(--hero-orbit-period) linear infinite !important; }
.hero-motion-stage .icon-track-chart { animation: trackSpinReverse var(--hero-orbit-period) linear infinite !important; }
.hero-motion-stage .icon-track { will-change: transform; }
.hero-motion-stage .orbit-ring-a,
.hero-motion-stage .orbit-ring-c,
.hero-motion-stage .binary-track-a { will-change: transform; }
.hero-motion-stage .orbit-chip { backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255,240,255,.15); }
.hero-motion-stage .data-pill { box-shadow: none; }
.hero-motion-stage .hero-sphere-glass { box-shadow: inset 0 0 24px rgba(255,210,255,.2),0 0 0 1px rgba(255,219,255,.45),0 0 33px rgba(196,77,255,.2); }
.hero-motion-stage .hero-symbol-wrap { mix-blend-mode: normal; filter: none; }
.hero-motion-stage .hero-symbol-wrap::before,
.hero-motion-stage .hero-symbol-wrap::after { filter: none; opacity: .3; }
.hero-motion-stage .logo-energy { filter: none; opacity: .21; mix-blend-mode: normal; }
.hero-motion-stage .scene-aura.aura-one { filter: blur(18px); opacity: .5; }
/* Softened reflections / static star field keep the orbital core identifiable. */
.hero-motion-stage .hero-core-reflection { opacity: .32; }
/* No CSS paint/layout per animation frame; only transform/opacity on a small subset. */
.motion-offscreen .hero-motion-stage *, .motion-tab-hidden .hero-motion-stage *,
.hero-motion-stage.motion-offscreen * { animation-play-state: paused !important; will-change: auto !important; }
.motion-lite .hero-motion-stage .icon-track-chart,
.motion-lite .hero-motion-stage .binary-track-a,
.motion-lite .hero-cosmos .hero-stars-near { display: none !important; }
.motion-lite .hero-motion-stage .orbit-ring-c { opacity: .5; }
@media (max-width: 750px) {
  .hero-motion-stage .orbit-ring-c { opacity: .52; }
  .hero-motion-stage .icon-track-chart { display: none !important; }
  .hero-cosmos .hero-stars-near { animation: none !important; opacity: .28; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-stage .hero-orbit-ring,
  .hero-motion-stage .satellite-track,
  .hero-motion-stage .logo-energy,
  .hero-motion-stage .hero-symbol-wrap::before,
  .hero-motion-stage .hero-symbol-wrap::after,
  .hero-cosmos .hero-stars-near { animation: none !important; will-change: auto !important; }
}

/* SarvSync v0.4.7 — HERO-ONLY surgical overlay.
   All historic animation keyframes, page styles and official SVG bytes are untouched. */
/* Restore existing, previously CSS-hidden elements (not reconstructed substitutes). */
.hero-motion-stage .orbit-ring-b,
.hero-motion-stage .orbit-ring-d,
.hero-motion-stage .icon-track-stack,
.hero-motion-stage .binary-track-b,
.hero-motion-stage .hero-orbit-trail,
.hero-motion-stage .scene-grid { display: block !important; }
.hero-cosmos .hero-stars-glint { display: block !important; animation: none !important; opacity: .12; }
.hero-motion-stage .scene-grid { opacity: .2; }
.hero-motion-stage .hero-orbit-trail { filter: none; opacity: .12; }
.hero-motion-stage .trail-a,
.hero-motion-stage .trail-b { animation-duration: var(--hero-orbit-period) !important; }
.hero-motion-stage .binary-track-b,
.hero-motion-stage .icon-track-stack,
.hero-motion-stage .icon-track-chart { animation-duration: var(--hero-orbit-period) !important; }
.hero-motion-stage .icon-track-stack,
.hero-motion-stage .icon-track-chart { display: block !important; }
.hero-motion-stage .orbit-ring-b { animation: heroRingSpinReverse var(--hero-orbit-period) linear infinite !important; }
.hero-motion-stage .orbit-ring-d { animation: heroRingSpinReverse var(--hero-orbit-period) linear infinite !important; }
.hero-motion-stage .binary-track-b { animation: trackSpinReverse var(--hero-orbit-period) linear infinite !important; }
.hero-motion-stage .icon-track-stack { animation: trackSpinReverse var(--hero-orbit-period) linear infinite !important; }

/* Four new, separate 3D planes, centered at the historic sphere origin (50% / 52%).
   The prior A-D orbit selectors and their timing remain byte-for-byte unchanged. */
.hero-motion-stage .orbit-ring-e,
.hero-motion-stage .orbit-ring-f,
.hero-motion-stage .orbit-ring-g,
.hero-motion-stage .orbit-ring-h {
  border-width: 1.25px;
  box-shadow: none !important;
  filter: none !important;
  animation: heroOrbitalPlaneV047 var(--hero-orbit-period) linear infinite !important;
  will-change: transform;
}
.hero-motion-stage .orbit-ring-e { width: 82%; height: 36%; --orbit-start: 45deg; --orbit-travel: 360deg; --orbit-tilt: 56deg; --orbit-yaw: 15deg; opacity: .54; border-color: rgba(229,156,255,.46); }
.hero-motion-stage .orbit-ring-f { width: 92%; height: 34%; --orbit-start: -53deg; --orbit-travel: -360deg; --orbit-tilt: 72deg; --orbit-yaw: -19deg; opacity: .65; border-color: rgba(246,184,255,.46); }
.hero-motion-stage .orbit-ring-g { width: 75%; height: 41%; --orbit-start: 88deg; --orbit-travel: -360deg; --orbit-tilt: 62deg; --orbit-yaw: 24deg; opacity: .5; border-color: rgba(209,130,247,.43); }
.hero-motion-stage .orbit-ring-h { width: 99%; height: 27%; --orbit-start: 126deg; --orbit-travel: 360deg; --orbit-tilt: 49deg; --orbit-yaw: -13deg; opacity: .6; border-color: rgba(230,160,255,.48); }
@keyframes heroOrbitalPlaneV047 {
  from { transform: translate(-50%,-50%) rotate(var(--orbit-start)) perspective(500px) rotateX(var(--orbit-tilt)) rotateY(var(--orbit-yaw)); }
  to { transform: translate(-50%,-50%) rotate(calc(var(--orbit-start) + var(--orbit-travel))) perspective(500px) rotateX(var(--orbit-tilt)) rotateY(var(--orbit-yaw)); }
}

/* Matte horizontal reflections are clipped to the ORIGINAL external SVG alpha.
   No point lights, horizontal translation, changes to the actual SVG, or glow spill. */
.hero-motion-stage .logo-energy { display: none !important; }
.hero-motion-stage .hero-symbol-wrap::before,
.hero-motion-stage .hero-symbol-wrap::after { content: none !important; animation: none !important; }
.hero-motion-stage .hero-symbol-wrap { isolation: isolate; }
.hero-motion-stage .hero-logo-reflection {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: .58;
  -webkit-mask-image: url('/assets/SarvSync_Symbol_Color.svg');
  mask-image: url('/assets/SarvSync_Symbol_Color.svg');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  mask-mode: alpha;
}
.hero-motion-stage .hero-logo-reflection::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 21%;
  border-radius: 0;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(214,214,194,.07) 19%,
    rgba(237,222,205,.39) 46%, rgba(194,205,188,.24) 56%, transparent 100%);
  will-change: transform;
}
.hero-motion-stage .hero-logo-reflection-down::before { animation: cypressMatteDownV047 6.2s linear infinite; }
.hero-motion-stage .hero-logo-reflection-up::before { animation: cypressMatteUpV047 7.3s linear infinite; }
.hero-motion-stage .hero-logo-reflection-up { opacity: .38; }
@keyframes cypressMatteDownV047 { from { transform: translate3d(0,-120%,0); } to { transform: translate3d(0,580%,0); } }
@keyframes cypressMatteUpV047 { from { transform: translate3d(0,580%,0); } to { transform: translate3d(0,-120%,0); } }

/* Keep the restored growth-chart icon legible on phones without changing layout. */
@media (max-width: 750px) {
  .hero-motion-stage .orbit-ring-e,
  .hero-motion-stage .orbit-ring-f,
  .hero-motion-stage .orbit-ring-g,
  .hero-motion-stage .orbit-ring-h { opacity: .43; }
  .hero-motion-stage .icon-track-chart { display: block !important; }
  .hero-motion-stage .icon-track-chart .orbit-chip { display: grid; }
}
@media (max-width: 520px) {
  .hero-motion-stage .icon-track-chart .orbit-chip { width: 38px; height: 38px; border-radius: 12px; }
  .hero-motion-stage .icon-track-chart .mini-chart { gap: 3px; }
  .hero-motion-stage .icon-track-chart .mini-chart i { width: 5px; }
  .hero-motion-stage .icon-track-chart .mini-chart i:nth-child(1) { height: 10px; }
  .hero-motion-stage .icon-track-chart .mini-chart i:nth-child(2) { height: 15px; }
  .hero-motion-stage .icon-track-chart .mini-chart i:nth-child(3) { height: 20px; }
}
/* User accessibility and hardware save-data behavior wins over restorations. */
.motion-offscreen .hero-motion-stage .hero-logo-reflection::before,
.motion-tab-hidden .hero-motion-stage .hero-logo-reflection::before,
.hero-motion-stage.motion-offscreen .hero-logo-reflection::before {
  animation-play-state: paused !important; will-change: auto !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero-motion-stage .hero-logo-reflection::before { animation: none !important; opacity: .13; will-change: auto !important; }
}
/* In the original low-power mode the chart was hidden; retain the original icon
   but skip its rotation instead of removing the user's requested information. */
.motion-lite .hero-motion-stage .icon-track-chart { display: block !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-motion-stage .hero-orbit-ring,
  .hero-motion-stage .hero-orbit-trail,
  .hero-motion-stage .satellite-track,
  .hero-motion-stage .hero-logo-reflection::before { animation: none !important; will-change: auto !important; }
}
/* Override the restored ring animation shorthand when visibility is suspended. */
.hero-motion-stage.motion-offscreen .hero-orbit-ring,
.hero-motion-stage.motion-offscreen .hero-orbit-trail,
.hero-motion-stage.motion-offscreen .satellite-track,
.motion-tab-hidden .hero-motion-stage .hero-orbit-ring,
.motion-tab-hidden .hero-motion-stage .hero-orbit-trail,
.motion-tab-hidden .hero-motion-stage .satellite-track,
.motion-offscreen .hero-motion-stage .hero-orbit-ring,
.motion-offscreen .hero-motion-stage .hero-orbit-trail,
.motion-offscreen .hero-motion-stage .satellite-track {
  animation-play-state: paused !important;
  will-change: auto !important;
}

/* --- SarvSync Hero Refinement v0.4.8 ---
   Fix desktop chart rotation in motion-lite, keep all three icon chips visible on phones,
   and preserve requested orbital motion without touching unrelated site behavior. */
.motion-lite .hero-motion-stage .icon-track-code {
  display: block !important;
  animation: trackSpin var(--hero-orbit-period) linear infinite !important;
}
.motion-lite .hero-motion-stage .icon-track-chart {
  display: block !important;
  animation: trackSpinReverse var(--hero-orbit-period) linear infinite !important;
}
.motion-lite .hero-motion-stage .icon-track-stack {
  display: block !important;
  animation: trackSpinReverse var(--hero-orbit-period) linear infinite !important;
}
.motion-lite .hero-motion-stage .binary-track-a,
.motion-lite .hero-motion-stage .binary-track-b {
  display: block !important;
}
@media (max-width: 520px) {
  .hero-motion-stage .icon-track-code,
  .hero-motion-stage .icon-track-chart,
  .hero-motion-stage .icon-track-stack { display: block !important; }
  .hero-motion-stage .icon-track-code .orbit-chip,
  .hero-motion-stage .icon-track-chart .orbit-chip,
  .hero-motion-stage .icon-track-stack .orbit-chip {
    display: grid !important;
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }
  .hero-motion-stage .icon-track-code .orbit-chip { top: 5%; left: 2%; }
  .hero-motion-stage .icon-track-chart .orbit-chip { top: 8%; right: 3%; }
  .hero-motion-stage .icon-track-stack .orbit-chip { bottom: 9%; right: 13%; }
  .hero-motion-stage .icon-track-code .orbit-chip span { font-size: 15px; }
  .hero-motion-stage .icon-track-chart .mini-chart { gap: 3px; }
  .hero-motion-stage .icon-track-chart .mini-chart i { width: 5px; }
  .hero-motion-stage .icon-track-chart .mini-chart i:nth-child(1) { height: 10px; }
  .hero-motion-stage .icon-track-chart .mini-chart i:nth-child(2) { height: 15px; }
  .hero-motion-stage .icon-track-chart .mini-chart i:nth-child(3) { height: 20px; }
  .hero-motion-stage .icon-track-stack .mini-stack { gap: 4px; }
  .hero-motion-stage .icon-track-stack .mini-stack i { width: 18px; height: 5px; }
}

/* SarvSync Hero Orbit Assignment v0.4.9 — independent chart orbit G.
   Keep all icons front-facing (no 3D skew); reuse one GPU-composited 2D transform.
   Chart uses the G-lane (75% width / 41% height), distinct from 94% icon lanes. */
.hero-motion-stage .icon-track-chart,
.motion-lite .hero-motion-stage .icon-track-chart {
  width: 75%;
  height: 41%;
  animation: heroChartRingGV049 var(--hero-orbit-period) linear infinite !important;
  transform-origin: 50% 50%;
  will-change: transform;
}
/* Rotate the existing satellite to a new lane; no duplicate node or orbit layer. */
@keyframes heroChartRingGV049 {
  from { transform: translate(-50%, -50%) rotate(-54deg); }
  to { transform: translate(-50%, -50%) rotate(-414deg); }
}
.hero-motion-stage .icon-track-chart .orbit-chip {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translate(50%, -50%);
}
/* Power-save states must keep the icon visible, but pause motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-motion-stage .icon-track-chart,
  .motion-lite .hero-motion-stage .icon-track-chart { animation: none !important; will-change: auto !important; }
}
.motion-reduced .hero-motion-stage .icon-track-chart { animation: none !important; will-change: auto !important; }
.motion-offscreen .hero-motion-stage .icon-track-chart,
.motion-tab-hidden .hero-motion-stage .icon-track-chart,
.hero-motion-stage.motion-offscreen .icon-track-chart { animation-play-state: paused !important; will-change: auto !important; }

/* SarvSync v0.5.1 — constellation layer (source baseline: approved v0.4.9).
   This layer REPLACES prior circular radial-gradient stars in HTML. */
.hero-cosmos .night-poly-sky {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none; overflow: hidden;
  contain: layout paint; isolation: isolate;
}
.hero-cosmos .night-poly-star {
  position: absolute;
  left: var(--star-x); top: var(--star-y);
  width: var(--star-sz); height: var(--star-sz);
  transform: translate(-50%,-50%);
  background: #f1dcff;
  clip-path: polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  opacity: .13;
  animation: sarvsyncIndependentStarV051 5s ease-in-out var(--star-delay) infinite;
  pointer-events: none;
}
.hero-cosmos .night-poly-star.tone-pearl { background: #fbf4ff; }
.hero-cosmos .night-poly-star.tone-lilac { background: #d6aeff; }
.hero-cosmos .night-poly-star.tone-plum { background: #bd78e9; }
@keyframes sarvsyncIndependentStarV051 {
  0%, 100% { opacity: .09; }
  18% { opacity: .18; }
  43% { opacity: .94; }
  58% { opacity: .46; }
  77% { opacity: .12; }
}
/* Pausing offscreen/tab-hidden is cheaper than waking a perpetual JS render loop. */
.hero.motion-offscreen .night-poly-star,
.motion-tab-hidden .hero .night-poly-star {
  animation-play-state: paused !important;
}
@media (max-width: 750px) {
  .hero-cosmos .night-poly-star:nth-child(n+25) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cosmos .night-poly-star { animation: none !important; opacity: .38; }
}
.motion-reduced .hero-cosmos .night-poly-star { animation: none !important; opacity: .38; }