/* ============================================================
   Rape-Axe - site-wide motion layer
   Loaded last in <head> on every public page so it can win the
   cascade against each page's own inline <style> block.
   Handles: cross-page view transitions, smooth-scroll offset,
   the returning-visitor loader skip, and shared hover/reveal polish.
   ============================================================ */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

/* ── Native cross-document view transitions (Chromium 126+) ──
   Progressive enhancement: browsers that don't understand this
   at-rule simply ignore it and navigate normally. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: rax-vt-out 0.32s cubic-bezier(.4,0,.2,1) both;
}
::view-transition-new(root) {
  animation: rax-vt-in 0.45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rax-vt-out {
  to { opacity: 0; transform: translateY(-10px) scale(0.99); }
}
@keyframes rax-vt-in {
  from { opacity: 0; transform: translateY(12px) scale(0.995); }
}

/* ── Fallback for browsers without native view transitions ──
   enhance.js toggles this class on <body> just before an internal
   navigation so the outgoing page fades instead of hard-cutting. */
body.rax-leaving {
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(.4,0,.2,1);
}

/* ── Returning-visitor loader skip ──
   enhance.js flags the session after the first page view. On every
   page after that, the branded loader is skipped entirely so
   clicking between pages feels instant rather than replaying a
   multi-second brand intro every time. */
html.rax-return #loader {
  transition: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Reveal-on-scroll: nicer easing than the per-page default ── */
.reveal {
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1), transform 0.7s cubic-bezier(.16,1,.3,1) !important;
}

/* ── Shared hover polish for interactive elements ── */
.btn-primary,
.btn-secondary,
.btn-submit,
.btn-ghost,
.nav-donate,
.cta-option,
.amount-btn,
.donate-tab {
  transition: background 0.2s, border-color 0.2s, color 0.2s,
              transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.25s ease !important;
}
.btn-primary:hover,
.btn-submit:hover,
.nav-donate:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(17,17,16,0.16);
}
.btn-secondary:hover {
  transform: translateY(-2px);
}
.cta-option:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(196,30,58,0.12);
}

/* ── Respect reduced-motion preference everywhere ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  body.rax-leaving { transition: none !important; opacity: 1 !important; }
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .btn-primary:hover, .btn-submit:hover, .nav-donate:hover,
  .btn-secondary:hover, .cta-option:hover { transform: none !important; }
}
