/* トップの .key-top の背面に敷く（動画 .key-movie の置き換え） */
.kv {
  position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: #0f0d0b; color: #efe6d8;
}
.kv__stage { position: absolute; inset: 0; z-index: 0; isolation: isolate; }

/* ---------- スライド ---------- */
.kv__slide { position: absolute; inset: 0; visibility: hidden; z-index: 0; }
.kv__slide.is-prev { visibility: visible; z-index: 1; }
.kv__slide.is-current { visibility: visible; z-index: 2; }
.kv__slide img,
.kv__strip img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
.kv__strip { position: absolute; inset: 0; overflow: hidden; }

/* Ken Burns（写真ごとに方向を変える） */
.kv__slide:nth-child(3n+1) img { animation: kb0 var(--kb, 10s) cubic-bezier(.33,0,.67,1) forwards; }
.kv__slide:nth-child(3n+2) img { animation: kb1 var(--kb, 10s) cubic-bezier(.33,0,.67,1) forwards; }
.kv__slide:nth-child(3n+3) img { animation: kb2 var(--kb, 10s) cubic-bezier(.33,0,.67,1) forwards; }
@keyframes kb0 { from { transform: scale(1.06) translate(0,0) } to { transform: scale(1.18) translate(-2%,-1.5%) } }
@keyframes kb1 { from { transform: scale(1.2) translate(2%,0) } to { transform: scale(1.06) translate(0,0) } }
@keyframes kb2 { from { transform: scale(1.05) translate(0,1.5%) } to { transform: scale(1.16) translate(1.5%,-1%) } }

/* ---------- 入りの演出 ---------- */
.kv__slide.in-fade   { animation: kvFade 2.4s ease-out both; }
.kv__slide.in-steam  { animation: kvSteam 2.8s cubic-bezier(.4,0,.2,1) both; }
.kv__slide.in-ripple { animation: kvFade 1.8s ease-out both; }
.kv__slide.in-cinema { animation: kvCut 2.4s linear both; }
.kv__slide.in-light {
  -webkit-mask-image: linear-gradient(100deg,#000 0%,#000 42%,transparent 58%,transparent 100%);
          mask-image: linear-gradient(100deg,#000 0%,#000 42%,transparent 58%,transparent 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  animation: kvSweep 2.6s cubic-bezier(.65,0,.3,1) both;
}
.kv__slide.in-noren .kv__strip { animation: kvNoren 1.5s cubic-bezier(.2,.7,.2,1) both; }
.kv__slide.is-rippling { filter: url(#kv-ripple); }

@keyframes kvFade  { from { opacity: 0 } to { opacity: 1 } }
@keyframes kvSteam {
  from { opacity: 0; filter: blur(22px) brightness(1.45) saturate(.7) }
  60%  { opacity: 1 }
  to   { opacity: 1; filter: blur(0) brightness(1) saturate(1) }
}
@keyframes kvSweep {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0 }
  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0 }
}
@keyframes kvNoren { from { opacity: 0; transform: translateY(-6%) } to { opacity: 1; transform: none } }
@keyframes kvCut   { 0%, 49.9% { opacity: 0 } 50%, 100% { opacity: 1 } }

/* ---------- エフェクト層 ---------- */
.kv__haze, .kv__glare, .kv__dip, .kv__bar, .kv__steam { position: absolute; pointer-events: none; }
.kv__haze {
  inset: 0; z-index: 3; opacity: 0;
  background: radial-gradient(ellipse at 50% 70%, rgba(255,248,238,.9), rgba(255,248,238,.25) 55%, transparent 80%);
}
.kv__haze.is-play { animation: kvHaze 2.8s ease-in-out both; }
@keyframes kvHaze { 0% { opacity: 0 } 40% { opacity: .55 } 100% { opacity: 0 } }

.kv__glare {
  top: -10%; bottom: -10%; left: 0; width: 22vw; z-index: 3; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,236,200,.35) 45%, rgba(255,250,235,.55) 50%, rgba(255,236,200,.35) 55%, transparent);
  filter: blur(18px); mix-blend-mode: screen;
}
.kv__glare.is-play { animation: kvGlare 2.6s cubic-bezier(.65,0,.3,1) both; }
@keyframes kvGlare {
  from { transform: translateX(-60vw) skewX(-18deg); opacity: 0 }
  25%  { opacity: 1 } 80% { opacity: .8 }
  to   { transform: translateX(120vw) skewX(-18deg); opacity: 0 }
}

.kv__dip { inset: 0; z-index: 3; background: #000; opacity: 0; }
.kv__dip.is-play { animation: kvDip 2.4s ease-in-out both; }
@keyframes kvDip { 0% { opacity: 0 } 45%, 55% { opacity: 1 } 100% { opacity: 0 } }

.kv__bar {
  left: 0; right: 0; height: 9vh; z-index: 4; background: #000;
  transform: scaleY(0); transition: transform 1.2s cubic-bezier(.6,0,.2,1);
}
.kv__bar--top { top: 0; transform-origin: top; }
.kv__bar--bottom { bottom: 0; transform-origin: bottom; }
.kv.is-cinema .kv__bar { transform: scaleY(1); }

/* 漂う湯気 */
.kv__steam { inset: 0; z-index: 5; overflow: hidden; mix-blend-mode: screen; }
.kv__steam i {
  position: absolute; bottom: -20%; width: 38vw; height: 38vw; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%);
  filter: blur(24px); animation: kvRise 15s linear infinite;
}
.kv__steam i:nth-child(1) { left: -10%; animation-duration: 15s;   animation-delay: 0s; }
.kv__steam i:nth-child(2) { left: 12%;  animation-duration: 17.2s; animation-delay: -3.4s; }
.kv__steam i:nth-child(3) { left: 37%;  animation-duration: 19.4s; animation-delay: -6.8s; }
.kv__steam i:nth-child(4) { left: 57%;  animation-duration: 21.6s; animation-delay: -10.2s; }
.kv__steam i:nth-child(5) { left: 24%;  animation-duration: 23.8s; animation-delay: -13.6s; }
.kv__steam i:nth-child(6) { left: 70%;  animation-duration: 26s;   animation-delay: -17s; }
@keyframes kvRise {
  0%   { transform: translateY(25%) scale(.8); opacity: 0 }
  30%  { opacity: 1 }
  100% { transform: translateY(-90%) scale(1.5); opacity: 0 }
}

/* ---------- 陰影 ---------- */
.kv__shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,0) 22%, rgba(10,8,6,0) 62%, rgba(10,8,6,.7) 100%);
}