/* 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),
  .operation-clandestine-access: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,
  .operation-clandestine-access: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: cinematic brand assembly -------------------------------------- */
body.motion-first-entry .hero--intro{animation:motionLandingCanvas .62s cubic-bezier(.18,.78,.2,1) both;}
body.motion-first-entry .hero--intro .hero__grid{animation:motionLandingGrid .95s .34s cubic-bezier(.2,.82,.2,1) both;}
body.motion-first-entry .hero--intro .hero__sun{animation:motionLandingSun .92s 1.04s cubic-bezier(.2,.82,.2,1) both;}
body.motion-first-entry .hero--intro h1{animation:motionLandingCopy .76s 1.78s var(--motion-ease) both;}
body.motion-first-entry .hero--intro .vice{animation:motionLandingVice .66s 2.05s var(--motion-spring) both;}
body.motion-first-entry .hero--intro .hero__lead{animation:motionLandingLead .58s 2.34s var(--motion-ease) both;}

/* Returning characters keep the same scene grammar, but the assembly is compressed. */
body.motion-first-entry.motion-returning-entry .hero--intro{animation:motionLandingCanvas .38s cubic-bezier(.18,.78,.2,1) both;}
body.motion-first-entry.motion-returning-entry .hero--intro .hero__grid{animation:motionLandingGrid .55s .18s cubic-bezier(.2,.82,.2,1) both;}
body.motion-first-entry.motion-returning-entry .hero--intro .hero__sun{animation:motionLandingSun .55s .55s cubic-bezier(.2,.82,.2,1) both;}
body.motion-first-entry.motion-returning-entry .hero--intro h1{animation:motionLandingCopy .45s .95s var(--motion-ease) both;}
body.motion-first-entry.motion-returning-entry .hero--intro .vice{animation:motionLandingVice .42s 1.10s var(--motion-spring) both;}
body.motion-first-entry.motion-returning-entry .hero--intro .hero__lead{animation:motionLandingLead .36s 1.24s var(--motion-ease) both;}

/* Once the brand has assembled, the sun itself stays almost still. The handoff is
   a light pulse, not a resize: near/far halos breathe continuously and the disc only
   gets a tiny GPU-only scale so the eye reads brightness rather than a zoom jump. */
