/* Interactive equirectangular 360° panorama behind the login UI. */
.login-panorama {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #f8fafc;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
}

.login-panorama.is-dragging { cursor: grabbing; }

.login-panorama canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.48;
  filter: saturate(0.62) contrast(0.82) brightness(1.08);
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1), filter 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.panorama-white-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.34) 42%, rgba(248, 250, 252, 0.70)),
    radial-gradient(70% 70% at 50% 46%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.44));
  mix-blend-mode: screen;
  transition: opacity 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ------------------ Colorful 360 transformation on Sign In ----------------- */
.login-panorama.is-colourful canvas,
.is-colourful .login-panorama canvas {
  opacity: 1 !important;
  filter: saturate(1.15) contrast(1.02) brightness(1.02) !important;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.login-panorama.is-colourful .panorama-white-veil,
.is-colourful .panorama-white-veil {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.login-page.is-colourful::before,
.login-page.is-colourful::after,
.login-page.is-colourful .aurora-bg {
  opacity: 0 !important;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.login-page.is-colourful .login-wrap {
  opacity: 0 !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none !important;
}

/* Shimmer particle canvas that radiates outward from the Sign In button */
.shimmer-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 35;
}

/* Hide title and sign in card when tapped 4 times to reveal the admin PIN */
.login-page #loginAnchor.hidden-for-pin {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: translate(-50%, -50%) scale(0.92) !important;
  transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1), transform 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@media (max-width: 720px) {
  .login-panorama canvas { opacity: 0.36; }
  .panorama-white-veil {
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.42) 45%, rgba(248,250,252,.78));
  }
}

/* CSS form controls projected with the same view matrix as the WebGL world. */
.login-world {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

.login-world.is-anchored .login-wrap {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* A composited layer is only needed while the view is actually turned. At rest the
   wrap stays a plain 2D element, so the wordmark and the card rasterise 1:1 and
   read at full quality. */
.login-world.is-anchored.is-turning .login-wrap {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity 200ms ease;
}

/* Sliding out of frame is a fade, never a cut: the form must not blink. */
.login-world.is-anchored .login-wrap.is-out-of-view {
  opacity: 0;
  pointer-events: none;
}

/* The page carries no look-around chrome: the scene is turned by dragging it
   directly, and the form returns home only through the drag itself. */

@media (prefers-reduced-motion: reduce) {
  .login-panorama { cursor: grab; }
}