/* Glue for the outer page only. Apple's own stylesheets do all the real work;
 * this file adds the two things that live outside them: the animated ring
 * artwork behind the card, and the mobile ring position.
 */

/* The ring artwork Apple renders into .landing__rings with lottie at runtime.
 * Same element box, so Apple's sizing/positioning rules apply unchanged. */
.landing__rings {
  will-change: transform;
}

.landing__rings::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(/apple/images/rings.webp);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: rings-drift 26s ease-in-out infinite alternate;
}

@keyframes rings-drift {
  from {
    transform: scale(1) rotate(0deg);
    opacity: 0.92;
  }
  50% {
    transform: scale(1.035) rotate(1.2deg);
    opacity: 1;
  }
  to {
    transform: scale(1.015) rotate(-1deg);
    opacity: 0.95;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing__rings::before {
    animation: none;
  }
}

/* Keep the widget frame from flashing an unstyled block before it lays out. */
#sign-in__auth iframe {
  min-height: 380px;
  border: 0;
}