body.motion-first-entry .hero--intro .hero__sun::before,
body.motion-first-entry .hero--intro .hero__sun::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;opacity:0;
  transform-origin:50% 50%;will-change:transform,opacity;
}
body.motion-first-entry .hero--intro .hero__sun::before{
  inset:-10%;
  background:radial-gradient(circle,rgba(255,244,198,.12) 0%,rgba(255,194,148,.13) 42%,rgba(255,120,178,.045) 68%,transparent 78%);
  filter:blur(12px);
}
body.motion-first-entry .hero--intro .hero__sun::after{
  inset:-20%;
  background:radial-gradient(circle,rgba(255,233,174,.24) 0%,rgba(255,149,190,.105) 44%,transparent 74%);
  filter:blur(5px);
}
body.motion-landing-handoff #home .hero__sun{
  transform-origin:50% 50%;will-change:transform;
  animation:motionLandingSunBreath .90s cubic-bezier(.37,0,.63,1) both;
}
body.motion-landing-handoff #home .hero__sun::before{
  animation:motionLandingSunGlowBreath .90s cubic-bezier(.37,0,.63,1) both;
}
body.motion-landing-handoff #home .hero__sun::after{
  animation:motionLandingSunHaloBreath .90s cubic-bezier(.37,0,.63,1) both;
}
body.motion-first-entry.motion-returning-entry.motion-landing-handoff #home .hero__sun,
body.motion-first-entry.motion-returning-entry.motion-landing-handoff #home .hero__sun::before,
body.motion-first-entry.motion-returning-entry.motion-landing-handoff #home .hero__sun::after{
  animation-duration:.72s;
}
@keyframes motionLandingSunBreath{
  0%{transform:translate3d(0,0,0) scale(1)}
  16%{transform:translate3d(0,0,0) scale(1.002)}
  34%{transform:translate3d(0,0,0) scale(1.006)}
  52%{transform:translate3d(0,0,0) scale(1.001)}
  70%{transform:translate3d(0,0,0) scale(1.006)}
  84%{transform:translate3d(0,0,0) scale(1.013)}
  100%{transform:translate3d(0,0,0) scale(1.006)}
}
@keyframes motionLandingSunGlowBreath{
  0%{opacity:.05;transform:translate3d(0,0,0) scale(.97)}
  16%{opacity:.14;transform:translate3d(0,0,0) scale(1.01)}
  34%{opacity:.32;transform:translate3d(0,0,0) scale(1.075)}
  52%{opacity:.12;transform:translate3d(0,0,0) scale(1.015)}
  70%{opacity:.30;transform:translate3d(0,0,0) scale(1.08)}
  84%{opacity:.62;transform:translate3d(0,0,0) scale(1.22)}
  100%{opacity:.28;transform:translate3d(0,0,0) scale(1.13)}
}
@keyframes motionLandingSunHaloBreath{
  0%{opacity:.025;transform:translate3d(0,0,0) scale(.94)}
  16%{opacity:.08;transform:translate3d(0,0,0) scale(.99)}
  34%{opacity:.19;transform:translate3d(0,0,0) scale(1.08)}
  52%{opacity:.07;transform:translate3d(0,0,0) scale(1.01)}
  70%{opacity:.20;transform:translate3d(0,0,0) scale(1.10)}
  84%{opacity:.46;transform:translate3d(0,0,0) scale(1.32)}
  100%{opacity:.20;transform:translate3d(0,0,0) scale(1.18)}
}
@keyframes motionLandingCanvas{
  0%{opacity:0;filter:saturate(.82) brightness(.74)}
  100%{opacity:1;filter:none}
}
@keyframes motionLandingGrid{
  0%{opacity:0;transform:perspective(300px) rotateX(58deg) translateY(74px) scaleY(.78)}
  100%{opacity:.38;transform:perspective(300px) rotateX(58deg) translateY(0) scaleY(1)}
}
@keyframes motionLandingSun{
  0%{opacity:0;transform:translate3d(34px,-22px,0) scale(.58);filter:blur(16px)}
  66%{opacity:.88;filter:blur(1px)}
  100%{opacity:.8;transform:none;filter:none}
}
@keyframes motionLandingCopy{
  0%{opacity:0;transform:translate3d(30px,-18px,0) scale(.94);filter:blur(8px)}
  68%{opacity:1;transform:translate3d(-1px,1px,0) scale(1.006);filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes motionLandingVice{
  0%{opacity:0;transform:translate3d(26px,-14px,0) rotate(-5deg) scale(.94);filter:blur(5px)}
  68%{opacity:1;transform:translate3d(-1px,1px,0) rotate(-2.6deg) scale(1.008);filter:blur(0)}
  100%{opacity:1;transform:rotate(-3deg) scale(1);filter:none}
}
@keyframes motionLandingLead{
  0%{opacity:0;transform:translate3d(20px,-10px,0);filter:blur(4px)}
  100%{opacity:1;transform:none;filter: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{
  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}
@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}}
.moment-clandestine-unlock{animation:motionClandestineUnlock .72s var(--motion-ease) both!important}
@keyframes motionClandestineUnlock{0%{opacity:0;transform:translateY(8px) scale(.985)}58%{opacity:1;transform:translateY(-1px) scale(1.006)}100%{opacity:1;transform:none}}

/* 4. El Golpe GPS uses the persistent director surface; no expandable detail choreography. */

/* 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}
/* The directory refreshes immediately after opening. Animate the stable list shell,
   never each player row: per-card stagger caused freshly fetched rows to replay
   their entrance while the dialog motion was still active. */
.crew-browser-dialog.motion-dialog-enter .crew-member-list{animation:motionCrewListIn .30s .055s var(--motion-ease) both}
@keyframes motionSurfaceEnter{from{opacity:.45;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
@keyframes motionCrewListIn{from{opacity:.72;transform:translateY(4px)}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__identity,
#crewProfilePanel.motion-profile-enter .crew-social-profile,
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__metrics--live{animation:motionProfileContent .42s var(--motion-ease) both}
#crewProfilePanel.motion-profile-enter .crew-social-profile{animation-delay:.05s}
#crewProfilePanel.motion-profile-enter .crew-profile-sheet__metrics--live{animation-delay:.10s}
@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 h1,
  body.motion-first-entry .hero--intro .vice,
  body.motion-first-entry .hero--intro .hero__lead,
  body.motion-first-entry .hero--intro .hero__sun,
  .operation-stage.motion-stage-open .operation-stage__panel>*,
  .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}
}


/* 10. v24.06 · Continuous landing -> staged invitation activation -----------------
   No second hero is introduced. The full-screen cover becomes the compact invitation
   banner by animating the real page geometry to the exact base-layout endpoint. */
body.motion-invite-entering{overflow:hidden!important;}
body.motion-invite-entering #home.hero--transitioning{
  position:relative;z-index:40;isolation:isolate;overflow:hidden!important;
  will-change:min-height,padding,border-radius,box-shadow;
  transition:min-height .98s var(--motion-ease),padding .98s var(--motion-ease),border-radius .88s var(--motion-ease),box-shadow .88s ease!important;
}
body.motion-invite-entering main{
  transition:width .98s var(--motion-ease),margin .98s var(--motion-ease),gap .88s var(--motion-ease)!important;
}
body.motion-invite-entering.motion-invite-shell-final main{
  width:calc(100% - 24px)!important;
  margin:10px auto 36px!important;
  gap:18px!important;
}
body.motion-invite-entering.motion-invite-shell-final #home.hero--transitioning{
  width:100%!important;
  min-height:330px!important;
  margin:0!important;
  padding:30px 22px!important;
  border-radius:22px!important;
  box-shadow:0 8px 28px rgba(40,24,35,.055)!important;
}

/* Brand copy never swaps or jumps; it stays centered in both geometries. */
body.motion-invite-entering #home.hero--transitioning .hero__content{
  width:min(100%,760px)!important;max-width:760px!important;margin:auto!important;text-align:center!important;
  opacity:1!important;transform:none!important;filter:none!important;
}
body.motion-invite-entering #home.hero--transitioning .hero__lead{margin-left:auto!important;margin-right:auto!important;}

