/* The sea floor section. Behind the canvas, .depths' gradient meets --seabed-fog at --horizon
   (set by seabed.js). No z-index, so the fish can swim in front of the canvas. */
.seabed {
    --horizon: 56%;
    --seabed-fog: #174f7a;
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 520px;
    margin: 0 -16px;
    background: linear-gradient(
        to bottom,
        rgba(23, 79, 122, 0) 0,
        rgba(23, 79, 122, 0) calc(var(--horizon) * 0.4),
        var(--seabed-fog) var(--horizon),
        var(--seabed-fog) 100%
    );
}

.seabed-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 38%);
}

/* Vignette. */
.seabed::after {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 55%, rgba(3, 12, 26, 0.5) 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 35%);
    content: "";
    pointer-events: none;
}

/* Prop buttons: placed by seabed.js (has-placed-spots); a row near the bottom until then. */
.seabed-spots {
    position: absolute;
    inset: 0;
    z-index: var(--z-content);
    pointer-events: none;
}

.seabed-spot {
    position: absolute;
    bottom: 22%;
    width: 18%;
    height: 22%;
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: none;
    cursor: pointer;
    pointer-events: auto;
}

.seabed-spot:nth-child(1) {
    left: 14%;
}

.seabed-spot:nth-child(2) {
    left: 41%;
}

.seabed-spot:nth-child(3) {
    left: 68%;
}

.seabed.has-placed-spots .seabed-spot {
    bottom: auto;
}

.seabed-spot:focus-visible {
    outline: 3px dashed #ffd54a;
    outline-offset: 6px;
}

.seabed-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    font-size: clamp(14px, 1.5vw, 24px);
    /* Kept inside the canvas by seabed.js. */
    translate: calc(-50% + var(--label-shift, 0px)) 0;
    transition: scale 0.35s cubic-bezier(0.3, 1.8, 0.5, 1);
    animation: seabed-label-bob 3.2s ease-in-out infinite;
    pointer-events: none;
}

.seabed-spot:nth-child(2) .seabed-label {
    animation-delay: -1.1s;
}

.seabed-spot:nth-child(3) .seabed-label {
    animation-delay: -2.2s;
}

.seabed-spot:hover .seabed-label,
.seabed-spot:focus-visible .seabed-label {
    scale: 1.15;
}

.seabed-spot:active .seabed-label {
    scale: 1;
}

@keyframes seabed-label-bob {
    50% {
        transform: translateY(-6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .seabed-label {
        animation: none;
        transition: none;
    }
}

/* The trailer: a 16:9 screen springing up out of the open chest (placed by seabed.js), lit gold
   from below. Without WebGL it's centred. */
.seabed-trailer {
    position: absolute;
    z-index: var(--z-content);
    transform-origin: var(--grow-from, 50%) 100%;
    animation: trailer-pop 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) both;
}

.seabed-trailer.is-flat {
    top: 50%;
    left: 50%;
    width: min(680px, calc(100% - 32px));
    translate: -50% -50%;
}

.seabed-trailer.is-hiding {
    animation: trailer-drop 0.2s ease-in both;
}

.trailer-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    aspect-ratio: 16 / 9;
    border: 4px solid #16263d;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 40%, #2b73bd, #0c2b4f);
    box-shadow:
        0 14px 40px rgba(255, 200, 96, 0.45),
        0 8px 24px rgba(2, 8, 18, 0.5);
    color: #fff;
    font: clamp(15px, 1.6vw, 22px) "Titan One", sans-serif;
}

.trailer-screen svg {
    width: clamp(40px, 6vw, 80px);
    height: clamp(40px, 6vw, 80px);
    fill: #fff;
    filter: drop-shadow(0 4px 0 rgba(10, 20, 35, 0.5));
}

.trailer-screen p {
    margin: 0;
}

/* The chest's label would sit behind the screen. */
.seabed.is-trailer-open .seabed-spot[data-prop="chest"] .seabed-label {
    opacity: 0;
}

@keyframes trailer-pop {
    0% {
        opacity: 0;
        transform: scale(0.15, 0.05) rotate(-8deg);
    }
    45% {
        opacity: 1;
        transform: scale(0.92, 1.18) rotate(3deg);
    }
    70% {
        transform: scale(1.06, 0.94) rotate(-1deg);
    }
    100% {
        transform: none;
    }
}

@keyframes trailer-drop {
    to {
        opacity: 0;
        transform: scale(0.6, 0.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .seabed-trailer,
    .seabed-trailer.is-hiding {
        animation: none;
    }
}

/* Upright phones: fills the rest of the screen (layout.js). */
@media (orientation: portrait) and (max-width: 820px) {
    .seabed {
        height: calc(100svh - var(--hero-height));
        min-height: 0;
    }
}