/* Launch intro — full-screen video shown once per browser session */
html.intro-active,
html.intro-active body {
    overflow: hidden !important;
}

html.intro-active:not(.intro-ready) body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: #04070f;
}

.intro-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    animation: introZoom 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

@keyframes introZoom {
    from { opacity: 0; transform: scale(0.9); border-radius: 28px; }
    to { opacity: 1; transform: none; border-radius: 0; }
}

.intro-splash video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* Fill the screen; anchor to the bottom so the "barbaros" wordmark is never cropped */
.intro-main {
    object-fit: cover;
    object-position: center bottom;
}

.intro-bg {
    display: none;
    object-fit: cover;
    filter: blur(28px) brightness(0.55) saturate(1.2);
    transform: scale(1.15);
}

/* Portrait phones / tablets: "cover" would cut the logo in half, so the video is zoomed to the
   logo's width (it spans the middle ~44% of the frame) over a blurred full-screen copy */
@media (max-aspect-ratio: 4/5) {
    .intro-bg { display: block; }
    .intro-splash .intro-main {
        inset: auto;
        top: 50%;
        left: 50%;
        width: 205vw;
        height: auto;
        transform: translate(-50%, -50%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 96%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 96%, transparent 100%);
    }
}

/* Super-ultrawide (32:9): cropping would hide the character, show it whole over the blur */
@media (min-aspect-ratio: 12/5) {
    .intro-bg { display: block; }
    .intro-main {
        object-fit: contain;
        object-position: center;
    }
}

.intro-splash.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.intro-skip {
    position: absolute;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 2;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid rgba(156, 201, 255, 0.35);
    background: rgba(4, 7, 15, 0.55);
    color: #e8eff8;
    font: 700 0.72rem/1 "Montserrat", "Segoe UI", sans-serif;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    animation: introSkipIn 0.4s ease 1s forwards;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.intro-skip:hover {
    border-color: #2f8fff;
    background: rgba(47, 143, 255, 0.22);
}

@keyframes introSkipIn {
    to { opacity: 1; }
}

.intro-sound {
    position: absolute;
    left: max(18px, env(safe-area-inset-left));
    bottom: max(18px, env(safe-area-inset-bottom));
    z-index: 2;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(47, 143, 255, 0.55);
    background: rgba(4, 7, 15, 0.55);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: introSoundPulse 1.8s ease-in-out infinite;
}

.intro-sound[hidden] { display: none; }

.intro-sound svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.intro-sound svg path:first-child { fill: currentColor; }

@keyframes introSoundPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(47, 143, 255, 0.3); }
    50% { box-shadow: 0 0 24px rgba(47, 143, 255, 0.7); }
}

@media (max-aspect-ratio: 1/1) {
    .intro-skip {
        right: 50%;
        transform: translateX(50%);
        bottom: max(28px, env(safe-area-inset-bottom));
    }
}