.opening-aura { position: fixed; inset: 0; z-index: 100; isolation: isolate; overflow: hidden; display: grid; place-items: center; padding: 26px; background: #030907; color: #f3fff7; opacity: 1; transition: opacity 900ms ease, visibility 900ms; }
.opening-aura[hidden] { display: none; }

/* Avoid filtered 3D canvas compositing during the iPhone welcome fade. */
@supports (-webkit-touch-callout: none) {
  .opening-aura .opening-depth { perspective: none; }
  .opening-aura .opening-foundation.aura-formation,
  .opening-aura.is-leaving .opening-foundation.aura-formation {
    transform: none;
    filter: none;
  }
  .opening-aura .matrix-nebula { filter: none; transform: translate(-50%, -50%); }
  .opening-aura .matrix-stars { transform: none; }
}
.opening-aura.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-aura.is-leaving .opening-foundation { transform: translateZ(-90px) rotateX(3deg) scale(.84); opacity: .4; transition: transform 900ms ease, opacity 900ms ease; }
.opening-depth { position: absolute; inset: 0; perspective: 850px; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #34534940, transparent 55%), #030907; }
.opening-foundation.aura-formation { position: absolute; inset: 3% 0 0; width: 100%; height: 94%; border: 0; border-radius: 0; box-shadow: none; background: transparent; opacity: 1; cursor: default; pointer-events: none; transform: translateZ(-35px) rotateX(6deg); filter: drop-shadow(0 0 5px #ffffff55); }
.opening-foundation::before { display: none; }
.matrix-nebula { position: absolute; inset: -20%; background: radial-gradient(ellipse at 28% 38%, #bedfff16, transparent 34%), radial-gradient(ellipse at 70% 60%, #ffffff0d, transparent 32%); filter: blur(32px); transform: translateZ(-300px) rotate(-18deg); }
.matrix-stars { position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(circle at 12% 22%, #fff 0 1px, transparent 2px), radial-gradient(circle at 78% 16%, #fff 0 .6px, transparent 2px), radial-gradient(circle at 88% 71%, #e4f2ff 0 1px, transparent 2px), radial-gradient(circle at 23% 84%, #fff 0 .7px, transparent 2px), radial-gradient(circle at 61% 91%, #fff 0 .5px, transparent 2px); transform: translateZ(-420px) scale(1.4); }
.matrix-depth-light { position: absolute; inset: 8% 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 44%, #03090744 76%, #030907c4 100%); box-shadow: none; }
.opening-copy { position: relative; z-index: 2; align-self: start; width: min(620px, 100%); margin-top: clamp(4px, 4vh, 45px); text-align: center; padding: 20px 12px; text-shadow: 0 2px 18px #000; background: none; }
.opening-brand { font-size: .65rem; letter-spacing: .3em; color: #c9ddd0; }
.opening-copy h1 { min-height: 5.1em; margin: 18px 0 0; font-size: clamp(1.15rem, 3.7vw, 2rem); line-height: 1.55; font-weight: 400; letter-spacing: -.035em; text-transform: none; }
.opening-slogan { display: block; }
.slogan-line { display: block; min-height: 1.65em; text-wrap: balance; }
.slogan-quiet { color: #b9ccc2; font-size: .65em; }
.slogan-brand { color: #fff; font-weight: 650; letter-spacing: -.06em; }
.slogan-connect { color: #fff; font-weight: 500; }
.slogan-nodes { color: #f1fff6; font-weight: 650; text-shadow: 0 0 18px #e3ffef55; }
.slogan-matrix { color: #a5bdaf; font-size: .65em; letter-spacing: .15em; }
.opening-state { position: fixed; z-index: 2; left: 50%; bottom: max(32px, env(safe-area-inset-bottom, 0px)); width: min(34ch, calc(100vw - 52px)); margin: 0; transform: translateX(-50%); text-align: center; font-size: .67rem; color: #d6eadb; letter-spacing: .1em; }
.opening-aura:focus { outline: none; }
.opening-copy { max-height: calc(100% - 48px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.opening-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.opening-aura { background: #030907; }
.opening-depth { background: #030907; }
.matrix-nebula { inset: auto; left: 50%; top: 50%; width: min(82vw, 82vh); height: min(82vw, 82vh); border-radius: 50%; background: radial-gradient(ellipse at 46% 44%, #b5ffdb05 18%, #61dfa91d 35%, #28b97922 46%, #92f9c811 57%, transparent 73%); filter: blur(20px); transform: translate(-50%, -50%) translateZ(-110px); pointer-events: none; }
.matrix-depth-light { background: radial-gradient(ellipse at 50% 50%, transparent 44%, #03090744 76%, #030907c4 100%); }
.opening-copy { background: none; }
.opening-brand-small { font-size: .75em; letter-spacing: .12em; text-transform: none; }
@media (max-width: 650px) { .opening-copy { margin-top: clamp(12px, 3vh, 30px); } .opening-state { bottom: max(24px, env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .opening-aura { transition: none; } .opening-foundation.aura-formation { transform: none; } }
@media (prefers-reduced-motion: reduce) { .opening-aura.is-leaving .opening-foundation { transition: none; } }

/* The running canvas moves above the fade into Box with its own 2D transform. */
.opening-foundation.aura-formation,
.opening-aura.is-leaving .opening-foundation.aura-formation { transform: none; filter: none; }