/* ============================================================
   LOST UTOPIA — Page transition overlay styling

   Two halves of the same beat:
     - Outgoing:  fade from 0 → 1 opacity, slight blur lifting on
                  the page beneath. Label rises into place.
     - Incoming:  same overlay starts at opacity 1, fades to 0,
                  label drifts up + dissolves.

   Visual intent: a slow door closing on one world and opening on
   the next. Black base, faint cyan/warm atmospheric pools, single
   diamond mark with a pulse, world-name in display typography.
   ============================================================ */

.lu-tx-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 460ms cubic-bezier(0.16, 1, 0.30, 1), visibility 0s linear 460ms;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* When .is-on the overlay is visible; the page underneath dims
   and blurs slightly so the eye knows the world is transitioning. */
.lu-tx-overlay.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1), backdrop-filter 320ms ease, visibility 0s;
}

/* Black base with subtle gradient pools — the atmosphere. */
.lu-tx-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 30%, rgba(40,50,70,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(60,40,30,0.40) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(8,10,14,0.92) 0%, rgba(4,5,9,1) 70%),
    #04050a;
}

/* Slow drifting glow — a single soft light source, gives the
   overlay a sense of depth without becoming busy. */
.lu-tx-glow {
  position: absolute; inset: -10%;
  background: radial-gradient(circle at 50% 50%, rgba(207,230,255,0.10) 0%, rgba(207,230,255,0.02) 22%, transparent 50%);
  filter: blur(40px);
  animation: lu-tx-glow-drift 12s ease-in-out infinite alternate;
}
@keyframes lu-tx-glow-drift {
  0%   { transform: translate3d(-2%,-1%, 0) scale(1.0); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.06); }
}

/* The center label — diamond mark + world name + subtitle. */
.lu-tx-center {
  position: relative;
  text-align: center;
  padding: 32px;
  max-width: 92vw;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms ease-out 80ms, transform 320ms cubic-bezier(0.16,1,0.30,1) 80ms;
}
.lu-tx-overlay.is-on .lu-tx-center {
  opacity: 1;
  transform: translateY(0);
}

.lu-tx-mark {
  width: 30px; height: 30px;
  margin: 0 auto 18px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
}
.lu-tx-mark::before,
.lu-tx-mark::after {
  content: ''; position: absolute; inset: 0;
  border: 1px solid rgba(255,255,255,0.78);
  border-radius: 2px;
}
.lu-tx-mark::after {
  transform: rotate(45deg) scale(0.62);
  border-color: rgba(255,255,255,0.42);
}
.lu-tx-mark-inner {
  position: absolute; inset: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 24px rgba(255,255,255,0.55);
  animation: lu-tx-pulse 2.4s ease-in-out infinite;
}
@keyframes lu-tx-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.55); }
}

.lu-tx-world {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 900;
  font-size: clamp(22px, 4.4vw, 40px);
  letter-spacing: 0.22em;
  color: #fff;
  text-shadow: 0 0 36px rgba(207,230,255,0.22);
  line-height: 1;
  margin-bottom: 14px;
}

.lu-tx-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(10px, 1.1vw, 11.5px);
  letter-spacing: 0.32em;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Reveal-from-overlay variant — slightly different easing so the
   incoming and outgoing beats don't feel like the same animation. */
.lu-tx-overlay.is-revealing {
  transition: opacity 460ms cubic-bezier(0.16, 1, 0.30, 1), backdrop-filter 460ms ease;
}

/* Honour reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .lu-tx-overlay { transition-duration: 160ms; }
  .lu-tx-overlay.is-on { transition-duration: 140ms; }
  .lu-tx-glow { animation: none; }
  .lu-tx-mark-inner { animation: none; }
  .lu-tx-center { transition: opacity 160ms ease; transform: none !important; }
}