/* ============================================
   On+ Play — LOGIN MOSAIC BACKGROUND
   Animated grid of posters + BR channel logos
   ============================================ */

#loginScreen .mosaic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #08080F;
}

#loginScreen .mosaic-grid {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  transform: translate(-50%, -50%) rotate(-10deg) scale(1.05);
  transform-origin: center center;
  will-change: transform;
}

#loginScreen .mosaic-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
}

/* Paired up/down columns for parallax depth */
#loginScreen .mosaic-col.up   { animation: onplay-scroll-up   80s linear infinite; }
#loginScreen .mosaic-col.up.fast { animation-duration: 56s; }
#loginScreen .mosaic-col.down { animation: onplay-scroll-down 96s linear infinite; }
#loginScreen .mosaic-col.down.fast { animation-duration: 64s; }

@keyframes onplay-scroll-up {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes onplay-scroll-down {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}

/* Individual tile */
#loginScreen .mosaic-tile {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(135deg, #1F1F2C 0%, #15151D 100%);
  aspect-ratio: 2 / 3;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
#loginScreen .mosaic-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
#loginScreen .mosaic-tile img.loaded { opacity: 1; }

/* Channel logo tile — square with branded gradient */
#loginScreen .mosaic-tile.logo {
  aspect-ratio: 1 / 1;
  background:
    linear-gradient(135deg, rgba(107,45,143,0.55) 0%, rgba(255,138,28,0.30) 100%),
    #181625;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16%;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}
#loginScreen .mosaic-tile.logo img {
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.45)) brightness(1.05);
}

/* Tinted vignette overlay so the form stays readable */
#loginScreen .mosaic-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 55% at 50% 50%, rgba(8,8,15,0.45) 0%, rgba(8,8,15,0.85) 55%, rgba(8,8,15,0.96) 100%),
    linear-gradient(180deg, rgba(8,8,15,0.78) 0%, transparent 22%, transparent 78%, rgba(8,8,15,0.92) 100%),
    radial-gradient(ellipse 50% 45% at 22% 18%,  rgba(139,63,184,0.32) 0%, transparent 60%),
    radial-gradient(ellipse 45% 40% at 82% 88%,  rgba(255,138,28,0.22) 0%, transparent 60%);
}

/* Disable existing blobs from onplay-login (they conflict with mosaic) */
#loginScreen .login-body::before,
#loginScreen .login-body::after {
  display: none !important;
}

/* Disable the static gradient::before from onplay-login (mosaic-bg replaces it) */
#loginScreen::before {
  background: none !important;
}

/* Ensure form sits above the mosaic */
#loginScreen .login-header,
#loginScreen .login-body,
#loginScreen .site-footer,
#loginScreen .error-message {
  position: relative;
  z-index: 3;
}
#loginScreen .login-header { position: fixed !important; }

/* Reduced motion: freeze the mosaic */
@media (prefers-reduced-motion: reduce) {
  #loginScreen .mosaic-col { animation: none !important; }
}

/* Mobile: less aggressive grid */
@media (max-width: 640px) {
  #loginScreen .mosaic-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 140%;
    height: 140%;
  }
  #loginScreen .mosaic-tile { border-radius: 8px; }
}