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

:root{
  /* v24.145 · one motion language across the whole experience */
  --motion-micro:160ms;
  --motion-component:280ms;
  --motion-scene:520ms;
  --motion-fast:var(--motion-micro);
  --motion-ui:var(--motion-component);
  --motion-panel:var(--motion-scene);
  --motion-ease:cubic-bezier(.2,.78,.2,1);
  --motion-spring:cubic-bezier(.22,.9,.28,1.12);
}

/* 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: ONE cinematic brand assembly used by Invitados and El Golpe.
   Same keyframes, durations and delays. El Golpe only varies the artwork/copy.
   Palette and palms live in styles.css; do not add a separate heist timeline. */
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.hero--intro){animation:motionLandingCanvas .62s cubic-bezier(.18,.78,.2,1) both;}
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.hero--intro) .hero__grid{animation:motionLandingGrid .95s .34s cubic-bezier(.2,.82,.2,1) both;}
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.hero--intro) .hero__sun{animation:motionLandingSun .92s 1.04s cubic-bezier(.2,.82,.2,1) both;}
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.hero--intro) h1{animation:motionLandingCopy .76s 1.78s var(--motion-ease) both;}
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.hero--intro) .vice{animation:motionLandingVice .66s 2.05s var(--motion-spring) both;}
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.hero--intro) .hero__lead{animation:motionLandingLead .58s 2.34s var(--motion-ease) both;}

/* Returning entries reuse the SAME shortened Invitados sequence. */
:is(body.motion-first-entry.motion-returning-entry #home.hero--intro,body.motion-first-entry.motion-returning-entry #partyHome.hero--intro){animation:motionLandingCanvas .38s cubic-bezier(.18,.78,.2,1) both;}
:is(body.motion-first-entry.motion-returning-entry #home.hero--intro,body.motion-first-entry.motion-returning-entry #partyHome.hero--intro) .hero__grid{animation:motionLandingGrid .55s .18s cubic-bezier(.2,.82,.2,1) both;}
:is(body.motion-first-entry.motion-returning-entry #home.hero--intro,body.motion-first-entry.motion-returning-entry #partyHome.hero--intro) .hero__sun{animation:motionLandingSun .55s .55s cubic-bezier(.2,.82,.2,1) both;}
:is(body.motion-first-entry.motion-returning-entry #home.hero--intro,body.motion-first-entry.motion-returning-entry #partyHome.hero--intro) h1{animation:motionLandingCopy .45s .95s var(--motion-ease) both;}
:is(body.motion-first-entry.motion-returning-entry #home.hero--intro,body.motion-first-entry.motion-returning-entry #partyHome.hero--intro) .vice{animation:motionLandingVice .42s 1.10s var(--motion-spring) both;}
:is(body.motion-first-entry.motion-returning-entry #home.hero--intro,body.motion-first-entry.motion-returning-entry #partyHome.hero--intro) .hero__lead{animation:motionLandingLead .36s 1.24s var(--motion-ease) both;}

/* v24.125 · Return from Clandestinas: do not replay the full brand assembly.
   The landing is already recognizable on frame one and only settles briefly before
   the normal hero -> invitation handoff. This removes dead time without running the
   original choreography at an unnatural speed. */
body.motion-first-entry.motion-clandestine-return-entry .hero--intro{animation:motionClandestineReturnSettle .24s cubic-bezier(.2,.82,.2,1) both;}
body.motion-first-entry.motion-clandestine-return-entry .hero--intro .hero__grid,
body.motion-first-entry.motion-clandestine-return-entry .hero--intro .hero__sun,
body.motion-first-entry.motion-clandestine-return-entry .hero--intro h1,
body.motion-first-entry.motion-clandestine-return-entry .hero--intro .vice,
body.motion-first-entry.motion-clandestine-return-entry .hero--intro .hero__lead{animation:none!important;opacity:1;filter:none;}
@keyframes motionClandestineReturnSettle{
  from{opacity:.88;transform:translate3d(0,5px,0) scale(.997)}
  to{opacity:1;transform:none}
}

/* 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. */
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.hero--intro) .hero__sun::before,
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.hero--intro) .hero__sun::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;opacity:0;
  transform-origin:50% 50%;will-change:transform,opacity;
}
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.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);
}
:is(body.motion-first-entry #home.hero--intro,body.motion-first-entry #partyHome.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);
}
:is(body.motion-landing-handoff #home,body.motion-landing-handoff #partyHome.hero--intro) .hero__sun{
  transform-origin:50% 50%;will-change:transform;
  animation:motionLandingSunBreath .90s cubic-bezier(.37,0,.63,1) both;
}
:is(body.motion-landing-handoff #home,body.motion-landing-handoff #partyHome.hero--intro) .hero__sun::before{
  animation:motionLandingSunGlowBreath .90s cubic-bezier(.37,0,.63,1) both;
}
:is(body.motion-landing-handoff #home,body.motion-landing-handoff #partyHome.hero--intro) .hero__sun::after{
  animation:motionLandingSunHaloBreath .90s cubic-bezier(.37,0,.63,1) both;
}
:is(body.motion-first-entry.motion-returning-entry.motion-landing-handoff #home,body.motion-first-entry.motion-returning-entry.motion-landing-handoff #partyHome.hero--intro) .hero__sun,
:is(body.motion-first-entry.motion-returning-entry.motion-landing-handoff #home,body.motion-first-entry.motion-returning-entry.motion-landing-handoff #partyHome.hero--intro) .hero__sun::before,
:is(body.motion-first-entry.motion-returning-entry.motion-landing-handoff #home,body.motion-first-entry.motion-returning-entry.motion-landing-handoff #partyHome.hero--intro) .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}
}
/* INVITE-MICROMOTION-007 · A single brief neon ignition after the existing
   Invitados wordmark entrance. Not used on El Golpe or abbreviated return. */
body.motion-first-entry:not(.motion-returning-entry):not(.motion-clandestine-return-entry)
  #home.hero--intro :is(.vice__gta,.vice__birthday){
  animation:inviteNeonIgnition .72s ease-out 2.66s both;
}
@keyframes inviteNeonIgnition{
  0%,18%{opacity:1;text-shadow:0 0 0 rgba(255,140,204,0)}
  28%{opacity:.89;text-shadow:0 0 3px rgba(255,140,204,.20)}
  40%{opacity:1;text-shadow:0 0 14px rgba(255,140,204,.56)}
  52%{opacity:.93;text-shadow:0 0 6px rgba(255,140,204,.28)}
  100%{opacity:1;text-shadow:0 0 9px rgba(255,140,204,.27)}
}

@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:var(--motion-component)!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 var(--motion-component) 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 var(--motion-scene) var(--motion-spring) both!important}
.moment-next{animation:motionPhaseNext var(--motion-scene) 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}}
/* Refine the EXISTING progression moments only in Invitados; don't replay on
   initialization, nor change the shared 'moment-next' on other components. */
