/* ============================================================
   Lumanoid — pre-show "Deep Cosmos" waiting experience
   "You are one light among thousands.
    Together you become the show."
   ------------------------------------------------------------
   Scoped entirely under .lum-waiting so it never touches the
   live-show / admin pages. CSS-only motion, GPU friendly,
   degrades gracefully under prefers-reduced-motion.
   ============================================================ */

:root {
    --lum-bg-0: #04050c;            /* deepest space */
    --lum-bg-1: #0a0b1c;            /* mid space */
    --lum-ink: #eef1ff;            /* starlight white */
    --lum-muted: rgba(214, 220, 255, 0.62);
    --lum-faint: rgba(220, 226, 255, 0.66); /* WCAG AA on the dark stage (used for real text) */
    --lum-accent: #9fd6ff;        /* cool starlight */
    --lum-accent-warm: #ffd4a6;   /* distant warm star */
    --lum-halo: rgba(120, 150, 255, 0.55);
}

/* keep our own box model regardless of host resets (Bootstrap etc.) */
.lum-waiting,
.lum-waiting *,
.lum-waiting *::before,
.lum-waiting *::after {
    box-sizing: border-box;
}

/* ---- the full-bleed dark stage ----------------------------- */
.lum-waiting {
    position: relative;
    color-scheme: dark; /* scoped here, not globally, so admin pages keep light UA chrome */
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.6rem, 5vh, 2.8rem);
    padding: calc(env(safe-area-inset-top) + clamp(2rem, 7vh, 4rem)) clamp(1.5rem, 6vw, 3rem) calc(env(safe-area-inset-bottom) + clamp(2rem, 7vh, 4rem));
    overflow: hidden;
    color: var(--lum-ink);
    font-family: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background:
        radial-gradient(125% 85% at 16% 10%, rgba(83, 64, 168, 0.42), transparent 58%),
        radial-gradient(120% 90% at 88% 16%, rgba(20, 120, 130, 0.34), transparent 55%),
        radial-gradient(150% 120% at 50% 118%, rgba(150, 55, 110, 0.24), transparent 60%),
        radial-gradient(100% 100% at 50% 38%, var(--lum-bg-1) 0%, var(--lum-bg-0) 72%);
}

/* ---- slowly drifting nebula -------------------------------- */
.lum-nebula {
    position: absolute;
    inset: -25%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
    filter: blur(30px) saturate(115%);
    background:
        radial-gradient(40% 35% at 30% 28%, rgba(96, 76, 200, 0.40), transparent 70%),
        radial-gradient(38% 32% at 74% 34%, rgba(24, 140, 150, 0.34), transparent 72%),
        radial-gradient(46% 40% at 56% 82%, rgba(170, 60, 120, 0.24), transparent 74%);
    animation: lum-nebula-drift 46s ease-in-out infinite alternate;
    will-change: transform;
}

@keyframes lum-nebula-drift {
    0%   { transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.05); }
    100% { transform: translate3d(2%, 2%, 0) rotate(7deg) scale(1.18); }
}

/* ---- parallax starfields ----------------------------------- */
.lum-stars {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-repeat: no-repeat;
    will-change: transform, opacity;
}

