/* Home About only: reversible, scroll-linked cinematic presentation; approved content and layout stay intact. */
#about { position: relative; isolation: isolate; --about-ease: cubic-bezier(.22, 1, .36, 1); }
#about.about-motion .reveal { animation: none; }
#about .about-copy, #about .about-network { position: relative; isolation: isolate; }
#about .about-copy:after { content: ''; position: absolute; left: -6px; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, transparent 35%, #ffc35c 49%, #fff0cb 51%, transparent 65%); background-size: 100% 300%; animation: about-rail-signal 5s linear infinite; animation-play-state: paused; pointer-events: none; }
#about .about-network:before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 22px; background: radial-gradient(240px circle at var(--about-light-x, 50%) var(--about-light-y, 50%), #8000800a, #ff890006 60%, transparent); opacity: 0; transition: opacity .35s ease; pointer-events: none; }
#about .about-network.about-pointer-active:before { opacity: 1; }
#about .about-copy .gradient-text { background-size: 180% 100%; animation: about-title-light 12s ease-in-out infinite alternate; animation-play-state: paused; }
#about .about-copy .eyebrow:before, #about .about-copy .eyebrow:after { animation-play-state: paused; }
#about .about-network > div > div { position: relative; }
#about .about-network strong { text-shadow: 0 5px 20px #8000800b; }
#about .about-network img { translate: var(--about-avatar-x, 0px) var(--about-avatar-y, 0px); transition: translate .4s var(--about-ease); }
#about .about-network.about-pointer-active img { transition: none; }

/* Native scroll is the timeline. CSS transitions must not compete with the scrub controller. */
#about.about-motion .about-actor {
 opacity: var(--about-scene-opacity, 1);
 transform: perspective(1300px) translate3d(var(--about-scene-x, 0px), var(--about-scene-y, 0px), 0)
  rotateY(var(--about-scene-yaw, 0deg)) rotateX(var(--about-scene-pitch, 0deg))
  rotateZ(var(--about-scene-roll, 0deg)) scale(var(--about-scene-scale, 1));
 transform-origin: 50% 55%;
}
#about.about-scene-active .about-actor-near { will-change: transform, opacity; }
#about.about-motion .about-actor:focus-within { opacity: 1; transform: none; }
#about .about-cinema-atmosphere { display: none; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#about.about-motion .about-cinema-atmosphere { display: block; }
#about .about-cinema-atmosphere:before, #about .about-cinema-atmosphere:after { content: ''; position: absolute; width: 80%; height: 65%; border-radius: 50%; transform: translate3d(var(--about-aura-x, 0px), var(--about-aura-y, 0px), 0) scale(var(--about-aura-scale, 1)); }
#about .about-cinema-atmosphere:before { left: -25%; top: 0; background: radial-gradient(ellipse, #80008020, #80008007 45%, transparent 72%); }
#about .about-cinema-atmosphere:after { right: -25%; bottom: 5%; background: radial-gradient(ellipse, #ff8c0022, #ff9b0008 48%, transparent 72%); }
#about .brand-video, #about .portrait, #about .about-stats article { isolation: isolate; }
#about .portrait { position: relative; }
#about .brand-video video { position: relative; z-index: 0; }
#about .video-toggle, #about .video-muted { z-index: 4; }
#about .portrait, #about .about-stats article { rotate: var(--about-axis-x, 0) var(--about-axis-y, 1) 0 var(--about-tilt, 0deg); transition: rotate .5s var(--about-ease), box-shadow .4s ease; }
#about .portrait.about-pointer-active, #about .about-stats article.about-pointer-active { transition: box-shadow .4s ease; }
#about .portrait:before, #about .about-stats article:after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(230px circle at var(--about-light-x, 50%) var(--about-light-y, 50%), #ffffff20, transparent 70%); transition: opacity .4s ease; }
#about .growth:after { background: radial-gradient(180px circle at var(--about-light-x, 50%) var(--about-light-y, 50%), #8000800b, #ff850008 65%, transparent); }
#about .portrait.about-pointer-active:before, #about .about-stats article.about-pointer-active:after { opacity: 1; }
#about .about-stats article.about-pointer-active { box-shadow: 0 15px 32px -15px #80008036; }
#about .portrait.about-pointer-active { box-shadow: 0 23px 38px -15px #8000804d; }

