/* ============================================
   Butterfly Animation System
   Organic floating + wing flapping via CSS
   ============================================ */

/* --- Container: fixed overlay, click-through --- */
.butterflies-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* --- Base Butterfly --- */
.butterfly {
  position: absolute;
  will-change: transform;
  transform: translateZ(0);
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.butterfly svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* --- Wing Flap Animation --- */
.wing-left {
  transform-origin: right center;
  animation: flapLeft 1s ease-in-out infinite alternate;
}

.wing-right {
  transform-origin: left center;
  animation: flapRight 1s ease-in-out infinite alternate;
}

@keyframes flapLeft {
  0%   { transform: scaleX(1) rotateZ(0deg); }
  100% { transform: scaleX(0.35) rotateZ(4deg); }
}

@keyframes flapRight {
  0%   { transform: scaleX(1) rotateZ(0deg); }
  100% { transform: scaleX(0.35) rotateZ(-4deg); }
}

/* --- Individual Butterflies --- */

/* Butterfly 1: top-left, large, slow & majestic */
.butterfly--1 {
  top: 8%;
  left: 3%;
  width: 48px;
  height: 40px;
  opacity: 0.5;
  animation: float1 18s ease-in-out infinite, drift1 24s ease-in-out infinite;
}
.butterfly--1 .wing-left  { animation-duration: 0.9s; }
.butterfly--1 .wing-right { animation-duration: 0.9s; }

/* Butterfly 2: top-right, medium, slightly faster */
.butterfly--2 {
  top: 18%;
  right: 6%;
  width: 36px;
  height: 30px;
  opacity: 0.4;
  animation: float2 14s ease-in-out infinite 2s, drift2 20s ease-in-out infinite 1s;
}
.butterfly--2 .wing-left  { animation-duration: 0.7s; }
.butterfly--2 .wing-right { animation-duration: 0.7s; }

/* Butterfly 3: mid-left, small, delicate */
.butterfly--3 {
  top: 42%;
  left: 2%;
  width: 26px;
  height: 22px;
  opacity: 0.35;
  animation: float3 20s ease-in-out infinite 4s, drift3 16s ease-in-out infinite 3s;
}
.butterfly--3 .wing-left  { animation-duration: 1.1s; }
.butterfly--3 .wing-right { animation-duration: 1.1s; }

/* Butterfly 4: lower-right, medium-large */
.butterfly--4 {
  top: 62%;
  right: 4%;
  width: 42px;
  height: 35px;
  opacity: 0.45;
  animation: float4 16s ease-in-out infinite 1.5s, drift4 22s ease-in-out infinite 2s;
}
.butterfly--4 .wing-left  { animation-duration: 0.8s; }
.butterfly--4 .wing-right { animation-duration: 0.8s; }

/* Butterfly 5: bottom-left, tiny, fast flutter */
.butterfly--5 {
  top: 80%;
  left: 8%;
  width: 22px;
  height: 18px;
  opacity: 0.3;
  animation: float5 22s ease-in-out infinite 3s, drift5 18s ease-in-out infinite 5s;
}
.butterfly--5 .wing-left  { animation-duration: 0.55s; }
.butterfly--5 .wing-right { animation-duration: 0.55s; }

/* Butterfly 6: Desktop-only, upper mid-right */
.butterfly--6 {
  top: 30%;
  right: 12%;
  width: 20px;
  height: 17px;
  opacity: 0.25;
  animation: float2 25s ease-in-out infinite 6s, drift3 28s ease-in-out infinite 4s;
}
.butterfly--6 .wing-left  { animation-duration: 1.3s; }
.butterfly--6 .wing-right { animation-duration: 1.3s; }

/* Butterfly 7: Desktop-only, lower center-left */
.butterfly--7 {
  top: 72%;
  left: 15%;
  width: 18px;
  height: 15px;
  opacity: 0.2;
  animation: float4 28s ease-in-out infinite 8s, drift1 30s ease-in-out infinite 7s;
}
.butterfly--7 .wing-left  { animation-duration: 0.65s; }
.butterfly--7 .wing-right { animation-duration: 0.65s; }

/* --- Floating Path Keyframes (each unique) --- */
@keyframes float1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20%      { transform: translate(18px, -30px) rotate(5deg); }
  40%      { transform: translate(-8px, -55px) rotate(-3deg); }
  60%      { transform: translate(25px, -35px) rotate(8deg); }
  80%      { transform: translate(-5px, -15px) rotate(-2deg); }
}

@keyframes float2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(-22px, -28px) rotate(-6deg); }
  50%      { transform: translate(12px, -50px) rotate(4deg); }
  75%      { transform: translate(-18px, -22px) rotate(-8deg); }
}

@keyframes float3 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15%      { transform: translate(10px, -20px) rotate(3deg); }
  35%      { transform: translate(-15px, -40px) rotate(-5deg); }
  55%      { transform: translate(20px, -55px) rotate(6deg); }
  75%      { transform: translate(-8px, -30px) rotate(-4deg); }
}

@keyframes float4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  30%      { transform: translate(-12px, -35px) rotate(-4deg); }
  60%      { transform: translate(16px, -18px) rotate(6deg); }
  80%      { transform: translate(-6px, -45px) rotate(-3deg); }
}

@keyframes float5 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20%      { transform: translate(14px, -22px) rotate(7deg); }
  45%      { transform: translate(-10px, -38px) rotate(-5deg); }
  70%      { transform: translate(18px, -15px) rotate(4deg); }
  90%      { transform: translate(-5px, -42px) rotate(-6deg); }
}

