/* =========================================================
   共通モーション: reveal / keyframes
   ========================================================= */

/* ---------- keyframes ---------- */
@keyframes riseUp{from{transform:translateY(115%)}to{transform:translateY(0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes driftA{from{transform:translateX(-2.4%)}to{transform:translateX(2.4%)}}
@keyframes driftB{from{transform:translateX(2.8%)}to{transform:translateX(-2.8%)}}
@keyframes driftC{from{transform:translateX(-1.6%)}to{transform:translateX(1.6%)}}
@keyframes raysTurn{from{transform:translateX(-50%) rotate(0deg)}to{transform:translateX(-50%) rotate(360deg)}}
@keyframes sunBreath{0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes twinkle{0%,100%{opacity:.9}50%{opacity:.35}}
@keyframes scrollDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes marqueeMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:.95}}
@keyframes kenburns{0%{transform:scale(1.05) translate3d(0,0,0)}100%{transform:scale(1.16) translate3d(-2%,-2.6%,0)}}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}

/* Cinematic 追加 */
@keyframes lineExpand{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lineExpandY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes revealMask{
  0%{clip-path:inset(0 100% 0 0)}
  100%{clip-path:inset(0 0 0 0)}
}
@keyframes revealMaskUp{
  0%{clip-path:inset(100% 0 0 0)}
  100%{clip-path:inset(0 0 0 0)}
}
@keyframes counterRoll{
  0%{transform:translateY(100%);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
@keyframes filmFlicker{
  0%,100%{opacity:1}
  92%{opacity:1}
  93%{opacity:.85}
  94%{opacity:1}
  96%{opacity:.9}
  97%{opacity:1}
}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
@keyframes floatY{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes cutIn{
  0%{clip-path:inset(50% 0 50% 0);opacity:0}
  60%{opacity:1}
  100%{clip-path:inset(0 0 0 0);opacity:1}
}

/* ---------- reveal (scroll) ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}
.reveal.d5{transition-delay:.4s}

/* mask reveal (line-by-line) */
.reveal-mask{
  --dl:0s;
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s var(--ease-cine) var(--dl);
}
.reveal-mask.in{clip-path:inset(0 0 0 0)}

.reveal-mask-up{
  --dl:0s;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.2s var(--ease-cine) var(--dl);
}
.reveal-mask-up.in{clip-path:inset(0 0 0 0)}

/* gold hairline that expands from left */
.gold-line{
  display:inline-block;height:1px;width:56px;vertical-align:middle;
  background:linear-gradient(90deg,var(--gold-2),transparent);
  transform-origin:left;transform:scaleX(0);
  transition:transform 1.4s var(--ease-cine) .1s;
}
.reveal.in .gold-line,.reveal-mask.in .gold-line{transform:scaleX(1)}

/* section cut-in（セクション入場時） */
.cut-in{clip-path:inset(4% 0 4% 0);opacity:0;transition:clip-path 1.4s var(--ease-cine),opacity .9s ease}
.cut-in.in{clip-path:inset(0 0 0 0);opacity:1}

@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-mask,.reveal-mask-up,.cut-in{transition:none !important;opacity:1 !important;clip-path:none !important;transform:none !important}
  *{animation:none !important}
}