/* Little Farm: a lazy sun, drifting clouds, a turning windmill, butterflies and dandelion fluff.
   The opening ("barn"): the sun rises, the barn doors swing open and a chick pops out of the hayloft.
   Only transform and opacity animate; reduced motion shows the finished farm, still. */
[data-theme="farm"] .hero-art .fm-rays, [data-theme="farm"] .hero-art .fm-mill { transform-box: fill-box; transform-origin: center; animation: fm-spin 40s linear infinite; }
[data-theme="farm"] .hero-art .fm-mill { animation-duration: 9s; }
[data-theme="farm"] .fm-cloud { animation: fm-drift 11s ease-in-out infinite alternate; }
[data-theme="farm"] .fm-cloud2 { animation-duration: 14s; animation-delay: -5s; }
[data-theme="farm"] .hero-art .fm-door { transform-box: fill-box; transform: scaleX(.24); }
[data-theme="farm"] .hero-art .fm-door-l { transform-origin: left center; }
[data-theme="farm"] .hero-art .fm-door-r { transform-origin: right center; }
[data-theme="farm"] .hero-art .fm-peek { transform-box: fill-box; transform-origin: center bottom; animation: fm-peek 3.4s ease-in-out infinite; }
[data-theme="farm"] .hero-art .fm-fl { transform-box: fill-box; transform-origin: center bottom; animation: fm-sway 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.9s); }
[data-theme="farm"] .hero-art .fm-bf { animation: fm-flutter 9s ease-in-out infinite; animation-delay: calc(var(--i) * -4s); }
[data-theme="farm"] .hero-art .fm-wing { transform-box: fill-box; transform-origin: center; animation: fm-flap .28s ease-in-out infinite alternate; }
[data-theme="farm"] .hero-art .fm-fluff { opacity: 0; animation: fm-float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
[data-theme="farm"] .card { border-radius: 28px; }
[data-theme="farm"] .btn { border-radius: 999px; }
[data-theme="farm"] .title { text-shadow: 0 3px 0 rgba(255, 255, 255, .6); }
[data-theme="farm"] .eyebrow { color: var(--ink); }

/* the opening: the farm runs edge to edge (the art paints past its box) and the meadow fills the floor */
[data-theme="farm"] .hero-art .fm-under { display: none; }
[data-theme="farm"] .op-art svg { overflow: visible; }
[data-theme="farm"] .op-art .fm-under { display: inline; }
[data-theme="farm"] .op-card { background: rgba(255, 253, 247, .86); color: var(--cardInk); box-shadow: 0 18px 50px rgba(43, 45, 71, .18); }
[data-theme="farm"] .op-eyebrow { color: #b02f3c; }
[data-theme="farm"] .op-barn.op-run .fm-sun { animation: fm-rise 2.6s .2s cubic-bezier(.2, .8, .2, 1) both; }
[data-theme="farm"] .op-barn.op-run .fm-barn { animation: fm-settle .9s .3s cubic-bezier(.2, .8, .2, 1) both; }
[data-theme="farm"] .op-barn.op-run .fm-door { animation: fm-open 1s 2.2s cubic-bezier(.3, 1.35, .5, 1) both; }
[data-theme="farm"] .op-barn.op-run .fm-peek { animation: fm-pop .7s 2.9s cubic-bezier(.3, 1.6, .5, 1) both, fm-peek 3.4s 3.6s ease-in-out infinite; }
[data-theme="farm"] .op-barn .op-line { color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .7); }

/* Party TV backdrop */
[data-theme="farm"].tv-bd { opacity: .9; }

@keyframes fm-spin { to { transform: rotate(360deg); } }
@keyframes fm-drift { to { transform: translateX(14px); } }
@keyframes fm-sway { 50% { transform: rotate(6deg); } }
@keyframes fm-peek { 50% { transform: translateY(-1.5px) rotate(-4deg); } }
@keyframes fm-flutter { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(22px, -12px); } 50% { transform: translate(44px, -2px); } 75% { transform: translate(20px, 8px); } }
@keyframes fm-flap { to { transform: scaleX(.35); } }
@keyframes fm-float { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(14px, -46px); } }
@keyframes fm-rise { from { opacity: .3; transform: translateY(70px); } }
@keyframes fm-settle { from { opacity: 0; transform: translateY(14px); } }
@keyframes fm-open { from { transform: scaleX(1); } to { transform: scaleX(.24); } }
@keyframes fm-pop { from { opacity: 0; transform: translateY(12px) scale(.4); } }
/* long names (and wide display faces) wrap instead of pushing the page sideways at 320px */
[data-theme="farm"] .btn, [data-theme="farm"] .card h2, [data-theme="farm"] .title, [data-theme="farm"] .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 hop; the squad blinks now and then. */
[data-theme="farm"] .op-art { transform: scale(1.45); transform-origin: 38% 82%; transition: opacity 1.2s ease, transform 5.2s cubic-bezier(.33, .05, .2, 1); }
[data-theme="farm"] .op-pal { transform: translateY(55vh) scale(.6); opacity: 0; transition-property: transform, opacity; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
[data-theme="farm"] .op-run .op-art, [data-theme="farm"] .op-run .op-pal { opacity: 1; transform: none; }
[data-theme="farm"] .op-final .op-art, [data-theme="farm"] .op-final .op-pal { opacity: 1; transform: none; transition: none; }
[data-theme="farm"] .op-run .op-pal svg { transform-origin: 50% 100%; animation: fm-hop .7s calc(4.5s + var(--i) * .18s) ease-out both; }
@keyframes fm-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) scale(.96, 1.05); } 70% { transform: translateY(0) scale(1.06, .94); } }
[data-theme="farm"] .critter .cr-eye { transform-box: fill-box; transform-origin: center; animation: fm-blink 5.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -1.37s - .6s); }
@keyframes fm-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="farm"] .op-art svg { transform: scale(1.35); transform-origin: 50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="farm"] .critter .cr-eye, [data-theme="farm"] .op-pal svg, [data-theme="farm"] .hero-art *, [data-theme="farm"] .fm-cloud { animation: none !important; }
  [data-theme="farm"] .hero-art .fm-fluff { opacity: .7; }
}