/* ══════════════════════════════════════════════════════════════════════
   FakeDono — shared motion layer
   ──────────────────────────────────────────────────────────────────────
   One consistent set of entrance / hover / loading animations used across
   every page (public pages and the panel). Purely additive: it only touches
   `animation`, `transition` and `transform` on elements that opt in via the
   utility classes below, plus a gentle page-load entrance for the content
   column.

   It deliberately never animates `body` — the app mark-up already animates
   the body background grid (custom.css `bg-drift`), so doing so here would
   clobber it.

   Every animation is automatically disabled for visitors who have
   "reduce motion" enabled at the OS level.

   Loading: `links.css` @imports this file (so every public page that loads
   links.css gets it), and panel.html / maintenance.html / ticket-reply.html
   link it directly. It is loaded last, so it layers on top of each page's
   own styles.

   Usage
     <div class="fd-anim fd-anim-fade-up fd-delay-2">…</div>
     <ul class="fd-stagger">…</ul>            staggered children
     <div class="fd-lift">…</div>             hover-lift card
     <section class="fd-reveal">…</section>   scroll reveal (modern browsers)
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --fd-dur-fast: 150ms;
  --fd-dur: 340ms;
  --fd-dur-slow: 560ms;
  --fd-ease: cubic-bezier(.22, 1, .36, 1);
}

@keyframes fd-fade-in   { from { opacity: 0 }                                   to { opacity: 1; transform: none } }
@keyframes fd-fade-up   { from { opacity: 0; transform: translateY(16px) }      to { opacity: 1; transform: none } }
@keyframes fd-fade-down { from { opacity: 0; transform: translateY(-16px) }     to { opacity: 1; transform: none } }
@keyframes fd-scale-in  { from { opacity: 0; transform: scale(.965) }           to { opacity: 1; transform: none } }
@keyframes fd-slide-in  { from { opacity: 0; transform: translateX(22px) }      to { opacity: 1; transform: none } }
@keyframes fd-shimmer   { 0% { background-position: 200% 0 }                    to { background-position: -200% 0 } }

/* ── Opt-in utilities ─────────────────────────────────────────────── */
.fd-anim           { animation-duration: var(--fd-dur); animation-timing-function: var(--fd-ease); animation-fill-mode: both; }
.fd-anim-fade-in   { animation-name: fd-fade-in; }
.fd-anim-fade-up   { animation-name: fd-fade-up; }
.fd-anim-fade-down { animation-name: fd-fade-down; }
.fd-anim-scale-in  { animation-name: fd-scale-in; }
.fd-anim-slide-in  { animation-name: fd-slide-in; }

.fd-delay-1 { animation-delay: 60ms }
.fd-delay-2 { animation-delay: 120ms }
.fd-delay-3 { animation-delay: 180ms }
.fd-delay-4 { animation-delay: 240ms }
.fd-delay-5 { animation-delay: 300ms }
.fd-delay-6 { animation-delay: 360ms }

/* Staggered children — put .fd-stagger on a list / grid wrapper */
.fd-stagger > * { animation: fd-fade-up var(--fd-dur) var(--fd-ease) both }
.fd-stagger > *:nth-child(1) { animation-delay: 40ms }
.fd-stagger > *:nth-child(2) { animation-delay: 90ms }
.fd-stagger > *:nth-child(3) { animation-delay: 140ms }
.fd-stagger > *:nth-child(4) { animation-delay: 190ms }
.fd-stagger > *:nth-child(5) { animation-delay: 240ms }
.fd-stagger > *:nth-child(6) { animation-delay: 290ms }
.fd-stagger > *:nth-child(n+7) { animation-delay: 340ms }

/* ── Hover / press polish helpers ─────────────────────────────────── */
.fd-lift { transition: transform var(--fd-dur-fast) var(--fd-ease), box-shadow var(--fd-dur-fast) var(--fd-ease); }
.fd-lift:hover { transform: translateY(-3px); }
.fd-press:active { transform: scale(.975); }

/* ── Loading shimmer ──────────────────────────────────────────────── */
.fd-shimmer {
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, .04) 25%, rgba(255, 255, 255, .10) 37%, rgba(255, 255, 255, .04) 63%);
  background-size: 200% 100%;
  animation: fd-shimmer 1.4s linear infinite;
}

/* ── Page-load entrance (every page) ──────────────────────────────── */
main,
#app,
.lp-hero { animation: fd-fade-in 260ms ease both; }

.page-header,
.blog-header,
.doc-header,
.auth-card,
.reset-card,
.error-card { animation: fd-fade-up var(--fd-dur) var(--fd-ease) both; }

main h2,
main h3 { animation: fd-fade-up var(--fd-dur) var(--fd-ease) both; }
main p,
main ul,
main ol,
main blockquote { animation: fd-fade-in var(--fd-dur-slow) ease both; }

/* ── Opt-in scroll reveal (browsers that support scroll-driven timelines) ── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fd-reveal,
    .lp-section,
    .blog-card,
    .doc-section,
    .fd-card {
      animation: fd-fade-up linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
  }
}

/* ── Respect reduce-motion everywhere ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}