/* Focused interaction layer for the international auth card.
   Keeps the surface matte while adding a restrained perspective hover. */

body.ksl .ks-auth-card {
  --auth-rx: 0deg;
  --auth-ry: 0deg;
  transform: rotateX(var(--auth-rx)) rotateY(var(--auth-ry));
  transform-style: preserve-3d;
  will-change: transform;
  transition:
    transform .18s cubic-bezier(.2,.72,.2,1),
    border-color .2s ease,
    box-shadow .2s ease;
}

body.ksl .ks-auth-card:hover {
  border-color: color-mix(in srgb, var(--ksl-line) 62%, var(--ksl-muted));
  box-shadow:
    0 26px 64px rgba(20, 24, 42, .11),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Disable the old cursor-following light on the card itself. */
body.ksl .ks-auth-card::before {
  background: none;
  opacity: 0;
}

body.ksl .ks-auth-card::after {
  background: linear-gradient(
    120deg,
    rgba(255,255,255,.08),
    transparent 24%,
    transparent 76%,
    rgba(255,255,255,.04)
  );
  opacity: .42;
}

html[data-theme="dark"] body.ksl .ks-auth-card:hover {
  box-shadow:
    0 28px 70px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .045);
}

/* Let entrance motion use individual transform properties so hover rotation remains free. */
body.ksl .ks-auth-card {
  animation: ks-auth-card-enter-v2 .62s cubic-bezier(.2,.75,.2,1) both;
}

@keyframes ks-auth-card-enter-v2 {
  from {
    opacity: 0;
    translate: 0 18px;
    scale: .985;
    filter: blur(5px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  body.ksl .ks-auth-card,
  body.ksl .ks-auth-card:hover {
    --auth-rx: 0deg;
    --auth-ry: 0deg;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ksl .ks-auth-card,
  body.ksl .ks-auth-card:hover {
    --auth-rx: 0deg;
    --auth-ry: 0deg;
    transform: none;
    animation: none !important;
    transition: none !important;
  }
}