/* ==========================================================================
   auth.css — immersive sign-in / register / reset pages
   Loaded via $pageStyles on login.php, register.php, forgot-password.php.

   A full-bleed animated "map" scene sits fixed behind a glass form card. Every
   moving part is CSS only (no images, no JS) and is frozen under
   prefers-reduced-motion. Colours come from the design tokens in style.css, so
   this stays on-brand and needs no new variables.
   ========================================================================== */

.auth-page.auth-immersive {
  --pin:      var(--brand);
  --pin-deep: var(--brand-700);
  background: #0b1c3f;              /* deep navy, the scene paints over it */
}

/* The section wrapper becomes a centring stage that fills the viewport below
   the sticky header. Overflow hidden keeps the 3D objects from spawning a
   scrollbar when they drift past the edges. */
.auth-immersive .section-block {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--header-h, 68px));
  display: grid;
  place-items: center;
  padding-block: var(--sp-10);
  overflow: hidden;
}

.auth-immersive .auth-shell { width: 100%; }

/* --------------------------------------------------------------------------
   The card — frosted glass floating over the scene
   -------------------------------------------------------------------------- */
.auth-immersive .content-card {
  position: relative;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-xl);
  box-shadow:
    0 30px 70px -20px rgba(6, 18, 45, .55),
    0 12px 28px -12px rgba(6, 18, 45, .45),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
          backdrop-filter: blur(22px) saturate(1.3);
  padding: clamp(var(--sp-6), 2vw + 12px, var(--sp-10));
  animation: auth-card-in .7s var(--ease-out) both;
}

/* a soft brand halo hugging the top edge of the card */
.auth-immersive .content-card::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 4px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: linear-gradient(90deg, transparent, var(--brand-400), var(--purple), transparent);
  opacity: .9;
}

.auth-immersive .auth-shell h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--ink) 40%, var(--brand-600));
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-immersive .auth-lede { font-size: var(--fs-md); color: var(--ink-2); }

/* Legal line + "new here?" links sit ON the scene, so lift them to white. */
.auth-immersive .auth-legal,
.auth-immersive .auth-legal a { color: rgba(255, 255, 255, .82); }
.auth-immersive .auth-legal a { text-decoration: underline; }

/* Inputs deliberately inherit the ONE sitewide input component from style.css
   (opaque white, --line-input border, soft inset) so a field on the sign-in
   card is pixel-identical to one on the contact form. No override here. */

/* Primary button inherits the one warm CTA accent from style.css — no colour
   override here, so the "Sign In" / "Create account" buttons match every other
   primary CTA on the site. */

/* ==========================================================================
   THE SCENE
   ========================================================================== */
.auth-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  perspective: 1100px;
  perspective-origin: 50% 38%;
}

/* base colour wash + vignette */
.auth-scene__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% -10%, #1b3a7a 0%, #10265a 42%, #0b1c3f 78%),
    linear-gradient(180deg, rgba(9,22,52,0) 55%, rgba(4,10,26,.75) 100%);
}

/* -------- map floor: a grid plane tilted away to the horizon -------- */
.auth-scene__floor {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 200vw;
  height: 78vh;
  transform: translateX(-50%) rotateX(74deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(70% 80% at 50% 30%, #000 30%, transparent 74%);
          mask-image: radial-gradient(70% 80% at 50% 30%, #000 30%, transparent 74%);
  opacity: .5;
}
.auth-scene__grid {
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(120, 170, 255, .35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 170, 255, .35) 1px, transparent 1px);
  background-size: 58px 58px;
  animation: auth-grid 7s linear infinite;
}

/* -------- radar sweep, echoing the brand mark -------- */
.auth-scene__radar {
  position: absolute;
  top: 46%;
  left: 50%;
  width: min(78vmin, 720px);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .5;
}
.a-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  border: 1px solid rgba(120, 170, 255, .28);
}
.a-ring--1 { width: 34%; height: 34%; }
.a-ring--2 { width: 64%; height: 64%; }
.a-ring--3 { width: 100%; height: 100%; }
.a-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(91, 141, 255, 0) 0deg,
    rgba(91, 141, 255, 0) 300deg,
    rgba(91, 141, 255, .42) 355deg,
    rgba(150, 190, 255, .6) 360deg);
  -webkit-mask: radial-gradient(circle, transparent 8%, #000 9%);
          mask: radial-gradient(circle, transparent 8%, #000 9%);
  animation: auth-spin 6s linear infinite;
}

/* -------- soft drifting orbs -------- */
.a-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: .5;
}
.a-orb--1 { width: 42vmin; height: 42vmin; left: -8vmin;  top: 8vmin;
  background: radial-gradient(circle, rgba(37, 99, 235, .8), transparent 70%);
  animation: auth-drift 20s ease-in-out infinite; }
.a-orb--2 { width: 36vmin; height: 36vmin; right: -6vmin; top: 22vmin;
  background: radial-gradient(circle, rgba(139, 92, 246, .7), transparent 70%);
  animation: auth-drift 26s ease-in-out infinite reverse; }
.a-orb--3 { width: 30vmin; height: 30vmin; left: 30vmin; bottom: -8vmin;
  background: radial-gradient(circle, rgba(16, 185, 129, .5), transparent 70%);
  animation: auth-drift 30s ease-in-out infinite; }

/* -------- floating location pins -------- */
.auth-scene__pins, .auth-scene__tiles { position: absolute; inset: 0; transform-style: preserve-3d; }

