/* Vonix — boot sequence styles.
 * Original visuals only: no console logos, no trademarked shapes or palettes.
 */

:root {
  --cyan: #5ce1ff;
  --violet: #a78bfa;
  --ink: #ffffff;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #03040a;
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.boot-body { display: grid; place-items: center; }

/* ---------------- stage ---------------- */
.boot-stage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  /* Opaque from the very first paint: an animated-in overlay would let the
     page underneath show for a frame, which defeats the whole purpose. */
  /* Transparent on purpose: the two opaque door halves provide the blackout.
     A background here would make the doors open onto a dark pane instead of
     the live page. */
  background: transparent;
  opacity: 1;
  overflow: hidden;
  isolation: isolate;
}


/* ---------------- core glyph ---------------- */
.boot-core {
  position: relative;
  width: 232px;
  height: 232px;
  display: grid;
  place-items: center;
  opacity: 1;
  z-index: 2;
}

.core-ring {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
}
.core-ring-a {
  width: 232px; height: 232px;
  border: 1px solid rgba(92, 225, 255, 0.42);
  box-shadow: 0 0 42px rgba(92, 225, 255, 0.16) inset;
}
.core-ring-b {
  width: 180px; height: 180px;
  border: 1px solid rgba(167, 139, 250, 0.5);
  box-shadow: 0 0 32px rgba(167, 139, 250, 0.2) inset;
}
.core-ring-c {
  width: 126px; height: 126px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
}

