/* Fairy Garden: drifting, glowing fireflies, cottage windows that flicker, nodding flowers and a
   twinkling fairy trail. The opening ("bloom"): the flowers open one by one, a sparkle trail
   sweeps across the garden and the toadstool windows light up.
   Only transform and opacity animate; reduced motion shows the garden in full bloom, still. */
[data-theme="fairy"] .fy-fly { animation: fy-drift 7s ease-in-out infinite alternate, fy-glow 2.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s), calc(var(--i) * -.4s); }
[data-theme="fairy"] .hero-art .fy-win { animation: fy-glow 3s ease-in-out infinite; animation-delay: calc(var(--i) * -1.3s); }
[data-theme="fairy"] .hero-art .fy-bloom { transform-box: fill-box; transform-origin: center; animation: fy-nod 5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
[data-theme="fairy"] .hero-art .fy-bell { transform-box: fill-box; transform-origin: left top; animation: fy-swing 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
[data-theme="fairy"] .hero-art .fy-spark { transform-box: fill-box; transform-origin: center; animation: fy-twinkle 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.27s); }
[data-theme="fairy"] .hero-art .fy-under { display: none; }
[data-theme="fairy"] .card { border-radius: 28px; }
[data-theme="fairy"] .btn { border-radius: 999px; }
[data-theme="fairy"] .title { text-shadow: 0 0 18px rgba(255, 224, 138, .45); }

/* the opening */
[data-theme="fairy"] .op-art svg { overflow: visible; }
[data-theme="fairy"] .op-art .fy-under { display: inline; }
[data-theme="fairy"] .op-bloom.op-run .fy-bloom { animation: fy-open .9s calc(.5s + var(--i) * .35s) cubic-bezier(.3, 1.5, .5, 1) both, fy-nod 5s 2.4s ease-in-out infinite; }
[data-theme="fairy"] .op-bloom.op-run .fy-spark { animation: fy-pop .5s calc(1.8s + var(--i) * .12s) cubic-bezier(.3, 1.6, .5, 1) both, fy-twinkle 2.4s 3.2s ease-in-out infinite; }
[data-theme="fairy"] .op-bloom.op-run .fy-win { animation: fy-on .4s calc(2.6s + var(--i) * .4s) ease-out both, fy-glow 3s 3.6s ease-in-out infinite; }
[data-theme="fairy"] .op-bloom.op-run .fy-fly { animation: fy-on 1.2s calc(1s + var(--i) * .1s) ease-out both, fy-drift 7s ease-in-out infinite alternate; }

@keyframes fy-drift { 0% { transform: translate(0, 0); } 50% { transform: translate(9px, -7px); } 100% { transform: translate(-6px, 5px); } }
@keyframes fy-glow { 50% { opacity: .35; } }
@keyframes fy-nod { 50% { transform: rotate(8deg) scale(1.04); } }
@keyframes fy-swing { 50% { transform: rotate(5deg); } }
@keyframes fy-twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes fy-open { from { opacity: 0; transform: scale(0) rotate(-90deg); } }
@keyframes fy-pop { from { opacity: 0; transform: scale(0); } }
@keyframes fy-on { from { opacity: 0; } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="fairy"] .btn, [data-theme="fairy"] .card h2, [data-theme="fairy"] .title, [data-theme="fairy"] .eyebrow { overflow-wrap: anywhere; }
/* film: the camera opens close on the hero beat and pulls back as the story plays; the squad
   makes its own entrance, then lands its flutter; the squad blinks now and then. */
[data-theme="fairy"] .op-art { transform: scale(1.5); transform-origin: 34% 84%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="fairy"] .op-pal { transform: translateY(-70vh) scale(.3) rotate(-30deg); opacity: 0; transition-property: transform, opacity; transition-duration: 1.5s; transition-timing-function: cubic-bezier(.2, .8, .25, 1); }
[data-theme="fairy"] .op-run .op-art, [data-theme="fairy"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="fairy"] .op-final .op-art, [data-theme="fairy"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="fairy"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: fy-flutter .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes fy-flutter { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-8px) rotate(4deg); } }
[data-theme="fairy"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: fy-blink 5.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.37s - .6s); }
@keyframes fy-blink { 0%, 93%, 100% { transform: scaleY(1); } 95.5% { transform: scaleY(.08); } }
/* phones in portrait: the scene steps forward so it fills the screen */
@media (max-aspect-ratio: 4/5) { [data-theme="fairy"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="fairy"] .critter .cr-eye, [data-theme="fairy"] .op-pal svg, [data-theme="fairy"] .hero-art *, [data-theme="fairy"] .fy-fly { animation: none !important; }
}