/* intro.css — black load covers, dark-to-light fades and the Open Waters "SURVIVE" card
   (spelled in bones on a 2D canvas). DOM/canvas-2D only: no extra WebGL render passes. */

.oo-intro-cover {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 1;
    pointer-events: none;           /* never eats clicks: menu, canvas and pointer lock work underneath */
    overflow: hidden;
    contain: strict;
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.45, 0, .2, 1);   /* slow start, soft landing = dark -> light */
    -webkit-user-select: none;
    user-select: none;
}
.oo-intro-cover[data-kind="menu"] { z-index: 101; }          /* above loadingScreen (100), below #mainMenu (2000) and login (100000) */
.oo-intro-cover[data-kind="waters"] { z-index: 2147483000; } /* above every HUD until the intro ends */
.oo-intro-cover.oo-fade-in-start { opacity: 0; }

/* .oo-intro-art: the loading painting, dimmed; fades to pure black before SURVIVE. */
.oo-intro-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .28;
    filter: grayscale(.35) brightness(.7);
    transition: opacity 220ms ease-in;
}
.oo-intro-cover.oo-art-out .oo-intro-art { opacity: 0; }

.oo-intro-progress {
    position: absolute;
    left: 50%;
    bottom: max(7vh, calc(env(safe-area-inset-bottom) + 24px));
    transform: translateX(-50%);
    width: min(260px, 60vw);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: .75;
    transition: opacity 500ms ease;
}
.oo-intro-cover.oo-progress-out .oo-intro-progress { opacity: 0; }
.oo-intro-bar {
    width: 100%;
    height: 2px;
    background: rgba(201, 162, 39, .16);
    border-radius: 2px;
    overflow: hidden;
}
.oo-intro-bar > i {
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(201, 162, 39, .35), rgba(232, 213, 163, .85));
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 350ms ease-out;
}
.oo-intro-label {
    font: 12px/1.2 Georgia, 'Times New Roman', serif;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(232, 213, 163, .55);
    white-space: nowrap;
}

/* ---- SURVIVE in bones ----
   One full-screen 2D canvas (IntroFade.js mountSurvive) in its own layer just above the
   waters cover, so the bones stay crisp while the black fades out beneath them. */
.oo-bones {
    position: fixed;
    inset: 0;
    z-index: 2147483001;
    pointer-events: none;
    contain: strict;
    opacity: 1;
    transition: opacity 400ms ease-in;
    -webkit-user-select: none;
    user-select: none;
}
.oo-bones > canvas {
    display: block;
    width: 100%;
    height: 100%;
}
/* Reduced motion (.oo-bones-reduced): the JS fades the bones in place and out.opacity
   uses the transition above, so there is no tumble and no fall. */