/* Effects are confined to the optional preview page. */
.rtob-animation-test .animation-atmosphere { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .8; }
.rtob-animation-test .site-shell { z-index: 2; }
.rtob-animation-test .animation-controls { width: min(100%, var(--content-width)); margin: 26px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 16px 20px; border: 1px solid var(--panel-border); border-radius: 18px; background: var(--panel); backdrop-filter: blur(16px); }
.rtob-animation-test .animation-controls .eyebrow { display: block; margin: 0 0 5px; }
.rtob-animation-test .animation-controls p { color: var(--muted); font-size: .85rem; line-height: 1.5; margin: 0; }
.rtob-animation-test .animation-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-left: auto; }
.rtob-animation-test .animation-actions label { color: var(--muted); font-size: .85rem; }
.rtob-animation-test .animation-actions select { font: inherit; min-height: 42px; color: var(--text); background: var(--bg-deep); border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 12px; }
.rtob-animation-test .animation-actions select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rtob-animation-test .animation-controls .animation-status { flex-basis: 100%; font-size: .75rem; }
.rtob-animation-test .hero { min-height: calc(100svh - 280px); }
.rtob-animation-test .skin-background-layer { inset: -3%; animation: rtob-landscape-drift 40s ease-in-out infinite alternate; }
.rtob-animation-test .progress-ring::before { border-color: var(--accent); animation: rtob-ring-glow 5s ease-in-out infinite alternate; }
.rtob-animation-test .progress-ring::after { display: none; }
.rtob-animation-test .animation-orbit { position: absolute; inset: 5px; border-radius: 50%; pointer-events: none; animation: rtob-orbit 28s linear infinite; }
.rtob-animation-test .animation-orbit::before { content: ''; position: absolute; width: 8px; height: 8px; left: calc(50% - 4px); top: 0; background: var(--accent-strong); border-radius: 50%; box-shadow: 0 0 20px 5px var(--accent); }
.rtob-animation-test .animation-orbit::after { content: ''; position: absolute; width: 4px; height: 4px; left: calc(50% - 2px); bottom: 0; background: var(--accent); border-radius: 50%; box-shadow: 0 0 12px var(--accent); }
.rtob-animation-test.rtob-motion-stopped .skin-background-layer,
.rtob-animation-test.rtob-motion-stopped .progress-ring::before,
.rtob-animation-test.rtob-motion-stopped .animation-orbit { animation-play-state: paused; }
@keyframes rtob-landscape-drift { from { transform: scale(1.035) translate(-.4%, -.2%); } to { transform: scale(1.085) translate(.4%, .3%); } }
@keyframes rtob-ring-glow { from { opacity: .32; box-shadow: inset 0 0 24px rgba(0,0,0,.3), 0 0 8px var(--accent); } to { opacity: .7; box-shadow: inset 0 0 24px rgba(0,0,0,.3), 0 0 22px var(--accent); } }
@keyframes rtob-orbit { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .rtob-animation-test .animation-controls { padding: 14px; }
  .rtob-animation-test .animation-actions { margin-left: 0; gap: 8px; }
  .rtob-animation-test .animation-actions .skin-toggle { letter-spacing: .05em; }
}
@media (prefers-reduced-motion: reduce) {
  .rtob-animation-test .skin-background-layer,
  .rtob-animation-test .progress-ring::before,
  .rtob-animation-test .animation-orbit { animation: none !important; }
  .rtob-animation-test .animation-atmosphere { display: none; }
}

