/* =========================================================
  Sparring video section (Index)
  - Between #fighters and #news
  - Scroll: video pins, News overlays, video disappears
  - Words: spawned by assets/js/sparring.js
========================================================= */

:root{
  /* ▼ tweak here */
  --sparring-height: 300vh;   /* total scroll length of the video section */
  --sparring-overlap: 180vh; /* how much News overlaps the pinned video */
}

@media (max-width: 640px){
  :root{
    --sparring-height: 280vh;
    --sparring-overlap: 200vh;
  }
}

/* ✅ Fighters と動画の間の“線/余白”を消す */
#fighters{
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.sparring{
  position: relative;
  height: var(--sparring-height);
  margin: 0;
  padding: 0;
  border: 0;

  /* fallback background if video is not ready */
  background: #000;

  /* z-index layer stable */
  isolation: isolate;
}

.sparring__scroll{
  height: 100%;
}

.sparring__sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1;
}
@supports (height: 100svh){
  .sparring__sticky{ height: 100svh; }
}

.sparring__media{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* Video */
.sparring__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* ✅ darker (and consistent) */
  filter: saturate(1.05) contrast(1.08) brightness(0.58);
  transform: scale(1.015);
}

/* Dark overlay (uniform so it doesn't look like a "top line") */
.sparring__shade{
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    /* base dark */
    linear-gradient(0deg, rgba(0,0,0,.46), rgba(0,0,0,.46)),
    /* subtle vibes */
    radial-gradient(900px 520px at 14% 12%, rgba(225,6,0,.12), transparent 62%),
    radial-gradient(900px 520px at 86% 14%, rgba(255,255,255,.06), transparent 60%);
}

/* Words overlay container */
.sparring__words{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* One word/phrase */
.sparringWord{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);

  .sparringWord{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);

  /* ✅ smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;

  backface-visibility: hidden;
  transform-style: preserve-3d;

  /* ✅ translate3d */
  transform: translate3d(-50%, -50%, 0) rotate(var(--rot, 0deg)) scale(var(--from, .18));
  opacity: 0;

  color: rgba(208, 212, 218, .86);

  font-weight: 900;
  font-size: var(--fs, clamp(12px, 2.0vw, 20px));
  letter-spacing: .02em;
  white-space: nowrap;
  user-select: none;

  text-shadow:
    0 18px 48px rgba(0,0,0,.72),
    0  2px 10px rgba(0,0,0,.46);

  will-change: transform, opacity;

  animation: sparringWordPop var(--dur, 1700ms) cubic-bezier(.16,.92,.22,1) forwards;
}

  opacity: 0;

  /* ✅ whiteより少しグレー */
  color: rgba(208, 212, 218, .86);

  font-weight: 900;
  font-size: var(--fs, clamp(12px, 2.0vw, 20px));
  letter-spacing: .02em;
  white-space: nowrap;
  user-select: none;

  text-shadow:
    0 18px 48px rgba(0,0,0,.72),
    0  2px 10px rgba(0,0,0,.46);

  will-change: transform, opacity, filter;

  animation: sparringWordPop var(--dur, 1700ms) cubic-bezier(.16,.92,.22,1) forwards;
}

@keyframes sparringWordPop{
  0%{
    opacity: 0;
   .sparringWord{
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);

  /* ✅ smoothing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;

  backface-visibility: hidden;
  transform-style: preserve-3d;

  /* ✅ translate3d */
  transform: translate3d(-50%, -50%, 0) rotate(var(--rot, 0deg)) scale(var(--from, .18));
  opacity: 0;

  color: rgba(208, 212, 218, .86);

  font-weight: 900;
  font-size: var(--fs, clamp(12px, 2.0vw, 20px));
  letter-spacing: .02em;
  white-space: nowrap;
  user-select: none;

  text-shadow:
    0 18px 48px rgba(0,0,0,.72),
    0  2px 10px rgba(0,0,0,.46);

  will-change: transform, opacity;

  animation: sparringWordPop var(--dur, 1700ms) cubic-bezier(.16,.92,.22,1) forwards;
}

    filter: blur(1px);
  }
  12%{ opacity: .92; }
  70%{ opacity: .78; }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(var(--to, 2.4));
    filter: blur(0);
  }
}

/* Reduced motion: no popping words */
@media (prefers-reduced-motion: reduce){
  .sparringWord{ display: none !important; }
}

/* ---------------------------------------------------------
  News overlays the pinned video (Index only)
  - Apply when #news comes after #sparring
--------------------------------------------------------- */
#sparring + #news{
  position: relative;
  z-index: 20;

  /* cover the video behind */
  background: var(--bg);

  /* pull News upward so it starts while video is still pinned */
  margin-top: calc(-1 * var(--sparring-overlap));
}

/* Keep the section edge clean */
#sparring + #news::before{
  opacity: .65;
}