/* ═══ VOID GACHA 開屏歡迎介面 Hero Welcome Overlay ═══ */

html.hero-welcome-skipped #hero-welcome {
    display: none !important;
}

body.hero-welcome-active {
    overflow: hidden;
}

.hero-welcome {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 5vw, 48px);
    background: #030208;
    cursor: pointer;
    opacity: 1;
    transform: scale(1);
    transition:
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    isolation: isolate;
}

.hero-welcome.hidden {
    display: none !important;
}

.hero-welcome--exit {
    opacity: 0;
    transform: scale(1.1);
    pointer-events: none;
}

.hero-welcome__nebula {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 120% 80% at 50% 120%, rgba(20, 8, 48, 0.95), transparent 55%),
        radial-gradient(ellipse 90% 60% at 15% 20%, rgba(127, 0, 255, 0.35), transparent 50%),
        radial-gradient(ellipse 85% 55% at 88% 25%, rgba(0, 140, 255, 0.28), transparent 48%),
        radial-gradient(ellipse 70% 45% at 50% 0%, rgba(80, 40, 160, 0.25), transparent 60%),
        linear-gradient(165deg, #020108 0%, #0a0618 35%, #050310 70%, #020208 100%);
    animation: heroNebulaDrift 18s ease-in-out infinite alternate;
}

.hero-welcome__nebula::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.012) 2px,
        rgba(255, 255, 255, 0.012) 3px
    );
    opacity: 0.4;
    mix-blend-mode: overlay;
}

.hero-welcome__stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 30% 65%, rgba(200, 220, 255, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 55% 15%, rgba(255, 220, 255, 0.6), transparent),
        radial-gradient(1px 1px at 72% 42%, rgba(255, 255, 255, 0.45), transparent),
        radial-gradient(1px 1px at 88% 78%, rgba(180, 200, 255, 0.55), transparent),
        radial-gradient(1px 1px at 45% 88%, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(1.5px 1.5px at 92% 12%, rgba(255, 200, 255, 0.65), transparent);
    background-size: 100% 100%;
    animation: heroStarsTwinkle 6s ease-in-out infinite;
}

.hero-welcome__scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        transparent 0%,
        rgba(127, 0, 255, 0.04) 48%,
        rgba(0, 255, 255, 0.06) 50%,
        transparent 52%
    );
    background-size: 100% 240%;
    animation: heroScan 8s linear infinite;
    opacity: 0.5;
}

.hero-welcome__content {
    position: relative;
    z-index: 2;
    max-width: min(1180px, 98vw);
    text-align: center;
    cursor: default;
    pointer-events: none;
}

.hero-welcome__eyebrow {
    margin: 0 0 22px;
    font-family: "Orbitron", "Noto Sans TC", sans-serif;
    font-size: clamp(14px, 2.35vw, 20px);
    font-weight: 700;
    letter-spacing: 0.28em;
    color: rgba(200, 180, 255, 0.88);
    text-shadow:
        0 0 12px rgba(127, 0, 255, 0.6),
        0 0 24px rgba(0, 200, 255, 0.25);
}

