/* ============================================================
   COUCHON BJJ — _motion-splash.css
   First-load splash overlay. Canvas-based brush-stroke variant.

   A virtual cursor sweeps two arches (L→R upper, R→L lower)
   across the canvas, painting accent red over the pure-white
   surface. The two-line wordmark — "Couchon" stacked over
   "Brazilian Jiu Jitsu" — is preserved as negative space; the
   white surface beneath shows through where the wordmark is
   carved. A wider perimeter brush then fills the corners.
   200ms after the spray finishes, a red 2px border fades in
   around both lines over 200ms; 200ms after that (a 200ms gap
   from border-start), a bold hard-edged black drop shadow
   sprays in sideways over 400ms. Total ~4.1s.

   This stylesheet only defines the overlay structure and the
   CSS-driven opacity transitions for show/dismiss. All canvas
   drawing — strokes, wordmark carving, border, shadow — is
   handled by motion-splash.js.
   ============================================================ */

:root {
  --spray-paint-in:  80ms;
  --spray-fade:      500ms;
}

.splash-spray-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: block;
  opacity: 0;
  pointer-events: none;
  /* Pure white surface. The accent paint sprays on top via the
     canvas; carving the wordmark out of the accent reveals this
     white underneath. */
  background: #FFFFFF;
  overflow: hidden;
}

.splash-spray-overlay.is-active {
  pointer-events: auto;
  opacity: 1;
  transition: opacity var(--spray-paint-in) linear;
}

.splash-spray-overlay.is-dismissing {
  opacity: 0;
  /* main.css declares --ease-exit; fall back if it's not loaded yet. */
  transition: opacity var(--spray-fade) var(--ease-exit, cubic-bezier(0.4, 0, 1, 1));
}

.splash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================================
   Splash-title shadow — applied to in-page headings.

   The splash wordmark's signature is a HARD-EDGED (no blur),
   fully opaque black offset shadow (motion-splash.js:
   SHADOW_COLOR rgba(0,0,0,1), SHADOW_BLUR 0, SHADOW_OFFSET).
   This is the same treatment the CTA uses (couchon-cta-tshadow
   in _motion-stencil.css). Add .cb-title-shadow to a heading;
   motion-stencil.js adds .is-revealed when it scrolls into
   view, so the shadow "sprays in" the way the splash title
   does. --cb-title-shadow-y tunes the drop (display headings
   want more than the CTA's 3px).
   ============================================================ */
.cb-title-shadow { --cb-title-shadow-y: 6px; }

.cb-title-shadow.is-revealed {
  animation: couchon-title-tshadow 420ms ease-out forwards;
}

@keyframes couchon-title-tshadow {
  from { text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
  to   { text-shadow: 0 var(--cb-title-shadow-y, 6px) 0 rgba(0, 0, 0, 1); }
}

/* Reduced-motion: present the final shadow immediately, no spray. */
@media (prefers-reduced-motion: reduce) {
  .cb-title-shadow {
    text-shadow: 0 var(--cb-title-shadow-y, 6px) 0 rgba(0, 0, 0, 1);
  }
  .cb-title-shadow.is-revealed { animation: none; }
}