@charset "utf-8";
/* ani.css — 상단 비주얼 모션 */

/* ==================== css/hero-motion.css ==================== */
/* Motion timings follow the user's annotated visual brief (Figma has no keyframes). */
.hero-actor,
.hero-actor > svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-right {
  width: 545px;
  height: 507px;
}
.hero-farmer {
  left: 1002px;
  top: 304px;
  width: 418px;
  height: 649px;
}
.hero-landscape {
  top: 0;
  height: 1017px;
}
.hero-motion-part {
  transform-box: fill-box;
  transform-origin: center;
}
.motion-mallet-action {
  transform-box: view-box;
  transform-origin: 385px 85px;
  animation: rice-pounding 2.6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.motion-watermelon-one,
.motion-watermelon-two {
  animation: watermelon-bite 4.8s ease-in-out infinite;
}
.motion-watermelon-two {
  animation-delay: -2.4s;
}
.motion-fruit-one,
.motion-fruit-two,
.motion-fruit-three,
.motion-fruit-four {
  animation: persimmon-drop 8.6s infinite;
  --fruit-fall: 245px;
}
.motion-fruit-two {
  animation-delay: -3.3s;
  --fruit-fall: 380px;
}
.motion-fruit-three {
  animation-delay: -6.1s;
  --fruit-fall: 300px;
}
.motion-fruit-four {
  animation-delay: -4s;
  --fruit-fall: 340px;
}
.bird-flight {
  animation: bird-flight 12s ease-in-out infinite;
  animation-delay: var(--bird-delay);
}
.bird-wing {
  animation: bird-flap 900ms ease-in-out infinite;
}
.hero-landscape {
  --bird-travel: 145px;
}
.motion-leaf-one,
.motion-leaf-two,
.motion-leaf-three {
  animation: autumn-leaf 10s ease-in-out infinite;
}
.motion-leaf-two {
  animation-delay: -3.6s;
  animation-duration: 11.3s;
}
.motion-leaf-three {
  animation-delay: -6.8s;
  animation-duration: 12.6s;
}
.hero-child .hero-actor {
  /* End at scene x=890 or earlier, leaving room before the tractor at x=925. */
  animation: child-crossing 9s linear 1.2s infinite;
}
.hero-child img {
  animation: child-step 620ms ease-in-out infinite;
  transform-origin: 60% 100%;
}
.hero.is-motion-paused *,
.hero.is-motion-paused *::before,
.hero.is-motion-paused *::after {
  animation-play-state: paused !important;
}
@keyframes rice-pounding {
  0%,
  12%,
  100% {
    transform: rotate(0deg);
  }
  38%,
  47% {
    transform: rotate(23deg);
  }
  59% {
    transform: rotate(-5deg);
  }
  66% {
    transform: rotate(2deg);
  }
  74% {
    transform: rotate(0deg);
  }
}
@keyframes watermelon-bite {
  0%,
  12%,
  80%,
  100% {
    transform: translateY(0);
  }
  32%,
  58% {
    transform: translateY(-12px);
  }
  43%,
  50% {
    transform: translateY(-10px);
  }
}
@keyframes persimmon-drop {
  0%,
  20% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.55, 0.05, 0.9, 0.6);
  }
  53% {
    transform: translate(8px, var(--fruit-fall)) rotate(35deg);
    opacity: 1;
    animation-timing-function: ease-out;
  }
  59% {
    transform: translate(10px, calc(var(--fruit-fall) - 15px)) rotate(42deg);
    opacity: 1;
  }
  66% {
    transform: translate(12px, var(--fruit-fall)) rotate(50deg);
    opacity: 1;
  }
  78% {
    transform: translate(12px, var(--fruit-fall)) rotate(50deg);
    opacity: 0;
  }
  79%,
  92% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes bird-flight {
  0%,
  100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(calc(var(--bird-travel) * -0.5), -12px);
  }
  55% {
    transform: translate(calc(var(--bird-travel) * -1), 6px);
  }
  80% {
    transform: translate(calc(var(--bird-travel) * -0.4), -8px);
  }
}
@keyframes bird-flap {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.62);
  }
}
@keyframes autumn-leaf {
  0%,
  15% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  35% {
    transform: translate(-25px, 70px) rotate(65deg);
    opacity: 1;
  }
  55% {
    transform: translate(18px, 150px) rotate(145deg);
    opacity: 1;
  }
  76% {
    transform: translate(-30px, 255px) rotate(220deg);
    opacity: 0;
  }
  77%,
  91% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
}
@keyframes child-crossing {
  0%,
  5% {
    transform: translateX(-140px);
    opacity: 0;
  }
  12% {
    transform: translateX(-110px);
    opacity: 1;
  }
  72% {
    transform: translateX(100px);
    opacity: 1;
  }
  82% {
    transform: translateX(100px);
    opacity: 0;
  }
  83%,
  100% {
    transform: translateX(-140px);
    opacity: 0;
  }
}
@keyframes child-step {
  0%,
  50%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }
  25%,
  75% {
    transform: translateY(-5px) rotate(1deg);
  }
}
/* Mobile artwork follows Figma 54:1886 on a separate 750px canvas. */
html[data-layout='mobile'] .hero {
  height: 1072px;
  background: #2c0000;
}
html[data-layout='mobile'] .hero-scene {
  width: 750px;
  height: 1072px;
}
html[data-layout='mobile'] .hero-landscape {
  left: 0;
  top: 0;
  width: 750px;
  height: 1072px;
  --bird-travel: 60px;
}
html[data-layout='mobile'] .hero-title {
  left: 52px;
  top: 121px;
  width: 646px;
  height: 667px;
}
html[data-layout='mobile'] .hero-left {
  left: -37.81px;
  top: 276px;
  width: 312.384px;
  height: 446px;
}
html[data-layout='mobile'] .hero-right {
  left: 421px;
  top: 664.985px;
  width: 368.691px;
  height: 342.888px;
}
html[data-layout='mobile'] .hero-people {
  left: -53.407px;
  top: 778px;
  width: 422.88px;
  height: 281px;
}
html[data-layout='mobile'] .hero-label-food {
  left: 330px;
  top: 806px;
  width: 106px;
  height: 66px;
  z-index: 8;
}
html[data-layout='mobile'] .hero-label-stay {
  left: 527px;
  top: 795px;
  width: 92px;
  height: 57px;
  z-index: 8;
}
html[data-layout='mobile'] .hero-dragonfly {
  left: 660px;
  top: 226px;
  width: 64px;
  height: 63.562px;
}
@media (prefers-reduced-motion: reduce) {
  .hero *,
  .hero *::before,
  .hero *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* 2026-09-26 요청: 첫 화면은 등장 모션 없이 처음부터 제자리에 그대로 표시 */
.hero-layer:not(.hero-landscape) {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
/* 농부: 서 있는 자리에서 살짝 몸을 흔들며 숨쉬는 정도로만 움직인다(발 기준) */
.hero-farmer img,
.hero-farmer .hero-actor {
  animation: farmer-idle 3.2s ease-in-out infinite !important;
  transform-origin: 50% 100%;
}
@keyframes farmer-idle {
  0%,
  100% {
    transform: rotate(0deg) scaleY(1);
  }
  25% {
    transform: rotate(0.8deg) scaleY(1.006);
  }
  50% {
    transform: rotate(0deg) scaleY(1);
  }
  75% {
    transform: rotate(-0.8deg) scaleY(1.006);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-farmer img,
  .hero-farmer .hero-actor {
    animation: none !important;
  }
}