/* Butterfly Garden: wings flutter, butterflies drift, lavender sways and the bee hovers. The classic
   opening ("wings") is the fallback if the film can't load: the sun rises, the butterflies flutter
   in and the friends pop up. Only transform and opacity animate; reduced motion is still. */
[data-theme="butterfly"] { --bf-petal: linear-gradient(90deg, #b9a2ff 0%, #ffc6d9 35%, #ffb38a 65%, #ffd27a 100%); }
[data-theme="butterfly"] .hero-art .bf-wing { transform-box: fill-box; transform-origin: 50% 50%; animation: bf-flap .42s ease-in-out infinite alternate; }
[data-theme="butterfly"] .hero-art .bf-fly { animation: bf-drift 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.4s); }
[data-theme="butterfly"] .hero-art .bf-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: bf-sway 4.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.1s); }
[data-theme="butterfly"] .hero-art .bf-hover { animation: bf-hover 2.6s ease-in-out infinite alternate; }
[data-theme="butterfly"] .card { border-radius: 26px; box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(185, 162, 255, .28); }
[data-theme="butterfly"] .btn { border-radius: 999px; }
[data-theme="butterfly"] .title { letter-spacing: -.005em; text-shadow: 0 2px 0 rgba(255, 255, 255, .75), 0 0 18px rgba(255, 210, 122, .45); }
[data-theme="butterfly"] .eyebrow { color: var(--ink); letter-spacing: .08em; }
[data-theme="butterfly"] .divider::before, [data-theme="butterfly"] .divider::after { background: var(--bf-petal); height: 3px; border-radius: 3px; }
[data-theme="butterfly"] .btn, [data-theme="butterfly"] .card h2, [data-theme="butterfly"] .title, [data-theme="butterfly"] .eyebrow { overflow-wrap: anywhere; }

/* the kid's photo: the circle becomes a ring of blooms */
[data-theme="butterfly"] .kp-circle .kp-win { box-shadow: 0 0 0 3px #fffaf2, 0 0 0 calc(var(--kp-w) * .05) #ffc6d9, 0 0 0 calc(var(--kp-w) * .075) #9ed98a, 0 0 calc(var(--kp-w) * .22) calc(var(--kp-w) * .04) rgba(255, 210, 122, .5); }

/* the Garden pass: cream paper, a flower-bed stub, a leafy perforation */
[data-theme="butterfly"] .ticket { background: linear-gradient(115deg, #fffdf8 0%, #f3edff 45%, #fff1e6 100%); color: #2f2a4a; border-radius: 18px;
  box-shadow: 0 12px 26px rgba(75, 61, 110, .16), inset 0 0 0 1.5px rgba(185, 162, 255, .5); }
[data-theme="butterfly"] .ticket .t-main { border-right: 2px dotted rgba(110, 180, 90, .7); }
[data-theme="butterfly"] .ticket small { color: #5a42a8; letter-spacing: .2em; font-weight: 800; }
[data-theme="butterfly"] .ticket b { font-family: "Fraunces", Georgia, serif; font-weight: 700; color: #2f2a4a; }
[data-theme="butterfly"] .ticket .t-stub { background: radial-gradient(circle at 50% 50%, #ffd27a 0 12%, #ffc6d9 13% 30%, transparent 32%) 0 0 / 22px 22px, linear-gradient(180deg, #e9f6df, #c9ebb6); }

/* the classic opening (only if the film can't load) */
[data-theme="butterfly"] .op-art svg { overflow: visible; }
[data-theme="butterfly"] .op-card { background: rgba(255, 253, 248, .92); color: var(--cardInk); box-shadow: 0 18px 50px rgba(75, 61, 110, .22); }
[data-theme="butterfly"] .op-wings .op-line { color: #2f2a4a; text-shadow: 0 1px 0 #fff, 0 0 14px rgba(255, 255, 255, .9); }
[data-theme="butterfly"] .op-wings.op-run .bf-fly { animation: bf-in 1.2s calc(.8s + var(--i) * .18s) cubic-bezier(.22, 1, .36, 1) both, bf-drift 6s 2.4s ease-in-out infinite alternate; }
[data-theme="butterfly"] .op-art { transform: scale(1.35); transform-origin: 50% 60%; transition: opacity 1.2s ease, transform 5s cubic-bezier(.33, .05, .2, 1); }
[data-theme="butterfly"] .op-pal { transform: translateY(40vh) scale(.6); opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.34, 1.4, .64, 1); }
[data-theme="butterfly"] .op-run .op-art, [data-theme="butterfly"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="butterfly"] .op-final .op-art, [data-theme="butterfly"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="butterfly"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: bf-blink 5.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.3s - .9s); }
@media (max-aspect-ratio: 4/5) { [data-theme="butterfly"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }

/* Party TV */
[data-theme="butterfly"].tv-bd { opacity: .94; }
[data-theme="butterfly"].tv-bd .bf-wing { transform-box: fill-box; transform-origin: 50% 50%; animation: bf-flap .5s ease-in-out infinite alternate; }
[data-theme="butterfly"].tv-bd .bf-fly { animation: bf-drift 8s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.6s); }

@keyframes bf-flap { from { transform: scaleX(1); } to { transform: scaleX(.3); } }
@keyframes bf-drift { from { transform: translate(0, 0); } 50% { transform: translate(6px, -5px); } to { transform: translate(-4px, 3px); } }
@keyframes bf-sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes bf-hover { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes bf-in { from { opacity: 0; transform: translate(-30px, 40px) scale(.4); } }
@keyframes bf-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="butterfly"] .hero-art *, [data-theme="butterfly"] .critter .cr-eye, [data-theme="butterfly"] .op-art *, [data-theme="butterfly"].tv-bd * { animation: none !important; }
}