/* Sun and grid travel to the exact brand-banner endpoint. */
body.motion-invite-entering #home.hero--transitioning .hero__sun{
  z-index:1;will-change:transform,filter,opacity,width,height,right,top;
  transition:width .98s var(--motion-ease),height .98s var(--motion-ease),right .98s var(--motion-ease),top .98s var(--motion-ease),opacity .76s ease!important;
}
body.motion-invite-entering #home.hero--transitioning .hero__grid{
  will-change:height,bottom,opacity;
  transition:height .98s var(--motion-ease),bottom .98s var(--motion-ease),opacity .76s ease!important;
}
body.motion-invite-entering.motion-invite-shell-final #home.hero--transitioning .hero__sun{
  width:220px!important;height:220px!important;right:-72px!important;top:24px!important;opacity:.88!important;
}
body.motion-invite-entering.motion-invite-shell-final #home.hero--transitioning .hero__grid{
  height:300px!important;bottom:-118px!important;opacity:1!important;
}
/* Sun handoff light continues from the landing pulse while the shell contracts.
   Do not start a second sun animation here: restarting transform was the source of the
   visible hitch between landing and invitation. */
body.motion-invite-entering #home.hero--transitioning .hero__sun::before,
body.motion-invite-entering #home.hero--transitioning .hero__sun::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;
}

/* HUD stays in normal document flow. First its physical slot unfolds while the hero is
   finishing; then the two HUD anchors enter from their own corners. No fixed-position
   handoff and no post-animation correction are allowed. */
