/* Cartoon scenes on the live homepage (owner 2026-10-04: "usi page me
   animation daalo, alag page nahi"). The SVGs come from
   templates/public_v2/_scenes.html; this file holds only their animations,
   scoped to .v2-scene so nothing else on the page is touched.
   Scenes animate only while on screen (.in-view, set by the small script at
   the end of index.html), hold still while the page scrolls, and never run
   for reduced motion. */
.wd-scene-stage {
    max-width: 440px; margin: -10px auto 45px; padding: 12px;
    border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08);
    background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, 0.14), transparent 60%),
                linear-gradient(180deg, rgba(16, 16, 26, 0.85), rgba(11, 11, 20, 0.85));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 40px rgba(34, 211, 238, 0.06);
}
.wd-scene-stage.wide { max-width: 560px; }
.v2-scene { display: block; width: 100%; height: auto; overflow: visible; will-change: transform; contain: paint; }
.v2-scene * { transform-box: fill-box; transform-origin: center; }
.wd-scrolling .v2-scene * { animation-play-state: paused !important; }
/* the page's phone/lite rule plays every animation once; these scenes are
   cheap (on-screen only, paused while scrolling), so they keep looping */
html.wd-lite .v2-scene.in-view * { animation-iteration-count: infinite !important; }
@media (max-width: 600px) { .wd-scene-stage { max-width: 92%; padding: 8px; border-radius: 18px; } }
.v2-scene.in-view .a-float { animation: v2Float 4s ease-in-out infinite; }
.v2-scene.in-view .a-float-2 { animation: v2Float 5s ease-in-out .8s infinite; }
.v2-scene.in-view .a-blink { animation: v2Blink 4.5s ease-in-out infinite; }
.v2-scene.in-view .a-flash { animation: v2Flash 3s ease-out infinite; }
.v2-scene.in-view .a-pulse { animation: v2Pulse 1.8s ease-in-out infinite; }
.v2-scene.in-view .a-pulse.d1 { animation-delay: .3s; } .v2-scene.in-view .a-pulse.d2 { animation-delay: .6s; }
.v2-scene.in-view .a-twinkle { animation: v2Twinkle 2.4s ease-in-out infinite; }
.v2-scene.in-view .a-twinkle.d1 { animation-delay: .5s; } .v2-scene.in-view .a-twinkle.d2 { animation-delay: 1.1s; } .v2-scene.in-view .a-twinkle.d3 { animation-delay: 1.7s; }
.v2-scene.in-view .a-fly { animation: v2Fly 3.6s cubic-bezier(.45, 0, .3, 1) infinite; }
.v2-scene.in-view .a-fly.d1 { animation-delay: 1.2s; } .v2-scene.in-view .a-fly.d2 { animation-delay: 2.4s; }
.v2-scene.in-view .a-drop { animation: v2Drop 3.6s ease-in infinite; }
.v2-scene.in-view .a-drop.d1 { animation-delay: 1.2s; } .v2-scene.in-view .a-drop.d2 { animation-delay: 2.4s; }
.v2-scene.in-view .a-pop { animation: v2Pop 3.6s cubic-bezier(.2, .8, .2, 1) infinite; }
.v2-scene.in-view .a-pop.d1 { animation-delay: .4s; } .v2-scene.in-view .a-pop.d2 { animation-delay: .8s; } .v2-scene.in-view .a-pop.d3 { animation-delay: 1.2s; }
.v2-scene.in-view .a-pop.d4 { animation-delay: 1.6s; } .v2-scene.in-view .a-pop.d5 { animation-delay: 2s; }
.v2-scene.in-view .a-sweep { animation: v2Sweep 3.2s ease-in-out infinite; }
.v2-scene.in-view .a-out { animation: v2Out 3.2s ease-in-out infinite; }
.v2-scene.in-view .a-rise { animation: v2Rise 2.4s ease-in infinite; }
.v2-scene.in-view .a-rise.d1 { animation-delay: .8s; } .v2-scene.in-view .a-rise.d2 { animation-delay: 1.6s; }
.v2-scene.in-view .a-grow { animation: v2Grow 3s cubic-bezier(.2, .8, .2, 1) infinite; transform-origin: 50% 100%; }
.v2-scene.in-view .a-grow.d1 { animation-delay: .25s; } .v2-scene.in-view .a-grow.d2 { animation-delay: .5s; } .v2-scene.in-view .a-grow.d3 { animation-delay: .75s; }
.v2-scene.in-view .a-spin { animation: v2Spin 6s linear infinite; }
.v2-scene.in-view .a-slide { animation: v2Slide 6s linear infinite; }
.v2-scene.in-view .a-beat { animation: v2Beat 1.6s ease-in-out infinite; }
.v2-scene.in-view .a-scan { animation: v2Scan 2.2s ease-in-out infinite; }
.v2-scene.in-view .a-hop { animation: v2Hop 3.6s cubic-bezier(.2, .8, .2, 1) infinite; }
.v2-scene.in-view .a-hop.d1 { animation-delay: 1.2s; } .v2-scene.in-view .a-hop.d2 { animation-delay: 2.4s; }
@keyframes v2Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes v2Blink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.12); } }
@keyframes v2Flash { 0%, 62%, 100% { opacity: 0; transform: scale(0.5); } 68% { opacity: 1; transform: scale(1.35); } 80% { opacity: 0; transform: scale(1.6); } }
@keyframes v2Pulse { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes v2Twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(25deg); } }
@keyframes v2Fly {
    0% { opacity: 0; transform: translate(0, 0) rotate(-12deg) scale(0.55); }
    12% { opacity: 1; }
    70% { opacity: 1; transform: translate(var(--dx, 120px), var(--dy, -90px)) rotate(8deg) scale(1); }
    85%, 100% { opacity: 0; transform: translate(var(--dx, 120px), var(--dy, -90px)) rotate(8deg) scale(0.6); }
}
@keyframes v2Drop {
    0% { opacity: 0; transform: translate(0, -10px) scale(0.6); }
    15% { opacity: 1; }
    65% { opacity: 1; transform: translate(var(--dx, 60px), var(--dy, 70px)) scale(0.9); }
    80%, 100% { opacity: 0; transform: translate(var(--dx, 60px), var(--dy, 70px)) scale(0.4); }
}
@keyframes v2Pop { 0%, 8% { opacity: 0; transform: scale(0.3); } 18% { opacity: 1; transform: scale(1.12); } 26%, 82% { opacity: 1; transform: scale(1); } 94%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes v2Sweep { 0%, 100% { transform: translateX(0) rotate(-18deg); } 50% { transform: translateX(var(--sx, 150px)) rotate(14deg); } }
@keyframes v2Out { 0%, 40% { opacity: 1; transform: translateX(0) rotate(0); } 60%, 85% { opacity: 0; transform: translateX(26px) rotate(12deg); } 100% { opacity: 1; transform: translateX(0) rotate(0); } }
@keyframes v2Rise { 0% { opacity: 0; transform: translateY(14px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }
@keyframes v2Grow { 0% { transform: scaleY(0.25); } 45%, 75% { transform: scaleY(1); } 100% { transform: scaleY(0.25); } }
@keyframes v2Spin { to { transform: rotate(360deg); } }
@keyframes v2Slide { from { transform: translateX(0); } to { transform: translateX(var(--slide, -64px)); } }   /* --slide = one full pattern, so the loop is seamless */
@keyframes v2Beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
@keyframes v2Scan { 0%, 100% { transform: translateY(0); opacity: 0.2; } 50% { transform: translateY(var(--sy, 44px)); opacity: 1; } }
@keyframes v2Hop { 0%, 8% { opacity: 0.25; transform: translateY(0); } 16% { opacity: 1; transform: translateY(-6px); } 28%, 100% { opacity: 0.25; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .v2-scene, .v2-scene * { animation: none !important; }
}