/* Public homepage keeps the preview controls out of the hero. */
.rtob-animation-test .homepage-motion-controls { width: min(100%, var(--content-width)); margin: 16px auto 0; display: flex; justify-content: flex-end; }
.rtob-animation-test .homepage-motion-controls .skin-toggle { font-size: .65rem; min-height: 36px; padding: 8px 12px; }
.rtob-animation-test .homepage-motion-controls + .hero { min-height: calc(100svh - 205px); }
.rtob-animation-test .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.animation-sweep, .animation-entrance-halo { display: none; }
.rtob-ring-opening { animation: rtob-ring-arrive 2.9s ease-out both; }
.rtob-ring-opening .animation-sweep { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; animation: rtob-sweep-fade 2.9s linear both; }
.rtob-ring-opening .animation-sweep circle { fill: none; stroke: var(--accent-strong); stroke-width: .65; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; filter: drop-shadow(0 0 1px var(--accent)); animation: rtob-sweep-trace 1s cubic-bezier(.35,0,.25,1) .25s both; }
.rtob-ring-opening .animation-entrance-halo { display: block; position: absolute; inset: -2%; border: 1px solid var(--accent); border-radius: 50%; pointer-events: none; opacity: 0; animation: rtob-entrance-halo 2.9s ease-out both; }
.rtob-ring-opening .progress-label { animation: rtob-detail-arrive .65s ease-out .65s both; }
.rtob-ring-opening .progress-percent, .rtob-ring-opening .progress-divider { animation: rtob-detail-arrive .6s ease-out .95s both; }
.rtob-ring-opening .holdings, .rtob-ring-opening .fiat { animation: rtob-detail-arrive .75s ease-out 1.9s both; }
.rtob-ring-opening .animation-orbit { opacity: 0; animation: rtob-orbit 28s linear 2.6s infinite, rtob-orbit-reveal .6s ease-out 2.6s forwards; }
.rtob-animation-test.rtob-motion-stopped .rtob-ring-opening,
.rtob-animation-test.rtob-motion-stopped .rtob-ring-opening *,
.rtob-animation-test.rtob-motion-stopped .rtob-ring-opening::before { animation-play-state: paused; }
@keyframes rtob-ring-arrive {
  0% { opacity: .12; transform: scale(.94); }
  34% { opacity: .85; transform: scale(.985); }
  70% { opacity: 1; transform: scale(1); }
  86% { transform: scale(1.012); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes rtob-sweep-trace { to { stroke-dashoffset: 0; } }
@keyframes rtob-sweep-fade { 0% { opacity: 0; } 12%, 42% { opacity: .9; } 72%, 100% { opacity: 0; } }
@keyframes rtob-detail-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rtob-entrance-halo {
  0% { opacity: .25; transform: scale(.98); box-shadow: 0 0 12px var(--accent); }
  30% { opacity: .5; transform: scale(1); box-shadow: 0 0 30px var(--accent); }
  65% { opacity: .1; transform: scale(1); }
  82% { opacity: .65; transform: scale(1.02); box-shadow: 0 0 38px var(--accent); }
  100% { opacity: 0; transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .rtob-ring-opening, .rtob-ring-opening * { animation: none !important; }
  .rtob-ring-opening .animation-sweep, .rtob-ring-opening .animation-entrance-halo { display: none; }
  .rtob-ring-opening .animation-orbit { opacity: 1; }
}

@keyframes rtob-orbit-reveal { from { opacity: 0; } to { opacity: 1; } }


/* Keep the entrance's initial state visible from first paint, avoiding a full-ring flash. */
.rtob-animation-test .rtob-ring-pending { opacity: .12; transform: scale(.94); }
.rtob-animation-test .rtob-ring-pending .progress-inner { opacity: 1; }
.rtob-animation-test .skin-background-layer { backface-visibility: hidden; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .rtob-animation-test .rtob-ring-pending { opacity: 1; transform: none; }
  .rtob-animation-test .rtob-ring-pending .progress-inner { opacity: 1; }
}

/* Keep animated layers stable while the initial artwork is decoding. */
html.rtob-loading .rtob-animation-test .skin-background-layer,
html.rtob-loading .rtob-animation-test .progress-ring::before {
  animation-play-state: paused;
}
.rtob-animation-test .progress-ring { backface-visibility: hidden; }

/* Never leave the public ring hidden while waiting for JavaScript or artwork. */
.rtob-animation-test .rtob-ring-pending { opacity: 1; transform: none; }
.rtob-animation-test .rtob-ring-opening { animation: none; opacity: 1; transform: none; }
.rtob-animation-test .skin-background-layer { animation: none; transform: none; backface-visibility: visible; will-change: opacity; }

/* Progress and labels remain visible independently of startup and motion controls. */
.rtob-animation-test .progress-ring, .rtob-animation-test .rtob-ring-opening { opacity: 1; transform: none; animation: none; backface-visibility: visible; }
.rtob-animation-test .rtob-ring-opening .progress-label,
.rtob-animation-test .rtob-ring-opening .progress-percent,
.rtob-animation-test .rtob-ring-opening .progress-divider,
.rtob-animation-test .rtob-ring-opening .holdings,
.rtob-animation-test .rtob-ring-opening .fiat { animation: none; opacity: 1; }
.rtob-animation-test .skin-background-layer { transition: none !important; will-change: auto; backface-visibility: visible; }
@media (any-pointer: coarse) {
  .rtob-animation-test .progress-ring::before { animation: none; opacity: 1; }
  .rtob-animation-test .animation-sweep circle { filter: none; }
}