#operation30 .operation-stage__marker.moment-check{
  animation:inviteStageComplete .66s var(--motion-spring) both!important;
}
#operation30 .operation-stage__toggle.moment-next{
  animation:inviteStageReady .95s var(--motion-ease) both!important;
}
@keyframes inviteStageComplete{
  0%{transform:scale(.94);box-shadow:0 0 0 0 rgba(46,139,87,0)}
  45%{transform:scale(1.08);box-shadow:0 0 0 5px rgba(46,139,87,.18)}
  100%{transform:none;box-shadow:0 0 0 0 rgba(46,139,87,0)}
}
@keyframes inviteStageReady{
  0%{box-shadow:0 0 0 0 rgba(236,92,166,0)}
  42%{box-shadow:inset 0 0 0 1px rgba(236,92,166,.16),0 0 0 3px rgba(236,92,166,.12)}
  100%{box-shadow:0 0 0 0 rgba(236,92,166,0)}
}
@media(prefers-reduced-motion:reduce){
  body.motion-first-entry #home.hero--intro :is(.vice__gta,.vice__birthday),
  #operation30 .operation-stage__marker.moment-check,
  #operation30 .operation-stage__toggle.moment-next{animation:none!important}
}

.moment-clandestine-unlock{animation:motionClandestineUnlock var(--motion-scene) 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 var(--motion-component) 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 var(--motion-component) .04s 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 var(--motion-scene) 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 var(--motion-component) 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 var(--motion-component) 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: shared-card transition --------------------------
   The access card is the spatial origin of the hub. arcade.js owns the geometry;
   this file only supplies the hub-content settle once the morph reaches fullscreen. */
.clandestine-dialog.motion-dialog-enter .clandestine-hub-head{animation:motionClandestineHead var(--motion-component) .02s var(--motion-ease) both}
.clandestine-dialog.motion-dialog-enter .clandestine-top-status{animation:motionClandestineHead var(--motion-component) .07s var(--motion-ease) both}
.clandestine-dialog.motion-dialog-enter .clandestine-games{animation:motionClandestineGames var(--motion-scene) .12s var(--motion-ease) both}
@keyframes motionClandestineHead{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes motionClandestineGames{from{opacity:0;transform:translateY(10px) scale(.993)}to{opacity:1;transform:none}}

.clandestine-game.motion-launch{animation:motionGameLaunch var(--motion-component) 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 var(--motion-component) var(--motion-spring) both}
.operation-result.motion-result-enter .operation-result__score{animation:motionResultScore var(--motion-component) .05s var(--motion-ease) both}
.operation-result.motion-result-enter>h3{animation:motionResultItem var(--motion-component) .12s var(--motion-ease) both}
.operation-result.motion-result-enter .operation-result__message,
.operation-result.motion-result-enter .arcade-result-prize{animation:motionResultItem var(--motion-component) .17s var(--motion-ease) both}
.operation-result.motion-result-enter .arcade-result-actions{animation:motionResultItem var(--motion-component) .23s 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}}

/* El Golpe shares the Invitados motion sequence; no separate heist panel keyframes. */
@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}
}


