/* Bexuvra motion. Every looping or result animation is keyed to a real request state written by code:
     data-bx-state="idle" | "pending" | "success" | "error"
   Nothing here turns "pending" into "success" on its own — only the code that received the server answer does.
   All animation stops under prefers-reduced-motion (block at the end). */

@keyframes bx-rise   { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bx-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes bx-mode   { from { opacity: .35; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@keyframes bx-float  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes bx-breathe{ 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes bx-spin   { to { transform: rotate(360deg); } }
@keyframes bx-spin-rev { to { transform: rotate(-360deg); } }
@keyframes bx-pop    { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes bx-draw   { from { stroke-dashoffset: 40; } to { stroke-dashoffset: 0; } }
@keyframes bx-shake  { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes bx-shimmer{ from { background-position: -220px 0; } to { background-position: 220px 0; } }
@keyframes bx-halo   { 0% { opacity: .9; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes bx-glint  { 0% { transform: rotate(0deg); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: rotate(300deg); opacity: 0; } }
@keyframes bx-glow-good { 0% { box-shadow: 0 0 0 0 rgba(79,209,165,.55); } 100% { box-shadow: 0 0 0 40px rgba(79,209,165,0); } }
@keyframes bx-pulse-blue{ 0% { box-shadow: 0 0 0 0 rgba(85,128,255,.5); } 100% { box-shadow: 0 0 0 28px rgba(85,128,255,0); } }
@keyframes bx-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bx-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bx-dash   { to { background-position: 28px 0; } }
@keyframes bx-packet { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ---------- Entrances (first paint only) ---------- */
.bx-rise { animation: bx-rise var(--bx-dur-enter) var(--bx-ease-out) both; animation-delay: var(--bx-delay, 0ms); }
.bx-stagger > * { animation: bx-rise var(--bx-dur-enter) var(--bx-ease-out) both; }
.bx-stagger > :nth-child(2) { animation-delay: 80ms; }
.bx-stagger > :nth-child(3) { animation-delay: 160ms; }
.bx-stagger > :nth-child(4) { animation-delay: 240ms; }
.bx-stagger > :nth-child(n+5) { animation-delay: 300ms; }
.bx-mode-enter { animation: bx-mode var(--bx-dur-mode) var(--bx-ease-out) both; }
.bx-grow-y { transform-origin: bottom; animation: bx-grow-y 900ms var(--bx-ease-out) both; animation-delay: var(--bx-delay, 0ms); }
.bx-grow-x { transform-origin: left;   animation: bx-grow-x 1000ms var(--bx-ease-out) both; animation-delay: var(--bx-delay, 300ms); }

/* ---------- Mark ---------- */
.bx-mark-stage { position: relative; display: grid; place-items: center; isolation: isolate; }
.bx-mark-stage::before {               /* soft light instead of a plaque: the mark sits in the navy */
  content: ""; position: absolute; inset: -30%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(67,105,199,.35), transparent 70%);
}
.bx-mark { display: block; object-fit: contain; filter: var(--bx-shadow-mark); }
.bx-mark-stage .bx-ring, .bx-mark-stage .bx-orbit, .bx-mark-stage .bx-orbit-2, .bx-mark-stage .bx-halo {
  position: absolute; border-radius: 50%; pointer-events: none; width: 128%; aspect-ratio: 1;
}
.bx-ring { border: 1px solid rgba(150,175,230,.5); box-shadow: 0 0 60px rgba(150,175,230,.18); animation: bx-breathe 3.2s ease-in-out infinite; }
.bx-orbit, .bx-orbit-2, .bx-halo { display: none; }
.bx-orbit   { border: 3px solid transparent; border-top-color: var(--bx-primary-hover); border-right-color: rgba(85,128,255,.35); }
.bx-orbit-2 { width: 142% !important; border: 2px solid transparent; border-bottom-color: var(--bx-gold); }
.bx-halo    { border: 2px solid rgba(195,212,255,.7); }

[data-bx-state="idle"]    .bx-mark { animation: bx-float 5s ease-in-out infinite; }
[data-bx-state="pending"] .bx-ring { border-color: rgba(85,128,255,.8); }
[data-bx-state="pending"] .bx-orbit   { display: block; animation: bx-spin var(--bx-dur-orbit) var(--bx-ease-in-out) infinite; }
[data-bx-state="pending"] .bx-orbit-2 { display: block; animation: bx-spin-rev 2.2s linear infinite; }
[data-bx-state="success"] .bx-ring { border-color: rgba(79,209,165,.85); }
[data-bx-state="success"] .bx-halo { display: block; animation: bx-halo 700ms var(--bx-ease-out) 120ms both; }
[data-bx-state="error"]   .bx-ring { border-color: rgba(255,138,122,.8); animation: none; }

/* Glint that runs once around the glass ring on success (owner video 5.5–6.1 s) */
.bx-glint { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 300deg, rgba(255,255,255,.55) 330deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 64%, #000 98%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 62%, #000 64%, #000 98%, transparent 100%); }
[data-bx-state="success"] .bx-glint { animation: bx-glint 650ms var(--bx-ease-out) 80ms both; }

/* ---------- Status badge (check / cross) ---------- */
.bx-badge-result { display: none; }
[data-bx-state="success"] .bx-badge-result--ok,
[data-bx-state="error"]   .bx-badge-result--bad { display: grid; animation: bx-pop 500ms var(--bx-ease-spring) both; }
.bx-draw { stroke-dasharray: 40; animation: bx-draw 450ms 250ms ease-out both; }

/* ---------- Buttons ---------- */
.bx-spinner { width: 18px; height: 18px; flex: none; box-sizing: border-box; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: bx-spin var(--bx-dur-spin) linear infinite; }
[data-bx-state="pending"] .bx-btn--primary,
.bx-btn--primary[aria-busy="true"] {
  background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  background-size: 220px 100%; background-repeat: no-repeat; animation: bx-shimmer 1.2s linear infinite; cursor: progress;
}
[data-bx-state="error"] .bx-shake-on-error { animation: bx-shake 450ms ease-in-out; }

/* ---------- Connection scene (PostgreSQL → Bexuvra, as in owner video) ---------- */
.bx-conn__line { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px;
  background-image: repeating-linear-gradient(90deg, rgba(150,175,230,.35) 0 10px, transparent 10px 18px); }
.bx-conn__packet { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--bx-link); box-shadow: 0 0 14px var(--bx-primary-hover); opacity: 0; }
[data-bx-state="pending"] .bx-conn__line { background-image: repeating-linear-gradient(90deg, var(--bx-primary-hover) 0 10px, transparent 10px 18px); animation: bx-dash .7s linear infinite; }
[data-bx-state="pending"] .bx-conn__packet { animation: bx-packet var(--bx-dur-packet) ease-in-out infinite; }
[data-bx-state="pending"] .bx-conn__packet:nth-child(3) { animation-delay: 530ms; }
[data-bx-state="pending"] .bx-conn__packet:nth-child(4) { animation-delay: 1060ms; }
[data-bx-state="pending"] .bx-conn__mark { animation: bx-pulse-blue 1.4s ease-out infinite; }
[data-bx-state="success"] .bx-conn__line { background: var(--bx-good); transform-origin: left; animation: bx-grow-x 600ms var(--bx-ease-out) both; }
[data-bx-state="success"] .bx-conn__mark { animation: bx-glow-good 1s ease-out 2; }
[data-bx-state="error"]   .bx-conn__line { background-image: linear-gradient(90deg, var(--bx-bad) 0 44%, transparent 44% 56%, var(--bx-bad) 56% 100%); opacity: .8; }
[data-bx-state="error"]   .bx-conn__row { animation: bx-shake 450ms ease-in-out; }

/* Stage list: each item carries data-step="wait|run|done|fail|skip" */
.bx-step__icon { width: 18px; height: 18px; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(163,177,207,.35); }
[data-step="run"]  .bx-step__icon { border-color: rgba(143,176,255,.3); border-top-color: var(--bx-link); animation: bx-spin var(--bx-dur-spin) linear infinite; }
[data-step="done"] .bx-step__icon { border: 0; background: var(--bx-good) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062018' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; animation: bx-pop 400ms var(--bx-ease-spring) both; }
[data-step="fail"] .bx-step__icon { border: 0; background: var(--bx-bad-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat; animation: bx-pop 400ms var(--bx-ease-spring) both; }
[data-step="skip"] .bx-step__icon { border-style: dashed; opacity: .6; }

/* ---------- Login success transition (driven by motion.js after the real session is accepted) ---------- */
.bx-success-stage { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 43%, rgba(35,62,120,.85), rgba(6,13,32,.92) 65%); animation: bx-fade 200ms ease-out both; }
.bx-success-stage.is-leaving { transition: opacity 360ms var(--bx-ease-out); opacity: 0; }

/* ---------- Reduced motion: keep states readable, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .bx-rise, .bx-stagger > *, .bx-mode-enter, .bx-grow-y, .bx-grow-x, .bx-mark, .bx-ring, .bx-orbit, .bx-orbit-2, .bx-halo, .bx-glint,
  .bx-badge-result, .bx-draw, .bx-spinner, .bx-btn--primary, .bx-shake-on-error, .bx-conn__line, .bx-conn__packet, .bx-conn__mark,
  .bx-conn__row, .bx-step__icon, .bx-success-stage { animation: none !important; transition: none !important; }
  .bx-draw { stroke-dashoffset: 0; }
  .bx-conn__packet { display: none; }
  .bx-spinner { border-top-color: rgba(255,255,255,.35); border-right-color: #fff; } /* static "busy" glyph */
  [data-step="run"] .bx-step__icon { border-style: dotted; }
}