/* ==========================================================================
   LOADER — full-screen splash. Visible by default (no JS needed to show it,
   so there's no FOUC); loader.js only ever hides/removes it. There's nothing
   to tap: it dismisses itself once the page is ready.
   ========================================================================== */

#site-loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  background: var(--color-accent);
  text-align: center;
  padding: 0 var(--sp-5);
  transition: opacity var(--dur-slow) ease, visibility var(--dur-slow) ease;
}

#site-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-loader__title {
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--fw-heading-xbold);
  font-size: var(--fs-h1);
  letter-spacing: -0.01em;
  line-height: var(--lh-tight);
}

/* Tooth mark — the outline is always visible; a clip rect rises through the
   same shape in solid white so the tooth reads as "filling up" while the
   page loads. Two sparkles twinkle off-beat around it. */
.site-loader__mark {
  position: relative;
  width: 108px;
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loaderFloat 3.2s var(--ease-in-out) infinite;
}

.site-loader__tooth {
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--color-white);
}

.site-loader__tooth-outline {
  fill: rgba(255, 255, 255, 0.16);
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.7;
  stroke-linejoin: round;
}

.site-loader__tooth-fill { fill: var(--color-white); }

.site-loader__fill-rect {
  transform: translateY(24px);
  animation: loaderToothFill 2.6s var(--ease-in-out) infinite;
}

.site-loader__sparkle {
  position: absolute;
  width: 18px;
  height: 18px;
  fill: var(--color-white);
  opacity: 0;
  animation: loaderSparkle 2.6s var(--ease-in-out) infinite;
}

.site-loader__sparkle--a { top: 2px; right: -2px; }

.site-loader__sparkle--b {
  bottom: 12px;
  left: -4px;
  width: 12px;
  height: 12px;
  animation-delay: 1.1s;
}

/* Indeterminate shimmer under the tooth */
.site-loader__progress {
  position: relative;
  width: 140px;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.22);
}

.site-loader__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  border-radius: inherit;
  background: var(--color-white);
  animation: loaderSweep 1.5s var(--ease-in-out) infinite;
}

/* Ready — top the tooth up and hold it full while the overlay fades out. */
#site-loader.is-ready .site-loader__fill-rect {
  animation: none;
  transform: translateY(0);
  transition: transform var(--dur-med) var(--ease-out-soft);
}

#site-loader.is-ready .site-loader__progress-bar {
  animation: none;
  width: 100%;
}

.site-loader__hint {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@keyframes loaderFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes loaderToothFill {
  0%       { transform: translateY(24px); }
  55%, 75% { transform: translateY(0); }
  100%     { transform: translateY(24px); }
}

@keyframes loaderSparkle {
  0%, 45%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  60%           { opacity: 1; transform: scale(1) rotate(45deg); }
  80%           { opacity: 0; transform: scale(0.7) rotate(70deg); }
}

@keyframes loaderSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(222%); }
}

body.loader-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  #site-loader { transition: opacity var(--dur-fast) ease; }
  .site-loader__mark,
  .site-loader__sparkle,
  .site-loader__progress-bar { animation: none; }
  .site-loader__sparkle { opacity: 0.8; }
  .site-loader__fill-rect { animation: none; transform: translateY(0); }
  .site-loader__progress-bar { width: 100%; }
}

@media (max-width: 720px) {
  .site-loader__mark { width: 88px; height: 88px; }
  .site-loader__sparkle--a { width: 15px; height: 15px; }
}