/* =====================================================================
   Anuyog Financial Services — splash (unique: "market open" sequence)
   ---------------------------------------------------------------------
   Choreography:
     1. Medallion: two concentric rings draw themselves around the logo
     2. Four compass nodes ignite in sequence (N · E · S · W)
     3. Logo materialises inside with a shine sweep
     4. Wordmark types in letter-by-letter
     5. Equity curve draws + fills + pulse dot
     6. Floating ticker chips rise in the background
     7. "Syncing market data" bar fills 0 → 100
     8. Status confirms, medallion zooms, scan line sweeps, exit
   ===================================================================== */

/* ---------- Stage ---------- */
#splash {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f3f7fe 45%, #e7eef9 100%);
  display: grid; place-items: center;
  overflow: hidden;
  font-family: var(--ff-sans, 'Inter', sans-serif);
  transition:
    opacity .7s cubic-bezier(.65, 0, .25, 1) .15s,
    visibility .7s cubic-bezier(.65, 0, .25, 1) .15s,
    transform .95s cubic-bezier(.6, .2, .2, 1);
  transform: translateY(0) scale(1);
}
#splash.is-exit { transform: translateY(-12px) scale(1.015); opacity: 0; }
#splash.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

/* Debug skip */
#splash.is-skip,
#splash.is-skip * { animation-play-state: paused !important; }

/* ---------- Background ambience ---------- */
.sp-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.06) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 10%, transparent 75%);
}

.sp-glow {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: 0;
  animation: sp-glow-in 1.2s ease .1s forwards;
}
.sp-glow.a { width: 460px; height: 460px; background: rgba(96, 165, 250, 0.35); top: -140px; right: -140px; }
.sp-glow.b { width: 380px; height: 380px; background: rgba(34, 211, 238, 0.28); bottom: -140px; left: -100px; animation-delay: .25s; }
@keyframes sp-glow-in { to { opacity: .55; } }

