/* «Сёма» - motion. Only transform and opacity are animated. Everything stops under prefers-reduced-motion. */

/* ---------- Page-turn reveal (JS adds .is-visible; html.reveal-on means the observer is running) ---------- */
.reveal { transform-origin: left center; transition: opacity .7s var(--ease), transform .8s var(--ease); }
.js .reveal:not(.is-visible) { opacity: 0; transform: perspective(900px) rotateY(-12deg) translateY(18px); }
/* failsafe: if the script never starts, show everything after a moment */
.js:not(.reveal-on) .reveal:not(.is-visible) { animation: reveal-failsafe .6s var(--ease) 2.5s forwards; }
@keyframes reveal-failsafe { to { opacity: 1; transform: none; } }

/* first screen is never hidden (LCP); the picture settles like a page laid on the table */
.hero-page { animation: page-settle 1.1s var(--ease) both; }
.page-hero-pic { animation: page-settle-l 1.1s var(--ease) both; }
@keyframes page-settle { from { transform: rotate(4deg) translateY(14px); } to { transform: rotate(1.2deg); } }
@keyframes page-settle-l { from { transform: rotate(-4deg) translateY(14px); } to { transform: rotate(-1.2deg); } }

/* ---------- Living illustrations ---------- */
.bn-ear-r { transform-box: fill-box; transform-origin: 30% 95%; animation: twitch 5s ease-in-out infinite; }
.eyes { transform-box: fill-box; transform-origin: center; animation: blink 6s infinite; }
.ow-wing { transform-box: fill-box; transform-origin: 90% 10%; animation: wave 4.5s ease-in-out infinite; }
.spin-slow { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite; }
.drift { animation: drift 9s ease-in-out infinite alternate; }
.drift-2 { animation-duration: 12s; animation-delay: -4s; }
.drift-3 { animation-duration: 15s; animation-delay: -7s; }
.sway { transform-box: fill-box; transform-origin: 10% 50%; animation: sway 4s ease-in-out infinite; }
.sway-2 { animation-delay: -2s; }
.twinkle { transform-box: fill-box; transform-origin: center; animation: twinkle 2.6s ease-in-out infinite; }
.twinkle-2 { animation-delay: -1.3s; }

/* clouds bob up and down on top of the horizontal drift */
.bob { transform-box: fill-box; transform-origin: center; animation: bob 5s ease-in-out infinite; }
.bob-2 { animation-duration: 6.5s; animation-delay: -2s; }
.bob-3 { animation-duration: 4.2s; animation-delay: -1s; }

/* frog: a rare hop, the scarf tip flutters. The logo frog does not hop, it only blinks. */
.fr-hop { transform-box: fill-box; transform-origin: 50% 100%; animation: hop 6s ease-in-out infinite; }
.fr-knot { transform-box: fill-box; transform-origin: 0% 0%; animation: flap 2.4s ease-in-out infinite; }
.hop-big { transform-box: fill-box; transform-origin: 50% 100%; animation: hop-big 2.8s ease-in-out infinite; }
.ball { transform-box: fill-box; transform-origin: center; animation: ball 2.8s ease-in-out infinite; }
.footer-mark .fr-hop { animation-delay: -3s; }
.form-frog .fr-hop, .modal-pic .fr-hop { animation-delay: -1.5s; }

/* butterflies */
.bf-wings { transform-box: fill-box; transform-origin: center; animation: flutter .35s ease-in-out infinite alternate; }
.fly { animation: fly 14s ease-in-out infinite; }
.fly-2 { animation-duration: 18s; animation-delay: -6s; animation-direction: reverse; }

/* illustrations off screen are paused by site.js to save battery */
.is-paused, .is-paused * { animation-play-state: paused !important; }

/* ---------- Interface comes alive on hover ---------- */
.stickers li { transition: transform .25s var(--ease); }
.step-no { animation: bob 4s ease-in-out infinite; }
.steps li:nth-child(2) .step-no { animation-delay: -1.3s; }
.steps li:nth-child(3) .step-no { animation-delay: -2.6s; }
.steps li:nth-child(4) .step-no { animation-delay: -3.4s; }
.paper-card:hover .card-pic, .group-card:hover .group-pic, .note-card:hover .note-pic,
.owl-note:hover .owl-note-pic, .cta-band:hover .cta-frog { animation: hop-big .8s ease-in-out; }
.logo:hover .logo-mark { animation: wiggle .6s ease-in-out; }
.faq-item[open] .faq-a { animation: unfold .45s var(--ease); }
.form-success:not([hidden]) { animation: page-in .5s var(--ease); }

.modal[open] .modal-page { animation: page-in .5s var(--ease); transform-origin: left center; }
.lightbox[open] .lightbox-figure { animation: photo-in .35s var(--ease); }
.nav.is-open li { animation: slide-in .4s var(--ease) both; }
.nav.is-open li:nth-child(2) { animation-delay: .03s; }
.nav.is-open li:nth-child(3) { animation-delay: .06s; }
.nav.is-open li:nth-child(4) { animation-delay: .09s; }
.nav.is-open li:nth-child(5) { animation-delay: .12s; }
.nav.is-open li:nth-child(6) { animation-delay: .15s; }
.nav.is-open li:nth-child(n+7) { animation-delay: .18s; }
.cookie:not([hidden]) { animation: rise .5s var(--ease) both; }

@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.5deg); } }
@keyframes hop { 0%, 72%, 100% { transform: translateY(0) scale(1); } 77% { transform: translateY(0) scale(1.03, .97); } 84% { transform: translateY(-7%) scale(.99, 1.01); } 91% { transform: translateY(0) scale(1.02, .98); } 95% { transform: translateY(0) scale(1); } }
@keyframes hop-big { 0%, 100% { transform: translateY(0) scale(1); } 15% { transform: translateY(0) scale(1.05, .93); } 45% { transform: translateY(-16%) scale(.96, 1.05); } 75% { transform: translateY(0) scale(1.04, .95); } }
@keyframes ball { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-30px); } }
@keyframes flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg); } }
@keyframes flutter { from { transform: scaleX(1); } to { transform: scaleX(.35); } }
/* Small loop (max 60 user units right) so butterflies never leave the picture frame */
@keyframes fly { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(32px, -18px) rotate(8deg); } 50% { transform: translate(60px, 6px) rotate(-6deg); } 75% { transform: translate(26px, 22px) rotate(6deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes twitch { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(9deg); } 92% { transform: rotate(-4deg); } 96% { transform: rotate(3deg); } }
@keyframes sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes wave { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-14deg); } 86% { transform: rotate(-4deg); } 92% { transform: rotate(-12deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(18px); } }
@keyframes twinkle { 0%, 100% { transform: scale(.8); opacity: .7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes page-in { from { opacity: 0; transform: perspective(1000px) rotateY(-24deg); } to { opacity: 1; transform: none; } }
@keyframes photo-in { from { opacity: 0; transform: scale(.94) rotate(-1deg); } to { opacity: 1; transform: none; } }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal:not(.is-visible) { opacity: 1 !important; transform: none !important; }
  .hero-page { transform: rotate(1.2deg); }
  .page-hero-pic { transform: rotate(-1.2deg); }
}
.stickers li:hover { box-shadow: 4px 4px 0 var(--ink); }