/* Progressive enhancement: layout and all facts remain complete without this module. */
.about.has-about-motion { position: relative; isolation: isolate; overflow: clip; --about-run-state: paused; }
.about.has-about-motion[data-about-playing="true"] { --about-run-state: running; }
.has-about-motion > .container { position: relative; z-index: 1; }
.about-ambience { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.about-ambience__orbit { position: absolute; width: clamp(360px, 65vw, 1000px); aspect-ratio: 1; border: 1px solid #ffffff20; border-radius: 50%; animation: about-orbit 48s linear infinite; animation-play-state: var(--about-run-state); }
.about-ambience__orbit::before { content: ''; position: absolute; top: 17%; left: 12%; width: 11px; height: 11px; border-radius: 50%; background: #ffb555; box-shadow: 0 0 0 9px #ffb55518; }
.about-ambience__orbit--one { top: -200px; right: -25%; }
.about-ambience__orbit--two { bottom: -220px; left: -30%; width: clamp(400px, 78vw, 1100px); animation-duration: 64s; animation-direction: reverse; border-style: dashed; opacity: .65; }
.about-ambience__orbit--two::before { top: 70%; left: 4%; width: 8px; height: 8px; background: #bedaff; }
.about-ambience__grid { position: absolute; inset: 0; opacity: .14; background-image: radial-gradient(#e8f3ff 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(145deg, #000, transparent 58%); }
.has-about-motion h2 { width: fit-content; position: relative; padding-bottom: 9px; }
.has-about-motion h2::after { content: ''; position: absolute; height: 5px; width: 40%; left: 0; bottom: 0; border-radius: 100%; background: var(--orange); transform-origin: left; animation: about-line 6s ease-in-out infinite; animation-play-state: var(--about-run-state); }
.has-about-motion h2:not([data-about-in-view="true"])::after { animation-play-state: paused; }

.about-motion-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; margin-top: 18px; border: 1px solid #ffffff55; border-radius: 999px; background: #0b2d6338; color: #fff; font-size: .74rem; font-weight: 600; line-height: 1.2; }
.about-motion-toggle:hover { background: #0b2d6370; border-color: #ffffffaa; }
.about-motion-toggle svg { flex-shrink: 0; width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.about-motion-toggle__play { display: none; fill: currentColor; stroke: none; }
.about-motion-toggle[aria-pressed="true"] .about-motion-toggle__play { display: block; }
.about-motion-toggle[aria-pressed="true"] .about-motion-toggle__pause { display: none; }

.has-about-motion .facts__ico { background: linear-gradient(145deg, #e3eefc, #d2e4ff); }
.has-about-motion .facts__ico svg { animation: about-icon-float 5s ease-in-out var(--about-phase, 0s) infinite; animation-play-state: var(--about-run-state); }
.has-about-motion .facts__grid > li:not([data-about-in-view="true"]) .facts__ico svg { animation-play-state: paused; }
.has-about-motion .media .dd, .has-about-motion .media .mg { animation-play-state: var(--about-run-state); }
.has-about-motion .media:not([data-about-in-view="true"]) .dd,
.has-about-motion .media:not([data-about-in-view="true"]) .mg { animation-play-state: paused; }
.has-about-motion .stats { gap: 14px; }
.has-about-motion .stats > div { position: relative; min-width: 0; padding: 18px; border: 1px solid #ffffff2e; border-radius: 16px; background: #ffffff0a; overflow: hidden; }
.has-about-motion .stats > div::after { content: ''; position: absolute; pointer-events: none; top: -40%; left: -60%; width: 35%; height: 180%; background: linear-gradient(90deg, transparent, #ffffff13, transparent); transform: translateX(-130%) rotate(24deg); animation: about-stat-sheen 9s ease-in-out var(--about-phase, 0s) infinite; animation-play-state: var(--about-run-state); }
.has-about-motion .stats > div:not([data-about-in-view="true"])::after { animation-play-state: paused; }
.has-about-motion .stats dd { font-variant-numeric: tabular-nums; }
.about-counter { position: relative; display: inline-block; vertical-align: bottom; white-space: nowrap; }
.about-counter__measure { display: block; visibility: hidden; }
.about-counter__value { position: absolute; left: 0; top: 0; white-space: nowrap; }
.has-about-motion .checks li::before { filter: drop-shadow(0 0 5px #ffad4e55); }

@keyframes about-orbit { to { transform: rotate(360deg); } }
@keyframes about-line { 0%, 100% { transform: scaleX(.72) rotate(-1deg); } 50% { transform: scaleX(1.2) rotate(1deg); } }
@keyframes about-icon-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes about-stat-sheen { 0%, 65% { transform: translateX(-130%) rotate(24deg); } 88%, 100% { transform: translateX(650%) rotate(24deg); } }

@media (max-width: 560px) {
  .has-about-motion .stats { gap: 12px; }
  .has-about-motion .stats > div { padding: 14px 12px; border-radius: 12px; }
  .has-about-motion .stats dt { font-size: .65rem; letter-spacing: .09em; }
  .has-about-motion .stats dd { font-size: clamp(1.7rem, 7.3vw, 2.5rem); }
  .about-motion-toggle { margin-top: 16px; font-size: .7rem; }
  .about-ambience__orbit--one { right: -95%; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .about-ambience__orbit { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .about-ambience__orbit, .has-about-motion h2::after,
  .has-about-motion .facts__ico svg, .has-about-motion .stats > div::after,
  .has-about-motion .media .dd, .has-about-motion .media .mg { animation: none !important; }
  .has-about-motion .stats > div::after { display: none; }
}