/* ---------- Floating ticker chips (ambient layer) ---------- */
.sp-tickers {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.sp-tickers span {
  position: absolute;
  bottom: -40px;
  left: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: var(--ff-sans, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink, #0a1b3d);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 99px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px -10px rgba(10, 27, 61, 0.25);
  opacity: 0;
  animation: sp-tick-rise 8s cubic-bezier(.3, .1, .3, 1) infinite;
  white-space: nowrap;
}
.sp-tickers span i.up   { color: #059669; font-style: normal; font-size: 10px; }
.sp-tickers span i.down { color: #dc2626; font-style: normal; font-size: 10px; }
.sp-tickers span i.mark { color: var(--blue, #2563eb); font-style: normal; font-size: 10px; }

.sp-tickers span:nth-child(1) { left: 10%; animation-delay: 0.2s;  }
.sp-tickers span:nth-child(2) { left: 78%; animation-delay: 1.3s;  }
.sp-tickers span:nth-child(3) { left: 22%; animation-delay: 2.6s;  }
.sp-tickers span:nth-child(4) { left: 68%; animation-delay: 3.4s;  }
.sp-tickers span:nth-child(5) { left: 14%; animation-delay: 4.5s;  }
.sp-tickers span:nth-child(6) { left: 82%; animation-delay: 5.1s;  }
.sp-tickers span:nth-child(7) { left: 30%; animation-delay: 6.0s;  }

@keyframes sp-tick-rise {
  0%   { transform: translateY(0);      opacity: 0; }
  8%   {                                opacity: 1; }
  80%  {                                opacity: 1; }
  100% { transform: translateY(-80vh);  opacity: 0; }
}

/* Hide some chips on small screens to keep the stage calm */
@media (max-width: 640px) {
  .sp-tickers span:nth-child(3),
  .sp-tickers span:nth-child(5),
  .sp-tickers span:nth-child(7) { display: none; }
}

/* ---------- Stage wrapper ---------- */
.sp-stage {
  position: relative; z-index: 3;
  text-align: center;
  padding: 0 24px;
  max-width: min(520px, 92vw);
  display: flex; flex-direction: column; align-items: center;
}

/* ---------- Medallion ---------- */
.sp-medallion {
  position: relative;
  width: clamp(180px, 42vw, 240px);
  aspect-ratio: 1 / 1;
  margin-bottom: 28px;
}
.sp-medallion svg.mdl {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
/* Concentric rings — drawn by stroke-dashoffset */
.sp-medallion .ring {
  fill: none;
  stroke-linecap: round;
}
.sp-medallion .ring-outer {
  stroke: url(#sp-ring-grad);
  stroke-width: 1.4;
  stroke-dasharray: 566;        /* 2πr for r≈90 */
  stroke-dashoffset: 566;
  animation: sp-draw .9s cubic-bezier(.4, .1, .3, 1) .15s forwards;
}
.sp-medallion .ring-inner {
  stroke: rgba(37, 99, 235, 0.25);
  stroke-width: 1;
  stroke-dasharray: 440;
  stroke-dashoffset: -440;
  animation: sp-draw-ccw .75s cubic-bezier(.4, .1, .3, 1) .5s forwards;
}
@keyframes sp-draw     { to { stroke-dashoffset: 0; } }
@keyframes sp-draw-ccw { to { stroke-dashoffset: 0; } }

/* Compass tick lines at 12/3/6/9 */
.sp-medallion .tick {
  stroke: var(--blue, #2563eb);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0;
  animation: sp-tick-in .4s ease forwards;
}
.sp-medallion .tick.n { animation-delay: 1.1s; }
.sp-medallion .tick.e { animation-delay: 1.25s; }
.sp-medallion .tick.s { animation-delay: 1.4s; }
.sp-medallion .tick.w { animation-delay: 1.55s; }
@keyframes sp-tick-in {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: .75; transform: scale(1); }
}

/* Compass dots that ignite */
.sp-node {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blue, #2563eb);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
  opacity: 0;
  transform: scale(.2);
  animation: sp-node-ignite .5s cubic-bezier(.2, .8, .2, 1) forwards,
             sp-node-pulse 2.4s ease-in-out infinite;
}
.sp-node.n { top: -5px;        left: 50%;        transform: translateX(-50%) scale(.2); animation-delay: 1.05s, 2.6s; }
.sp-node.e { top: 50%;         right: -5px;      transform: translateY(-50%) scale(.2); animation-delay: 1.2s, 2.75s; }
.sp-node.s { bottom: -5px;     left: 50%;        transform: translateX(-50%) scale(.2); animation-delay: 1.35s, 2.9s; }
.sp-node.w { top: 50%;         left: -5px;       transform: translateY(-50%) scale(.2); animation-delay: 1.5s, 3.05s; }

@keyframes sp-node-ignite {
  to {
    opacity: 1;
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.12), 0 0 14px rgba(37, 99, 235, 0.65);
  }
}
.sp-node.n, .sp-node.s { animation-name: sp-node-ignite-x, sp-node-pulse; }
.sp-node.e, .sp-node.w { animation-name: sp-node-ignite-y, sp-node-pulse; }
@keyframes sp-node-ignite-x {
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1), 0 0 14px rgba(37, 99, 235, 0.55);
  }
}
@keyframes sp-node-ignite-y {
  to {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.1), 0 0 14px rgba(37, 99, 235, 0.55);
  }
}
@keyframes sp-node-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}

/* Inner disc + logo */
.sp-disc {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #ffffff 0%, #f1f5ff 70%),
    linear-gradient(135deg, #ffffff 0%, #eaf1ff 100%);
  box-shadow:
    0 18px 40px -16px rgba(37, 99, 235, 0.35),
    inset 0 0 0 1px rgba(37, 99, 235, 0.08);
  overflow: hidden;
  opacity: 0; transform: scale(.85);
  animation: sp-disc-in .7s cubic-bezier(.2, .8, .2, 1) .65s forwards;
}
@keyframes sp-disc-in { to { opacity: 1; transform: scale(1); } }

.sp-logo {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.85);
  animation: sp-logo-in .9s cubic-bezier(.2, .8, .2, 1) .9s forwards,
             sp-logo-float 5s ease-in-out 2s infinite alternate;
}
.sp-logo img {
  width: 70%; height: 70%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 14px rgba(37, 99, 235, 0.25));
}
@keyframes sp-logo-in { to { opacity: 1; transform: scale(1); } }
@keyframes sp-logo-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}

/* Shine sweep across the disc */
.sp-shine {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.9) 50%, transparent 65%);
  transform: translateX(-120%);
  mix-blend-mode: overlay;
  opacity: 0;
  animation: sp-shine 1.2s cubic-bezier(.3, .1, .3, 1) 1.5s;
}
@keyframes sp-shine {
  0%   { transform: translateX(-120%); opacity: 0; }
  40%  {                                opacity: 1; }
  100% { transform: translateX(120%);   opacity: 0; }
}

/* ---------- Wordmark ---------- */
.sp-name {
  font-family: var(--ff-serif, 'Fraunces', serif);
  font-weight: 500;
  font-size: clamp(28px, 5vw, 38px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink, #0a1b3d);
  margin: 4px 0 0;
  display: inline-flex;
  gap: 1px;
}
.sp-name .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  filter: blur(6px);
  transition: opacity .4s ease, transform .4s ease, filter .4s ease;
}
.sp-name .ch.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.sp-sub {
  margin: 14px 0 0;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--ff-sans, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--blue, #2563eb);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s ease .1s, transform .5s ease .1s;
}
.sp-sub.in { opacity: 1; transform: translateY(0); }
.sp-sub .ln {
  width: 28px; height: 1px;
  background: currentColor;
  opacity: .4;
}