/* --- Horizontal Drift Keyframes --- */
@keyframes drift1 {
  0%, 100% { margin-left: 0; }
  50%      { margin-left: 20px; }
}

@keyframes drift2 {
  0%, 100% { margin-left: 0; }
  30%      { margin-left: -15px; }
  70%      { margin-left: 12px; }
}

@keyframes drift3 {
  0%, 100% { margin-left: 0; }
  40%      { margin-left: 18px; }
  80%      { margin-left: -8px; }
}

@keyframes drift4 {
  0%, 100% { margin-left: 0; }
  50%      { margin-left: -16px; }
}

@keyframes drift5 {
  0%, 100% { margin-left: 0; }
  25%      { margin-left: 10px; }
  75%      { margin-left: -12px; }
}

/* --- Mobile: show only 4 butterflies --- */
@media (max-width: 767px) {
  .butterfly--5,
  .butterfly--6,
  .butterfly--7 {
    display: none;
  }
}

/* --- Tablet: hide desktop-only extras --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .butterfly--7 {
    display: none;
  }
}

/* ============================================
   Cherry Blossom Petals — Subtle falling effect
   ============================================ */

/* --- Base Petal --- */
.petal {
  position: absolute;
  top: -20px;
  pointer-events: none;
  will-change: transform;
  animation: petalFall var(--petal-duration, 20s) linear infinite var(--petal-delay, 0s),
             petalSway var(--petal-sway, 6s) ease-in-out infinite var(--petal-delay, 0s);
}

.petal svg {
  width: 100%;
  height: 100%;
}

/* --- Petal Fall Keyframes --- */
@keyframes petalFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  5%   { opacity: var(--petal-opacity, 0.25); }
  90%  { opacity: var(--petal-opacity, 0.25); }
  100% { transform: translateY(105vh) rotate(var(--petal-spin, 360deg)); opacity: 0; }
}

/* --- Petal Sway (lateral wobble) --- */
@keyframes petalSway {
  0%, 100% { margin-left: 0; }
  25%      { margin-left: var(--sway-distance, 15px); }
  75%      { margin-left: calc(var(--sway-distance, 15px) * -1); }
}

/* --- Individual Petals (12 total) --- */
.petal--1  { left: 5%;  width: 10px; height: 14px; --petal-duration: 18s; --petal-delay: 0s;   --petal-opacity: 0.2;  --petal-spin: 340deg; --petal-sway: 7s;  --sway-distance: 12px; }
.petal--2  { left: 15%; width: 8px;  height: 11px; --petal-duration: 22s; --petal-delay: 3s;   --petal-opacity: 0.18; --petal-spin: 380deg; --petal-sway: 5s;  --sway-distance: 18px; }
.petal--3  { left: 28%; width: 12px; height: 16px; --petal-duration: 16s; --petal-delay: 7s;   --petal-opacity: 0.25; --petal-spin: 320deg; --petal-sway: 8s;  --sway-distance: 10px; }
.petal--4  { left: 40%; width: 7px;  height: 10px; --petal-duration: 25s; --petal-delay: 2s;   --petal-opacity: 0.15; --petal-spin: 400deg; --petal-sway: 6s;  --sway-distance: 20px; }
.petal--5  { left: 55%; width: 11px; height: 15px; --petal-duration: 19s; --petal-delay: 10s;  --petal-opacity: 0.22; --petal-spin: 350deg; --petal-sway: 7s;  --sway-distance: 14px; }
.petal--6  { left: 68%; width: 9px;  height: 12px; --petal-duration: 23s; --petal-delay: 5s;   --petal-opacity: 0.2;  --petal-spin: 370deg; --petal-sway: 5s;  --sway-distance: 16px; }
.petal--7  { left: 78%; width: 13px; height: 17px; --petal-duration: 17s; --petal-delay: 12s;  --petal-opacity: 0.18; --petal-spin: 310deg; --petal-sway: 9s;  --sway-distance: 11px; }
.petal--8  { left: 88%; width: 8px;  height: 11px; --petal-duration: 26s; --petal-delay: 8s;   --petal-opacity: 0.15; --petal-spin: 390deg; --petal-sway: 6s;  --sway-distance: 19px; }
.petal--9  { left: 35%; width: 6px;  height: 8px;  --petal-duration: 28s; --petal-delay: 15s;  --petal-opacity: 0.17; --petal-spin: 420deg; --petal-sway: 5s;  --sway-distance: 13px; }
.petal--10 { left: 92%; width: 10px; height: 13px; --petal-duration: 20s; --petal-delay: 18s;  --petal-opacity: 0.2;  --petal-spin: 330deg; --petal-sway: 8s;  --sway-distance: 15px; }
.petal--11 { left: 48%; width: 7px;  height: 10px; --petal-duration: 30s; --petal-delay: 11s;  --petal-opacity: 0.16; --petal-spin: 360deg; --petal-sway: 7s;  --sway-distance: 17px; }
.petal--12 { left: 20%; width: 9px;  height: 12px; --petal-duration: 21s; --petal-delay: 14s;  --petal-opacity: 0.19; --petal-spin: 345deg; --petal-sway: 6s;  --sway-distance: 12px; }

/* Petals: all 12 shown on every breakpoint */

/* --- Reduced Motion: kill all butterfly animations --- */
@media (prefers-reduced-motion: reduce) {
  .butterflies-container {
    display: none;
  }
}