/**
 * ============================================================================
 * ANIMATIONS
 * ============================================================================
 * Two things live here:
 *
 * 1. The page-load sword intro — two katana blades sweep across a black
 *    curtain, cross with a flash, and the curtain splits apart along the
 *    slash line to reveal the site underneath. Triggered by intro.js
 *    adding `.is-playing` to #intro; see js/intro.js for the JS side and
 *    SITE_CONFIG.intro for the on/off + timing switch.
 *
 * 2. Generic scroll-reveal + a reduced-motion safety net that applies to
 *    the whole site.
 *
 * Timing note: the delays/durations below add up to roughly the
 * SITE_CONFIG.intro.totalDurationMs value in config.js. If you change one,
 * nudge the other so the overlay doesn't get removed mid-animation.
 * ============================================================================
 */

/* ---------- Intro shell -------------------------------------------------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: var(--c-void);
  opacity: 1;
  transition: opacity 380ms var(--ease-standard);
}

.intro.is-finished {
  opacity: 0;
}

.intro-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.intro-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4ch;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  letter-spacing: 0.08em;
  color: var(--c-bone);
  text-transform: uppercase;
  opacity: 0;
}

.intro-mark span {
  color: var(--c-ash);
}

.intro-skip {
  position: absolute;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--c-ash);
  border: 1px solid var(--c-steel-soft);
  padding: 0.6em 1.1em;
  opacity: 0;
  transition: opacity 300ms var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

.intro-skip:hover {
  color: var(--c-bone);
  border-color: var(--c-bone);
}

.intro.is-playing .intro-skip {
  opacity: 1;
  transition-delay: 200ms;
}

/* ---------- Blades --------------------------------------------------------- */

.blade {
  position: absolute;
  width: 48vw;
  max-width: 640px;
  opacity: 0;
}

.blade svg {
  width: 100%;
  height: auto;
  display: block;
}

.blade-a {
  left: -55%;
  top: 40%;
}

.blade-b {
  right: -55%;
  top: 56%;
}

.intro-flash {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.22) 38%, transparent 70%);
  opacity: 0;
  transform: scale(0.2);
}

@keyframes intro-mark-beat {
  0%   { opacity: 0; letter-spacing: 0.4em; }
  20%  { opacity: 1; letter-spacing: 0.08em; }
  70%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes blade-a-sweep {
  0%   { transform: translateX(0) rotate(-8deg); opacity: 0; }
  8%   { opacity: 1; }
  60%  { opacity: 1; }
  70%  { transform: translateX(160vw) rotate(-8deg); opacity: 0.85; }
  100% { transform: translateX(230vw) rotate(-8deg); opacity: 0; }
}

@keyframes blade-b-sweep {
  0%   { transform: translateX(0) rotate(8deg); opacity: 0; }
  8%   { opacity: 1; }
  60%  { opacity: 1; }
  70%  { transform: translateX(-160vw) rotate(8deg); opacity: 0.85; }
  100% { transform: translateX(-230vw) rotate(8deg); opacity: 0; }
}

@keyframes flash-pulse {
  0%   { opacity: 0; transform: scale(0.2); }
  50%  { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

.intro.is-playing .intro-mark {
  animation: intro-mark-beat 520ms var(--ease-standard) forwards;
}

.intro.is-playing .blade-a {
  animation: blade-a-sweep 850ms var(--ease-blade) forwards;
}

.intro.is-playing .blade-b {
  animation: blade-b-sweep 850ms var(--ease-blade) forwards;
  animation-delay: 120ms;
}

.intro.is-playing .intro-flash {
  animation: flash-pulse 550ms var(--ease-standard) forwards;
  animation-delay: 380ms;
}

/* ---------- Curtain split -------------------------------------------------- */

.intro-curtain {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--c-void);
}

.curtain-top {
  clip-path: polygon(0 0, 100% 0, 100% 42%, 0 58%);
}

.curtain-bottom {
  clip-path: polygon(0 58%, 100% 42%, 100% 100%, 0 100%);
}

@keyframes curtain-top-out {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(-10vw, -65vh) rotate(-5deg); opacity: 0; }
}

@keyframes curtain-bottom-out {
  0%   { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate(10vw, 65vh) rotate(5deg); opacity: 0; }
}

.intro.is-playing .curtain-top {
  animation: curtain-top-out 820ms var(--ease-out) forwards;
  animation-delay: 780ms;
}

.intro.is-playing .curtain-bottom {
  animation: curtain-bottom-out 820ms var(--ease-out) forwards;
  animation-delay: 780ms;
}

/* ---------- Hero entrance (plays once the intro clears) -------------------- */

.hero-content > * {
  opacity: 0;
  transform: translateY(16px);
}

html.intro-done .hero-content > * {
  animation: hero-in var(--dur-slow) var(--ease-out) forwards;
}

html.intro-done .hero-content > *:nth-child(1) { animation-delay: 0ms; }
html.intro-done .hero-content > *:nth-child(2) { animation-delay: 70ms; }
html.intro-done .hero-content > *:nth-child(3) { animation-delay: 140ms; }
html.intro-done .hero-content > *:nth-child(4) { animation-delay: 210ms; }
html.intro-done .hero-content > *:nth-child(5) { animation-delay: 280ms; }
html.intro-done .hero-content > *:nth-child(6) { animation-delay: 350ms; }

@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Ambient hero watermark ------------------------------------------ */

.hero-watermark svg {
  animation: watermark-drift 11s ease-in-out infinite;
}

@keyframes watermark-drift {
  0%, 100% { transform: rotate(-9deg) scale(1); }
  50%      { transform: rotate(-7deg) scale(1.02); }
}

/* ---------- Scroll reveal ---------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Reduced motion safety net ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}