/* ---------------------------------------------
    Distortion Animation
--------------------------------------------- */
@keyframes distortion {
  0% {
    -webkit-filter: url(#distortion-0);
    filter: url(#distortion-0);
  }
  20% {
    -webkit-filter: url(#distortion-1);
    filter: url(#distortion-1);
  }
  40% {
    -webkit-filter: url(#distortion-2);
    filter: url(#distortion-2);
  }
  60% {
    -webkit-filter: url(#distortion-3);
    filter: url(#distortion-3);
  }
  80% {
    -webkit-filter: url(#distortion-4);
    filter: url(#distortion-4);
  }
  100% {
    -webkit-filter: url(#distortion-0);
    filter: url(#distortion-0);
  }
}

.u-distortion {
  animation: distortion 6s steps(5) infinite;
}

/* ---------------------------------------------
    Wave Sway Animation
--------------------------------------------- */
@keyframes wave-sway {
  0%,
  50%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(12px);
  }
  75% {
    transform: translateX(-12px);
  }
}

.waves {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wave {
  animation: wave-sway 8s ease-in-out infinite;
}

.wave--1 {
  animation-delay: 2s;
}

.wave--2 {
  animation-delay: 4s;
}

.wave--3 {
  animation-delay: 6s;
}

/* ---------------------------------------------
    Grass Sway Animation
--------------------------------------------- */
/* 茎用アニメーション */
@keyframes grass-sway {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-3deg) skewX(-0.5deg);
  }
  30% {
    transform: rotate(1.5deg);
  }
  50% {
    transform: rotate(-2deg) skewX(-0.3deg);
  }
  70% {
    transform: rotate(1deg);
  }
  85% {
    transform: rotate(-1.5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* 葉用アニメーション */
@keyframes grass-leaf-sway {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(-5deg) skewX(-1deg);
  }
  30% {
    transform: rotate(2.5deg);
  }
  50% {
    transform: rotate(-3.5deg) skewX(-0.5deg);
  }
  70% {
    transform: rotate(1.5deg);
  }
  85% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.grass-sway {
  animation: grass-sway 6s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.grass-blade--1 {
  animation-delay: 0s;
}

.grass-blade--2 {
  animation-delay: 0.2s;
}

.grass-leaf--1 {
  animation-delay: 0.1s;
  animation-name: grass-leaf-sway;
}

.grass-leaf--2 {
  animation-delay: 0.25s;
  animation-name: grass-leaf-sway;
}

/* ---------------------------------------------
    Water Drop Float Animation
--------------------------------------------- */
@keyframes water-drop-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.water-drop-float {
  animation: water-drop-float 3s ease-in-out infinite;
}

/* ---------------------------------------------
    Scroll Animation (Intersection Observer)
--------------------------------------------- */
[data-scroll] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  will-change: opacity, transform;
}

[data-scroll].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------
    Image Fade In
--------------------------------------------- */
.fade-in-up[data-scroll] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1.2s ease,
    transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
}

.fade-in-up[data-scroll].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------
    Image Zoom In
--------------------------------------------- */
.fade-zoom-in[data-scroll] {
  opacity: 0;
  transform: scale(0.95) translateY(10px);
  transition:
    opacity 1s ease,
    transform 1s ease-out;
}

.fade-zoom-in[data-scroll].is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ---------------------------------------------
    Left/Right Slide
--------------------------------------------- */
.fade-in-left[data-scroll] {
  opacity: 0;
  transform: translateX(-30px);
  transition: all 1s ease;
}

.fade-in-right[data-scroll] {
  opacity: 0;
  transform: translateX(30px);
  transition: all 1s ease;
}

.fade-in-left[data-scroll].is-visible,
.fade-in-right[data-scroll].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ---------------------------------------------
    Pop Up Animation
--------------------------------------------- */
.pop-up[data-scroll] {
  opacity: 0;
  transform: translateY(40px);
  transition: none;
}

.pop-up[data-scroll].is-visible {
  animation: pop-up 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pop-up {
  0% {
    opacity: 0;
    transform: translateY(16px);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------
    Puddle/Drip Animation
--------------------------------------------- */
.puddle-icon__highlight {
  animation: drip-down 2s ease-in both;
}

@keyframes drip-down {
  0% {
    opacity: 0;
    transform: translateY(-14px);
  }
  30% {
    opacity: 0.5;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------
    Floating Y (ふわふわ)
--------------------------------------------- */
.fuwafuwa {
  animation: floating-y 4s ease-in-out infinite alternate-reverse;
}

@keyframes floating-y {
  0% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(6px);
  }
}

/* ---------------------------------------------
    Mainvisual Ken Burns (Slow Zoom Out)
--------------------------------------------- */
@keyframes kenburns {
  0% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.slider__slide img {
  will-change: transform;
}

.slider__slide.is-active img {
  animation: kenburns 7s ease-out forwards;
}

/* ---------------------------------------------
    Reduced Motion
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-scroll] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .grass-sway,
  .puddle-icon__highlight,
  .water-drop-float,
  .wave {
    animation: none;
  }

  .pop-up[data-scroll] {
    opacity: 1;
    transform: none;
  }

  .pop-up[data-scroll].is-visible {
    animation: none;
  }

  .slider__slide.is-active img {
    animation: none;
    transform: scale(1);
  }
}