/* Nexus Blue — Ceremonies.
   Twelve distinct choreographies. Each ceremony has its OWN keyframes; the
   .nb-ceremony class only carries staging and reduced-motion fallbacks.
   Every ceremony is captioned in a live region for screen readers.        */

.nb-ceremony {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  background: radial-gradient(60% 60% at 50% 45%, rgba(0,0,0,0.72), rgba(0,0,0,0.94));
  color: var(--nb-fg, #fff);
  pointer-events: none;
}
.nb-ceremony[data-open="false"] { display: none; }
.nb-ceremony .stage { position: relative; width: min(720px, 92vw); aspect-ratio: 4 / 3; }
.nb-ceremony .caption {
  position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%);
  font-family: "Orbitron", "Space Grotesk", sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  text-shadow: var(--nb-glow, 0 0 20px rgba(200,240,255,0.55));
}
.nb-ceremony svg { width: 100%; height: 100%; overflow: visible; }
.nb-sym-use { color: var(--nb-accent, #B9F2FF); }

/* -------- 1. first-node : beacon rises + six echoes fan out ------------ */
@keyframes nb-c1-beacon    { from { transform: translateY(60%) scale(0.4); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes nb-c1-echo      { from { transform: scale(0.2); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: 0.9; } }
.nb-ceremony[data-ceremony="first-node"] .beacon { animation: nb-c1-beacon var(--nb-motion-duration-slow, 1600ms) var(--nb-motion-ease-protocol) both; }
.nb-ceremony[data-ceremony="first-node"] .echo   { animation: nb-c1-echo var(--nb-motion-duration-mid, 900ms) 400ms both; }

/* -------- 2. 20-node-milestone : 20 stars converge to constellation ---- */
@keyframes nb-c2-star-in   { from { transform: translate(var(--sx,0), var(--sy,0)) scale(0.4); opacity: 0; } 80% { opacity: 1; } to { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes nb-c2-hex-lock  { from { transform: rotate(-30deg) scale(0.6); opacity: 0; } to { transform: rotate(0) scale(1); opacity: 1; } }
.nb-ceremony[data-ceremony="milestone-20"] .conv-star { animation: nb-c2-star-in 1400ms var(--nb-motion-ease-protocol) both; }
.nb-ceremony[data-ceremony="milestone-20"] .hex-lock  { animation: nb-c2-hex-lock 900ms 1200ms both; }

/* -------- 3. nexxmail-activation : envelope opens, dove crosses -------- */
@keyframes nb-c3-flap      { from { transform: rotateX(-95deg); opacity: 0; } to { transform: rotateX(0deg); opacity: 1; } }
@keyframes nb-c3-dove      { from { transform: translateX(-140%) translateY(20%); opacity: 0; } 40% { opacity: 1; } to { transform: translateX(140%) translateY(-8%); opacity: 0; } }
.nb-ceremony[data-ceremony="nexxmail"] .flap { transform-origin: 50% 100%; animation: nb-c3-flap 900ms var(--nb-motion-ease-protocol) both; }
.nb-ceremony[data-ceremony="nexxmail"] .dove { animation: nb-c3-dove 1400ms 600ms both; }

/* -------- 4. ether-activation : liquid ripple + 8-pt stars catch it ---- */
@keyframes nb-c4-ripple    { from { r: 4; opacity: 1; } to { r: 260; opacity: 0; } }
@keyframes nb-c4-star8     { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.nb-ceremony[data-ceremony="ether"] .ripple { animation: nb-c4-ripple 1400ms var(--nb-motion-ease-protocol) both; fill: none; stroke: currentColor; stroke-width: 1.4; }
.nb-ceremony[data-ceremony="ether"] .s8     { animation: nb-c4-star8 700ms 900ms both; transform-origin: center; }

/* -------- 5. blue-mobile-activation : signal-tower arcs pulse ---------- */
@keyframes nb-c5-arc       { 0% { stroke-dashoffset: 400; opacity: 0.2; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes nb-c5-glyph     { from { transform: translateX(-40%); } to { transform: translateX(40%); } }
.nb-ceremony[data-ceremony="blue-mobile"] .arc   { stroke-dasharray: 400; animation: nb-c5-arc 1100ms var(--nb-motion-ease-protocol) both; }
.nb-ceremony[data-ceremony="blue-mobile"] .glyph { animation: nb-c5-glyph 1500ms 300ms both; }

/* -------- 6. nexxpass-activation : 12-pt tessellation locks ------------ */
@keyframes nb-c6-tess      { from { transform: rotate(-45deg) scale(0.4); opacity: 0; } to { transform: rotate(0deg) scale(1); opacity: 1; } }
@keyframes nb-c6-core      { from { transform: scale(0); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1.1); opacity: 1; } }
.nb-ceremony[data-ceremony="nexxpass"] .s12  { animation: nb-c6-tess 1200ms var(--nb-motion-ease-protocol) both; transform-origin: center; }
.nb-ceremony[data-ceremony="nexxpass"] .core { animation: nb-c6-core 900ms 800ms both; transform-origin: center; }

/* -------- 7. passkey-enrollment : rings collapse to 6-pt star ---------- */
@keyframes nb-c7-ring      { from { r: 220; opacity: 0.05; } to { r: 20; opacity: 1; } }
@keyframes nb-c7-snap      { from { transform: scale(0); opacity: 0; } 60% { transform: scale(1.35); opacity: 1; } to { transform: scale(1); opacity: 1; } }
.nb-ceremony[data-ceremony="passkey"] .ring { fill: none; stroke: currentColor; stroke-width: 1.1; animation: nb-c7-ring 1300ms var(--nb-motion-ease-protocol) both; }
.nb-ceremony[data-ceremony="passkey"] .snap { animation: nb-c7-snap 700ms 1300ms both; transform-origin: center; }

/* -------- 8. credit-milestone : cascading 6-pt stars in Fibonacci timing */
@keyframes nb-c8-drop      { from { transform: translateY(-60%); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
.nb-ceremony[data-ceremony="credit-milestone"] .drop { animation: nb-c8-drop 900ms var(--nb-motion-ease-protocol) both; }
.nb-ceremony[data-ceremony="credit-milestone"] .drop:nth-child(1) { animation-delay:   0ms; }
.nb-ceremony[data-ceremony="credit-milestone"] .drop:nth-child(2) { animation-delay: 100ms; }
.nb-ceremony[data-ceremony="credit-milestone"] .drop:nth-child(3) { animation-delay: 200ms; }
.nb-ceremony[data-ceremony="credit-milestone"] .drop:nth-child(4) { animation-delay: 300ms; }
.nb-ceremony[data-ceremony="credit-milestone"] .drop:nth-child(5) { animation-delay: 500ms; }
.nb-ceremony[data-ceremony="credit-milestone"] .drop:nth-child(6) { animation-delay: 800ms; }
.nb-ceremony[data-ceremony="credit-milestone"] .drop:nth-child(7) { animation-delay:1300ms; }

/* -------- 9. achievement-unlock : star zooms from horizon, snaps to badge */
@keyframes nb-c9-zoom      { from { transform: translateY(20%) scale(0.05); opacity: 0; } 80% { opacity: 1; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes nb-c9-badge     { from { transform: scale(1.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.nb-ceremony[data-ceremony="achievement"] .zoom  { animation: nb-c9-zoom 1400ms var(--nb-motion-ease-protocol) both; }
.nb-ceremony[data-ceremony="achievement"] .badge { animation: nb-c9-badge 500ms 1400ms both; transform-origin: center; }

/* -------- 10. seasonal-event : aurora sheet drifts, doves scatter, rays sweep */
@keyframes nb-c10-aurora   { from { transform: translateX(-30%) skewX(-6deg); opacity: 0.4; } to { transform: translateX(30%) skewX(6deg); opacity: 1; } }
@keyframes nb-c10-dove     { from { transform: translate(0,0) rotate(0deg); opacity: 0; } to { transform: translate(var(--dx,120%), var(--dy,-30%)) rotate(var(--dr,-8deg)); opacity: 0.9; } }
.nb-ceremony[data-ceremony="seasonal"] .aurora { animation: nb-c10-aurora 1800ms var(--nb-motion-ease-protocol) both; }
.nb-ceremony[data-ceremony="seasonal"] .dove   { animation: nb-c10-dove 1600ms 300ms both; }

/* -------- 11. lotus-petal-mint : four-fold petal blossom --------------- */
@keyframes nb-c11-petal    { from { transform: rotate(var(--r,0deg)) translateX(0) scale(0); opacity: 0; } to { transform: rotate(var(--r,0deg)) translateX(120px) scale(1); opacity: 1; } }
@keyframes nb-c11-center   { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.nb-ceremony[data-ceremony="lotus-petal"] .petal  { animation: nb-c11-petal 1400ms var(--nb-motion-ease-protocol) both; transform-origin: center; }
.nb-ceremony[data-ceremony="lotus-petal"] .center { animation: nb-c11-center 900ms 1200ms both; transform-origin: center; }

/* -------- 12. aura-print-anniversary : constellation-13 rotates + points sequence */
@keyframes nb-c12-spin     { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes nb-c12-blink    { 0%, 100% { fill-opacity: 0.4; } 50% { fill-opacity: 1; } }
.nb-ceremony[data-ceremony="anniversary"] .constellation { animation: nb-c12-spin 6s linear infinite; transform-origin: center; }
.nb-ceremony[data-ceremony="anniversary"] .constellation circle { animation: nb-c12-blink 2s ease-in-out infinite; }
.nb-ceremony[data-ceremony="anniversary"] .constellation circle:nth-child(1) { animation-delay: 0ms; }
.nb-ceremony[data-ceremony="anniversary"] .constellation circle:nth-child(2) { animation-delay: 150ms; }
.nb-ceremony[data-ceremony="anniversary"] .constellation circle:nth-child(3) { animation-delay: 300ms; }
.nb-ceremony[data-ceremony="anniversary"] .constellation circle:nth-child(4) { animation-delay: 450ms; }
.nb-ceremony[data-ceremony="anniversary"] .constellation circle:nth-child(5) { animation-delay: 600ms; }
.nb-ceremony[data-ceremony="anniversary"] .constellation circle:nth-child(6) { animation-delay: 750ms; }

/* Reduced motion fallback: crossfade the caption into a static tableau
   frame. Every ceremony's SVG stays visible without animation. */
@media (prefers-reduced-motion: reduce) {
  .nb-ceremony * { animation: none !important; transition: none !important; }
}