/* ════════════════════════════════════════════════════════════════════════
   THE AURBIS - loading gate  ·  "Aetherial Astrolabe"
   A full-screen blocking loader: drifting starfield, concentric orbital
   rings, a determinate progress ring, and an amber rift-core that ignites
   and warps out to reveal the cosmos. Gold #d4a850 · Aether cyan #5fb8d4.
   ════════════════════════════════════════════════════════════════════════ */
.auld {
  --gold: #d4a850; --gold-2: #f3d489; --cyan: #5fb8d4; --cyan-2: #aef0ff;
  --void: #04060c; --ink: #ece6f6; --ink-dim: #9a93b4;
  --mono: 'Martian Mono', ui-monospace, monospace;
  --disp: 'Marcellus', 'Times New Roman', serif;
  position: fixed; inset: 0; z-index: 100050; min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(1000px 700px at 50% 38%, rgba(20,18,42,.55), transparent 70%),
    radial-gradient(700px 520px at 76% 18%, rgba(212,168,80,.10), transparent 62%),
    radial-gradient(680px 560px at 22% 84%, rgba(95,184,212,.10), transparent 62%),
    var(--void);
  color: var(--ink); overflow: hidden;
  transition: opacity .9s cubic-bezier(.7,0,.2,1), filter .9s cubic-bezier(.7,0,.2,1);
}
.auld__stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* vignette + film grain over everything */
.auld__grain { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 56%, rgba(2,3,8,.7) 100%);
}
.auld__grain::after { content: ""; position: absolute; inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

.auld__stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }

/* ── the astrolabe ──────────────────────────────────────────────────── */
.auld__astrolabe { position: relative; width: 220px; height: 220px; display: grid; place-items: center;
  animation: auldRise 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes auldRise { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }

/* determinate progress ring (SVG) */
.auld__prog { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.auld__prog-track { fill: none; stroke: rgba(184,168,224,.12); stroke-width: 1.5; }
.auld__prog-arc { fill: none; stroke: url(#auldGrad); stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(212,168,80,.7));
  stroke-dasharray: 578.05; stroke-dashoffset: 578.05; transition: stroke-dashoffset .35s cubic-bezier(.22,.78,.27,1); }

/* spinning orbital rings */
.auld__ring { position: absolute; border-radius: 50%; }
.auld__ring--1 { inset: 18px; border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent); animation: auldSpin 14s linear infinite; }
.auld__ring--2 { inset: 42px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent); animation: auldSpin 9s linear infinite reverse; }
.auld__ring--3 { inset: 66px; border: 1px dashed color-mix(in srgb, var(--gold) 26%, transparent); animation: auldSpin 22s linear infinite; }
.auld__ring::before { content: ""; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.auld__ring--2::before { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
@keyframes auldSpin { to { transform: rotate(360deg); } }

/* drifting nodes (constellation marks) */
.auld__node { position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px;
  border-radius: 50%; background: var(--cyan-2); box-shadow: 0 0 8px var(--cyan); opacity: .8; }
.auld__node--1 { animation: auldOrbit1 11s linear infinite; }
.auld__node--2 { width: 3px; height: 3px; background: var(--gold-2); box-shadow: 0 0 8px var(--gold); animation: auldOrbit2 16s linear infinite; }
@keyframes auldOrbit1 { from { transform: rotate(0) translateX(82px); } to { transform: rotate(360deg) translateX(82px); } }
@keyframes auldOrbit2 { from { transform: rotate(120deg) translateX(58px); } to { transform: rotate(480deg) translateX(58px); } }

/* the rift core - amber diamond */
.auld__core { position: relative; width: 26px; height: 26px; transform: rotate(45deg); border-radius: 5px;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 26px 4px rgba(212,168,80,.55), inset 0 0 8px rgba(255,255,255,.5);
  animation: auldCore 3.2s ease-in-out infinite; }
.auld__core::after { content: ""; position: absolute; inset: -10px; border-radius: 8px;
  background: radial-gradient(circle, rgba(212,168,80,.4), transparent 70%); transform: rotate(-45deg); }
@keyframes auldCore { 0%,100% { box-shadow: 0 0 22px 3px rgba(212,168,80,.45), inset 0 0 8px rgba(255,255,255,.45); }
  50% { box-shadow: 0 0 40px 8px rgba(212,168,80,.75), inset 0 0 12px rgba(255,255,255,.7); } }

/* ── text + bar ─────────────────────────────────────────────────────── */
.auld__brand { margin-top: 30px; font-family: var(--disp); font-size: clamp(1.5rem, 3.4vw, 2.2rem);
  letter-spacing: .26em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 30px rgba(212,168,80,.3);
  animation: auldRise 1.1s .12s cubic-bezier(.16,1,.3,1) both; }
.auld__bar { margin-top: 20px; width: min(320px, 64vw); height: 2px; border-radius: 2px;
  background: rgba(184,168,224,.14); overflow: hidden; animation: auldRise 1.1s .2s cubic-bezier(.16,1,.3,1) both; }
.auld__bar-fill { display: block; height: 100%; width: 0%; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--cyan)); box-shadow: 0 0 10px rgba(212,168,80,.6);
  transition: width .35s cubic-bezier(.22,.78,.27,1); }
.auld__meta { margin-top: 14px; display: flex; align-items: center; gap: 16px; min-height: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  animation: auldRise 1.1s .28s cubic-bezier(.16,1,.3,1) both; }
.auld__status { color: var(--ink-dim); transition: opacity .3s ease; }
.auld__status.swap { opacity: 0; }
.auld__pct { color: var(--gold-2); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }

/* ── ready: "Enter the Aurbis" gesture prompt ───────────────────────── */
.auld__enter { margin-top: 14px; opacity: 0; transform: translateY(6px); pointer-events: none; height: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2);
  display: flex; align-items: center; gap: 9px;
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1); }
.auld__enter-arr { display: inline-block; transition: transform .25s ease; }
.auld.is-ready { cursor: pointer; }
.auld.is-ready .auld__meta { opacity: 0; height: 0; margin-top: 0; overflow: hidden; transition: opacity .3s ease; }
.auld.is-ready .auld__enter { opacity: 1; transform: none; height: auto; margin-top: 12px;
  animation: auldEnterPulse 2.2s ease-in-out infinite; }