/* ---------- Equity curve ---------- */
.sp-chart {
  margin: 22px auto 0;
  width: min(320px, 80vw);
  height: 72px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .55s ease, transform .55s ease;
}
.sp-chart.in { opacity: 1; transform: translateY(0); }
.sp-chart svg { width: 100%; height: 100%; overflow: visible; }
.sp-chart .axis {
  stroke: rgba(10, 27, 61, 0.12);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.sp-chart .curve {
  fill: none;
  stroke: url(#sp-curve-grad);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  filter: drop-shadow(0 4px 10px rgba(37, 99, 235, 0.2));
  transition: stroke-dashoffset 1.4s cubic-bezier(.4, .1, .3, 1);
}
.sp-chart.in .curve { stroke-dashoffset: 0; }
.sp-chart .fill {
  fill: url(#sp-fill-grad);
  opacity: 0;
  transition: opacity .5s ease .9s;
}
.sp-chart.in .fill { opacity: 1; }
.sp-chart .dot {
  fill: var(--cyan, #22d3ee);
  opacity: 0;
  animation-play-state: paused;
}
.sp-chart.in .dot {
  opacity: 1;
  animation: sp-dot-pulse 1.8s ease 1.5s infinite;
  animation-play-state: running;
}
@keyframes sp-dot-pulse {
  0%, 100% { r: 3.5; filter: drop-shadow(0 0 0 rgba(34, 211, 238, 0.8)); }
  50%      { r: 5;   filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.9)); }
}
.sp-chart .markers circle {
  fill: var(--surface, #fff);
  stroke: var(--blue, #2563eb);
  stroke-width: 1.4;
  opacity: 0;
  transition: opacity .25s ease;
}
.sp-chart.in .markers circle { opacity: 1; transition-delay: calc(0.35s * var(--i, 0)); }

/* ---------- Progress / status ---------- */
.sp-status {
  margin: 24px auto 0;
  width: min(320px, 80vw);
  display: flex; flex-direction: column; gap: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .45s ease, transform .45s ease;
}
.sp-status.in { opacity: 1; transform: translateY(0); }

.sp-status-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  font-family: var(--ff-sans, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.sp-status-label {
  color: rgba(10, 27, 61, 0.55);
  display: inline-flex; align-items: center; gap: 8px;
}
.sp-status-label i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
  animation: sp-dot-live 1.6s ease infinite;
}
@keyframes sp-dot-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}
.sp-status-pct {
  color: var(--ink, #0a1b3d);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.sp-status-pct::after { content: "%"; opacity: .6; margin-left: 1px; }

.sp-bar {
  width: 100%; height: 2px;
  background: rgba(10, 27, 61, 0.08);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.sp-bar-fill {
  position: absolute; inset: 0 auto 0 0;
  width: var(--sp-pct, 0%);
  background: linear-gradient(90deg, #1e3a8a, #2563eb 55%, #22d3ee);
  border-radius: 99px;
  transition: width .2s linear;
}
.sp-bar-fill::after {
  content: "";
  position: absolute; top: -2px; bottom: -2px; right: -6px;
  width: 14px;
  background: radial-gradient(ellipse at center, rgba(34, 211, 238, 0.7), transparent 70%);
  filter: blur(4px);
}

/* ---------- Exit-phase overlays ---------- */
.sp-scan {
  position: absolute;
  left: -10%; right: -10%;
  top: 0;
  height: 2px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    rgba(96, 165, 250, 0) 12%,
    rgba(96, 165, 250, 0.9) 42%,
    rgba(34, 211, 238, 1) 50%,
    rgba(96, 165, 250, 0.9) 58%,
    rgba(96, 165, 250, 0) 88%,
    transparent);
  box-shadow:
    0 0 24px 4px rgba(34, 211, 238, 0.5),
    0 0 80px 12px rgba(37, 99, 235, 0.18);
}
#splash.is-exit .sp-scan {
  animation: sp-scan-sweep .85s cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes sp-scan-sweep {
  0%   { opacity: 0; top: 0;    transform: scaleX(.2); }
  15%  { opacity: 1;            transform: scaleX(1); }
  55%  { opacity: 1; }
  100% { opacity: 0; top: 100%; }
}

/* Medallion "burst" on exit */
#splash.is-exit .sp-medallion {
  animation: sp-medallion-burst .7s cubic-bezier(.5, 0, .5, 1) forwards;
}
@keyframes sp-medallion-burst {
  0%   { transform: scale(1);    filter: none; }
  40%  { transform: scale(1.14); filter: brightness(1.15); }
  100% { transform: scale(1.65); filter: brightness(1.4) blur(4px); opacity: 0; }
}

/* Curve lifts and fades */
#splash.is-exit .sp-chart,
#splash.is-exit .sp-status,
#splash.is-exit .sp-sub,
#splash.is-exit .sp-name {
  transition: opacity .35s ease, transform .35s ease;
  opacity: 0;
  transform: translateY(-12px);
}
#splash.is-exit .sp-glow,
#splash.is-exit .sp-grid,
#splash.is-exit .sp-tickers {
  transition: opacity .4s ease;
  opacity: 0;
}

/* ---------- Accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sp-tickers,
  .sp-shine,
  .sp-chart .dot,
  .sp-status-label i { display: none; }
  .sp-medallion .ring-outer,
  .sp-medallion .ring-inner,
  .sp-chart .curve { animation: none; stroke-dashoffset: 0; transition: none; }
  .sp-disc, .sp-logo { animation: none; opacity: 1; transform: none; }
  .sp-name .ch { opacity: 1; transform: none; filter: none; }
  .sp-sub, .sp-chart, .sp-status { opacity: 1; transform: none; }
}