/* OnBitcoin pin loader — reusable component
   Colors/glow match current ON mark; scale tuned for ~32px pin / ~140px rings. */

:root {
  --ob-pin-orange: #F7931A;
  --ob-pin-orange-soft: rgba(247, 147, 26, 0.9);
  --ob-pin-glow-mid: rgba(247, 147, 26, 0.55);
  --ob-pin-glow-far: rgba(247, 147, 26, 0.28);
  --ob-pin-bg: #000000;
  --ob-pin-hole: #FFFFFF;

  /* Timing (ms) — single source of truth via CSS vars + matching JS */
  --ob-quiet: 380ms;
  --ob-drop: 300ms;
  --ob-contact: 90ms;
  --ob-ring: 920ms;
  --ob-ring-stagger: 140ms;
  --ob-hold: 280ms;
  --ob-fade: 320ms;
  --ob-tail: 160ms;

  /* Derived cycle ≈ 380+300+90+920+2*140+280+320+160 = 2730ms */
  --ob-cycle: 2730ms;

  --ob-pin-h: 35.2px;
  --ob-stage-w: 163px;
  --ob-stage-h: 106px;
}

.ob-pin-loader {
  position: relative;
  width: var(--ob-stage-w);
  height: var(--ob-stage-h);
  display: grid;
  place-items: center;
  pointer-events: none;
  user-select: none;
}

.ob-pin-loader__scene {
  position: relative;
  width: var(--ob-stage-w);
  height: var(--ob-stage-h);
}

/* Tip contact point ≈ 50% x / ~72% y of scene */
.ob-pin-loader__pin {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 24.2px;
  height: var(--ob-pin-h);
  margin-left: -12.1px;
  transform-origin: 50% 100%;
  opacity: 0;
  will-change: transform, opacity;
  z-index: 2;
}

.ob-pin-loader__pin-glow {
  position: absolute;
  inset: 0;
  filter:
    drop-shadow(0 0 1.5px var(--ob-pin-orange))
    drop-shadow(0 0 4px var(--ob-pin-orange-soft))
    drop-shadow(0 0 10px var(--ob-pin-glow-mid))
    drop-shadow(0 0 20px var(--ob-pin-glow-far));
}

.ob-pin-loader__pin-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* White hole sits above orange body, without orange bloom tinting it */
.ob-pin-loader__hole {
  position: absolute;
  left: 50%;
  top: 6.5px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--ob-pin-hole);
  box-shadow: none;
  pointer-events: none;
  z-index: 3;
  isolation: isolate;
}

.ob-pin-loader__rings {
  position: absolute;
  left: 50%;
  top: calc(8px + var(--ob-pin-h) - 2px);
  width: var(--ob-stage-w);
  height: 40px;
  margin-left: calc(var(--ob-stage-w) / -2);
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

.ob-pin-loader__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24.2px;
  height: 8px;
  margin-left: -12.1px;
  margin-top: -4px;
  border-radius: 50%;
  border: 1.25px solid var(--ob-pin-orange);
  box-sizing: border-box;
  opacity: 0;
  transform: scale(0.35);
  filter:
    drop-shadow(0 0 1.5px var(--ob-pin-orange))
    drop-shadow(0 0 5px var(--ob-pin-orange-soft))
    drop-shadow(0 0 12px var(--ob-pin-glow-mid));
  will-change: transform, opacity;
}

/* ----- Looping timeline -----
   quiet 0–380
   drop  380–680   (ease-in)
   hold  680–770
   rings 770–1830  (staggered; last ring ends ~1830)
   hold  1830–2110
   fade  2110–2430
   tail  2430–2730
*/

.ob-pin-loader.is-running .ob-pin-loader__pin {
  animation: obPinCycle var(--ob-cycle) linear infinite;
}

.ob-pin-loader.is-running .ob-pin-loader__ring:nth-child(1) {
  animation: obRingExpand var(--ob-cycle) linear infinite;
  animation-delay: 0ms;
}
.ob-pin-loader.is-running .ob-pin-loader__ring:nth-child(2) {
  animation: obRingExpand var(--ob-cycle) linear infinite;
  animation-delay: 0ms;
  /* stagger baked into keyframe offsets via custom props */
}
.ob-pin-loader.is-running .ob-pin-loader__ring:nth-child(3) {
  animation: obRingExpand var(--ob-cycle) linear infinite;
}

/* Pin uses % of 2730ms cycle */
@keyframes obPinCycle {
  0%,
  13.919% { /* 0–380 quiet */
    opacity: 0;
    transform: translateY(-12px);
  }
  14.0% {
    opacity: 1;
    transform: translateY(-12px);
  }
  24.908% { /* 680 end drop — 300ms ease-in feel approximated */
    opacity: 1;
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
  /* Hold through rings + post pause */
  77.289% { /* 2110 start fade */
    opacity: 1;
    transform: translateY(0);
  }
  88.645%, /* 2430 end fade */
  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

/* Refine drop with a dedicated segment using animation-timing on a wrapper —
   CSS single-keyframe ease is limited; JS applies WAAPI for exact ease-in.
   Fallback CSS keeps a usable loop if JS disabled. */

@keyframes obRingExpand {
  /* default: ring 1 — starts at 770/2730 = 28.205% */
  0%,
  28.205% {
    opacity: 0;
    transform: scale(0.35);
  }
  28.3% {
    opacity: 0.95;
    transform: scale(0.4);
  }
  48.0% {
    opacity: 0.55;
    transform: scale(4.2);
  }
  61.9%, /* ~1690 */
  100% {
    opacity: 0;
    transform: scale(6.2);
  }
}

/* Per-ring stagger via separate animations */
.ob-pin-loader.is-running .ob-pin-loader__ring--1 {
  animation-name: obRing1;
}
.ob-pin-loader.is-running .ob-pin-loader__ring--2 {
  animation-name: obRing2;
}
.ob-pin-loader.is-running .ob-pin-loader__ring--3 {
  animation-name: obRing3;
}

@keyframes obRing1 {
  0%, 28.205% { opacity: 0; transform: scale(0.35); }
  28.35% { opacity: 0.95; transform: scale(0.42); }
  48.5% { opacity: 0.45; transform: scale(4.4); }
  62.0%, 100% { opacity: 0; transform: scale(6.2); }
}
@keyframes obRing2 {
  /* +140ms → 910/2730 = 33.333% */
  0%, 33.333% { opacity: 0; transform: scale(0.35); }
  33.5% { opacity: 0.9; transform: scale(0.42); }
  53.5% { opacity: 0.4; transform: scale(4.4); }
  67.0%, 100% { opacity: 0; transform: scale(6.2); }
}
@keyframes obRing3 {
  /* +280ms → 1050/2730 = 38.462% */
  0%, 38.462% { opacity: 0; transform: scale(0.35); }
  38.6% { opacity: 0.85; transform: scale(0.42); }
  58.5% { opacity: 0.35; transform: scale(4.4); }
  72.0%, 100% { opacity: 0; transform: scale(6.2); }
}

@media (prefers-reduced-motion: reduce) {
  .ob-pin-loader.is-running .ob-pin-loader__pin,
  .ob-pin-loader.is-running .ob-pin-loader__ring {
    animation: none !important;
  }
  .ob-pin-loader.is-running .ob-pin-loader__pin {
    opacity: 1;
    transform: none;
  }
  .ob-pin-loader.is-running .ob-pin-loader__ring--2 {
    opacity: 0.55;
    transform: scale(2.4);
  }
}