.auld.is-ready:hover .auld__enter-arr { transform: translateX(4px); }
.auld.is-ready .auld__core { animation: auldCoreReady 2.2s ease-in-out infinite; }
@keyframes auldEnterPulse { 0%,100% { opacity: .72; } 50% { opacity: 1; text-shadow: 0 0 16px rgba(212,168,80,.55); } }
@keyframes auldCoreReady {
  0%,100% { transform: rotate(45deg) scale(1); box-shadow: 0 0 30px 5px rgba(212,168,80,.6), inset 0 0 10px rgba(255,255,255,.6); }
  50% { transform: rotate(45deg) scale(1.12); box-shadow: 0 0 54px 12px rgba(212,168,80,.85), inset 0 0 16px #fff; } }

/* ── ignite + warp-out exit ─────────────────────────────────────────── */
.auld.is-igniting .auld__core { animation: auldIgnite .7s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes auldIgnite { 0% { transform: rotate(45deg) scale(1); }
  45% { transform: rotate(45deg) scale(1.5); box-shadow: 0 0 80px 24px rgba(255,240,210,.9), inset 0 0 20px #fff; background: #fff; }
  100% { transform: rotate(45deg) scale(0); box-shadow: 0 0 120px 60px rgba(255,240,210,0); background: #fff; } }
.auld.is-igniting .auld__ring { animation-duration: 1.1s !important; }
.auld.is-done { opacity: 0; filter: blur(8px); transform: scale(1.06); pointer-events: none; }

/* ── reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .auld__ring, .auld__node, .auld__core, .auld__astrolabe, .auld__brand, .auld__bar, .auld__meta, .auld__enter { animation: none !important; }
  .auld.is-ready .auld__core { animation: none !important; }
  .auld.is-igniting .auld__core { animation: none !important; opacity: 0; }
  .auld { transition: opacity .3s ease; }
  .auld.is-done { filter: none; transform: none; }
}