#spatial-corridor{position:relative;height:1750vh;overflow:clip;background:#f2f0eb;color:#101010;font-family:Arial,Helvetica,sans-serif;isolation:isolate}
#spatial-corridor,#spatial-corridor *{box-sizing:border-box}

  .spatial-stage{position:sticky;top:0;left:0;width:100%;height:100vh;overflow:hidden;background:#f2f0eb;isolation:isolate}
  .spatial-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:center center;pointer-events:none;filter:contrast(1.04) saturate(.92)}
  .spatial-wash{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(255,255,255,.14)}
  .spatial-texture{position:absolute;inset:-10%;z-index:2;pointer-events:none;opacity:.055;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}
  .spatial-header{position:absolute;z-index:9000;left:28px;right:28px;top:24px;display:flex;justify-content:space-between;pointer-events:none}
  .spatial-brand{font-size:24px;font-weight:900;letter-spacing:-.06em} .spatial-meta{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.34}
  .spatial-scene{position:absolute;inset:0;z-index:10;transform-style:preserve-3d;will-change:transform}
  .spatial-card{position:absolute;left:0;top:0;width:min(32vw,590px);aspect-ratio:16/9;transform-origin:center;will-change:transform;cursor:pointer}
  /* The glass rim extends OUTSIDE the card. Padding consumes only that extra area, so the image itself stays the same 16:9 size. */
  .spatial-plane{position:absolute;inset:-10px;padding:10px;overflow:visible;background:linear-gradient(145deg,rgba(255,255,255,.20),rgba(209,232,232,.085) 42%,rgba(255,255,255,.055) 70%,rgba(179,207,209,.11));border:1px solid rgba(255,255,255,.72);border-radius:2px;transform-origin:center;transform-style:preserve-3d;transform:perspective(820px) rotateX(-14deg) rotateY(-34deg) rotateZ(-1.5deg);box-shadow:0 18px 38px rgba(20,20,18,.105),0 4px 10px rgba(20,20,18,.05),inset 0 0 0 1px rgba(105,134,137,.16),inset 0 0 18px rgba(255,255,255,.13);backdrop-filter:blur(1.2px) saturate(.9)}
  .spatial-plane img{display:block;width:100%;height:100%;object-fit:cover;transform:none;border-radius:1px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
  /* etched laboratory brackets + technical hairlines */
  .spatial-plane::before{content:"";position:absolute;inset:3px;z-index:2;pointer-events:none;background:
    linear-gradient(90deg,rgba(116,151,153,.42),rgba(116,151,153,.42)) 0 0/21px 1px no-repeat,
    linear-gradient(rgba(116,151,153,.42),rgba(116,151,153,.42)) 0 0/1px 15px no-repeat,
    linear-gradient(270deg,rgba(116,151,153,.34),rgba(116,151,153,.34)) 100% 100%/21px 1px no-repeat,
    linear-gradient(0deg,rgba(116,151,153,.34),rgba(116,151,153,.34)) 100% 100%/1px 15px no-repeat,
    linear-gradient(90deg,transparent 0 12%,rgba(255,255,255,.20) 12% 12.25%,transparent 12.25% 100%);opacity:.72}
  .spatial-plane::after{content:"";position:absolute;inset:10px;z-index:3;pointer-events:none;border:1px solid rgba(226,247,247,.22);background:linear-gradient(148deg,rgba(255,255,255,.11),transparent 17%,transparent 68%,rgba(164,197,199,.055));mix-blend-mode:screen}
  .spatial-glass-mark{position:absolute;z-index:4;left:12px;top:2px;height:7px;line-height:7px;pointer-events:none;white-space:nowrap;font-size:4.8px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:rgba(49,77,79,.62);text-shadow:0 1px 0 rgba(255,255,255,.56)}
  .spatial-glass-code{position:absolute;z-index:4;right:11px;bottom:2px;height:7px;line-height:7px;pointer-events:none;font-size:4px;letter-spacing:.16em;color:rgba(58,88,90,.48)}
  .spatial-progress{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);width:32px;height:4px;border-radius:12px;background:#111;opacity:.38;z-index:9000}
  .spatial-caption{position:absolute;left:22px;bottom:20px;font-size:9px;letter-spacing:.13em;text-transform:uppercase;opacity:.32;z-index:9000}
  @media(max-width:900px){.spatial-card{width:min(50vw,430px)} .spatial-header{left:18px;right:18px;top:18px} .spatial-meta,.spatial-caption{display:none}}