/**
 * 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;
    animation-name: ssp-tunnel-drift;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.ssp-tunnel .ssp-wall__row img {
    width: 118px;
    height: 177px;
    flex: 0 0 auto;
    display: block;
    object-fit: cover;
    border-radius: 7px;
    opacity: .82;
}

@keyframes ssp-tunnel-drift {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* --- B: the corridor --- */
.ssp-tunnel .ssp-wall__tunnelwrap {
    perspective: 900px;
    perspective-origin: 50% 46%;
}

.ssp-tunnel .ssp-wall__tunnel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}

.ssp-tunnel .ssp-tun {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190px;
    height: 285px;
    margin: -142px 0 0 -95px;
    border-radius: 12px;
    overflow: hidden;
    backface-visibility: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}

.ssp-tunnel .ssp-tun img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ssp-tunnel .ssp-tun::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 7, 13, .06), rgba(5, 7, 13, .34));
}

/* --- 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) {
    .ssp-tunnel .ssp-tun { width: 220px; height: 330px; margin: -165px 0 0 -110px; }
    .ssp-tunnel .ssp-wall__row img { width: 136px; height: 204px; }
}

@media (max-width: 560px) {
    .ssp-tunnel .ssp-tun { width: 132px; height: 198px; margin: -99px 0 0 -66px; }
    .ssp-tunnel .ssp-wall__row img { width: 92px; height: 138px; }
    .ssp-tunnel .ssp-feature { padding: 26px 18px; }
    .ssp-tunnel .ssp-feature::before { inset: -40px -26px; }
}

@media (prefers-reduced-motion: reduce) {
    .ssp-tunnel .ssp-wall__row { animation: none; }
    .ssp-tunnel .ssp-wall__tunnel { transform: translateZ(0); }
}

/* 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;
}