/* ===== index7 벚꽃/하트 효과 전용 스타일 ===== */

/* 파스텔 핑크 계열 색상 변수 */
:root {
  --petal:    rgba(255, 225, 235, 0.9);  /* 아주 옅은 딸기우유 핑크 */
  --petal-s1: rgba(255, 225, 235, 0.4);  /* 가까운 글로우 */
  --petal-s2: rgba(255, 225, 235, 0.2);  /* 더 멀리 퍼지는 글로우 */
}

/* 화면 위에서 떨어지는 요소 하나 */
.floating {
  position: fixed;
  top: -20px;
  left: 0;
  pointer-events: none;
  white-space: pre;
  z-index: 2;
  animation-name: fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  /* animation-duration 은 JS에서 넣어줌 */
  will-change: transform;
}

/* 실제 하트/벚꽃 문자 자체 */
.softPetal {
  color: var(--petal);
  text-shadow:
    0 0 2px var(--petal-s1),
    0 0 6px var(--petal-s2);
  font-weight: 600;
  line-height: 1;
  display: inline-block;
}

/* 떨어지는 애니메이션 */
@keyframes fall {
  0% {
    transform: translateY(0vh) rotate(0deg);
  }
  100% {
    transform: translateY(110vh) rotate(360deg);
  }
}