/* ===========================================================================
   Kiyavama motion for the STATIC home page (public/kiyavama-books.htm). Twin of src/styles/motion.css, which does the
   same job for the Next pages: same easing, same 180-450 ms timings, same switch. Guide: MOTION.md.

   THE SWITCH: every effect lives under `html.motion-ok`. A tiny inline script in the page's <head> adds that class
   unless the phone asks for reduced motion or localStorage 'kiyavama-reduce-motion' is '1'. Without the class (or
   without JavaScript) nothing here applies, so nothing is ever hidden or delayed. `html.reduce-motion` also stills
   the page's older animations (the page turn, the 3D shelf), see the end of this file.

   Only transform / opacity and the individual `scale` / `translate` / `rotate` properties. No will-change.
   =========================================================================== */
:root { --k-ease: cubic-bezier(.34, 1.56, .64, 1); --k-ease-out: cubic-bezier(.22, 1, .36, 1); --k-dir: 1; }
:root[dir='rtl'] { --k-dir: -1; }

@media (prefers-reduced-motion: no-preference) {

  @keyframes k-pop    { from { opacity: .35; transform: translateY(14px) scale(.88); } to { opacity: 1; transform: none; } }
  @keyframes k-pop-in { from { opacity: 0;   transform: translateY(14px) scale(.88); } to { opacity: 1; transform: none; } }
  @keyframes k-idle {           /* the kitten: a slow bob, and now and then a little wave of the head */
    0%, 100% { transform: translateY(0) rotate(0); }
    22%      { transform: translateY(-5px) rotate(0); }
    44%      { transform: translateY(0) rotate(0); }
    56%      { transform: translateY(-2px) rotate(-7deg); }
    66%      { transform: translateY(-2px) rotate(6deg); }
    76%      { transform: translateY(-1px) rotate(-4deg); }
    86%      { transform: translateY(0) rotate(0); }
  }
  @keyframes k-bubble { from { opacity: 0; transform: translateY(-8px) scale(.7); } to { opacity: 1; transform: none; } }
  @keyframes k-drift  { from { transform: translate(0, 0); } to { transform: translate(calc(var(--k-dir) * 7px), -6px); } }
  @keyframes k-breathe {        /* a soft ring that swells and fades around the main Read button */
    0%   { opacity: 0;   transform: scale(.97); }
    45%  { opacity: .8;  transform: scale(1.05); }
    100% { opacity: 0;   transform: scale(1.12); }
  }
  @keyframes k-hop    { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-9px) scale(1.12); } 65% { transform: translateY(1px) scale(.96); } }
  @keyframes k-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.06); } 55% { transform: rotate(9deg); } 80% { transform: rotate(-4deg); } }
  @keyframes k-pill   { from { opacity: 0; transform: translateX(calc(var(--k-dir) * -10px)) scale(.8); } to { opacity: 1; transform: none; } }
  @keyframes k-wiggle { 0%, 100% { rotate: 0deg; } 25% { rotate: -3deg; } 55% { rotate: 2.5deg; } 80% { rotate: -1deg; } }
  @keyframes k-dialog { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } }
  @keyframes k-fade   { from { opacity: 0; } to { opacity: 1; } }
  @keyframes k-dot    { 0% { transform: scale(.5); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
  @keyframes k-lock   { 0%, 100% { rotate: 0deg; } 30% { rotate: -10deg; } 65% { rotate: 8deg; } }
  @keyframes k-up     { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes k-menu   { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }

  /* ---- hero greeting: kitten, speech bubble ---- */
  html.motion-ok .ah-cat { transform-origin: 50% 100%; animation: k-idle 6s ease-in-out 1s infinite; }
  html.motion-ok .ah-hi { transform-origin: 20% 0; animation: k-bubble .5s var(--k-ease) .15s backwards; }
  html.motion-ok[dir='rtl'] .ah-hi { transform-origin: 80% 0; }
  /* the doodles / stars in the background drift very slowly (a tiny move of one layer) */
  html.motion-ok .hero > .pattern { animation: k-drift 28s ease-in-out infinite alternate; }
  /* an animation that is scrolled out of sight is paused (the script sets data-off) */
  html.motion-ok [data-off] .ah-cat, html.motion-ok .hero[data-off] > .pattern, html.motion-ok .hero[data-off] .cta-row > .btn::after { animation-play-state: paused; }

  /* ---- the main Read buttons breathe (home hero only) ---- */
  html.motion-ok .ah-go, html.motion-ok .hero .cta-row > .btn:first-child { position: relative; }
  html.motion-ok .ah-go::after, html.motion-ok .hero .cta-row > .btn:first-child::after {
    content: ''; position: absolute; inset: -5px; border-radius: inherit; border: 3px solid var(--accent);
    opacity: 0; pointer-events: none; animation: k-breathe 2.8s ease-in-out 1.2s infinite;
  }
  html.motion-ok .hero .cta-row > .btn:first-child::after { border-color: var(--sun); }

  /* ---- pop in: books, ways, home cards, headings (the script holds back the ones below the fold) ---- */
  html.motion-ok .shelf > .book:not(.skel),
  html.motion-ok .ways-grid > .way,
  html.motion-ok .ah-cards > .ah-card:not(.ah-skel),
  html.motion-ok .sec-head,
  html.motion-ok .app-copy,
  html.motion-ok .phone-wrap { animation: k-pop 450ms var(--k-ease) var(--pd, 0ms) backwards; }
  html.motion-ok .shelf > :nth-child(2)  { --pd: 45ms; }  html.motion-ok .shelf > :nth-child(3)  { --pd: 90ms; }
  html.motion-ok .shelf > :nth-child(4)  { --pd: 135ms; } html.motion-ok .shelf > :nth-child(5)  { --pd: 180ms; }
  html.motion-ok .shelf > :nth-child(6)  { --pd: 225ms; } html.motion-ok .shelf > :nth-child(7)  { --pd: 270ms; }
  html.motion-ok .shelf > :nth-child(8)  { --pd: 315ms; } html.motion-ok .shelf > :nth-child(9)  { --pd: 360ms; }
  html.motion-ok .shelf > :nth-child(10) { --pd: 405ms; } html.motion-ok .shelf > :nth-child(11) { --pd: 450ms; }
  html.motion-ok .shelf > :nth-child(12) { --pd: 495ms; }
  html.motion-ok .ways-grid > :nth-child(2) { --pd: 70ms; } html.motion-ok .ways-grid > :nth-child(3) { --pd: 140ms; }
  html.motion-ok .ah-cards > :nth-child(2) { --pd: 90ms; }
  html.motion-ok [data-wait] { animation: none !important; opacity: 0; transform: translateY(14px) scale(.88); }
  html.motion-ok [data-popped] { animation: k-pop-in 450ms var(--k-ease) var(--pdr, 0ms) backwards !important; }

  /* ---- covers and buttons: lift (already in the page), tilt wiggle on hover (mouse only), squish on press ---- */
  @media (hover: hover) and (pointer: fine) {
    html.motion-ok .cover-btn:hover { animation: k-wiggle .5s var(--k-ease); }
  }
  html.motion-ok .cover-btn { transition: transform .2s ease, scale .3s var(--k-ease); }
  html.motion-ok .cover-btn:active { scale: .95; }
  html.motion-ok .btn { transition: transform .12s ease, box-shadow .12s ease, scale .3s var(--k-ease); }
  html.motion-ok .ah-go { transition: transform .12s ease, scale .3s var(--k-ease); }
  html.motion-ok .btn:active, html.motion-ok .ah-go:active { scale: .95; }
  html.motion-ok .ah-go:active { transform: translate(2px, 3px); }
  html.motion-ok :is(.chip, .icon-btn, .room-nav, .skin-btn, .skin-opt) { transition: scale .3s var(--k-ease), background-color .15s ease; }
  html.motion-ok :is(.chip, .icon-btn, .room-nav, .skin-btn, .skin-opt):active { scale: .93; }

  /* ---- phone tab bar: the lit icon hops when it becomes the current tab, taps wobble the icon ---- */
  html.motion-ok .tab { transition: scale .3s var(--k-ease), color .15s ease; }
  html.motion-ok .tab:active { scale: .92; }
  html.motion-ok .tab[aria-current='true'] .ti { animation: k-hop 560ms var(--k-ease) 60ms backwards; }
  html.motion-ok .tab[aria-current='true'] > span { animation: k-pill .3s var(--k-ease) 60ms backwards; }
  html.motion-ok .tab:not([aria-current='true']):active .ti { animation: k-wobble 420ms var(--k-ease); }

  /* ---- reader / preview dialog ---- */
  html.motion-ok dialog.reader[open] { animation: k-dialog .38s var(--k-ease) backwards; }
  html.motion-ok dialog.reader[open]::backdrop { animation: k-fade .25s ease backwards; }
  html.motion-ok .dots button[aria-current='true'] { animation: k-dot .45s var(--k-ease); }
  html.motion-ok .lock-ic { animation: k-lock .8s var(--k-ease) .3s 2; }
  html.motion-ok dialog.reader[open] .read-full:not([hidden]) { animation: k-up .4s var(--k-ease) .1s backwards; }
  html.motion-ok dialog.install-help[open] { animation: k-dialog .38s var(--k-ease) backwards; }
  html.motion-ok .skin-menu:not([hidden]) { animation: k-menu .28s var(--k-ease) backwards; }

  /* ---- toast: slides up with a small bounce ---- */
  html.motion-ok .toast { transition: opacity .2s ease, transform .45s var(--k-ease); }
  html.motion-ok .toast:not(.show) { transform: translate(-50%, 24px) scale(.9); }
  html.motion-ok .toast.show { transform: translate(-50%, 0) scale(1); }
}

/* the owner / parent switch also stills the page's own older animations (page turn, spinner, 3D shelf, skeleton pulses) */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}