body.motion-invite-entering .hud:not([hidden]){
  min-height:0!important;max-height:0!important;margin-top:0!important;
  padding-top:0!important;padding-bottom:0!important;border-top-width:0!important;border-bottom-width:0!important;
  opacity:0;overflow:hidden!important;transform:translateY(-8px);
  transition:min-height .60s var(--motion-ease),max-height .60s var(--motion-ease),margin-top .60s var(--motion-ease),padding .60s var(--motion-ease),border-width .60s var(--motion-ease),opacity .28s ease,transform .52s var(--motion-ease)!important;
}
body.motion-invite-entering .hud:not([hidden]) .hud__wanted-zone,
body.motion-invite-entering .hud:not([hidden]) .hud__menu{
  opacity:0;filter:blur(2px);will-change:transform,opacity,filter;
  transition:opacity .34s ease,transform .46s var(--motion-ease),filter .30s ease!important;
}
body.motion-invite-entering .hud:not([hidden]) .hud__wanted-zone{transform:translate3d(-14px,-8px,0);}
body.motion-invite-entering .hud:not([hidden]) .hud__menu{transform:translate3d(14px,-8px,0);}
body.motion-invite-entering .hud:not([hidden])::before{
  content:'';position:absolute;z-index:4;inset:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(102deg,transparent 0%,transparent 40%,rgba(255,255,255,.16) 49%,rgba(255,137,201,.16) 53%,transparent 62%,transparent 100%);
  opacity:0;transform:translate3d(-115%,0,0);
}
body.motion-invite-entering.motion-invite-hud-ready .hud:not([hidden]){
  min-height:58px!important;max-height:140px!important;margin-top:8px!important;
  padding-top:9px!important;padding-bottom:9px!important;border-top-width:1px!important;border-bottom-width:1px!important;
  opacity:1;transform:none;
}
body.motion-invite-entering.motion-invite-hud-ready .hud:not([hidden]) .hud__wanted-zone{
  opacity:1;transform:none;filter:none;transition-delay:.055s!important;
}
body.motion-invite-entering.motion-invite-hud-ready .hud:not([hidden]) .hud__menu{
  opacity:1;transform:none;filter:none;transition-delay:.105s!important;
}
body.motion-invite-entering.motion-invite-hud-ready .hud:not([hidden])::before{
  animation:motionHudOnlineSweep .48s .11s ease-out both;
}
@keyframes motionHudOnlineSweep{
  0%{opacity:0;transform:translate3d(-115%,0,0)}
  20%{opacity:.42}
  100%{opacity:0;transform:translate3d(115%,0,0)}
}

/* Operation 30 is the second layer: it emerges from under the settled hero just after
   HUD activation. The whole hydrated surface moves as one scene, not as card-by-card UI. */
body.motion-invite-entering #missionFlow.mission-flow--entering{
  position:relative;z-index:20;width:100%!important;margin:0!important;
  opacity:0!important;transform:translate3d(0,26px,0) scale(.996)!important;filter:blur(3px)!important;
  transition:opacity .46s ease,transform .68s var(--motion-ease),filter .42s ease!important;pointer-events:none!important;
}
body.motion-invite-entering #missionFlow.mission-flow--entering>*{opacity:1!important;transform:none!important;filter:none!important;}
body.motion-invite-entering.motion-invite-flow-ready #missionFlow.mission-flow--entering.mission-flow--visible{
  opacity:1!important;transform:none!important;filter:none!important;pointer-events:auto!important;
}

@media(prefers-reduced-motion:reduce){
  body.motion-first-entry .hero--intro,
  body.motion-first-entry .hero--intro .hero__grid,
  body.motion-first-entry .hero--intro .hero__sun,
  body.motion-first-entry .hero--intro h1,
  body.motion-first-entry .hero--intro .vice,
  body.motion-first-entry .hero--intro .hero__lead,
  body.motion-invite-entering .hud,
  body.motion-invite-entering main,
  body.motion-invite-entering .hero,
  body.motion-invite-entering .hero *,
  body.motion-invite-entering #missionFlow>*{animation:none!important;transition:none!important;}
  body.motion-invite-entering{overflow:auto!important;}
}