/* The short stretch of water between the header and the sea floor. */
.depths {
    position: relative; /* no z-index: not a stacking context */
    overflow: hidden;
    display: block;
    padding: 28vh 16px 0;
    background: linear-gradient(to bottom, #52a6e9 0%, #3f8fd6 12%, #2f78c0 25%, #2365a6 40%, #1b5689 58%, #164a76 75%, #113a5e 100%);
}

/* Light shafts, drifting slower than the page (--drift from drift.js). */
.depths-light {
    position: absolute;
    top: 0;
    left: -25%;
    width: 150%;
    height: 170vh;
    background:
        linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.1) 21%, transparent 25%),
        linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.06) 36%, rgba(255, 255, 255, 0.06) 39%, transparent 41%),
        linear-gradient(100deg, transparent 52%, rgba(255, 255, 255, 0.12) 55%, transparent 60%),
        linear-gradient(100deg, transparent 70%, rgba(255, 255, 255, 0.07) 72%, transparent 76%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20vh, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 20vh, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
    transform: translateY(var(--drift, 0px));
    pointer-events: none;
}

/* Specks in two layers, far and near. */
.depths-specks {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30vh);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30vh);
    pointer-events: none;
}

.depths-specks-far {
    background: url("../images/specks-far.png") 0 var(--drift, 0px) / 1600px 1800px;
}

.depths-specks-near {
    background: url("../images/specks-near.png") 300px var(--drift, 0px) / 2000px 2400px;
}

/* Upright phones: straight from the header to the sea floor (layout.js). */
@media (orientation: portrait) and (max-width: 820px) {
    .depths {
        padding-top: 0;
    }
}