/* three orbital markers, positioned with transforms so anime can animate them */
.core-orbit {
  position: absolute;
  width: 232px; height: 232px;
  animation: orbit-spin 18s linear infinite;
}
.core-orbit i {
  position: absolute;
  width: 9px; height: 9px;
  border-radius: 50%;
  opacity: 0;
  background: var(--cyan);
  box-shadow: 0 0 14px var(--cyan);
}
.core-orbit i:nth-child(1) { top: -4px; left: 50%; margin-left: -4px; }
.core-orbit i:nth-child(2) {
  bottom: 14%;
  right: 8%;
  background: var(--violet);
  box-shadow: 0 0 14px var(--violet);
}
.core-orbit i:nth-child(3) {
  bottom: 14%;
  left: 8%;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* the mark: three interlocking diamonds, same language as the site brand */
.core-glyph {
  position: relative;
  width: 68px;
  height: 68px;
  opacity: 0;
}
.core-glyph::before,
.core-glyph::after {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  border: 3px solid var(--cyan);
  border-radius: 6px;
  transform: rotate(45deg);
}
.core-glyph::before { top: 0; left: 0; }
.core-glyph::after {
  bottom: 0; right: 0;
  border-color: var(--violet);
  width: 28px; height: 28px;
}

/* ---------------- wordmark ---------------- */
.boot-word {
  position: absolute;
  bottom: 33%;
  display: flex;
  gap: 0.12em;
  z-index: 2;
}
.boot-letter {
  display: inline-block;
  font-size: clamp(2.1rem, 5.4vw, 3.3rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  opacity: 0;
  /* Solid fill + layered glow instead of background-clip:text.
     `background-clip: text` does not composite under a 3D transform in Chrome,
     which rendered the wordmark invisible while animating. */
  color: #ffffff;
  text-shadow:
    0 0 18px rgba(92, 225, 255, 0.55),
    0 0 42px rgba(167, 139, 250, 0.35);
  will-change: transform, opacity;
}

.boot-tag {
  position: absolute;
  bottom: calc(33% - 34px);
  margin: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  z-index: 2;
}

/* ---------------- skip ---------------- */
.boot-skip {
  position: absolute;
  right: 22px;
  bottom: 20px;
  z-index: 5;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  padding: 7px 15px;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.boot-skip:hover {
  color: #fff;
  border-color: rgba(92, 225, 255, 0.55);
  background: rgba(92, 225, 255, 0.1);
}
.boot-skip:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------------- reduced motion ---------------- */
.boot-stage.is-reduced .core-orbit { animation: none; }
.boot-stage.is-reduced .core-ring,
.boot-stage.is-reduced .core-glyph,
.boot-stage.is-reduced .boot-tag,

@media (max-width: 560px) {
  .boot-core { width: 176px; height: 176px; }
  .core-ring-a { width: 176px; height: 176px; }
  .core-ring-b { width: 136px; height: 136px; }
  .core-ring-c { width: 96px; height: 96px; }
  .core-orbit { width: 176px; height: 176px; }
  .core-glyph { width: 54px; height: 54px; }
  .core-glyph::before { width: 30px; height: 30px; border-width: 2px; }
  .core-glyph::after { width: 22px; height: 22px; border-width: 2px; }
  .boot-word { bottom: 30%; }
  .boot-tag { bottom: calc(30% - 30px); }
  .boot-skip { right: 12px; bottom: 12px; }
}

@media (max-height: 520px) {
  .boot-word { bottom: 26%; }
  .boot-tag { display: none; }
}

/* While the boot overlay owns the screen, nothing underneath may paint.
   `body.is-booting > *` covers every page (picker, detail, messenger) without
   naming each element, so adding a new surface cannot leak through later. */
body.is-booting > *:not(#bootStage):not(.sr-only) {
  visibility: hidden !important;
}
body.is-booting {
  overflow: hidden !important;
}
/* The stage itself is a direct child, so re-assert it explicitly. */
body.is-booting > #bootStage {
  visibility: visible !important;
}


/* ==================================================================
   VAULT GATE
   Two halves that slide apart. Each plate carries horizontal neon seams
   whose gradients sweep continuously, so the doors look energised rather
   than static. All geometry is CSS — no images, no console assets.
   ================================================================== */

.boot-stage {
  /* the particle canvas sits behind the doors; stage stays transparent */
  background: transparent;
}


.gate-half {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.15%;           /* slight overlap closes the centre seam */
  z-index: 3;
  overflow: hidden;
  will-change: transform;
}

.gate-left  { left: 0; }
.gate-right { right: 0; }

/* The plate is the metal slab: a dark gradient with a subtle brushed grain
   built from repeating-linear-gradient (no image request). */
.gate-plate {
  position: absolute;
  inset: 0;
  /* carries the ambient colour the stage no longer paints */
  background-color: #03040a;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.014) 0px,
      rgba(255, 255, 255, 0.014) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(180deg, #0a0d18 0%, #070913 46%, #0b0e1c 100%);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.85);
}

/* ---------- vertical ribs ---------- */
.rib {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(92,225,255,0.14) 22%, rgba(167,139,250,0.18) 78%, transparent);
}
.rib-1 { left: 22%; }
.rib-2 { left: 50%; }
.rib-3 { left: 78%; }

/* ---------- corner brackets ---------- */
.bracket {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 2px solid rgba(92, 225, 255, 0.42);
  filter: drop-shadow(0 0 8px rgba(92, 225, 255, 0.3));
}
.bracket-tl { top: 26px; left: 26px; border-right: 0; border-bottom: 0; }
.bracket-bl { bottom: 26px; left: 26px; border-right: 0; border-top: 0; }
.bracket-tr { top: 26px; right: 26px; border-left: 0; border-bottom: 0; }
.bracket-br { bottom: 26px; right: 26px; border-left: 0; border-top: 0; }

/* ---------- glowing door edges ---------- */
.gate-edge {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, #5ce1ff 18%, #ffffff 50%, #a78bfa 82%, transparent);
  box-shadow:
    0 0 18px rgba(92, 225, 255, 0.8),
    0 0 46px rgba(167, 139, 250, 0.45);
  opacity: 0.95;
}
.gate-edge-left  { right: 0; }
.gate-edge-right { left: 0; }

/* ---------- centre mark, above the doors ---------- */
.gate-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 232px;
  height: 232px;
  margin: -116px 0 0 -116px;
  display: grid;
  place-items: center;
  z-index: 5;
  pointer-events: none;
}

/* Text and progress sit above the closed doors */
.boot-word,
.boot-tag {
  z-index: 6;
}

/* Reduced motion: no seam sweeping, no orbit spin */
.boot-stage.is-reduced .core-orbit { animation: none; }

@media (max-width: 560px) {
  .bracket { width: 30px; height: 30px; }
  .bracket-tl, .bracket-tr { top: 14px; }
  .bracket-tl, .bracket-bl { left: 14px; }
  .bracket-tr, .bracket-br { right: 14px; }
  .bracket-bl, .bracket-br { bottom: 14px; }
  .rib-3 { display: none; }
}

/* The centre mark is now the real renaissance emblem. */
.core-emblem {
  width: 190px;
  height: 190px;
  display: block;
  object-fit: contain;
  opacity: 0;
  border-radius: 50%;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 22px rgba(140, 90, 245, 0.55));
}
.boot-stage.is-reduced .core-emblem { opacity: 1; }


