/* =========================================================
   ANIMATIONS.CSS
   청첩장 전체 애니메이션 / 모션 효과
========================================================= */


/* =========================================================
   1. Scroll Reveal

   각 section이 화면에 들어올 때
   아래에서 부드럽게 올라오며 나타나는 기본 효과
========================================================= */

[data-reveal] {
  opacity: 0;

  transform:
    translate3d(0, 36px, 0)
    scale(0.99);

  transition:
    opacity 1400ms var(--ease-soft),
    transform 1700ms var(--ease-soft);

  will-change:
    opacity,
    transform;
}


[data-reveal].is-visible {
  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);
}


/* =========================================================
   2. Scroll Line

   INTRO 화면 등에 사용되는
   세로 스크롤 가이드 라인 효과
========================================================= */

@keyframes scroll-line {

  0%,
  100% {
    transform: scaleY(0.4);
    transform-origin: top;

    opacity: 0.35;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;

    opacity: 1;
  }

}


/* =========================================================
   3. Music Bar

   음악 재생 아이콘의 작은 막대 움직임
========================================================= */

@keyframes music-bar {

  from {
    height: 5px;
  }

  to {
    height: 14px;
  }

}


/* =========================================================
   4. Petal Fall

   화면 위에서 아래로 떨어지는 꽃잎 효과
========================================================= */

@keyframes petal-fall {

  0% {
    transform:
      translate3d(0, -12vh, 0)
      rotate(0deg);

    opacity: 0;
  }


  12% {
    opacity: 0.75;
  }


  85% {
    opacity: 0.65;
  }


  100% {
    transform:
      translate3d(24px, 112vh, 0)
      rotate(420deg);

    opacity: 0;
  }

}


/* =========================================================
   5. Petal Style
========================================================= */

.petal {
  position: fixed;

  z-index: 20;

  top: -18px;
  left: var(--petal-left);

  width: 8px;
  height: 12px;

  border-radius:
    70% 20% 70% 20%;

  background:
    color-mix(
      in srgb,
      var(--color-accent) 65%,
      white
    );

  pointer-events: none;

  will-change:
    transform,
    opacity;

  animation:
    petal-fall
    var(--petal-duration)
    linear
    var(--petal-delay)
    infinite;
}


/* =========================================================
   6. Common Interactive Motion

   클릭 가능한 요소들의 기본 움직임
========================================================= */

button,
a {
  transition-timing-function:
    var(--ease-standard);
}


/* =========================================================
   7. Reduced Motion

   휴대폰 또는 OS에서
   '동작 줄이기'를 설정한 사용자를 위한 처리
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto !important;
  }


  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }


  [data-reveal] {
    opacity: 1 !important;

    transform: none !important;

    transition: none !important;
  }


  .petal {
    display: none;
  }

}