.lum-stars--far {
    background-image:
        radial-gradient(1px 1px at 6% 18%, rgba(255, 255, 255, 0.90), transparent),
        radial-gradient(1px 1px at 14% 62%, rgba(255, 255, 255, 0.70), transparent),
        radial-gradient(1px 1px at 22% 32%, rgba(200, 220, 255, 0.80), transparent),
        radial-gradient(1px 1px at 28% 80%, rgba(255, 255, 255, 0.60), transparent),
        radial-gradient(1px 1px at 37% 12%, rgba(255, 255, 255, 0.75), transparent),
        radial-gradient(1px 1px at 44% 52%, rgba(210, 225, 255, 0.70), transparent),
        radial-gradient(1px 1px at 52% 24%, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1px 1px at 59% 72%, rgba(255, 255, 255, 0.70), transparent),
        radial-gradient(1px 1px at 67% 40%, rgba(220, 230, 255, 0.75), transparent),
        radial-gradient(1px 1px at 73% 16%, rgba(255, 255, 255, 0.60), transparent),
        radial-gradient(1px 1px at 81% 58%, rgba(255, 255, 255, 0.70), transparent),
        radial-gradient(1px 1px at 88% 30%, rgba(210, 225, 255, 0.70), transparent),
        radial-gradient(1px 1px at 93% 76%, rgba(255, 255, 255, 0.60), transparent),
        radial-gradient(1px 1px at 9% 88%, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(1px 1px at 48% 90%, rgba(255, 255, 255, 0.50), transparent),
        radial-gradient(1px 1px at 78% 90%, rgba(255, 255, 255, 0.50), transparent);
    animation: lum-twinkle-a 5.5s ease-in-out infinite, lum-drift-far 90s ease-in-out infinite alternate;
}

.lum-stars--near {
    background-image:
        radial-gradient(2px 2px at 18% 26%, #ffffff, transparent),
        radial-gradient(2px 2px at 34% 68%, #eaf2ff, transparent),
        radial-gradient(2px 2px at 50% 14%, #ffffff, transparent),
        radial-gradient(2px 2px at 64% 56%, #ffe9cf, transparent),
        radial-gradient(2px 2px at 78% 22%, #ffffff, transparent),
        radial-gradient(2px 2px at 86% 64%, #dfeaff, transparent),
        radial-gradient(2.5px 2.5px at 26% 84%, #ffffff, transparent),
        radial-gradient(2px 2px at 70% 86%, #ffe9cf, transparent);
    animation: lum-twinkle-b 4s ease-in-out infinite, lum-drift-near 60s ease-in-out infinite alternate;
}

@keyframes lum-twinkle-a { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } }
@keyframes lum-twinkle-b { 0%, 100% { opacity: 0.70; } 50% { opacity: 1; } }
@keyframes lum-drift-far { from { transform: translateY(0); } to { transform: translateY(-18px); } }
@keyframes lum-drift-near { from { transform: translateY(0); } to { transform: translateY(-30px); } }

/* ---- filmic grain for depth -------------------------------- */
.lum-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px 220px;
}

/* ---- centered content column ------------------------------- */
.lum-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: clamp(1.4rem, 4.5vh, 2.4rem);
    width: 100%;
    max-width: 30rem;
}

/* staggered reveal on load — one orchestrated entrance */
.lum-content > * {
    opacity: 0;
    transform: translateY(14px);
    animation: lum-rise 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.lum-content > *:nth-child(1) { animation-delay: 0.12s; }
.lum-content > *:nth-child(2) { animation-delay: 0.26s; }
.lum-content > *:nth-child(3) { animation-delay: 0.40s; }
.lum-content > *:nth-child(4) { animation-delay: 0.54s; }
.lum-content > *:nth-child(5) { animation-delay: 0.68s; }
.lum-content > *:nth-child(6) { animation-delay: 0.82s; }

@keyframes lum-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* ---- brand mark (logo crown) ------------------------------- */
.lum-logo-wrap {
    line-height: 0; /* no phantom descender space under the img */
}
.lum-logo {
    width: clamp(54px, 15vw, 76px);
    height: auto;
    filter: drop-shadow(0 0 16px rgba(159, 214, 255, 0.30)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
    animation: lum-logo-breathe 7s ease-in-out infinite;
}
@keyframes lum-logo-breathe {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 14px rgba(159, 214, 255, 0.26)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)); }
    50%      { transform: translateY(-5px) scale(1.03); filter: drop-shadow(0 0 28px rgba(159, 214, 255, 0.48)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45)); }
}

/* ---- eyebrow ----------------------------------------------- */
.lum-eyebrow {
    margin: 0;
    font-size: clamp(0.66rem, 2.6vw, 0.8rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--lum-faint);
    text-shadow: 0 1px 10px rgba(2, 3, 10, 0.55); /* legibility over brighter nebula patches */
    text-indent: 0.3em; /* compensate trailing letter-spacing for true centering */
}

/* ---- hero show name ---------------------------------------- */
.lum-showname {
    margin: 0;
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-size: clamp(2.2rem, 11vw, 4rem);
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: #fbfcff;
}

.lum-showname__text {
    text-shadow:
        0 0 18px rgba(159, 214, 255, 0.45),
        0 0 48px rgba(120, 150, 255, 0.30),
        0 2px 30px rgba(0, 0, 0, 0.55);
    animation: lum-title-glow 6s ease-in-out infinite;
}

@keyframes lum-title-glow {
    0%, 100% { text-shadow: 0 0 16px rgba(159, 214, 255, 0.38), 0 0 44px rgba(120, 150, 255, 0.24), 0 2px 30px rgba(0, 0, 0, 0.55); }
    50%      { text-shadow: 0 0 26px rgba(159, 214, 255, 0.62), 0 0 70px rgba(120, 150, 255, 0.42), 0 2px 30px rgba(0, 0, 0, 0.55); }
}

/* ---- breathing light pulse --------------------------------- */
.lum-pulse {
    position: relative;
    width: clamp(64px, 22vw, 104px);
    height: clamp(64px, 22vw, 104px);
    display: grid;
    place-items: center;
}

.lum-pulse span {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--lum-accent);
    opacity: 0;
    animation: lum-ripple 3.2s ease-out infinite;
}
.lum-pulse span:nth-child(2) { animation-delay: 1.06s; }
.lum-pulse span:nth-child(3) { animation-delay: 2.13s; }

.lum-pulse__core {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, var(--lum-accent) 58%, transparent 74%);
    box-shadow: 0 0 12px 2px var(--lum-halo), 0 0 26px 6px rgba(120, 150, 255, 0.35);
    animation: lum-core-breathe 3.2s ease-in-out infinite;
}

@keyframes lum-ripple {
    0%   { width: 14px; height: 14px; opacity: 0; }
    12%  { opacity: 0.7; }
    100% { width: 100%; height: 100%; opacity: 0; border-color: rgba(159, 214, 255, 0.04); }
}

@keyframes lum-core-breathe {
    0%, 100% { transform: scale(0.86); box-shadow: 0 0 10px 2px var(--lum-halo), 0 0 22px 5px rgba(120, 150, 255, 0.30); }
    50%      { transform: scale(1.12); box-shadow: 0 0 16px 3px var(--lum-halo), 0 0 34px 8px rgba(120, 150, 255, 0.45); }
}

/* ---- narrative tagline ------------------------------------- */
.lum-tagline {
    margin: 0;
    max-width: 22rem;
    font-size: clamp(0.9rem, 3.6vw, 1.06rem);
    line-height: 1.55;
    font-weight: 400;
    color: var(--lum-muted);
}
.lum-tagline em {
    font-style: normal;
    color: var(--lum-accent);
}

/* ---- share / QR node --------------------------------------- */
.lum-share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.lum-qr {
    position: relative;
    width: clamp(188px, 58vw, 248px);
    aspect-ratio: 1 / 1;
    padding: clamp(12px, 3.6vw, 18px);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff, #eef1fb);
    display: grid;
    place-items: center;
    box-shadow:
        0 0 0 1px rgba(159, 214, 255, 0.25),
        0 18px 50px -12px rgba(8, 12, 40, 0.90),
        0 0 60px -8px rgba(120, 150, 255, 0.45);
    animation: lum-qr-glow 6s ease-in-out infinite;
}

/* luminous gradient ring around the card */
.lum-qr::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    padding: 2px;
    background: linear-gradient(135deg, var(--lum-accent), rgba(120, 150, 255, 0.55), var(--lum-accent-warm));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0.8;
    pointer-events: none;
}

/* Blazorise.QRCode 1.7.7 renders a <canvas> (not an <img>); target both so the
   fixed-size QR scales to fill the responsive card instead of overflowing it. */
.lum-qr > *,
.lum-qr canvas,
.lum-qr img {
    width: 100%;
}
.lum-qr canvas,
.lum-qr img {
    height: auto;
    display: block;
    border-radius: 6px;
}

@keyframes lum-qr-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(159, 214, 255, 0.22), 0 18px 50px -12px rgba(8, 12, 40, 0.90), 0 0 50px -10px rgba(120, 150, 255, 0.35); }
    50%      { box-shadow: 0 0 0 1px rgba(159, 214, 255, 0.34), 0 18px 50px -12px rgba(8, 12, 40, 0.90), 0 0 78px -6px rgba(120, 150, 255, 0.55); }
}

.lum-share__label {
    margin: 0;
    font-weight: 600;
    font-size: clamp(0.95rem, 3.6vw, 1.08rem);
    letter-spacing: 0.01em;
    color: var(--lum-ink);
}
.lum-share__sub {
    margin: 0;
    font-size: clamp(0.72rem, 2.8vw, 0.84rem);
    letter-spacing: 0.16em;
    text-indent: 0.16em;
    text-transform: uppercase;
    color: var(--lum-faint);
    text-shadow: 0 1px 10px rgba(2, 3, 10, 0.55);
}

/* ---- respect reduced motion -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .lum-nebula,
    .lum-stars,
    .lum-logo,
    .lum-showname__text,
    .lum-pulse span,
    .lum-pulse__core,
    .lum-qr,
    .lum-content > * {
        animation: none !important;
    }
    .lum-content > * {
        opacity: 1 !important;
        transform: none !important;
    }
    /* keep a gentle static presence for the pulse so it never looks broken */
    .lum-pulse span:nth-child(1) { opacity: 0.35; width: 60%; height: 60%; }
    .lum-pulse span:nth-child(2),
    .lum-pulse span:nth-child(3) { opacity: 0; }
}