/* Masked light stays on the frame; video pixels and controls remain unobstructed. */
@property --about-frame-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
#about .about-light-frame { display: none; position: absolute; inset: 0; z-index: 2; padding: 1.5px; border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--about-frame-angle), transparent 0deg 58deg, #ffc880 88deg, #fff3de 103deg, transparent 132deg 240deg, #b554b5 266deg, #e6aee6 280deg, transparent 312deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: about-frame-orbit 10s linear infinite; animation-play-state: paused; }
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) { #about .about-light-frame { display: block; } }
#about .portrait .about-light-frame { animation-delay: -3s; }
#about .brand-video:focus-within .about-light-frame { animation-play-state: paused; }
#about .video-toggle:focus-visible { outline: 2px solid #ffbd60; outline-offset: 3px; }

/* Existing map and metric values stay intact; only decorative signals move. */
#about .presence-map { isolation: isolate; }
#about .about-map-signal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; fill: none; pointer-events: none; }
#about .about-map-signal path { stroke: #ffe59a45; stroke-width: .7; vector-effect: non-scaling-stroke; }
#about .about-map-signal .about-map-packet { stroke: #fff1a6; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: .1 .9; animation: about-data-flow 4.8s linear infinite; animation-play-state: paused; }
#about .about-map-signal .about-map-packet-alt { animation-delay: -2.4s; }
#about .presence-map i { z-index: 2; animation: about-map-node 3.6s ease-in-out infinite; animation-play-state: paused; }
#about .presence-map:after { content: ''; position: absolute; left: 40%; top: 30%; width: 34px; height: 34px; margin: -17px; border: 1px solid #ffda7780; border-radius: 50%; opacity: 0; animation: about-map-radar 4s ease-out infinite; animation-play-state: paused; pointer-events: none; }
#about .growth-bars { isolation: isolate; }
#about .growth-bars i { transform: scaleY(1); transform-origin: bottom; animation: none; transition: none; }
#about.about-motion .growth-bars i { transform: scaleY(var(--about-bar-progress, 1)); }
#about .growth-bars:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 40%, #ffffff5c 50%, transparent 60%) 200% 0 / 220% 100% no-repeat; animation: about-chart-sheen 5.5s ease-in-out infinite; animation-play-state: paused; }
#about .about-in-view.about-copy:after, #about .about-in-view.about-copy .gradient-text,
#about .about-in-view.about-copy .eyebrow:before, #about .about-in-view.about-copy .eyebrow:after,
#about .about-in-view > .about-light-frame, #about .about-in-view .about-map-packet,
#about .about-in-view .presence-map i, #about .about-in-view .presence-map:after,
#about .about-in-view .growth-bars:after { animation-play-state: running; }
@keyframes about-rail-signal { from { background-position: 0 100%; } to { background-position: 0 0; } }
@keyframes about-title-light { to { background-position: 100% 50%; } }
@keyframes about-frame-orbit { to { --about-frame-angle: 360deg; } }
@keyframes about-data-flow { to { stroke-dashoffset: -1; } }
@keyframes about-map-node { 0%, 100% { opacity: .6; scale: .85; } 50% { opacity: 1; scale: 1.15; } }
@keyframes about-map-radar { 0% { opacity: .5; scale: .25; } 80%, 100% { opacity: 0; scale: 2.1; } }
@keyframes about-chart-sheen { 0%, 25% { background-position: 200% 0; } 80%, 100% { background-position: -200% 0; } }
@media (max-width: 600px) { #about .about-copy:after { width: 4px; left: -4px; } }
@media (prefers-reduced-motion: reduce) {
 #about *, #about *:before, #about *:after { animation: none !important; transition: none !important; rotate: none !important; translate: none !important; }
 #about.about-motion .about-actor { opacity: 1; transform: none; }
 #about .growth-bars i { transform: none !important; }
 #about .about-cinema-atmosphere, #about .about-light-frame, #about .about-map-signal, #about .presence-map:after, #about .about-copy:after, #about .growth-bars:after { display: none; }
}
.motion-paused #about *, .motion-paused #about *:before, .motion-paused #about *:after { animation: none !important; transition: none !important; rotate: none !important; translate: none !important; }
.motion-paused #about.about-motion .about-actor { opacity: 1; transform: none; }
.motion-paused #about .growth-bars i { transform: none; }
.motion-paused #about .about-cinema-atmosphere, .motion-paused #about .about-light-frame, .motion-paused #about .about-map-signal, .motion-paused #about .presence-map:after, .motion-paused #about .about-copy:after, .motion-paused #about .growth-bars:after { display: none; }
@media (forced-colors: active), print {
 #about *, #about *:before, #about *:after { animation: none !important; transition: none !important; rotate: none !important; translate: none !important; }
 #about.about-motion .about-actor { opacity: 1; transform: none; }
 #about .growth-bars i { transform: none !important; }
 #about .about-cinema-atmosphere, #about .about-light-frame, #about .about-map-signal, #about .presence-map:after, #about .about-copy:after, #about .growth-bars:after, #about .portrait:before, #about .about-stats article:after, #about .about-network:before { display: none; }
}