/* Cube gate: a glass cube grows as you scroll until you are inside it (static/js/gate.js sets --g --e --t --o). */
.gate{max-width:none;padding:0;height:360vh;border-top:1px solid var(--line);--g:0;--z:-2100px;--r:0;--t:1;--o:0;--q:0}
.gate-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.gate-glow{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(91,46,255,.35),rgba(0,194,255,.12) 38%,transparent 65%);
  opacity:calc(.5 + var(--g) * .5)}
.gate-scene{position:absolute;inset:0;perspective:900px;perspective-origin:50% 50%}
.gate-cube{--cs:min(520px,86vmin);position:absolute;left:50%;top:50%;width:var(--cs);height:var(--cs);
  margin:calc(var(--cs) / -2) 0 0 calc(var(--cs) / -2);transform-style:preserve-3d;will-change:transform;
  /* starts far away and small; travels toward you until the camera is inside, spinning slightly */
  transform:translateZ(var(--z)) rotateX(calc(-22deg + var(--r) * 22deg)) rotateY(calc(28deg + var(--r) * 152deg))}
.gate-cube i{position:absolute;inset:0;border:2px solid rgba(0,194,255,.6);
  background:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--cs) / 8) calc(var(--cs) / 8),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/calc(var(--cs) / 8) calc(var(--cs) / 8),
    linear-gradient(135deg,rgba(91,46,255,.30),rgba(0,194,255,.10) 55%,rgba(255,61,154,.20));
  box-shadow:inset 0 0 70px rgba(0,194,255,.28),0 0 30px rgba(91,46,255,.35)}
.gate-cube i:nth-child(1){transform:translateZ(calc(var(--cs) / 2))}
.gate-cube i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--cs) / 2))}
.gate-cube i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--cs) / 2))}
.gate-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--cs) / 2))}
.gate-cube i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--cs) / 2))}
.gate-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--cs) / 2))}

.gate-text{position:absolute;left:0;right:0;top:15%;text-align:center;padding:0 var(--gutter);opacity:var(--t);transform:translateY(calc(var(--g) * -30px));
  pointer-events:none}
.gate-text h2{font-size:var(--text-h2);margin:0 0 var(--space-1)}
.gate-text p:last-child{margin:0}
/* a soft light at the end of the tunnel, so coming out feels like arriving somewhere new */
.gate-fade{position:absolute;inset:0;pointer-events:none;opacity:max(var(--o),var(--q));
  background:radial-gradient(circle at 50% 50%,rgba(0,194,255,.55),rgba(91,46,255,.35) 30%,var(--midnight) 72%)}

.gate-fade::after{content:"";position:absolute;inset:0;background:var(--midnight);opacity:var(--q)}

/* Everything after the gate is "inside the cube": faint wall grid near the edges of the screen */
.inside{position:relative;background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/90px 90px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/90px 90px}
.inside::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 40%,var(--midnight) 38%,transparent 100%)}
.inside>section{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .gate{height:auto}
  .gate-stage{position:relative;height:auto;min-height:70vh;padding:var(--space-5) 0}
  .gate-cube{transform:translateZ(-380px) rotateX(-22deg) rotateY(35deg)}
  .gate-text{position:relative;top:auto;opacity:1;transform:none;margin-bottom:var(--space-4)}
  .gate-fade{display:none}
}