/* v23.05 · Motion polish system
   Purposeful motion only: tactile feedback, progressive reveals and chapter transitions.
   Gameplay engines are intentionally untouched. */

:root{
  --motion-fast:140ms;
  --motion-ui:240ms;
  --motion-panel:420ms;
  --motion-ease:cubic-bezier(.2,.82,.2,1);
  --motion-spring:cubic-bezier(.22,.9,.28,1.18);
}

/* 1. Consistent tactile feedback ------------------------------------------------ */
@media (hover:none),(pointer:coarse){
  .btn:not(:disabled),
  .operation-stage__toggle:not(:disabled),
  .operation-heist__summary,
  .operation-social:not(:disabled),
  .crew-access__button:not(:disabled),
  .account-recover-card:not(:disabled),
  .crew-member-card:not(:disabled),
  .hud__menu-toggle,
  .text-button:not(:disabled),
  .radio-card--button:not(:disabled),
  .clandestine-play:not(:disabled),
  .clandestine-secondary-actions button:not(:disabled),
  .clandestine-general-ranking:not(:disabled),
  .clandestine-prize-info:not(:disabled){
    -webkit-tap-highlight-color:transparent;
    transition:transform var(--motion-fast) ease,filter var(--motion-fast) ease,box-shadow var(--motion-ui) ease,background-color var(--motion-ui) ease,border-color var(--motion-ui) ease;
  }
  .btn:not(:disabled):active,
  .operation-stage__toggle:not(:disabled):active,
  .operation-heist__summary:active,
  .operation-social:not(:disabled):active,
  .crew-access__button:not(:disabled):active,
  .account-recover-card:not(:disabled):active,
  .crew-member-card:not(:disabled):active,
  .hud__menu-toggle:active,
  .radio-card--button:not(:disabled):active{
    transform:translateY(1px) scale(.982);
    filter:brightness(.985);
  }
}

/* 2. First entry: a short layered boot, not a cinematic ------------------------- */
body.motion-first-entry .hero--intro .pill{animation:motionHeroLayer .46s .04s var(--motion-ease) both}
body.motion-first-entry .hero--intro h1{animation:motionHeroTitle .64s .12s var(--motion-ease) both}
body.motion-first-entry .hero--intro .vice{animation:motionHeroLayer .54s .24s var(--motion-ease) both}
body.motion-first-entry .hero--intro .hero__lead,
body.motion-first-entry .hero--intro .hero-countdown{animation:motionHeroLayer .5s .34s var(--motion-ease) both}
body.motion-first-entry .hero--intro .hero__actions{animation:motionHeroReady .55s .46s var(--motion-spring) both}
body.motion-first-entry .hero--intro .hero__sun{animation:motionHeroSun .9s ease-out both}
@keyframes motionHeroLayer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes motionHeroTitle{0%{opacity:0;transform:translateY(15px) scale(.975)}70%{opacity:1;transform:translateY(-1px) scale(1.003)}100%{opacity:1;transform:none}}
@keyframes motionHeroReady{0%{opacity:0;transform:translateY(8px) scale(.98)}70%{opacity:1;transform:translateY(-1px) scale(1.008)}100%{opacity:1;transform:none}}
@keyframes motionHeroSun{from{opacity:.25;transform:scale(.93)}to{opacity:.8;transform:none}}

/* 3. Operation stages ----------------------------------------------------------- */
.operation-stage__panel{animation-duration:.34s!important;animation-timing-function:var(--motion-ease)!important}
.operation-stage.motion-stage-open .operation-stage__panel>.operation-stage__content,
.operation-stage.motion-stage-open .operation-stage__panel>.briefing-items,
.operation-stage.motion-stage-open .operation-stage__panel>.operation-stage4-prep,
.operation-stage.motion-stage-open .operation-stage__panel>.operation-stage5{
  animation:motionStageContent .42s var(--motion-ease) both;
}
.operation-stage.motion-stage-open .operation-stage__panel .operation-info-block:nth-child(1){animation-delay:.025s}
.operation-stage.motion-stage-open .operation-stage__panel .operation-info-block:nth-child(2){animation-delay:.065s}
.operation-stage.motion-stage-open .operation-stage__panel .operation-info-block:nth-child(3){animation-delay:.105s}
.operation-stage.motion-stage-open .operation-stage__panel .operation-info-block:nth-child(4){animation-delay:.145s}
@keyframes motionStageContent{from{opacity:.18;transform:translateY(8px)}to{opacity:1;transform:none}}

