/* ═══════════════════════════════════════════
   background.css — Hệ thống nền: bokeh, frosted, cánh hoa rơi
   ═══════════════════════════════════════════ */

/* Layer 0: base image or gradient */
.bg-base {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* 🔧 Thay bằng hình ảnh nếu muốn: */
  /* background: url('../image/background.jpg') center/cover no-repeat; */
  background: linear-gradient(160deg, #FFE4EE 0%, #FFF0F5 30%, #FFF8FB 60%, #FFFAF7 100%);
  transition: background 0.4s ease;
}
html.dark .bg-base {
  background: linear-gradient(160deg, #1A0810 0%, #120A0D 40%, #0A0608 100%);
}
html.dawn .bg-base {
  background: linear-gradient(160deg, #FDDFA0 0%, #F9C07A 15%, #FDECD4 50%, #FFF8EC 100%);
}
html.dusk .bg-base {
  background: linear-gradient(160deg, #3D1A28 0%, #5C2030 20%, #2A1020 55%, #1A0E14 100%);
}

/* Layer 1: soft bokeh blobs — far depth */
.bg-bokeh {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.bokeh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0;
  animation: bokeh-drift ease-in-out infinite;
}
@keyframes bokeh-drift {
  0%   { transform: translate(0, 0) scale(1);      opacity: 0; }
  15%  { opacity: 1; }
  50%  { transform: translate(var(--dx), var(--dy)) scale(1.15); opacity: 0.7; }
  85%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(1);      opacity: 0; }
}

/* Layer 2: mid-blur frosted glass overlay */
.bg-frosted {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  background: rgba(255,250,247,0.18);
  transition: background 0.4s ease;
}
html.dark .bg-frosted {
  background: rgba(10,6,8,0.22);
}
html.dawn .bg-frosted {
  background: rgba(255,248,230,0.18);
}
html.dusk .bg-frosted {
  background: rgba(26,14,20,0.25);
}

/* ─── DARK MODE BG (transparent để lộ gradient nền) ─── */
html.dark .bg-frosted {
  background: rgba(8,4,6,0.28);
}
html.dark #welcome  { background: transparent; }
html.dark #timeline { background: transparent; }
html.dark #letter   { background: transparent; }

/* Layer 3: petal canvas — foreground depth */
.petals-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

/* ── PETALS: 3 size classes for parallax depth ── */
.petal {
  position: absolute;
  opacity: 0;
  animation: petal-fall linear infinite;
  will-change: transform, opacity;
}

/* SVG petal shape via clip-path */
.petal svg {
  display: block;
  filter: drop-shadow(0 2px 4px rgba(201,132,142,0.25));
}

/* Small petals — fast, close layer */
.petal.sm {
  animation-name: petal-fall-sm;
}
/* Medium petals — mid speed */
.petal.md {
  animation-name: petal-fall-md;
}
/* Large petals — slow, far layer, more blur */
.petal.lg {
  animation-name: petal-fall-lg;
  filter: blur(1.5px);
}

@keyframes petal-fall-sm {
  0%   { transform: translateY(-30px) rotate(0deg) translateX(0);   opacity: 0; }
  5%   { opacity: 0.9; }
  95%  { opacity: 0.7; }
  100% { transform: translateY(108vh) rotate(540deg) translateX(var(--sway)); opacity: 0; }
}
@keyframes petal-fall-md {
  0%   { transform: translateY(-40px) rotate(0deg) translateX(0);   opacity: 0; }
  5%   { opacity: 0.75; }
  100% { transform: translateY(108vh) rotate(360deg) translateX(var(--sway)); opacity: 0; }
}
@keyframes petal-fall-lg {
  0%   { transform: translateY(-60px) rotate(0deg) translateX(0);   opacity: 0; }
  8%   { opacity: 0.55; }
  100% { transform: translateY(108vh) rotate(200deg) translateX(var(--sway)); opacity: 0; }
}