/* ==================================================================
   PREMIUM FLOWING GRADIENT VEIL
   No doors, no canvas. Four radial blobs on independent GPU-composited
   transform loops, blended so the colours flow through each other, with a
   grain pass to stop banding. It melts off the bottom edge of the page.
   ================================================================== */

.boot-stage {
  background: #03020a;
  overflow: hidden;
}

.veil {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* keep the field saturated where the blobs overlap */
  isolation: isolate;
}

.veil-blob {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  /* enormous soft falloff = gradient, not a circle */
  filter: blur(72px);
  opacity: 0.85;
  transform: translateZ(0);
}

/* violet core, drifting slowly across the middle */
.blob-a {
  width: 78vmax;
  height: 78vmax;
  left: -18vmax;
  top: -22vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(126, 58, 255, 0.95) 0%,
    rgba(96, 40, 210, 0.55) 38%,
    rgba(60, 20, 140, 0) 72%);
  animation: drift-a 26s ease-in-out infinite alternate;
}

/* electric blue, counter-drifting */
.blob-b {
  width: 68vmax;
  height: 68vmax;
  right: -20vmax;
  top: 4vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(58, 132, 255, 0.95) 0%,
    rgba(40, 96, 230, 0.5) 40%,
    rgba(20, 50, 150, 0) 74%);
  animation: drift-b 32s ease-in-out infinite alternate;
}

/* cyan filament light */
.blob-c {
  width: 56vmax;
  height: 56vmax;
  left: 12vmax;
  bottom: -26vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(86, 226, 255, 0.8) 0%,
    rgba(40, 160, 210, 0.4) 42%,
    rgba(10, 60, 110, 0) 74%);
  animation: drift-c 21s ease-in-out infinite alternate;
}

/* ember accent — the warm note that stops it feeling cold */
.blob-d {
  width: 46vmax;
  height: 46vmax;
  right: 6vmax;
  bottom: -16vmax;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 148, 74, 0.62) 0%,
    rgba(220, 90, 40, 0.3) 44%,
    rgba(120, 40, 10, 0) 76%);
  animation: drift-d 17s ease-in-out infinite alternate;
}

/* magenta bloom tying violet to blue */
.veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    40vmax 30vmax at 62% 38%,
    rgba(232, 92, 190, 0.30) 0%,
    rgba(200, 60, 170, 0.12) 45%,
    rgba(120, 20, 100, 0) 72%
  );
  mix-blend-mode: screen;
  animation: drift-e 24s ease-in-out infinite alternate;
}

@keyframes drift-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(9vmax, 6vmax, 0) scale(1.12); }
  100% { transform: translate3d(-4vmax, 12vmax, 0) scale(0.96); }
}
@keyframes drift-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.04); }
  50%  { transform: translate3d(-11vmax, 9vmax, 0) scale(0.92); }
  100% { transform: translate3d(5vmax, -6vmax, 0) scale(1.14); }
}
@keyframes drift-c {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-8vmax, -10vmax, 0) scale(1.18); }
  100% { transform: translate3d(12vmax, -3vmax, 0) scale(0.9); }
}
@keyframes drift-d {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  50%  { transform: translate3d(-7vmax, -6vmax, 0) scale(0.9); }
  100% { transform: translate3d(-13vmax, 4vmax, 0) scale(1.2); }
}
@keyframes drift-e {
  0%   { opacity: 0.55; transform: translate3d(0,0,0) scale(1); }
  50%  { opacity: 1;    transform: translate3d(-6vmax, 4vmax, 0) scale(1.15); }
  100% { opacity: 0.5;  transform: translate3d(7vmax, -5vmax, 0) scale(0.95); }
}