.hero-welcome__title {
    margin: 0 0 28px;
    font-family: "Noto Sans TC", sans-serif;
    font-size: clamp(18px, 2.75vw, 36px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: #ffe9a8;
    text-shadow:
        0 0 8px rgba(255, 215, 0, 0.95),
        0 0 18px rgba(255, 180, 0, 0.75),
        0 0 36px rgba(255, 120, 0, 0.45),
        0 0 56px rgba(255, 60, 120, 0.25),
        0 2px 0 rgba(120, 60, 0, 0.8),
        0 4px 12px rgba(0, 0, 0, 0.9);
    animation: heroTitlePulse 3.5s ease-in-out infinite;
}

.hero-welcome__subtitle {
    margin: 0 auto 40px;
    max-width: none;
    font-family: "Noto Sans TC", sans-serif;
    font-size: clamp(13px, 1.75vw, 17px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: linear-gradient(
        105deg,
        #ff6ec7 0%,
        #c084fc 18%,
        #60a5fa 38%,
        #34d399 55%,
        #fbbf24 72%,
        #f472b6 88%,
        #a78bfa 100%
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(192, 132, 252, 0.55))
        drop-shadow(0 0 28px rgba(0, 200, 255, 0.35));
    animation: heroSubtitleShift 6s linear infinite;
    text-shadow: none;
}

.hero-welcome__cta {
    pointer-events: auto;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 16px;
    padding: 16px 36px;
    border: 2px solid rgba(255, 215, 0, 0.65);
    border-radius: 999px;
    font-family: "Orbitron", "Noto Sans TC", sans-serif;
    font-size: clamp(13px, 2.4vw, 16px);
    font-weight: 900;
    letter-spacing: 0.12em;
    color: #fff8e0;
    background: linear-gradient(
        135deg,
        rgba(127, 0, 255, 0.55) 0%,
        rgba(255, 0, 128, 0.35) 40%,
        rgba(0, 180, 255, 0.4) 100%
    );
    box-shadow:
        0 0 20px rgba(255, 215, 0, 0.35),
        0 0 40px rgba(127, 0, 255, 0.45),
        inset 0 0 24px rgba(255, 255, 255, 0.08);
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.9),
        0 0 20px rgba(255, 200, 0, 0.6),
        0 0 32px rgba(127, 0, 255, 0.5);
    animation: heroCtaBreathe 2.2s ease-in-out infinite;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-welcome__cta:hover,
.hero-welcome__cta:focus-visible {
    transform: scale(1.04);
    outline: none;
    box-shadow:
        0 0 28px rgba(255, 215, 0, 0.55),
        0 0 56px rgba(127, 0, 255, 0.6),
        inset 0 0 28px rgba(255, 255, 255, 0.12);
}

.hero-welcome__hint {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: rgba(200, 190, 230, 0.45);
    text-shadow: 0 0 8px rgba(127, 0, 255, 0.3);
}

@keyframes heroNebulaDrift {
    0% {
        filter: hue-rotate(0deg) brightness(1);
    }
    100% {
        filter: hue-rotate(12deg) brightness(1.08);
    }
}

@keyframes heroStarsTwinkle {
    0%,
    100% {
        opacity: 0.55;
    }
    50% {
        opacity: 1;
    }
}

@keyframes heroScan {
    0% {
        background-position: 0 -100%;
    }
    100% {
        background-position: 0 200%;
    }
}

@keyframes heroTitlePulse {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.12);
    }
}

@keyframes heroSubtitleShift {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 220% center;
    }
}

@keyframes heroCtaBreathe {
    0%,
    100% {
        box-shadow:
            0 0 16px rgba(255, 215, 0, 0.3),
            0 0 32px rgba(127, 0, 255, 0.35),
            inset 0 0 20px rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 215, 0, 0.55);
    }
    50% {
        box-shadow:
            0 0 32px rgba(255, 215, 0, 0.65),
            0 0 64px rgba(127, 0, 255, 0.55),
            0 0 90px rgba(0, 200, 255, 0.25),
            inset 0 0 32px rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 240, 160, 0.95);
    }
}

@media (max-width: 900px) {
    .hero-welcome__title,
    .hero-welcome__subtitle {
        white-space: normal;
        line-height: 1.45;
    }

    .hero-welcome__subtitle {
        max-width: 36em;
    }
}

@media (max-width: 640px) {
    .hero-welcome__eyebrow {
        font-size: clamp(12px, 3.2vw, 15px);
        letter-spacing: 0.2em;
    }

    .hero-welcome__title {
        font-size: clamp(17px, 4.5vw, 22px);
        letter-spacing: 0.02em;
    }

    .hero-welcome__subtitle {
        font-size: clamp(12px, 3.2vw, 15px);
    }

    .hero-welcome__cta {
        padding: 14px 24px;
        letter-spacing: 0.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-welcome__nebula,
    .hero-welcome__stars,
    .hero-welcome__scanline,
    .hero-welcome__title,
    .hero-welcome__subtitle,
    .hero-welcome__cta {
        animation: none;
    }

    .hero-welcome--exit {
        transition: opacity 0.5s ease;
        transform: scale(1);
    }
}