/* Ports of res/anim/*.xml. Transform + opacity only, so the compositor handles it. */

/* content_slide_in_right (400ms) / content_slide_out_left (300ms) */
.screen-enter-active { animation: macSlideInRight 400ms var(--ease-standard) both; }
.screen-leave-active { animation: macSlideOutLeft  300ms var(--ease-accelerate) both;
                       position:absolute; inset:0; }
.screen-back-enter-active { animation: macSlideInLeft  400ms var(--ease-standard) both; }
.screen-back-leave-active { animation: macSlideOutRight 300ms var(--ease-accelerate) both;
                            position:absolute; inset:0; }

@keyframes macSlideInRight {
  from { transform: translateX(100%) scale(.95); opacity: 0; }
  75%  { opacity: 1; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes macSlideOutLeft {
  from { transform: translateX(0) scale(1); opacity: 1; }
  83%  { opacity: 0; }
  to   { transform: translateX(-100%) scale(.9); opacity: 0; }
}
@keyframes macSlideInLeft {
  from { transform: translateX(-100%) scale(.95); opacity: 0; }
  75%  { opacity: 1; }
  to   { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes macSlideOutRight {
  from { transform: translateX(0) scale(1); opacity: 1; }
  83%  { opacity: 0; }
  to   { transform: translateX(100%) scale(.9); opacity: 0; }
}

/* row_slide_in_3b — menu rows, 40ms stagger applied inline as --i */
.mac-row-in {
  animation: macRowIn 300ms var(--ease-decelerate) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes macRowIn {
  from { transform: translateX(-12%); opacity: 0; }
  73%  { opacity: 1; }
  to   { transform: translateX(0); opacity: 1; }
}

/* tile_scale_in_3b — most-used tiles, 40ms stagger */
.mac-tile-in {
  animation: macTileIn 340ms var(--ease-decelerate) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes macTileIn {
  from { transform: scale(.93) translateY(14%); opacity: 0; }
  70%  { opacity: 1; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* fade_scale_in — list items */
.mac-fade-in {
  animation: macFadeIn 300ms var(--ease-decelerate) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes macFadeIn {
  from { transform: scale(1.06); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* shimmer_animation — skeletons */
.mac-skeleton {
  background: linear-gradient(90deg, var(--gray-bg) 25%,
              rgba(255,255,255,.35) 50%, var(--gray-bg) 75%);
  background-size: 200% 100%;
  animation: macShimmer 1.2s linear infinite;
  border-radius: 6px;
}
@keyframes macShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* shake_error — wrong password */
.mac-shake { animation: macShake 400ms var(--ease-standard) both; }
@keyframes macShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-9px); } 40% { transform: translateX(9px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}

/* login_logo_bounce */
.mac-logo-bounce { animation: macLogoBounce 700ms var(--ease-decelerate) both; }
@keyframes macLogoBounce {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Material touch ripple */
.mac-ripple { position: relative; overflow: hidden; }
.mac-ripple > .mac-ripple-ink {
  position: absolute; border-radius: 50%; transform: scale(0);
  background: currentColor; opacity: .18; pointer-events: none;
  animation: macInk 550ms var(--ease-decelerate) forwards;
}
@keyframes macInk { to { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .screen-enter-active, .screen-leave-active,
  .screen-back-enter-active, .screen-back-leave-active,
  .mac-row-in, .mac-tile-in, .mac-fade-in, .mac-shake, .mac-logo-bounce {
    animation: macFade 120ms linear both !important;
  }
  .mac-skeleton { animation: none; }
}
@keyframes macFade { from { opacity: 0; } to { opacity: 1; } }