/* Fine grain stops the blurred gradients banding on 8-bit panels. */
.veil-grain {
  position: absolute;
  inset: -50%;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/>\
</filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
}

/* ------------------------------------------------------------------
   MELT: the gradient dissolves off the bottom of the page.
   A tall soft mask plus a downward fade, so the colours thin out and
   vanish rather than ending on a hard line.
   ------------------------------------------------------------------ */
.veil-melt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42vh;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(3, 2, 10, 0) 0%,
    rgba(3, 2, 10, 0.35) 34%,
    rgba(3, 2, 10, 0.72) 62%,
    rgba(3, 2, 10, 0.94) 84%,
    #03020a 100%
  );
}

/* a second, softer pass pushes the melt higher on one side so the edge is
   irregular rather than a straight gradient band */
.veil-melt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 60% at 38% 118%,
    rgba(3, 2, 10, 0.98) 0%,
    rgba(3, 2, 10, 0.6) 42%,
    rgba(3, 2, 10, 0) 72%
  );
}

@media (prefers-reduced-motion: reduce) {
  .veil-blob,
  .veil::after { animation: none; }
}

@media (max-width: 640px) {
  .veil-blob { filter: blur(56px); }
  .veil-melt { height: 34vh; }
}

/* ==================================================================
   PLASMA STRUCTURE
   The soft blobs alone read as haze. These layers give the field actual
   plasma character: banded flow, bright filament streaks, and hot cores —
   all still CSS/GPU so the 60fps survives.
   ================================================================== */

/* 1. BANDED FLOW: repeating conic wedges create the ridged structure plasma
      has, warped by a slow rotation so it never looks like a static pattern. */
.veil::before {
  content: "";
  position: absolute;
  inset: -25%;
  background:
    repeating-conic-gradient(
      from 0deg at 42% 46%,
      rgba(126, 58, 255, 0.00) 0deg,
      rgba(126, 58, 255, 0.18) 6deg,
      rgba(58, 132, 255, 0.26) 11deg,
      rgba(86, 226, 255, 0.12) 16deg,
      rgba(126, 58, 255, 0.00) 22deg
    ),
    repeating-conic-gradient(
      from 137deg at 68% 62%,
      rgba(255, 148, 74, 0.00) 0deg,
      rgba(232, 92, 190, 0.16) 8deg,
      rgba(255, 148, 74, 0.12) 14deg,
      rgba(255, 148, 74, 0.00) 24deg
    );
  filter: blur(28px);
  mix-blend-mode: screen;
  opacity: 0.75;
  animation: plasma-warp 34s linear infinite;
  will-change: transform;
}

@keyframes plasma-warp {
  0%   { transform: rotate(0deg) scale(1.05); }
  50%  { transform: rotate(180deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1.05); }
}

/* 2. FILAMENTS: thin bright streaks like the plasma arcs in the reference.
      Each is a long skewed gradient bar drifting on its own loop. */
.veil-filaments {
  position: absolute;
  z-index: 1;
  inset: -20%;
  mix-blend-mode: screen;
  pointer-events: none;
  overflow: hidden;
}
.veil-filaments i {
  position: absolute;
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(86, 226, 255, 0.0) 12%,
    rgba(150, 240, 255, 0.85) 48%,
    rgba(232, 92, 190, 0.7) 62%,
    rgba(126, 58, 255, 0) 100%
  );
  filter: blur(1px) drop-shadow(0 0 6px rgba(86, 226, 255, 0.65));
  will-change: transform, opacity;
  opacity: 0.75;
}
.veil-filaments i:nth-child(1) { width: 46vw; top: 22%; left: -10vw; transform: rotate(-14deg); animation: fil-a 19s ease-in-out infinite alternate; }
.veil-filaments i:nth-child(2) { width: 62vw; top: 40%; left: 4vw;  transform: rotate(6deg);   animation: fil-b 26s ease-in-out infinite alternate; }
.veil-filaments i:nth-child(3) { width: 38vw; top: 58%; left: 22vw; transform: rotate(-8deg);  animation: fil-c 15s ease-in-out infinite alternate; }
.veil-filaments i:nth-child(4) { width: 54vw; top: 72%; left: -6vw; transform: rotate(11deg);  animation: fil-a 31s ease-in-out infinite alternate-reverse; }
.veil-filaments i:nth-child(5) { width: 30vw; top: 31%; left: 40vw; transform: rotate(-3deg);  animation: fil-c 22s ease-in-out infinite alternate-reverse; }
.veil-filaments i:nth-child(6) { width: 44vw; top: 84%; left: 12vw; transform: rotate(-16deg); animation: fil-b 17s ease-in-out infinite alternate-reverse; }

