/* ===================================================
   OPENING ANIMATION (intro)
   葉っぱ + 太陽が舞い降りるオーバーレイ（2.5s）
   sessionStorage で 1セッション内 1回のみ発火
   =================================================== */

.intro-anim {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* 朝の光が左上から差し込み、外周にいくほど淡緑が深まる（CCO 2026-05-11 設計） */
  background: radial-gradient(ellipse at 25% 15%,
    #FFFFFF 0%,
    #F2F4ED 30%,
    #E8F0E0 55%,
    #D4E5C5 80%,
    #B9D29F 100%);
  pointer-events: none;
  opacity: 0;
  animation: introOverlayFade 2.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  overflow: hidden;
}

.intro-anim.is-done {
  display: none !important;
}

/* 2026-05-16 緑単軸化: 右下のヒントも淡緑へ（旧 ターコイズ青空ヒント廃止） */
.intro-anim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 95%,
    rgba(143,181,113,0.10) 0%,
    rgba(143,181,113,0) 35%);
  pointer-events: none;
  z-index: 0;
}

/* 朝の光（太陽の代替・淡緑のhalo） */
.intro-anim__sun {
  position: absolute;
  top: 18%;
  left: 22%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.9) 0%,
    rgba(232,240,224,0.6) 45%,
    rgba(232,240,224,0.0) 80%);
  filter: blur(2px);
  transform: translateY(60px) scale(0.7);
  opacity: 0;
  animation: introSunRise 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  z-index: 1;
}

.intro-anim__sun::before {
  content: '';
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(143,181,113,0.18) 0%,
    rgba(143,181,113,0) 70%);
  filter: blur(24px);
}

/* 葉っぱを内包するレイヤー */
.intro-anim__leaves {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 葉っぱ単体 */
.intro-leaf {
  position: absolute;
  top: -80px;
  opacity: 0;
  animation-name: introLeafFall;
  animation-timing-function: cubic-bezier(0.34, 0.0, 0.55, 1.0);
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

.intro-leaf svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* 全体のフェードアウト */
@keyframes introOverlayFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes introSunRise {
  0%   { transform: translateY(60px) scale(0.7); opacity: 0; }
  60%  { transform: translateY(0) scale(1.0); opacity: 0.95; }
  100% { transform: translateY(0) scale(1.0); opacity: 0.7; }
}

@keyframes introLeafFall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  20% { opacity: 0.85; }
  85% { opacity: 0.4; }
  100% {
    transform: translate3d(var(--leaf-drift, 80px), 110vh, 0) rotate(var(--leaf-rotate, 360deg));
    opacity: 0;
  }
}

/* prefers-reduced-motion: skip animation */
@media (prefers-reduced-motion: reduce) {
  .intro-anim,
  .intro-anim__sun,
  .intro-leaf {
    animation: none !important;
    display: none !important;
  }
}