.a-pin {
  position: absolute;
  width: 34px;
  height: 34px;
  transform-style: preserve-3d;
  animation: auth-float 7s var(--ease) infinite;
}
/* teardrop head */
.a-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(145deg, var(--brand-400), var(--pin) 55%, var(--pin-deep));
  box-shadow: 0 10px 22px -6px rgba(8, 22, 55, .7), inset 0 2px 3px rgba(255,255,255,.5);
}
/* inner dot */
.a-pin i {
  position: absolute;
  top: 9px; left: 9px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: inset 0 1px 2px rgba(8, 22, 55, .35);
}
/* ground shadow under each pin */
.a-pin::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -12px;
  width: 20px; height: 6px;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(3, 10, 28, .55);
  filter: blur(3px);
  animation: auth-shadow 7s var(--ease) infinite;
}
.a-pin--1 { top: 22%; left: 16%; scale: 1.15;  animation-delay: -.4s; }
.a-pin--2 { top: 62%; left: 24%; scale: .8;    animation-delay: -2.1s; }
.a-pin--3 { top: 30%; left: 80%; scale: 1;     animation-delay: -1.2s; }
.a-pin--4 { top: 70%; left: 72%; scale: .9;    animation-delay: -3.4s; }
.a-pin--5 { top: 14%; left: 54%; scale: .7;    animation-delay: -2.7s; }

/* -------- floating category tiles -------- */
.a-tile {
  position: absolute;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  font-size: 28px;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255,255,255,.95), rgba(226,236,255,.86));
  box-shadow: 0 18px 34px -12px rgba(6, 18, 45, .7), inset 0 1px 0 rgba(255,255,255,.9);
  animation: auth-tile 9s var(--ease) infinite;
}
.a-tile--1 { top: 18%; left: 30%; animation-delay: -.5s; }
.a-tile--2 { top: 40%; left: 12%; animation-delay: -2.6s; scale: .82; }
.a-tile--3 { top: 74%; left: 40%; animation-delay: -1.8s; scale: .9; }
.a-tile--4 { top: 26%; left: 66%; animation-delay: -4.2s; scale: .78; }
.a-tile--5 { top: 58%; left: 84%; animation-delay: -3.1s; }
.a-tile--6 { top: 80%; left: 62%; animation-delay: -1.1s; scale: .84; }

/* -------- points of interest twinkling on the map -------- */
.auth-scene__poi span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(160, 200, 255, .9);
  box-shadow: 0 0 8px 2px rgba(120, 170, 255, .6);
  animation: auth-twinkle 4s ease-in-out infinite;
}
.auth-scene__poi span:nth-child(1) { top: 20%; left: 44%; animation-delay: -.2s; }
.auth-scene__poi span:nth-child(2) { top: 52%; left: 60%; animation-delay: -1.4s; }
.auth-scene__poi span:nth-child(3) { top: 36%; left: 22%; animation-delay: -2.1s; }
.auth-scene__poi span:nth-child(4) { top: 68%; left: 48%; animation-delay: -.9s; }
.auth-scene__poi span:nth-child(5) { top: 28%; left: 88%; animation-delay: -3.0s; }
.auth-scene__poi span:nth-child(6) { top: 78%; left: 30%; animation-delay: -1.9s; }
.auth-scene__poi span:nth-child(7) { top: 46%; left: 74%; animation-delay: -2.6s; }
.auth-scene__poi span:nth-child(8) { top: 12%; left: 68%; animation-delay: -.6s; }

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes auth-grid {
  from { transform: translateY(0); }
  to   { transform: translateY(58px); }
}
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}
@keyframes auth-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(4vmin, -3vmin) scale(1.08); }
}
@keyframes auth-float {
  0%, 100% { transform: translateY(0) translateZ(40px) rotateY(-14deg); }
  50%      { transform: translateY(-18px) translateZ(40px) rotateY(14deg); }
}
@keyframes auth-shadow {
  0%, 100% { opacity: .5; transform: translate(-50%, 0) scale(1); }
  50%      { opacity: .28; transform: translate(-50%, 0) scale(.7); }
}
@keyframes auth-tile {
  0%, 100% { transform: translateY(0) rotateX(12deg) rotateY(-16deg); }
  50%      { transform: translateY(-22px) rotateX(-8deg) rotateY(16deg); }
}
@keyframes auth-twinkle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

/* ==========================================================================
   Smaller screens — keep the card front and centre, calm the scene
   ========================================================================== */
@media (max-width: 640px) {
  .auth-scene__radar { opacity: .32; }
  .a-tile { display: none; }              /* tiles crowd a phone; pins stay */
  .a-pin--2, .a-pin--5 { display: none; }
  .auth-immersive .content-card {
    background: rgba(255, 255, 255, .9);
  }
}

/* ==========================================================================
   Respect reduced-motion — freeze everything into a still composition
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .auth-immersive .content-card,
  .auth-scene *,
  .auth-scene__grid,
  .a-sweep, .a-orb, .a-pin, .a-tile, .auth-scene__poi span {
    animation: none !important;
  }
}

/* ==========================================================================
   If the OS is in dark mode, the frosted card would otherwise wash out —
   nudge it a little darker-glass so text keeps its contrast. Scene already
   suits dark. (The rest of the site is light-only; scope this to auth.)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .auth-immersive .content-card {
    background: rgba(255, 255, 255, .88);
  }
}