/* ============================================================
   c-loader — site entrance loader, LOAD-DRIVEN (Sofia 2026-08-18:
   only when the page actually needs time — never on fast loads).
   The ink overlay covers first paint; the halo fades in only if
   the page is still loading at the 350ms mark. The component's
   inline script adds .is-done on window load (instant drop while
   the halo is still hidden, ≥1.2s total once it's spinning). The
   8s CSS failsafe fade runs with or without JS, so a hung request
   can never strand the page. Arms on every HOME load — actual load
   speed is the gate (the once-per-browser loader-gate is retired).
     prefers-reduced-motion: never shown
   ============================================================ */

.c-loader {
  position: fixed;
  inset: 0;
  z-index: 100; /* above the header (z-50) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-black);
  /* failsafe: even with JS dead, gone by the 8.4s mark */
  animation: c-loader-out 0.4s ease 8s forwards;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
/* the JS-driven exit: window load fired */
.c-loader.is-done {
  opacity: 0;
  visibility: hidden;
}
/* fast load — the halo never showed; the ink drops near-instantly and
   reads as part of the paint, no loader ceremony */
.c-loader.is-done--fast { transition-duration: 0.15s; }

.c-loader__halo {
  width: 72px;
  height: 72px;
  /* only pages still loading at 350ms ever see the halo */
  opacity: 0;
  animation:
    c-loader-spin 1.5s linear infinite,
    c-loader-halo-in 0.3s ease 0.35s forwards; /* delay = HALO_AT in SiteLoader.astro */
}
@media (min-width: 768px) {
  .c-loader__halo {
    width: 96px;
    height: 96px;
  }
}

@keyframes c-loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes c-loader-halo-in {
  to { opacity: 1; }
}
@keyframes c-loader-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-loader { display: none; }
}

/* ---------- page entrance (every page EXCEPT the home) ----------
   The halo loader above is the home's entrance; all other pages get this
   soft fade-up on .site-main instead (class set at build time in
   Layout.astro). Quick and once per load — the per-section [data-reveal]
   staggers still carry the in-page motion. */
.page-enter {
  animation: page-enter 0.7s var(--ease-out-expo) both;
}
@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-enter { animation: none; }
}