/* Animate UI expressive motion, adapted to server-rendered PHP.
   Timing: skills/animate-ui/references/tokens.md and css-timing.mjs.
   Spring curves below are generated from the official tokens, tempo 1. */
:root {
  --motion-out: cubic-bezier(.23, 1, .32, 1);
  --motion-soft: cubic-bezier(.215, .61, .355, 1);
  --motion-drawer: cubic-bezier(.34, 1.2, .64, 1);
  --motion-in: cubic-bezier(.4, 0, 1, 1);
  --motion-press: 400ms var(--motion-out);
  --motion-entrance: 600ms var(--motion-out);
  --motion-toast: 550ms var(--motion-out);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
  --motion-press: 400ms linear(0, 0.0261, 0.0935, 0.188, 0.2977, 0.4132, 0.5271, 0.6343, 0.7313, 0.8159, 0.8872, 0.9452, 0.9906, 1.0244, 1.048, 1.063, 1.0709, 1.0732, 1.0713, 1.0663, 1.0594, 1.0514, 1.0429, 1.0346, 1.0267, 1.0196, 1.0134, 1.0082, 1.004, 1.0007, 0.9982, 0.9965, 1, 0.9948, 0.9946, 0.9948, 1, 1, 1, 1);
  --motion-entrance: 600ms linear(0, 0.0097, 0.036, 0.0756, 0.1251, 0.1819, 0.2435, 0.3079, 0.3734, 0.4385, 0.5021, 0.5634, 0.6215, 0.676, 0.7265, 0.7728, 0.8149, 0.8526, 0.8862, 0.9157, 0.9414, 0.9634, 0.9821, 0.9977, 1.0104, 1.0206, 1.0285, 1.0345, 1.0387, 1.0414, 1.0428, 1.0432, 1.0427, 1.0415, 1.0397, 1.0376, 1.0351, 1.0324, 1.0296, 1.0268, 1.024, 1.0212, 1.0186, 1.0161, 1.0138, 1.0116, 1.0096, 1.0078, 1.0062, 1.0048, 1.0035, 1.0024, 1.0015, 1.0007, 1, 0.9995, 0.9991, 0.9987, 0.9985, 1);
  --motion-toast: 550ms linear(0, 0.0134, 0.0492, 0.1017, 0.1659, 0.2377, 0.3134, 0.3904, 0.4664, 0.5396, 0.6088, 0.673, 0.7317, 0.7846, 0.8315, 0.8726, 0.9081, 0.9382, 0.9634, 0.984, 1.0006, 1.0136, 1.0234, 1.0305, 1.0353, 1.0381, 1.0393, 1.0393, 1.0382, 1.0364, 1.0341, 1.0314, 1.0284, 1.0254, 1.0224, 1.0194, 1.0166, 1.014, 1.0116, 1.0094, 1.0075, 1.0057, 1.0042, 1.0029, 1.0019, 1.001, 1.0003, 0.9997, 0.9992, 0.9989, 1, 1, 1, 1, 1);
  }
}

/* Content stays readable before JavaScript, after animation, and on failure. */
.motion-entering {
  animation: motion-arrive var(--motion-entrance) both;
  animation-delay: 0ms;
}
.motion-entering[data-motion-order="1"] { animation-delay: 80ms; }
.motion-entering[data-motion-order="2"] { animation-delay: 160ms; }
.motion-entering[data-motion-order="3"] { animation-delay: 240ms; }
.motion-entering[data-motion-order="4"] { animation-delay: 320ms; }
@keyframes motion-arrive {
  from { opacity: 0; translate: 0 24px; filter: blur(4px); }
  to { opacity: 1; translate: 0; filter: none; }
}

