/* Spatial direction layered on top of the compact base stylesheet. */
@media (min-width: 801px) {
  .film-pin {
    background: #f3efe3;
    perspective: 1100px;
    perspective-origin: 50% 48%;
  }

  .nav {
    color: #fff;
    mix-blend-mode: difference;
  }

  .nav .pill {
    background: #fff;
    color: #111 !important;
  }

  .background-reel,
  .bg-scene,
  .scene-world {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .background-reel {
    z-index: -8;
    overflow: hidden;
    transform-style: preserve-3d;
  }

  .bg-scene {
    opacity: 0;
    will-change: opacity;
  }

  .bg-hero {
    opacity: 1;
    /* Flat paper or ink: the illustrations carry the colour, not the light. */
    background: var(--paper);
  }

  .bg-backend {
    background: var(--ink);
  }

  .bg-timeline {
    background: var(--paper);
  }

  .bg-journey {
    background: var(--paper);
  }

  .bg-switch {
    background: linear-gradient(108deg, var(--ink) 0 46%, var(--paper) 46.1% 100%);
  }

  .bg-developer {
    background: var(--ink);
  }

  .bg-onboarding {
    background: var(--paper);
  }

  .scene-world {
    z-index: -4;
    inset: -15%;
    transform-style: preserve-3d;
    will-change: transform;
  }


  .horizon {
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, currentColor 20% 80%, transparent);
    opacity: .28;
    box-shadow: 0 0 45px 8px currentColor;
  }

  .light-beam {
    position: absolute;
    width: 38vw;
    height: 130vh;
    top: -22vh;
    opacity: .17;
    filter: blur(18px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
  }

  .beam-a {
    left: 9vw;
    background: linear-gradient(90deg, transparent, #d9ff38 48%, transparent);
    transform: rotate(25deg) translateZ(-180px);
  }

  .beam-b {
    right: 2vw;
    background: linear-gradient(90deg, transparent, #b7a9ff 48%, transparent);
    transform: rotate(-27deg) translateZ(-420px);
  }

  .portal {
    position: absolute;
    width: 36vw;
    height: 70vh;
    border: 1px solid currentColor;
    border-radius: 50% 50% 3% 3% / 36% 36% 3% 3%;
    opacity: .28;
    transform-style: preserve-3d;
    will-change: transform, opacity;
  }

  .portal i {
    position: absolute;
    inset: 8%;
    border: 1px solid currentColor;
    border-radius: inherit;
  }

  .portal i:nth-child(2) { inset: 17%; }
  .portal i:nth-child(3) { inset: 27%; }
  .portal-a { right: 8vw; top: 11vh; transform: translateZ(-450px) rotateY(-9deg); }
  .portal-b { left: 9vw; top: 15vh; transform: translateZ(-900px) rotateY(14deg); }

  .data-plane {
    position: absolute;
    display: grid;
    gap: 7px;
    width: 27vw;
    padding: 15px;
    border: 1px solid currentColor;
    background: #f5f1e577;
    backdrop-filter: blur(9px);
    font: 9px var(--mono);
    transform-style: preserve-3d;
    opacity: .33;
  }

  .data-plane span {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid currentColor;
    padding: 7px;
  }

  .data-plane span::after { content: "CONNECTED ↗"; opacity: .55; }
  .data-plane-a { right: 4vw; top: 14vh; transform: translateZ(-700px) rotateY(-31deg) rotateX(5deg); }
  .data-plane-b { left: 7vw; bottom: 12vh; transform: translateZ(-850px) rotateY(27deg) rotateX(-7deg); }

  .asset,
  .chapter,
  .app-orbit,
  .timeline-ui,
  .journey-cards,
  .compare-card,
  .code-window {
    transform-style: preserve-3d;
    backface-visibility: hidden;
  }

  .asset { filter: drop-shadow(0 28px 42px #13111a20); }
  .asset-figure { filter: contrast(1.08) drop-shadow(0 30px 48px #18122433); }

  .asset-figure {
    -webkit-mask-image: linear-gradient(90deg, #000 0 38%, #000c 45%, transparent 58%, transparent 100%);
    -webkit-mask-size: 250% 100%;
    -webkit-mask-position: 0% 0%;
    -webkit-mask-repeat: no-repeat;
    mask-image: linear-gradient(90deg, #000 0 38%, #000c 45%, transparent 58%, transparent 100%);
    mask-size: 250% 100%;
    mask-position: 0% 0%;
    mask-repeat: no-repeat;
  }

  .figure-pixels {
    position: absolute;
    z-index: 4;
    width: 44vw;
    height: 90vh;
    right: 8vw;
    bottom: -9vh;
    pointer-events: none;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
    filter: contrast(1.08) drop-shadow(0 20px 28px #18122422);
  }

  .chapter {
    isolation: isolate;
    transform-origin: 50% 50%;
    will-change: transform, opacity;
  }

  .chapter::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    opacity: .92;
    backdrop-filter: blur(10px);
  }

  .chapter-backend::before,
  .chapter-developer::before {
    left: 4.5vw;
    top: 17vh;
    width: 50vw;
    height: 66vh;
    background: linear-gradient(90deg, #0d0d13df, #12111bb5 67%, transparent);
    border-left: 1px solid #d9ff38;
  }

  .chapter-timeline::before {
    inset: 10vh 3vw 8vh;
    background: linear-gradient(100deg, #f5efe4dd 0 40%, transparent 68%);
    clip-path: polygon(0 0, 70% 0, 58% 100%, 0 100%);
  }

  .chapter-journey::before {
    inset: 13vh 4vw 7vh;
    background: linear-gradient(180deg, #f8f4e9c7, #f8f4e945 72%, transparent);
    clip-path: polygon(2% 0, 98% 0, 93% 100%, 0 90%);
  }

  .chapter-switch::before { display: none; }

  .chapter-onboarding::before {
    left: 4vw;
    top: 16vh;
    width: 62vw;
    height: 68vh;
    background: linear-gradient(90deg, #f7f1e6dc 0 70%, transparent);
    clip-path: polygon(0 0, 87% 6%, 78% 100%, 4% 94%);
  }

  .chapter-backend,
  .chapter-developer { color: #f5f1e8; }
  .chapter-backend > p:last-of-type,
  .chapter-developer .developer-copy > p,
  .chapter-developer dd { color: #bebac9; }
  .chapter-backend em,
  .chapter-developer em { color: #d9ff38; }
  .chapter-backend .app-orbit { border-color: #c2b8ff; }

  .switch-copy { color: #fff; }
  .switch-copy > p:last-child { color: #bbb7c8; }
  .switch-copy em { color: #d9ff38; }

  .journey-title h2 {
    max-width: 70vw;
    font-size: clamp(46px, 5.2vw, 80px);
  }

  .grain {
    opacity: .055;
    mix-blend-mode: soft-light;
  }

  .orbit { will-change: transform, opacity; }

  @keyframes grain-shiver {
    0% { transform: translate3d(-1%, -1%, 0) scale(1.03); }
    50% { transform: translate3d(1%, .5%, 0) scale(1.035); }
    100% { transform: translate3d(-.5%, 1%, 0) scale(1.03); }
  }
}

@media (max-width: 800px) {
  .background-reel { position: absolute; inset: 0; z-index: -2; }
  .bg-scene { display: none; }
  .bg-hero {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--paper);
  }
  .scene-world { display: none; }
}