/**
 * Animasi kupu-kupu dekoratif — portabel (skill: animation-butterfly)
 * SVG 4 sayap, kepakan simetris, drift halus.
 */
.anim-butterflies {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.anim-bf {
  --bf-wing-a: #bfdbfe;
  --bf-wing-b: #60a5fa;
  --bf-spot: rgba(255, 255, 255, 0.5);
  --bf-body: #1e40af;
  --bf-ant: #1e3a8a;
  position: absolute;
  width: var(--bf-size, 30px);
  height: calc(var(--bf-size, 30px) * 0.82);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: anim-bf-appear 2.5s ease forwards;
  animation-delay: var(--bf-delay, 0s);
  will-change: transform, opacity;
}

.anim-bf--violet {
  --bf-wing-a: #ddd6fe;
  --bf-wing-b: #a78bfa;
  --bf-spot: rgba(255, 255, 255, 0.45);
  --bf-body: #6d28d9;
  --bf-ant: #5b21b6;
}

.anim-bf--mint {
  --bf-wing-a: #a7f3d0;
  --bf-wing-b: #34d399;
  --bf-spot: rgba(255, 255, 255, 0.42);
  --bf-body: #047857;
  --bf-ant: #065f46;
}

.anim-bf--rose {
  --bf-wing-a: #fecdd3;
  --bf-wing-b: #fb7185;
  --bf-spot: rgba(255, 255, 255, 0.48);
  --bf-body: #be123c;
  --bf-ant: #9f1239;
}

.anim-bf--amber {
  --bf-wing-a: #fde68a;
  --bf-wing-b: #fbbf24;
  --bf-spot: rgba(255, 255, 255, 0.5);
  --bf-body: #b45309;
  --bf-ant: #92400e;
}

.anim-bf--coral {
  --bf-wing-a: #fed7aa;
  --bf-wing-b: #fb923c;
  --bf-spot: rgba(255, 255, 255, 0.46);
  --bf-body: #c2410c;
  --bf-ant: #9a3412;
}

.anim-bf--sky {
  --bf-wing-a: #bae6fd;
  --bf-wing-b: #38bdf8;
  --bf-spot: rgba(255, 255, 255, 0.5);
  --bf-body: #0369a1;
  --bf-ant: #075985;
}

.anim-bf--teal {
  --bf-wing-a: #99f6e4;
  --bf-wing-b: #2dd4bf;
  --bf-spot: rgba(255, 255, 255, 0.44);
  --bf-body: #0f766e;
  --bf-ant: #115e59;
}

.anim-bf__fly {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 56px;
  transform-style: preserve-3d;
  animation: anim-bf-drift var(--bf-dur, 22s) ease-in-out infinite;
  animation-delay: var(--bf-delay, 0s);
}

.anim-bf__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 2px 4px rgba(30, 58, 138, 0.12));
}

.anim-bf__side--l,
.anim-bf__side--r {
  transform-box: view-box;
  transform-origin: 20px 14px;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: var(--bf-flap, 0.55s);
  animation-delay: var(--bf-delay, 0s);
}

.anim-bf__side--l {
  animation-name: anim-bf-flap-l;
}

.anim-bf__side--r {
  animation-name: anim-bf-flap-r;
}

.anim-bf__wing-up {
  fill: var(--bf-wing-a);
  opacity: 0.88;
}

.anim-bf__wing-lo {
  fill: var(--bf-wing-b);
  opacity: 0.8;
}

.anim-bf__spot {
  fill: var(--bf-spot);
  opacity: 0.85;
}

.anim-bf__body {
  fill: var(--bf-body);
  opacity: 0.75;
}

.anim-bf__ant {
  fill: none;
  stroke: var(--bf-ant);
  stroke-width: 0.7;
  stroke-linecap: round;
  opacity: 0.65;
}

@keyframes anim-bf-appear {
  from { opacity: 0; }
  to { opacity: var(--bf-opacity, 0.55); }
}

@keyframes anim-bf-flap-l {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(50deg); }
}

@keyframes anim-bf-flap-r {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(-50deg); }
}

@keyframes anim-bf-drift {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(var(--bf-x1, 30px), var(--bf-y1, -24px)) rotate(var(--bf-r1, 6deg)); }
  45% { transform: translate(var(--bf-x2, 55px), var(--bf-y2, 12px)) rotate(var(--bf-r2, -4deg)); }
  70% { transform: translate(var(--bf-x3, 18px), var(--bf-y3, 38px)) rotate(var(--bf-r3, 5deg)); }
  88% { transform: translate(var(--bf-x4, -12px), var(--bf-y4, 8px)) rotate(var(--bf-r4, -3deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .anim-bf,
  .anim-bf__fly,
  .anim-bf__side--l,
  .anim-bf__side--r {
    animation: none !important;
    opacity: 0.35;
  }
}