/* Press feedback; scale is separate from a card cover's existing transform. */
.btn, .icon-btn, .qa-btn, .sc-arrow, .showcase-nav, .tb, .rate-star, .genre-grid a,
.story-card, .continue-card, .admin-nav a {
  transition: scale var(--motion-press), background-color 200ms ease,
    border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.btn:active:not(:disabled), .icon-btn:active:not(:disabled),
.qa-btn:active, .sc-arrow:active:not(:disabled), .showcase-nav:active,
.tb:active, .rate-star:active, .genre-grid a:active { scale: .97; }
.story-card:active, .continue-card:active { scale: .985; }
.btn-primary { position: relative; isolation: isolate; }
.btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 20%, #ffffff35 50%, transparent 80%);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::after { opacity: 1; }
  .card-cover { transition: transform var(--motion-entrance); }
  .story-card:hover .card-cover { transform: translateY(-4px); }
  .qa-btn:hover, .genre-grid a:hover { box-shadow: var(--shadow); }
  .section-head .more:hover .ic { transform: translateX(4px); }
}
@media (hover: none), (pointer: coarse) {
  .story-card:hover .card-cover, .section-head .more:hover .ic,
  .hero-cover:hover, .rate-star:hover { transform: none; }
}

/* Menus originate at the trigger. Closed content cannot receive focus. */
.dropdown-menu { animation: motion-menu-in 220ms var(--motion-soft); transform-origin: top left; }
.dropdown-menu.right { transform-origin: top right; }
@keyframes motion-menu-in {
  from { opacity: 0; transform: scale(.9); }
  to { opacity: 1; transform: none; }
}
@supports (transition-behavior: allow-discrete) {
  .dropdown-menu {
    animation: none; opacity: 0; transform: scale(.9);
    transition: opacity 150ms var(--motion-out), transform 150ms var(--motion-out), display 150ms allow-discrete;
  }
  .dropdown.open .dropdown-menu {
    opacity: 1; transform: none;
    transition: opacity 220ms var(--motion-soft), transform 220ms var(--motion-soft), display 220ms allow-discrete;
  }
  @starting-style {
    .dropdown.open .dropdown-menu { opacity: 0; transform: scale(.9); }
  }
}
.tab-pane.active { animation: motion-panel-in 300ms var(--motion-out); }
@keyframes motion-panel-in {
  from { opacity: 0; translate: 0 6px; filter: blur(4px); }
  to { opacity: 1; translate: 0; filter: none; }
}
.theme-switch .ts-knob { transition: transform var(--motion-press); }
.toast {
  animation: motion-toast-in var(--motion-toast);
  transition: opacity 200ms var(--motion-out), transform 200ms var(--motion-out);
}
@keyframes motion-toast-in {
  from { opacity: 0; transform: translateY(-16px) scale(.96); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.back-top { transition: opacity 200ms var(--motion-out), transform var(--motion-press), background-color 200ms ease; }
.continue-play { transition: color 200ms ease, background-color 200ms ease; }
.showcase-dots button { transition: width 200ms var(--motion-soft), background-color 200ms ease; }
.chip { transition: color 200ms ease, background-color 200ms ease, border-color 200ms ease; }
.comment { transition: opacity 300ms var(--motion-out), transform 300ms var(--motion-out); }
.dropzone { transition: background-color 200ms ease, border-color 200ms ease; }
.reader-inner { transition: none; }
.chat-dots[data-motion-paused] i { animation-play-state: paused; }
@media (max-width: 900px) {
  .drawer { transition: transform 160ms var(--motion-in); }
  .drawer-open .drawer { transition: transform 400ms var(--motion-drawer); }
  .drawer-backdrop { transition: opacity 200ms var(--motion-soft); }
  .drawer-open .drawer-backdrop { transition-duration: 400ms; }
  .main-nav .dropdown-menu { animation: none; transform: none; }
}

/* Focus is immediate, with no entrance delay or clipped ring. */
:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}
.motion-entering:focus-within { animation: none; }

/* Keep fades, remove travel, scale, autoplay and smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .motion-entering, .tab-pane.active, .toast {
    animation: motion-fade 200ms var(--motion-out) !important;
    animation-delay: 0ms !important;
  }
  .dropdown-menu, .dropdown.open .dropdown-menu {
    transform: none;
    transition: opacity 150ms var(--motion-out), display 150ms allow-discrete !important;
  }
  .btn:active, .icon-btn:active, .qa-btn:active, .sc-arrow:active,
  .showcase-nav:active, .tb:active, .rate-star:active, .genre-grid a:active,
  .story-card:active, .continue-card:active { scale: none !important; }
  .btn:active { transform: none; }
  .story-card:hover .card-cover, .section-head .more:hover .ic { transform: none; }
  .toast.hide { transform: none; }
}
@keyframes motion-fade { from { opacity: 0; } to { opacity: 1; } }