/* ==========================================================================
   About page — cinematic layer v1. Builds on allotech-stage (.vig, .v-log,
   .v-mkt). Transform/opacity only; everything is still under reduced motion.
   ========================================================================== */

/* ---- hero: the skyline, moving slowly ---- */
.about-hero-shot{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%;opacity:.3;animation:ab-hero 38s ease-in-out infinite alternate;will-change:transform}
@keyframes ab-hero{from{transform:scale(1.04)}to{transform:scale(1.17) translate3d(-2.5%,-1.5%,0)}}

/* ---- the team in orbit around Boss Brain ---- */
.about-orbit{position:relative;width:min(320px,74vw);aspect-ratio:1;margin:clamp(20px,4vw,40px) auto clamp(8px,2vw,24px)}
.about-orbit .path{position:absolute;inset:11%;border-radius:50%;border:1px dashed rgba(43,212,240,.34)}
.about-orbit .path.p2{inset:30%;border:1px solid rgba(75,141,255,.22);animation:ab-pulse 4.6s ease-out infinite}
@keyframes ab-pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.75);opacity:0}}
.about-orbit .hub{position:absolute;left:34%;top:34%;width:32%;height:32%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(43,212,240,.8),0 0 0 9px rgba(43,212,240,.1),0 0 60px rgba(43,212,240,.6)}
.about-orbit .ab-ring{position:absolute;inset:0;animation:ab-spin 44s linear infinite;will-change:transform}
.about-orbit .ab-ring span{position:absolute;width:22%;height:22%;left:39%;top:39%;transform:rotate(calc(var(--i) * 90deg)) translateY(-177%)}
.about-orbit .ab-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(150,180,255,.4),0 10px 30px -8px rgba(0,0,0,.8);animation:ab-rev-0 44s linear infinite;transform:rotate(calc(var(--i) * -90deg))}
@keyframes ab-spin{to{transform:rotate(360deg)}}
.about-orbit .ab-ring span:nth-child(1) img{animation-name:ab-rev-0}
.about-orbit .ab-ring span:nth-child(2) img{animation-name:ab-rev-1}
.about-orbit .ab-ring span:nth-child(3) img{animation-name:ab-rev-2}
.about-orbit .ab-ring span:nth-child(4) img{animation-name:ab-rev-3}
@keyframes ab-rev-0{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
@keyframes ab-rev-1{from{transform:rotate(-90deg)}to{transform:rotate(-450deg)}}
@keyframes ab-rev-2{from{transform:rotate(-180deg)}to{transform:rotate(-540deg)}}
@keyframes ab-rev-3{from{transform:rotate(-270deg)}to{transform:rotate(-630deg)}}

/* ---- the four rules ---- */
.about-rules .vig *{animation-play-state:running}
.about-rules .cell{background:rgba(8,12,22,.72)}
.v-gate{flex-direction:column;align-items:stretch;padding:10px 16px;gap:7px}
.v-gate span{display:block;height:8px;border-radius:8px;background:rgba(163,176,198,.3)}
.v-gate span + span{width:60%}
.v-gate b{align-self:flex-end;padding:6px 14px;border-radius:999px;background:#fff;color:#04121c;font:600 .68rem/1 var(--body);letter-spacing:0;animation:ab-press 5s ease-in-out infinite}
@keyframes ab-press{0%,52%{transform:scale(1);background:#fff;box-shadow:none}58%{transform:scale(.9);box-shadow:0 0 0 7px rgba(255,255,255,.18)}66%,100%{transform:scale(1);background:#3ddc97;box-shadow:0 0 18px rgba(61,220,151,.6)}}
.v-pin{background-image:linear-gradient(rgba(150,180,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(150,180,255,.12) 1px,transparent 1px),linear-gradient(180deg,rgba(75,141,255,.10),rgba(8,12,22,.2));background-size:22px 22px,22px 22px,auto}
.v-pin i{position:relative;width:14px;height:14px;border-radius:50% 50% 50% 0;background:#2bd4f0;transform:rotate(-45deg);box-shadow:0 0 16px rgba(43,212,240,.9)}
.v-pin::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-2px 0 0 -7px;border-radius:50%;border:1px solid rgba(43,212,240,.8);animation:ab-ripple 2.6s ease-out infinite}
@keyframes ab-ripple{0%{transform:scale(.6);opacity:1}100%{transform:scale(5);opacity:0}}

/* ---- who we are: skyline band ---- */
.about-team{position:relative}
.about-team .wrap{position:relative}

@media (prefers-reduced-motion:reduce){
  .about-hero-shot,.about-orbit *,.about-rules .vig *,.v-pin::after{animation:none !important}
}