/**
 * Landing layout: "tunnel".
 *
 * Loaded only when Immersive Home > Look > Landing layout is set to Tunnel, and everything is
 * scoped under .ssp-tunnel so the canvas/vertical/horizontal layouts are untouched.
 *
 * Two backgrounds hand over mid-scroll: a flat wall of program and portfolio art that turns on
 * its plane, then a corridor the reader travels into. Whichever is faded out is display:none,
 * which also stops its CSS animation, so only one is ever composited.
 */

.ssp-tunnel .ssp-wall {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ssp-tunnel .ssp-wall__layer {
    position: absolute;
    inset: 0;
    will-change: opacity;
}

.ssp-tunnel .ssp-wall__layer.is-off {
    display: none;
}

/* --- A: the flat wall --- */
.ssp-tunnel .ssp-wall__planewrap {
    perspective: 1200px;
    perspective-origin: 50% 45%;
}

.ssp-tunnel .ssp-wall__plane {
    position: absolute;
    inset: -34% -40%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform-style: preserve-3d;
    transform: rotate(-11deg);
    will-change: transform;
}

.ssp-tunnel .ssp-wall__row {
    display: flex;
    gap: 10px;
    width: max-content;
    backface-visibility: hidden;
    will-change: transform;
    /* Driven in the rAF loop, not by a keyframe: a CSS animation and the scroll offset
       cannot both own this transform. See ssp-tunnel.js. */
}

.ssp-tunnel .ssp-wall__row img {
    /* Set from JS, which sizes the grid to the plane; the literals are the phone fallback
       for the moment before the script runs. */
    width: var(--ssp-wall-tile-w, 150px);
    height: var(--ssp-wall-tile-h, 225px);
    flex: 0 0 auto;
    display: block;
    object-fit: cover;
    border-radius: 7px;
    opacity: .82;
}/* --- the scrim that makes everything on top readable --- */
.ssp-tunnel .ssp-wall__scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(38% 34% at 50% 46%, rgba(5, 7, 13, .80) 0%, rgba(5, 7, 13, .34) 52%, rgba(5, 7, 13, 0) 100%),
        radial-gradient(135% 92% at 50% 34%, rgba(5, 7, 13, .06) 0%, rgba(5, 7, 13, .46) 64%, rgba(5, 7, 13, .86) 100%),
        linear-gradient(180deg, rgba(5, 7, 13, .52) 0%, rgba(5, 7, 13, .14) 24%, rgba(5, 7, 13, .42) 70%, rgba(5, 7, 13, .84) 100%);
}

/* --- content sits above both --- */
.ssp-tunnel .ssp-main {
    position: relative;
    z-index: 2;
}

/* Feature sections: no border and no rounded box. The readable backing is a masked
   pseudo-element whose gradient reaches full transparency INSIDE the element, so the panel
   dissolves into the background instead of ending at a rectangle. */
.ssp-tunnel .ssp-feature {
    position: relative;
    isolation: isolate;
    border: 0;
    background: none;
    margin: 0 auto;
    padding: 34px clamp(20px, 4vw, 44px);
}

.ssp-tunnel .ssp-feature::before {
    content: "";
    position: absolute;
    inset: -54px -40px;
    z-index: -1;
    background: rgba(7, 10, 17, .72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    -webkit-mask-image: radial-gradient(72% 62% at 50% 50%, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .88) 42%, rgba(0, 0, 0, .45) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%);
    mask-image: radial-gradient(72% 62% at 50% 50%, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .88) 42%, rgba(0, 0, 0, .45) 72%, rgba(0, 0, 0, .12) 88%, transparent 100%);
}

/* Room to travel between sections -- the depth only reads if there is space to feel it. */
.ssp-tunnel .ssp-features {
    display: flex;
    flex-direction: column;
    gap: clamp(86px, 17vh, 190px);
}

.ssp-tunnel .ssp-hero {
    min-height: 96vh;
}

@media (min-width: 900px) {}

@media (max-width: 560px) {.ssp-tunnel .ssp-feature { padding: 26px 18px; }
    .ssp-tunnel .ssp-feature::before { inset: -40px -26px; }
}

@media (prefers-reduced-motion: reduce) {}

/* The watermark logo stage is drawn for the canvas backgrounds, where it sits on flat colour.
   Over the wall it lands on top of the program and portfolio art and reads as a collision, so
   this layout drops it -- the logo already appears in the menu button and the hero. */
.ssp-tunnel .ssp-logo-stage {
    display: none;
}