/* First-visit intro: the BPI mark arrives as a 3D medallion — it drops in from
   above, spins twice on its axis, then lifts away as the veil clears.
   Shown once per browsing session and skipped entirely under reduced motion
   (both handled by the .no-loader class set in the layout head).
   The whole thing is CSS-driven, so it still clears if the script never runs. */

.site-loader {
  /* Single source of truth for the intro's length; the children inherit it.
     Keep the safety timeout in js/v2/loader.js comfortably above this. */
  --loader-duration: 4s;

  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 42%, rgb(30 79 68 / 0.65) 0%, transparent 62%),
    var(--green-950);
  animation: loader-veil var(--loader-duration) var(--ease-in-out) forwards;
}

.no-loader .site-loader { display: none; }

.site-loader__stage {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 1400px;
}

/* soft light pooling behind the medallion */
.site-loader__glow {
  position: absolute;
  width: clamp(280px, 42vw, 420px);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgb(169 198 187 / 0.26) 0%, rgb(169 198 187 / 0.06) 45%, transparent 68%);
  animation: loader-glow var(--loader-duration) var(--ease-in-out) forwards;
}

/* ring that pulses outward at the moment the medallion lands */
.site-loader__ring {
  position: absolute;
  width: clamp(120px, 17vw, 168px);
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  border: 1px solid rgb(169 198 187 / 0.65);
  opacity: 0;
  animation: loader-ring var(--loader-duration) var(--ease-out) forwards;
}

/* the medallion itself: two faces so it reads as a solid object while spinning */
.site-loader__coin {
  position: relative;
  width: clamp(112px, 16vw, 158px);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: loader-coin var(--loader-duration) var(--ease-out) forwards;
}

.site-loader__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: linear-gradient(145deg, #ffffff 0%, var(--paper-100) 100%);
  box-shadow:
    0 22px 60px rgb(0 0 0 / 0.5),
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    inset 0 0 0 1px rgb(39 93 80 / 0.12);
  backface-visibility: hidden;
}
.site-loader__face--back { transform: rotateY(180deg); }

.site-loader__face img {
  width: 62%;
  height: auto;
  display: block;
}

/* ---- choreography ---- */

@keyframes loader-coin {
  0% {
    opacity: 0;
    transform: translate3d(0, -58vh, 0) rotateY(0deg) rotateX(14deg) scale(0.72);
    animation-timing-function: cubic-bezier(0.3, 0.85, 0.3, 1);
  }
  12% { opacity: 1; }
  31% {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg) scale(1);
    animation-timing-function: var(--ease-in-out);
  }
  38% {
    transform: translate3d(0, 0, 0) rotateY(0deg) rotateX(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  76% {
    transform: translate3d(0, 0, 0) rotateY(720deg) rotateX(0deg) scale(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0);
  }
  83% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(720deg) scale(1); }
  100% {
    opacity: 0;
    transform: translate3d(0, -58vh, 0) rotateY(720deg) scale(0.82);
  }
}

@keyframes loader-ring {
  0%, 26% { opacity: 0; transform: scale(0.55); }
  33% { opacity: 0.85; transform: scale(1); }
  58% { opacity: 0; transform: scale(2.3); }
  100% { opacity: 0; transform: scale(2.3); }
}

@keyframes loader-glow {
  0% { opacity: 0; transform: scale(0.8); }
  30% { opacity: 1; transform: scale(1); }
  72% { opacity: 1; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes loader-veil {
  0%, 80% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

/* Belt and braces: if a browser ignores the head class, reduced motion still
   removes the intro rather than flashing it. */
@media (prefers-reduced-motion: reduce) {
  .site-loader { display: none; }
}