.moment-check{animation:motionPhaseComplete .7s var(--motion-spring) both!important}
.moment-next{animation:motionPhaseNext .82s var(--motion-ease) both!important}
.moment-progress{animation:motionProgressBump .64s var(--motion-spring) both!important}
@keyframes motionPhaseComplete{0%{transform:scale(.72) rotate(-10deg);box-shadow:0 0 0 0 rgba(64,157,99,.3)}50%{transform:scale(1.15);box-shadow:0 0 0 8px rgba(64,157,99,0)}100%{transform:none}}
@keyframes motionPhaseNext{0%{transform:translateY(3px);background:#fff}42%{transform:translateY(-1px);background:#fff4fa}100%{transform:none;background:#fff}}
@keyframes motionProgressBump{0%{transform:scale(1)}45%{transform:scale(1.045)}100%{transform:none}}

/* 4. El Golpe gateway: content settles in after the shell expands --------------- */
.operation-heist.is-expanded .operation-heist__detail-lead{animation:motionHeistDetail .42s .08s var(--motion-ease) both}
.operation-heist.is-expanded .operation-heist__facts>div:nth-child(1){animation:motionHeistFact .38s .13s var(--motion-ease) both}
.operation-heist.is-expanded .operation-heist__facts>div:nth-child(2){animation:motionHeistFact .38s .18s var(--motion-ease) both}
.operation-heist.is-expanded .operation-heist__facts>div:nth-child(3){animation:motionHeistFact .38s .23s var(--motion-ease) both}
.operation-heist.is-expanded .operation-heist__next{animation:motionHeistDetail .42s .27s var(--motion-ease) both}
@keyframes motionHeistDetail{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes motionHeistFact{from{opacity:0;transform:translateY(5px) scale(.985)}to{opacity:1;transform:none}}

/* 5. La Banda and profile ------------------------------------------------------- */
.crew-browser-dialog.motion-dialog-enter .crew-browser__sheet,
.crew-browser-dialog.motion-dialog-enter .crew-browser{animation:motionSurfaceEnter .36s var(--motion-ease) both}
.crew-browser-dialog.motion-dialog-enter .crew-member-card{animation:motionCrewCardIn .38s var(--motion-ease) both}
.crew-browser-dialog.motion-dialog-enter .crew-member-card:nth-child(1){animation-delay:.02s}
.crew-browser-dialog.motion-dialog-enter .crew-member-card:nth-child(2){animation-delay:.045s}
.crew-browser-dialog.motion-dialog-enter .crew-member-card:nth-child(3){animation-delay:.07s}
.crew-browser-dialog.motion-dialog-enter .crew-member-card:nth-child(4){animation-delay:.095s}
.crew-browser-dialog.motion-dialog-enter .crew-member-card:nth-child(5){animation-delay:.12s}
.crew-browser-dialog.motion-dialog-enter .crew-member-card:nth-child(6){animation-delay:.145s}
.crew-browser-dialog.motion-dialog-enter .crew-member-card:nth-child(7){animation-delay:.17s}
.crew-browser-dialog.motion-dialog-enter .crew-member-card:nth-child(8){animation-delay:.195s}
@keyframes motionSurfaceEnter{from{opacity:.45;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
@keyframes motionCrewCardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

#crewProfilePanel.motion-profile-enter .crew-profile-sheet__avatar{animation:motionAvatarArrive .55s var(--motion-spring) both}
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__hero>div,
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__bio,
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__metrics,
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__traits,
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__respect{animation:motionProfileContent .42s var(--motion-ease) both}
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__bio{animation-delay:.04s}
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__metrics{animation-delay:.08s}
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__traits{animation-delay:.12s}
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__respect{animation-delay:.16s}
@keyframes motionAvatarArrive{0%{opacity:.2;transform:scale(.78)}62%{opacity:1;transform:scale(1.055)}100%{transform:none}}
@keyframes motionProfileContent{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

.hud__menu-toggle.motion-identity-swap{animation:motionIdentitySwap .52s var(--motion-ease) both}
@keyframes motionIdentitySwap{0%{transform:scale(.97);opacity:.7}45%{transform:scale(1.018);opacity:1}100%{transform:none}}

/* 6. Hidden cash --------------------------------------------------------------- */
.street-cash.is-stolen{animation-duration:.58s!important;animation-timing-function:var(--motion-ease)!important}
.hud__menu-toggle.moment-cash{animation:motionCashHud .58s var(--motion-spring) both!important}
@keyframes motionCashHud{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:none}}

/* 7. Operaciones Clandestinas: chapter transition ------------------------------ */
body.motion-clandestine-entering::before,
body.motion-clandestine-entering::after{content:"";position:fixed;pointer-events:none;z-index:1800}
body.motion-clandestine-entering::before{inset:0;background:#17151d;animation:motionClandestineCurtain .5s var(--motion-ease) both}
body.motion-clandestine-entering::after{left:8%;right:8%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(236,92,166,.8),rgba(255,255,255,.72),transparent);box-shadow:0 0 18px rgba(236,92,166,.25);animation:motionClandestineScan .5s var(--motion-ease) both}
@keyframes motionClandestineCurtain{0%{opacity:0}44%,82%{opacity:1}100%{opacity:0}}
@keyframes motionClandestineScan{0%{opacity:0;transform:scaleX(.15)}42%{opacity:1;transform:scaleX(1)}80%{opacity:.7}100%{opacity:0;transform:scaleX(1.05)}}

.clandestine-dialog.motion-dialog-enter .clandestine-hub-head{animation:motionClandestineHead .46s .04s var(--motion-ease) both}
.clandestine-dialog.motion-dialog-enter .clandestine-active-player{animation:motionClandestineHead .42s .1s var(--motion-ease) both}
.clandestine-dialog.motion-dialog-enter .clandestine-championship-card{animation:motionClandestineHead .42s .15s var(--motion-ease) both}
.clandestine-dialog.motion-dialog-enter .clandestine-games{animation:motionClandestineGames .52s .18s var(--motion-ease) both}
@keyframes motionClandestineHead{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes motionClandestineGames{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}

.clandestine-game.motion-launch{animation:motionGameLaunch .3s var(--motion-spring) both}
.clandestine-game--infiltration.motion-launch{--motion-launch-color:rgba(57,137,255,.28)}
.clandestine-game--blind.motion-launch{--motion-launch-color:rgba(255,210,78,.28)}
.clandestine-game--safe.motion-launch{--motion-launch-color:rgba(90,202,130,.28)}
.clandestine-game--fuga.motion-launch{--motion-launch-color:rgba(242,74,88,.28)}
@keyframes motionGameLaunch{0%{transform:scale(1);box-shadow:none}48%{transform:scale(.992);box-shadow:0 0 0 4px var(--motion-launch-color,rgba(255,255,255,.12))}100%{transform:none;box-shadow:none}}

/* 8. Result screens: score -> rank -> actions ---------------------------------- */
.operation-result.motion-result-enter .operation-result__mark{animation:motionResultMark .48s var(--motion-spring) both}
.operation-result.motion-result-enter .operation-result__score{animation:motionResultScore .52s .07s var(--motion-ease) both}
.operation-result.motion-result-enter>h3{animation:motionResultItem .42s .14s var(--motion-ease) both}
.operation-result.motion-result-enter .operation-result__message,
.operation-result.motion-result-enter .arcade-result-prize{animation:motionResultItem .42s .2s var(--motion-ease) both}
.operation-result.motion-result-enter .arcade-result-actions{animation:motionResultItem .42s .26s var(--motion-ease) both}
@keyframes motionResultMark{0%{opacity:0;transform:scale(.7) rotate(-8deg)}64%{opacity:1;transform:scale(1.07)}100%{transform:none}}
@keyframes motionResultScore{from{opacity:0;transform:translateY(9px) scale(.975)}to{opacity:1;transform:none}}
@keyframes motionResultItem{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* 9. El Golpe transition: one deliberate climax -------------------------------- */
.heist-transition.show .heist-transition__panel{animation:motionHeistPanel 1.3s var(--motion-ease) both}
.heist-transition.show .heist-transition__panel .kicker{animation:motionHeistLine .38s .12s var(--motion-ease) both}
.heist-transition.show .heist-transition__panel p{animation:motionHeistLine .4s .24s var(--motion-ease) both}
.heist-transition.show .heist-transition__panel h2{animation:motionHeistTitle .62s .34s var(--motion-spring) both}
.heist-transition.show .heist-transition__panel>strong{animation:motionHeistLine .42s .56s var(--motion-ease) both}
@keyframes motionHeistPanel{0%{opacity:0;transform:scale(.985)}16%,85%{opacity:1;transform:none}100%{opacity:1}}
@keyframes motionHeistLine{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes motionHeistTitle{0%{opacity:0;transform:translateY(14px) scale(.94)}65%{opacity:1;transform:translateY(-2px) scale(1.012)}100%{transform:none}}

@media(prefers-reduced-motion:reduce){
  body.motion-first-entry .hero--intro .pill,
  body.motion-first-entry .hero--intro h1,
  body.motion-first-entry .hero--intro .vice,
  body.motion-first-entry .hero--intro .hero__lead,
  body.motion-first-entry .hero--intro .hero-countdown,
  body.motion-first-entry .hero--intro .hero__actions,
  body.motion-first-entry .hero--intro .hero__sun,
  .operation-stage.motion-stage-open .operation-stage__panel>*,
  .operation-heist.is-expanded .operation-heist__detail-lead,
  .operation-heist.is-expanded .operation-heist__facts>div,
  .operation-heist.is-expanded .operation-heist__next,
  .crew-browser-dialog.motion-dialog-enter .crew-browser,
  .crew-browser-dialog.motion-dialog-enter .crew-member-card,
  #crewProfilePanel.motion-profile-enter *,
  .hud__menu-toggle.motion-identity-swap,
  .hud__menu-toggle.moment-cash,
  .clandestine-dialog.motion-dialog-enter *,
  .clandestine-game.motion-launch,
  .operation-result.motion-result-enter *,
  .heist-transition.show .heist-transition__panel,
  .heist-transition.show .heist-transition__panel *{animation:none!important}
  body.motion-clandestine-entering::before,body.motion-clandestine-entering::after{display:none!important}
}