/* =============================================
   vanu.photo LP — Motion
   静かに、少しだけ。prefers-reduced-motion では止める。
   ============================================= */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(91, 141, 239, 0.5); }
  70%  { box-shadow: 0 0 0 6px rgba(91, 141, 239, 0); }
  100% { box-shadow: 0 0 0 0 rgba(91, 141, 239, 0); }
}
@keyframes v-glow {
  0%, 100% { text-shadow: 0 0 60px rgba(91, 141, 239, 0.4), 0 0 120px rgba(91, 141, 239, 0.15); }
  50%      { text-shadow: 0 0 72px rgba(91, 141, 239, 0.55), 0 0 140px rgba(91, 141, 239, 0.22); }
}
@keyframes scroll-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(250%); }
}

/* --- Hero: 上から順にフェードイン --- */
.hero-copy > * {
  animation: fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.hero-copy > :nth-child(2) { animation-delay: 0.12s; }
.hero-copy > :nth-child(3) { animation-delay: 0.32s; }
.hero-copy > :nth-child(4) { animation-delay: 0.44s; }
.hero-copy > :nth-child(5) { animation-delay: 0.56s; }

.hero-fan {
  animation: fade-up 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both;
}

.hero-eyebrow .dot { animation: dot-pulse 2.4s ease-out infinite; }
.hero-wordmark .v  { animation: v-glow 6s ease-in-out infinite; }

.scroll-hint-line {
  position: relative;
  overflow: hidden;
}
.scroll-hint-line::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--accent));
  animation: scroll-drop 2.4s cubic-bezier(0.6, 0, 0.4, 1) infinite;
}

/* --- Scroll reveal（motion.js が .motion-ready と .reveal を付ける。JS なしでは何も隠さない） --- */
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease var(--reveal-delay, 0s),
    transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
}
/* モックアップの写真は、アルバムに 1 枚ずつ追加されるように */
.motion-ready .mockup-photo.reveal { transform: scale(0.85); }
.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}