/* ==========================================================================
   Scroll Animations (GSAP ScrollTrigger driven)
   ========================================================================== */

/* Base hidden states - animated via IntersectionObserver or GSAP */
.anim-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-fade-in {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-scale-in {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Animated state (applied by IntersectionObserver or GSAP) */
.is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Section heading animation */
.section-heading .anim-clip {
  clip-path: inset(0 100% 0 0);
}

.section-heading .anim-clip.is-visible {
  clip-path: inset(0 0 0 0);
}

/* Stagger children - delay utility */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.2s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.3s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.4s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.5s; }

/* Parallax element */
.parallax {
  will-change: transform;
}

/* Floating bubbles animation */
.bubbles-wrap {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-behind);
  overflow: hidden;
}

/* Sakura petal (旧 bubble) — 桜の花びらが舞い散る */
.bubble {
  position: absolute;
  top: -80px;
  border-radius: 50% 10% 50% 50%;
  background: radial-gradient(ellipse at 30% 30%, #ffe4ec 0%, #f8bbd0 55%, rgba(248,187,208,0) 100%);
  opacity: 0;
  animation: sakuraFall linear infinite;
  filter: drop-shadow(0 1px 2px rgba(244, 143, 177, 0.25));
}

.bubble--1  { width: 18px; height: 18px; left:  5%; animation-duration: 14s; animation-delay:  0s;   }
.bubble--2  { width: 14px; height: 14px; left: 12%; animation-duration: 17s; animation-delay:  2s;   }
.bubble--3  { width: 20px; height: 20px; left: 22%; animation-duration: 13s; animation-delay:  4s;   }
.bubble--4  { width: 12px; height: 12px; left: 32%; animation-duration: 19s; animation-delay:  1s;   }
.bubble--5  { width: 22px; height: 22px; left: 42%; animation-duration: 12s; animation-delay:  9s;   }
.bubble--6  { width: 15px; height: 15px; left: 52%; animation-duration: 16s; animation-delay:  4.5s; }
.bubble--7  { width: 18px; height: 18px; left: 60%; animation-duration: 15s; animation-delay:  7s;   }
.bubble--8  { width: 13px; height: 13px; left: 70%; animation-duration: 18s; animation-delay:  2.5s; }
.bubble--9  { width: 16px; height: 16px; left: 78%; animation-duration: 13s; animation-delay: 11s;   }
.bubble--10 { width: 14px; height: 14px; left: 88%; animation-duration: 17s; animation-delay:  5.5s; }
.bubble--11 { width: 11px; height: 11px; left: 38%; animation-duration: 14s; animation-delay: 10s;   }
.bubble--12 { width: 17px; height: 17px; left: 65%; animation-duration: 16s; animation-delay:  8s;   }
.bubble--13 { width: 13px; height: 13px; left:  8%; animation-duration: 18s; animation-delay:  6.5s; }
.bubble--14 { width: 20px; height: 20px; left: 92%; animation-duration: 14s; animation-delay:  3s;   }
.bubble--15 { width: 12px; height: 12px; left: 48%; animation-duration: 19s; animation-delay: 12s;   }
.bubble--16 { width: 16px; height: 16px; left: 18%; animation-duration: 15s; animation-delay: 13.5s; }

/* 白っぽい花びらをアクセントで散らす（3割） */
.bubble--3,
.bubble--7,
.bubble--11,
.bubble--14 {
  background: radial-gradient(ellipse at 30% 30%, #ffffff 0%, #ffe4ec 60%, rgba(255,228,236,0) 100%);
  filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.45));
}

/* 桜の花びらが上から下へ舞い落ちる */
@keyframes sakuraFall {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 0.85; }
  50% {
    transform: translate3d(40px, 55vh, 0) rotate(280deg);
  }
  92% { opacity: 0.85; }
  100% {
    transform: translate3d(-30px, 115vh, 0) rotate(540deg);
    opacity: 0;
  }
}

/* 後方互換: 旧 floatBubble 名でも上書き */
@keyframes floatBubble {
  0% {
    transform: translate3d(0, -10vh, 0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 0.85; }
  50% {
    transform: translate3d(40px, 55vh, 0) rotate(280deg);
  }
  92% { opacity: 0.85; }
  100% {
    transform: translate3d(-30px, 115vh, 0) rotate(540deg);
    opacity: 0;
  }
}

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-in,
  .anim-scale-in,
  .anim-slide-left,
  .anim-slide-right {
    opacity: 1;
    transform: none;
  }

  .bubble {
    animation: none;
    opacity: 0.03;
  }
}

/* ============================================================
   モバイル最適化: 桜花びらを間引いて描画負荷を軽減
   - スマホは常時repaintが厳しいので半分(8枚)に
   - 小型機(<480px)はさらに削減(5枚)
   ============================================================ */
@media (max-width: 840px) {
  .bubble--9,
  .bubble--10,
  .bubble--11,
  .bubble--12,
  .bubble--13,
  .bubble--14,
  .bubble--15,
  .bubble--16 {
    display: none;
  }
}

@media (max-width: 480px) {
  .bubble--5,
  .bubble--6,
  .bubble--7,
  .bubble--8 {
    display: none;
  }
  /* 残った花びらのアニメーション速度を遅く（CPU負荷軽減） */
  .bubble {
    animation-duration: 22s !important;
  }
}