@keyframes fil-a {
  0%   { transform: translate3d(0,0,0) rotate(-14deg) scaleX(0.9); opacity: 0.35; }
  50%  { transform: translate3d(9vw,3vh,0) rotate(-9deg) scaleX(1.15); opacity: 1; }
  100% { transform: translate3d(-5vw,6vh,0) rotate(-18deg) scaleX(0.95); opacity: 0.5; }
}
@keyframes fil-b {
  0%   { transform: translate3d(0,0,0) rotate(6deg) scaleX(1); opacity: 0.45; }
  50%  { transform: translate3d(-12vw,-4vh,0) rotate(12deg) scaleX(1.2); opacity: 0.95; }
  100% { transform: translate3d(6vw,5vh,0) rotate(2deg) scaleX(0.88); opacity: 0.4; }
}
@keyframes fil-c {
  0%   { transform: translate3d(0,0,0) rotate(-8deg) scaleX(1); opacity: 0.6; }
  50%  { transform: translate3d(7vw,-6vh,0) rotate(-2deg) scaleX(0.85); opacity: 1; }
  100% { transform: translate3d(-8vw,2vh,0) rotate(-14deg) scaleX(1.1); opacity: 0.45; }
}

/* 3. HOT CORES: two intense points where the plasma is brightest, with
      chromatic falloff (white core -> cyan -> violet -> transparent). */
.veil-hot {
  position: absolute;
  z-index: 1;
  inset: 0;
  mix-blend-mode: screen;
  pointer-events: none;
}
.veil-hot span {
  position: absolute;
  border-radius: 50%;
  filter: blur(18px);
  will-change: transform, opacity;
}
.veil-hot span:nth-child(1) {
  width: 26vmax; height: 26vmax;
  left: 24vmax; top: 16vmax;
  background: radial-gradient(circle,
    rgba(255,255,255,0.85) 0%,
    rgba(150,240,255,0.55) 16%,
    rgba(86,226,255,0.30) 34%,
    rgba(126,58,255,0.14) 58%,
    rgba(126,58,255,0) 76%);
  animation: core-pulse 9s ease-in-out infinite alternate;
}
.veil-hot span:nth-child(2) {
  width: 18vmax; height: 18vmax;
  right: 18vmax; top: 44vmax;
  background: radial-gradient(circle,
    rgba(255,236,210,0.8) 0%,
    rgba(255,148,74,0.5) 20%,
    rgba(232,92,190,0.26) 42%,
    rgba(126,58,255,0.10) 62%,
    rgba(126,58,255,0) 78%);
  animation: core-pulse 13s ease-in-out infinite alternate-reverse;
}
@keyframes core-pulse {
  0%   { transform: scale(0.9) translate3d(0,0,0); opacity: 0.7; }
  50%  { transform: scale(1.18) translate3d(2vmax,-1vmax,0); opacity: 1; }
  100% { transform: scale(0.95) translate3d(-2vmax,2vmax,0); opacity: 0.65; }
}

/* 4. CONTRAST PASS: deepen the darks so the plasma has punch instead of
      washing into flat mid-tones. */
.veil-contrast {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    130% 100% at 50% 40%,
    rgba(3,2,10,0) 30%,
    rgba(3,2,10,0.28) 68%,
    rgba(3,2,10,0.68) 100%
  );
}

@media (prefers-reduced-motion: reduce) {
  .veil::before,
  .veil-filaments i,
  .veil-hot span { animation: none; }
}