/* =========================================================================
   TheKtchnParty — Cinematic Pickleball Intro
   Loaded ONLY by index.html. Fully isolated from styles.css: nothing here
   is referenced by any other page, so it cannot affect them even if this
   file has a bug. Safe to delete this file + its two <link>/<script> tags
   in index.html to remove the feature entirely.

   Plays on every page load (no session gating) — see intro.js.
   ========================================================================= */

#tkp-cinematic-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #05100a; /* near-black with a whisper of the brand dark-green */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;   /* fallback for browsers without dvh */
  height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}

#tkp-cinematic-intro canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Brief camera-shake on paddle impact — small translate jitter, ~180ms. */
@keyframes tkpImpactShake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4px, 3px); }
  40%  { transform: translate(4px, -3px); }
  60%  { transform: translate(-3px, 2px); }
  80%  { transform: translate(2px, -1px); }
  100% { transform: translate(0, 0); }
}
#tkp-cinematic-intro canvas.tkp-impact-shake {
  animation: tkpImpactShake 0.18s linear;
}
@media (prefers-reduced-motion: reduce) {
  #tkp-cinematic-intro canvas.tkp-impact-shake {
    animation: none;
  }
}

/* Locks background scroll while the intro is up so the homepage can't be
   scrolled/interacted with underneath it. Removed the instant the intro
   finishes or is skipped. */
body.tkp-intro-active {
  overflow: hidden;
}

/* Skip control — quiet, bottom-right, never the focal point. Appears after
   a short delay via JS (tkp-intro-skip-visible) so it doesn't clutter the
   opening beat of darkness. */
#tkp-intro-skip {
  position: absolute;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 2;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(245, 241, 230, 0.28);
  background: rgba(5, 16, 10, 0.35);
  color: rgba(245, 241, 230, 0.82);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.2s ease;
}

#tkp-intro-skip.tkp-intro-skip-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#tkp-intro-skip:hover,
#tkp-intro-skip:focus-visible {
  border-color: rgba(221, 242, 79, 0.6);
  color: #f5f1e6;
}

#tkp-intro-skip:focus-visible {
  outline: 2px solid #ddf24f;
  outline-offset: 2px;
}

/* Overlay exit — fade + soft blur, canvas dims out underneath it. */
#tkp-cinematic-intro.tkp-intro-fading {
  transition: opacity 0.65s cubic-bezier(.22,.61,.36,1), filter 0.65s cubic-bezier(.22,.61,.36,1);
  opacity: 0;
  filter: blur(6px);
  pointer-events: none;
}

/* Homepage "settle in" — plays once, timed to the overlay clearing, so the
   header/hero read as physically revealed rather than just appearing.
   Deliberately subtle per the brief. */
body.tkp-intro-revealing .site-header,
body.tkp-intro-revealing .hero {
  animation: tkpHeroSettle 0.8s cubic-bezier(.22,.61,.36,1) both;
}
body.tkp-intro-revealing .site-header { animation-delay: 0.05s; }
body.tkp-intro-revealing .hero { animation-delay: 0.12s; }

@keyframes tkpHeroSettle {
  from { opacity: 0; transform: translateY(14px) scale(0.992); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  #tkp-cinematic-intro.tkp-intro-fading {
    transition: opacity 0.25s linear;
    filter: none;
  }
  body.tkp-intro-revealing .site-header,
  body.tkp-intro-revealing .hero {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@media (max-width: 700px) {
  #tkp-intro-skip { font-size: 12px; padding: 8px 14px; }
}