/* =====================================================================
   Layered campus scene — used on the login/auth pages and the public hero.
   Pure CSS + inline SVG. Motion is slow, looping and parallax-light;
   see assets/js/scene.js for the pointer/scroll parallax and fireflies.
   ===================================================================== */

.scene {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  background: linear-gradient(180deg, #06201d 0%, #0a2e29 55%, #0e3a33 100%);
}

.scene-art { position: absolute; inset: 0; }
.lyr { position: absolute; inset: -6%; width: 112%; height: 112%; will-change: transform; }
.lyr svg { width: 100%; height: 100%; display: block; }
.lyr[data-depth] { animation: sceneIdle var(--idle, 30s) ease-in-out infinite; }

@keyframes sceneIdle { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -0.6%, 0); } }

/* Stars, dimmed automatically once .scene-shade brightens for daylight variants */
.scene-stars { position: absolute; inset: 0; overflow: hidden; }
.scene-stars i {
  position: absolute; width: var(--sz); height: var(--sz); border-radius: 50%;
  background: #fff; opacity: 0; animation: twinkle var(--tw) ease-in-out var(--dl) infinite;
  box-shadow: 0 0 6px rgba(255, 255, 255, .8);
}
@keyframes twinkle { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }

/* Sun / rings / geometric shapes drifting in the sky */
.halo { animation: breathe 7s ease-in-out infinite; transform-origin: 770px 300px; }
.ring { transform-origin: 770px 300px; }
.ring.r1 { animation: spin 60s linear infinite; }
.ring.r2 { animation: spin 90s linear infinite reverse; }
.ring.r3 { animation: spin 130s linear infinite; }
@keyframes breathe { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes spin { to { transform: rotate(360deg); } }

.geo { transform-box: fill-box; transform-origin: center; }
.geo.g1 { animation: floatY 8s ease-in-out infinite; }
.geo.g2 { animation: floatY 10s ease-in-out infinite 1.2s; }
.geo.g3 { animation: floatY 7s ease-in-out infinite .6s; }
.geo.g4 { animation: floatY 9s ease-in-out infinite 2s; }
@keyframes floatY { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(8deg); } }

/* Light-beam rays: additive so they only ever brighten */
.lyr-rays { mix-blend-mode: screen; opacity: .8; }
.ray { transform-box: fill-box; transform-origin: 50% 0%; animation: swayRay 12s ease-in-out infinite; opacity: .55; }
.ray.a { animation-delay: 0s; }
.ray.b { animation-delay: -3s; }
.ray.c { animation-delay: -6s; }
.ray.d { animation-delay: -9s; }
@keyframes swayRay { 0%, 100% { transform: rotate(-1.2deg); opacity: .4; } 50% { transform: rotate(1.4deg); opacity: .62; } }

/* Building glow: window lights and lamp halos gently pulse, out of phase */
.lit { animation: glow 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lit.l1 { animation-duration: 4.5s; }
.lit.l2 { animation-duration: 6.2s; animation-delay: -2s; }
@keyframes glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.win { transition: opacity .6s ease; }
.win.off { opacity: .28; }
.win.w3, .win.w5, .win.w9 { animation: flicker 9s steps(1, end) infinite; }
@keyframes flicker { 0%, 39%, 42%, 100% { opacity: .28; } 40%, 41% { opacity: .9; } }

.flag { transform-box: fill-box; transform-origin: 0% 50%; animation: wave 3.4s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: skewY(0deg) scaleX(1); } 50% { transform: skewY(4deg) scaleX(.96); } }

.hand-min { transform-box: fill-box; transform-origin: 500px 436px; animation: tick 120s linear infinite; }
@keyframes tick { to { transform: rotate(360deg); } }

.tree { transform-box: fill-box; transform-origin: 50% 100%; animation: sway var(--s, 8s) ease-in-out var(--d, 0s) infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-0.6deg); } 50% { transform: rotate(0.6deg); } }

/* Floating chips (school-themed icons) with soft depth shadow */
.chip-ico {
  position: absolute; width: var(--sz); height: var(--sz); border-radius: 16px;
  display: grid; place-items: center; color: #ffe6ab; font-size: calc(var(--sz) * .4);
  background: rgba(255, 214, 128, .10); border: 1px solid rgba(255, 226, 160, .18);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12);
  animation: chipFloat var(--t, 9s) ease-in-out var(--dl, 0s) infinite;
}
.chip-ico.is-back { opacity: .55; filter: blur(.3px); background: rgba(255, 214, 128, .06); }
@keyframes chipFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(-4deg); } }

/* Fireflies injected by scene.js */
.lyr-flies { pointer-events: none; }
.firefly {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #ffe9a8;
  box-shadow: 0 0 8px 2px rgba(255, 214, 100, .8);
  animation: flyDrift var(--fd, 14s) ease-in-out infinite, flyBlink var(--fb, 3.2s) ease-in-out infinite;
}
@keyframes flyDrift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(var(--x1, 30px), var(--y1, -22px)); }
  50% { transform: translate(var(--x2, -18px), var(--y2, -40px)); }
  75% { transform: translate(var(--x3, 22px), var(--y3, -14px)); }
  100% { transform: translate(0, 0); }
}
@keyframes flyBlink { 0%, 100% { opacity: .1; } 50% { opacity: .95; } }

/* Vignette so text placed over the scene stays legible; keeps the art itself uncovered */
.scene-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4, 16, 15, .05) 0%, rgba(4, 16, 15, .05) 55%, rgba(4, 16, 15, .55) 100%),
    radial-gradient(140% 90% at 50% 100%, rgba(4, 16, 15, .35), transparent 60%);
  pointer-events: none;
}

/* Reduced motion: freeze everything, keep the still illustration */
@media (prefers-reduced-motion: reduce) {
  .lyr, .halo, .ring, .geo, .lit, .win.w3, .win.w5, .win.w9, .flag, .hand-min, .tree, .chip-ico, .ray, .scene-stars i, .firefly {
    animation: none !important;
  }
  .scene-stars i { opacity: .5; }
  .lit { opacity: .8; }
}

@media (max-width: 767.98px) {
  .chip-ico { display: none; }
  .chip-ico:nth-of-type(-n+2) { display: grid; }
}