/* 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 :is(#home,#partyHome).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 :is(main,.party-mode__shell){
  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:var(--operation-layout-gap)!important;
}
body.motion-invite-entering.motion-invite-shell-final .party-mode__shell{
  width:calc(100% - 24px)!important;
  margin:0 auto!important;
  gap:var(--operation-layout-gap)!important;
}
body.motion-invite-entering.motion-invite-shell-final :is(#home,#partyHome).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 :is(#home,#partyHome).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 :is(#home,#partyHome).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 :is(#home,#partyHome).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 :is(#home,#partyHome).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 :is(#home,#partyHome).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 :is(#home,#partyHome).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 :is(#home,#partyHome).hero--transitioning .hero__sun::before,
body.motion-invite-entering :is(#home,#partyHome).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 :is(#missionFlow,#partyDashboard).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 :is(#missionFlow,#partyDashboard).mission-flow--entering>*{opacity:1!important;transform:none!important;filter:none!important;}
body.motion-invite-entering.motion-invite-flow-ready :is(#missionFlow,#partyDashboard).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-first-entry #partyHome.hero--intro,
  body.motion-first-entry #partyHome.hero--intro .hero__sun,
  body.motion-first-entry #partyHome.hero--intro .hero__grid,
  body.motion-first-entry #partyHome.hero--intro h1,
  body.motion-first-entry #partyHome.hero--intro .vice,
  #heistTransition.motion-first-entry .heist-transition__palms,
  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;}
}



/* 11. v24.145 · Motion coherence pass ---------------------------------------
   Three speeds only: micro (feedback), component (UI change), scene (context).
   These overrides intentionally avoid decorative perpetual motion. */

/* Shared sheets: same opening/closing grammar everywhere. */
@media(max-width:720px){
  .app-surface:not(.is-dragging){
    transition:transform var(--motion-component) var(--motion-ease),opacity var(--motion-micro) ease!important;
  }
}
.arcade-hub-sheet__backdrop{
  transition:opacity var(--motion-component) ease,backdrop-filter var(--motion-component) ease!important;
}
.arcade-hub-sheet__panel:not(.is-dragging){
  transition:transform var(--motion-component) var(--motion-ease),opacity var(--motion-micro) ease!important;
}
.arcade-social-tabs::before,
.arcade-social-track{
  transition-duration:var(--motion-component)!important;
  transition-timing-function:var(--motion-ease)!important;
}
.arcade-hub-sheet.motion-sheet-enter .arcade-hub-sheet__header,
.arcade-hub-sheet.motion-sheet-enter .arcade-social-tabs,
.arcade-hub-sheet.motion-sheet-enter .arcade-hub-sheet__body,
.arcade-hub-sheet.motion-sheet-enter .arcade-social-main{
  animation:motionSheetContentIn var(--motion-component) var(--motion-ease) both;
}
.arcade-hub-sheet.motion-sheet-enter .arcade-social-tabs{animation-delay:35ms}
.arcade-hub-sheet.motion-sheet-enter .arcade-hub-sheet__body,
.arcade-hub-sheet.motion-sheet-enter .arcade-social-main{animation-delay:65ms}
@keyframes motionSheetContentIn{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Director/GPS: copy changes settle instead of popping. */
#operationDirector.motion-director-change #operationDirectorTitle,
#operationDirector.motion-director-change #operationDirectorText{
  animation:motionDirectorCopy var(--motion-component) var(--motion-ease) both;
}
#operationDirector.motion-director-change #operationDirectorText{animation-delay:35ms}
@keyframes motionDirectorCopy{
  0%{opacity:.28;transform:translateY(4px)}
  100%{opacity:1;transform:none}
}

