.v3-beams { position: absolute; inset: 0; pointer-events: none; overflow: hidden; mask-image: radial-gradient(ellipse 70% 70% at 72% 30%, black 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 72% 30%, black 10%, transparent 75%); }
.v3-beams i { position: absolute; display: block; }
.v3-beams i.h { height: 1px; width: 160px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: beamX var(--d, 5s) linear var(--delay, 0s) infinite; }
.v3-beams i.v { width: 1px; height: 160px; background: linear-gradient(180deg, transparent, var(--accent), transparent); animation: beamY var(--d, 5s) linear var(--delay, 0s) infinite; }
@keyframes beamX { from { transform: translateX(-200px); } to { transform: translateX(calc(100vw + 200px)); } }
@keyframes beamY { from { transform: translateY(-200px); } to { transform: translateY(1100px); } }

.v3-chars .word { display: inline-block; white-space: nowrap; }
.v3-chars .ch { display: inline-block; }
.js.v3-on .v3-chars .ch { animation: chIn 700ms cubic-bezier(0.2, 0.9, 0.2, 1) both; animation-delay: calc(var(--c) * 16ms + 120ms); }
@keyframes chIn { from { opacity: 0; transform: translateY(0.45em) rotate(8deg); filter: blur(3px); } }

.v3 .countdown > div { perspective: 400px; }
.v3 .countdown b.flip { animation: flip3d 520ms cubic-bezier(0.3, 0.7, 0.2, 1); transform-origin: 50% 0; }
@keyframes flip3d { from { transform: rotateX(80deg); opacity: 0.25; } }

.odo { display: inline-flex; line-height: 1; height: 1em; overflow: hidden; vertical-align: top; }
.odo .col { display: inline-flex; flex-direction: column; transform: translateY(0); transition: transform var(--t, 1800ms) cubic-bezier(0.16, 1, 0.3, 1); }
.odo .col span { display: block; height: 1em; }
.stat.counting .odo .col { transform: translateY(calc(var(--to) * -1em)); }

.scrambling { font-variant-numeric: tabular-nums; }

.orbit-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.orbit { position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; margin: 0 auto; }
.orbit .ring { position: absolute; inset: 11%; border-radius: 50%; border: 1px dashed var(--border-strong); }
.orbit .ring.r2 { inset: 30%; border-style: solid; border-color: var(--n-150); }
.orbit .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 112px; display: grid; place-items: center; }
.orbit .core img { height: 118px; width: auto; display: block; position: relative; z-index: 2; }
.orbit .core::before, .orbit .core::after { content: ''; position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 2px solid rgba(0,148,255,0.35); animation: ping 3s var(--ease-out) infinite; }
.orbit .core::after { animation-delay: 1.5s; }
@keyframes ping { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.orbit svg.link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.orbit svg.link line { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 6; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -10; } }
.node { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface-1); display: grid; place-items: center; cursor: pointer; font-family: var(--font-mono); font-size: 14px; color: var(--text-strong); box-shadow: var(--shadow-md); transition: background var(--dur-base), color var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base); will-change: transform; }
.node:hover, .node:focus-visible { border-color: var(--accent); }
.node.on { background: var(--accent); color: var(--spc-white); border-color: var(--accent); box-shadow: 0 0 0 8px rgba(0,148,255,0.14), 0 10px 24px -8px rgba(0,148,255,0.6); }
.orbit-panel { position: relative; min-height: 380px; }
.orbit-panel .tile { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out); grid-column: auto !important; grid-row: auto !important; }
.orbit-panel .tile.on { opacity: 1; transform: none; pointer-events: auto; }
.orbit-steps { display: flex; gap: 6px; margin-top: 16px; }
.orbit-steps i { flex: 1; height: 3px; border-radius: 3px; background: var(--n-150); overflow: hidden; position: relative; }
.orbit-steps i.on::after { content: ''; position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; animation: step var(--hold, 5000ms) linear forwards; }
.orbit-steps i.done { background: var(--text-strong); }
@keyframes step { from { transform: scaleX(0); } }

.v3-ring { position: relative; display: inline-block; margin-bottom: 24px; }
.v3-ring img { margin-bottom: 0 !important; }
.v3-ring::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px dashed rgba(0,148,255,0.55); animation: spin 18s linear infinite; }
.member:hover .v3-ring::after { animation-duration: 4s; border-color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

.v3 .hear { position: relative; }
.v3 .hear::after { content: ''; position: absolute; left: 0; right: 0; top: 38px; height: 1px; background: linear-gradient(90deg, transparent 0, var(--blue-300) 50%, transparent 100%); background-size: 30% 100%; background-repeat: no-repeat; animation: pulseX 3.2s linear infinite; pointer-events: none; }
@keyframes pulseX { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.v3 .plus { transform: scale(0) rotate(-90deg); transition: transform 700ms cubic-bezier(0.2, 0.9, 0.2, 1); }
.v3 .in .plus, .v3 .plus.in, .v3 .band.in .plus { transform: none; }
.js.v3-on .v3-drop .ch { display: inline-block; animation: none; opacity: 0; transform: translateY(-0.6em); }
.js.v3-on .v3-drop.go .ch { animation: drop 650ms cubic-bezier(0.3, 1.4, 0.4, 1) both; animation-delay: calc(var(--c) * 60ms); }
@keyframes drop { from { opacity: 0; transform: translateY(-0.6em); } to { opacity: 1; transform: none; } }

.v3-mark { background-image: linear-gradient(rgba(0,148,255,0.18), rgba(0,148,255,0.18)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0% 42%; transition: background-size 1s cubic-bezier(0.2, 0.9, 0.2, 1); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.turn .v3-mark { background-image: linear-gradient(rgba(0,148,255,0.35), rgba(0,148,255,0.35)); }
.v3-mark.on { background-size: 100% 42%; }

.v3-cells { position: absolute; inset: 0; pointer-events: none; mask-image: radial-gradient(ellipse 60% 60% at 72% 30%, black 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 72% 30%, black 10%, transparent 75%); }
.v3-cells i { position: absolute; width: 31px; height: 31px; background: var(--accent); opacity: 0; animation: cell 4s ease-in-out var(--delay, 0s) infinite; }
@keyframes cell { 0%, 100% { opacity: 0; } 50% { opacity: 0.12; } }
@media (prefers-reduced-motion: reduce) { .v3-cells { display: none; } .v3-mark { background-size: 100% 42%; transition: none; } }

@media (max-width: 1000px) {
  .orbit-wrap { grid-template-columns: 1fr; }
  .orbit { max-width: 420px; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-beams, .orbit .core::before, .orbit .core::after { display: none; }
  .js.v3-on .v3-chars .ch, .js.v3-on .v3-drop .ch { animation: none !important; opacity: 1 !important; transform: none !important; }
  .v3-ring::after, .v3 .hear::after, .orbit svg.link line { animation: none; }
  .odo .col { transition: none; }
  .v3 .plus { transform: none; }
}