/* ==========================================================================
   Branded loading sequence
   The logo is split into its real layers (red swoosh, yellow swoosh, green
   wordmark) and recomposed live. The swoosh strokes draw themselves along
   their natural curve via an animated conic mask — the swoosh IS the "C",
   so the drawing completes the word. Pure CSS, no JavaScript.

   Timeline
   0.00s  "oopEast" waiting at 40% opacity
   0.35s  red stroke begins drawing (top tip, counterclockwise)
   0.50s  yellow stroke follows the same path
   1.50s  word rises to full opacity as the C closes
   2.30s  tagline fades up
   3.40s  canvas fades into the page
   ========================================================================== */

/* Animatable angle for the conic mask */
@property --sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) + 10);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  background-color: var(--clr-white);
  animation: loader-exit 500ms ease 3400ms forwards;
}

.loader__logo {
  position: relative;
  width: min(70vw, 20rem);
  aspect-ratio: 800 / 308;
}

.loader__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ----- Swoosh strokes — drawn by a conic mask sweeping counterclockwise
   from the C's top tip (≈60°) around to its bottom tip. The mask window
   grows from 0° to a full circle, revealing the stroke along its curve. */

.loader__swoosh {
  --sweep: 0deg;
  -webkit-mask-image: conic-gradient(
    from calc(60deg - var(--sweep)) at 33% 49%,
    #000 0 var(--sweep),
    transparent var(--sweep)
  );
  mask-image: conic-gradient(
    from calc(60deg - var(--sweep)) at 33% 49%,
    #000 0 var(--sweep),
    transparent var(--sweep)
  );
}

.loader__swoosh--red {
  animation: loader-draw 1150ms cubic-bezier(0.5, 0, 0.3, 1) 350ms forwards;
}

.loader__swoosh--yellow {
  animation: loader-draw 1100ms cubic-bezier(0.5, 0, 0.3, 1) 500ms forwards;
}

@keyframes loader-draw {
  to {
    --sweep: 360deg;
  }
}

/* ----- Wordmark — waits at 40%, completes as the C closes ----- */

.loader__wordmark {
  opacity: 0.4;
  animation: loader-word 700ms cubic-bezier(0.16, 1, 0.3, 1) 1500ms forwards;
}

@keyframes loader-word {
  to {
    opacity: 1;
  }
}

/* ----- Tagline ----- */

.loader__tagline {
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-primary);
  opacity: 0;
  transform: translateY(0.375rem);
  animation: loader-tagline 600ms ease-out 2300ms forwards;
}

@keyframes loader-tagline {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ----- Exit — the canvas releases the page ----- */

@keyframes loader-exit {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* Motion-sensitive users go straight to the site */
@media (prefers-reduced-motion: reduce) {
  .loader {
    display: none;
  }
}