/* ============================================================
   Boot loader — Crow Loader (video centerpiece + layered CSS rings).
   Adapted from /Crow Loader.html into the app's boot-loader frame.

   Stack order (bottom → top):
     1) halo      — pulsing gold radial glow behind the medallion
     2) ring-mid  — hairline ring with a single bright top-arc, reverse spin
     3) ticks     — 24 gold tick marks rotating slowly around the medallion
     4) bird      — the looping loader video, clipped to a circle
     5) shimmer   — sweeping gold gradient over the medallion
     6) ring-outer— bold gold arc rotating around the medallion's edge
     7) orbit     — small gold dot orbiting on the ring
   ============================================================ */

.boot-loader {
  --crow-size: clamp(220px, 36vmin, 360px);
  --crow-accent: #C9A96A;       /* gold accent for rings/ticks/orbit */
  --crow-accent-soft: rgba(201, 169, 106, 0.28);
  --crow-ink: #E9E6DF;
  --crow-dim: #6A665E;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-auto-flow: row;
  gap: 28px;
  place-items: center;
  background: radial-gradient(ellipse at center, #0B0B0C 0%, #030303 70%);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  contain: strict;
  animation: bootFadeIn 320ms ease-out both;
  transition: opacity 480ms ease, visibility 480ms;
}
.boot-loader.is-leaving {
  opacity: 0;
  pointer-events: none;
}
.boot-loader.is-gone {
  visibility: hidden;
  display: none;
}

/* ============== LOADER ============== */
.crow-loader {
  position: relative;
  width: var(--crow-size);
  height: var(--crow-size);
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* The crow animation — sprite flipbook (8 frames of 320×320 stacked
   horizontally as a 2560×320 PNG). Each frame is held for 1/8 of the
   1.6s cycle using `step-end`, so the flap reads as 5 fps hand-keyed
   animation rather than a smooth tween. The percentages map to exact
   frame offsets via calc against --crow-size. */
.crow-loader .bird {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: url(../assets/brand/odin-loader-sprite.png?v=2);
  background-repeat: no-repeat;
  background-size: 800% 100%;
  background-position: 0 0;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  animation: crowFlap 1.25s step-end infinite;
}
@keyframes crowFlap {
  0%    { background-position-x: 0; }
  12.5% { background-position-x: calc(var(--crow-size) * -1); }
  25%   { background-position-x: calc(var(--crow-size) * -2); }
  37.5% { background-position-x: calc(var(--crow-size) * -3); }
  50%   { background-position-x: calc(var(--crow-size) * -4); }
  62.5% { background-position-x: calc(var(--crow-size) * -5); }
  75%   { background-position-x: calc(var(--crow-size) * -6); }
  87.5% { background-position-x: calc(var(--crow-size) * -7); }
}

/* Glow halo behind the bird — sized to match the medallion (~85% of container). */
.crow-loader .halo {
  position: absolute;
  inset: 7.5%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(201, 169, 106, 0.22) 0%,
    rgba(201, 169, 106, 0.06) 45%,
    transparent 70%);
  filter: blur(10px);
  animation: crowHalo 2.4s ease-in-out infinite;
  z-index: 1;
}

/* Outer + middle rings (positioning shared). */
.crow-loader .ring-outer,
.crow-loader .ring-mid {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
}

/* Outer ring aligned with the medallion's edge. */
.crow-loader .ring-outer {
  inset: 7.5%;
  border: 2px solid transparent;
  border-top-color: var(--crow-accent);
  border-right-color: var(--crow-accent-soft);
  animation: crowSpin 3.2s linear infinite;
  box-shadow: 0 0 24px rgba(201, 169, 106, 0.18);
}

/* Second hairline just outside the medallion. */
.crow-loader .ring-mid {
  inset: 1%;
  border: 1px solid rgba(233, 230, 223, 0.06);
  border-top-color: rgba(233, 230, 223, 0.4);
  animation: crowSpinRev 4.8s linear infinite;
}

/* Tick marks sit just outside the medallion ring. */
.crow-loader .ticks {
  position: absolute;
  inset: 7.5%;
  z-index: 4;
  pointer-events: none;
  animation: crowSpin 24s linear infinite;
}
.crow-loader .ticks i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 6px;
  background: rgba(201, 169, 106, 0.55);
  /* origin = center of .ticks element = 42.5% of container = (1 - 0.075*2)/2 of container */
  transform-origin: 50% calc(var(--crow-size) * 0.425);
  border-radius: 2px;
}
.crow-loader .ticks i.major {
  height: 10px;
  background: rgba(255, 225, 170, 0.9);
}

/* Progress dot orbiting on the medallion's ring. */
.crow-loader .orbit {
  position: absolute;
  inset: 7.5%;
  z-index: 5;
  animation: crowSpin 1.8s cubic-bezier(.65, .05, .35, .95) infinite;
  pointer-events: none;
}
.crow-loader .orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -3px;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--crow-accent);
  box-shadow: 0 0 12px var(--crow-accent), 0 0 4px #FFFFFF inset;
}

/* Sweeping shimmer overlay clipped to the medallion. */
.crow-loader .shimmer {
  position: absolute;
  inset: 7.5%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 4;
  mix-blend-mode: screen;
  opacity: 0.45;
  pointer-events: none;
}
.crow-loader .shimmer::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255, 225, 170, 0.0) 45%,
    rgba(255, 225, 170, 0.25) 50%,
    rgba(255, 225, 170, 0.0) 55%,
    transparent 65%);
  animation: crowShimmer 3.6s ease-in-out infinite;
}

/* ============== CAPTION ============== */
.boot-loader .caption {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--crow-dim);
}
.boot-loader .caption .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--crow-accent);
  animation: crowPulseDot 1.2s ease-in-out infinite;
}
.boot-loader .caption .dot:nth-child(2) { animation-delay: 0.15s; }
.boot-loader .caption .dot:nth-child(3) { animation-delay: 0.30s; }
.boot-loader .caption span { transform: translateY(1px); }

/* ============== KEYFRAMES ============== */
@keyframes bootFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes crowSpin    { to { transform: rotate(360deg); } }
@keyframes crowSpinRev  { to { transform: rotate(-360deg); } }
@keyframes crowHalo {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes crowShimmer {
  0%   { transform: translateX(-70%); }
  60%  { transform: translateX(70%); }
  100% { transform: translateX(70%); }
}
@keyframes crowPulseDot {
  0%, 100% { opacity: 0.25; transform: scale(0.85); }
  50%      { opacity: 1;    transform: scale(1.1); }
}

/* Reduced motion — keep brand, drop the spin/pulse. */
@media (prefers-reduced-motion: reduce) {
  .boot-loader,
  .crow-loader .halo,
  .crow-loader .ring-outer,
  .crow-loader .ring-mid,
  .crow-loader .ticks,
  .crow-loader .orbit,
  .crow-loader .shimmer::before,
  .boot-loader .caption .dot {
    animation: none !important;
  }
}