/* Social view content: the horizontal swipe is the primary motion; content only settles. */
.arcade-social-slide.motion-social-view-enter>*{
  animation:motionSocialViewContent var(--motion-component) var(--motion-ease) both;
}
@keyframes motionSocialViewContent{from{opacity:.62;transform:translateY(3px)}to{opacity:1;transform:none}}
.arcade-social-ranking.motion-ranking-settle .arcade-rank-row{
  animation:motionRankingRow var(--motion-component) var(--motion-ease) both;
}
.arcade-social-ranking.motion-ranking-settle .arcade-rank-row:nth-child(2){animation-delay:20ms}
.arcade-social-ranking.motion-ranking-settle .arcade-rank-row:nth-child(3){animation-delay:40ms}
.arcade-social-ranking.motion-ranking-settle .arcade-rank-row:nth-child(n+4){animation-delay:60ms}
@keyframes motionRankingRow{from{opacity:.55;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Chat: realtime should feel alive, never jumpy. */
.game-chat-message.motion-chat-message-in{animation:motionChatMessageIn var(--motion-component) var(--motion-ease) both}
.game-chat-message.is-own.motion-chat-message-in{transform-origin:right bottom}
@keyframes motionChatMessageIn{
  0%{opacity:0;transform:translateY(7px) scale(.985)}
  100%{opacity:1;transform:none}
}
.game-chat-reaction-chip.motion-reaction-pop{animation:motionReactionPop var(--motion-micro) var(--motion-spring) both}
@keyframes motionReactionPop{0%{transform:scale(.82);opacity:.55}75%{transform:scale(1.07);opacity:1}100%{transform:none}}
.game-chat-message.motion-chat-message-out{animation:motionChatMessageOut var(--motion-micro) ease both}
@keyframes motionChatMessageOut{to{opacity:0;transform:translateY(-3px) scale(.985);max-height:0;margin-bottom:0}}

/* Result -> social handoff: let the destination content arrive after the sheet shell. */
.arcade-hub-sheet.motion-result-social-handoff .arcade-social-main{
  animation:motionResultSocialHandoff var(--motion-component) 55ms var(--motion-ease) both;
}
@keyframes motionResultSocialHandoff{from{opacity:.35;transform:translateY(7px)}to{opacity:1;transform:none}}

/* Admin is an operational console: no page-level choreography. */



@media(prefers-reduced-motion:reduce){
  .arcade-hub-sheet.motion-sheet-enter *,
  #operationDirector.motion-director-change *,
  .arcade-social-slide.motion-social-view-enter>*,
  .arcade-social-ranking.motion-ranking-settle .arcade-rank-row,
  .game-chat-message.motion-chat-message-in,
  .game-chat-reaction-chip.motion-reaction-pop,
  .game-chat-message.motion-chat-message-out,
  .arcade-hub-sheet.motion-result-social-handoff .arcade-social-main{animation:none!important}
}

/* v24.155 · El paisaje acompaña a la portada Invitados; no hay panel secundario. */


/* v24.160 · Exact landing-to-real-hero morph, shared with Invitados.
   El Golpe's #partyHome is the real destination, not an overlay imitation. */
body.motion-heist-landing #partyMode{
  padding:0!important;
  transition:padding .98s var(--motion-ease)!important;
}
body.motion-heist-landing .party-mode__shell{
  width:100%!important;max-width:none!important;margin:0 auto!important;gap:0!important;
}
body.motion-heist-landing #partyHome.hero--intro{
  width:100%!important;min-height:100svh!important;margin:0!important;
  padding:36px 22px!important;border-radius:0!important;box-shadow:none!important;
}
body.motion-heist-landing.motion-invite-shell-final #partyMode{
  padding:10px 0 36px!important;
}
body.motion-heist-landing.motion-invite-shell-final .party-mode__shell{
  width:calc(100% - 24px)!important;max-width:1060px!important;gap:var(--operation-layout-gap)!important;
}
body.motion-heist-landing.motion-invite-shell-final #partyHome.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;
}
/* No parallel transition: the same HUD and dashboard activation apply in both modes. */
/* The dashboard is mounted before motion-invite-entering is applied. Keep that
   initial landing frame covered until the existing reveal is ready. */
body.motion-heist-landing #partyDashboard.mission-flow--entering{
  visibility:hidden;
}
body.motion-heist-landing.motion-invite-flow-ready #partyDashboard.mission-flow--entering.mission-flow--visible{
  visibility:visible;
}
@media(prefers-reduced-motion:reduce){
  body.motion-heist-landing #partyMode,
  body.motion-heist-landing .party-mode__shell,
  body.motion-heist-landing #partyHome{transition:none!important;}
}