/* ===============================
   🌸 SAKURA – hoa anh đào rơi (nhẹ, không phủ kín màn hình)
=============================== */

/* Khung chứa cao 0px => không che/cắt vùng hiển thị của Safari */
.sakura {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 500;          /* dưới header (1000) và menu */
  pointer-events: none;
  overflow: visible;
}

/* Lớp ngoài: rơi từ trên xuống */
.petal {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  animation: petalFall linear infinite;
}

/* Lớp trong: lắc ngang + xoay như cánh hoa bay */
.petal i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #ffe4ee 0%, #ffb7d0 60%, #ff9ec0 100%);
  border-radius: 150% 0 150% 0;
  box-shadow: 0 0 4px rgba(255, 182, 210, .6);
  animation: petalSway ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes petalFall {
  from { transform: translate3d(0, -30px, 0); opacity: 0; }
  8%   { opacity: .9; }
  92%  { opacity: .9; }
  to   { transform: translate3d(0, calc(100vh + 30px), 0); opacity: 0; }
}

@keyframes petalSway {
  from { transform: translate3d(-22px, 0, 0) rotate(-35deg) rotateY(0deg); }
  to   { transform: translate3d(22px, 0, 0) rotate(50deg) rotateY(160deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sakura { display: none; }
}