/* ============================================================
   Pavforest — cross-page UI polish (modals, reveals, chrome)
   Loaded after page-specific CSS on every public surface.
   ============================================================ */

/* ── page enter ── */
html.js-ready body > main,
html.js-ready body > .guide-wrap,
html.js-ready body > .legal-wrap,
html.js-ready #login,
html.js-ready #app{
  animation:pfPageIn .45s var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
}
@keyframes pfPageIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

/* ── scroll reveal (all pages — site.js drives .in) ── */
.reveal{opacity:1;transform:none;transition:opacity .6s var(--ease-out, cubic-bezier(.22,1,.36,1)),transform .6s var(--ease-out, cubic-bezier(.22,1,.36,1))}
html.js-reveal .reveal:not(.in){opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none}

/* ── nav backdrop (match support overlay) ── */
.nav-backdrop{
  transition:opacity .24s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
html:not(.perf-lite) .nav-backdrop{
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

/* ── modals — shared enter/exit (.modal, .modal-overlay, .pf-modal) ── */
.modal,
.modal-overlay,
.pf-modal{
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s var(--ease-out, cubic-bezier(.22,1,.36,1)),visibility .24s;
}
.modal.is-open,
.modal-overlay.is-open,
.pf-modal.is-open{
  opacity:1;visibility:visible;pointer-events:auto;
}
.modal-card,
.modal-box,
.pf-modal-card{
  transform:translateY(12px) scale(.97);
  opacity:0;
  transition:transform .28s var(--ease-out, cubic-bezier(.22,1,.36,1)),opacity .28s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
.modal.is-open .modal-card,
.modal-overlay.is-open .modal-box,
.pf-modal.is-open .pf-modal-card,
.is-open > .modal-card,
.is-open > .modal-box{
  transform:none;opacity:1;
}

/* panel login card */
#login .login-card{
  transform:translateY(10px) scale(.98);opacity:0;
  transition:transform .35s var(--ease-out, cubic-bezier(.22,1,.36,1)),opacity .35s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
html.js-ready #login:not([hidden]) .login-card,
#login:not([hidden]) .login-card.pf-in{
  transform:none;opacity:1;
}

/* admin login */
.login .login-card{
  animation:pfPageIn .45s var(--ease-out, cubic-bezier(.22,1,.36,1)) both;
}

/* ── toasts ── */
.toast{
  animation:toastIn .25s ease both;
}
.toast.is-out{
  animation:toastOut .22s ease forwards;
}
@keyframes toastOut{
  to{opacity:0;transform:translateY(-8px) scale(.96)}
}

/* ── support panel close (feedback.js removes .is-visible first) ── */
.support-panel:not(.is-visible){
  opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;
}

/* ── guide / legal content polish ── */
.guide-wrap h1.reveal,
.legal-wrap h1.reveal{transition-delay:0ms}
.guide-hub .guide-card.reveal:nth-child(1){transition-delay:0ms}
.guide-hub .guide-card.reveal:nth-child(2){transition-delay:60ms}
.guide-hub .guide-card.reveal:nth-child(3){transition-delay:120ms}
.guide-hub .guide-card.reveal:nth-child(4){transition-delay:180ms}

.guide-wrap .section-title.reveal,
.legal-wrap h2.reveal{
  position:relative;padding-left:14px;
}
.guide-wrap .section-title.reveal::before,
.legal-wrap h2.reveal::before{
  content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:3px;border-radius:999px;
  background:linear-gradient(180deg,var(--lime,#a6f56b),var(--green,#33e07c));
  opacity:.85;
}

/* table row hover — subtle lift on desktop */
@media(min-width:901px){
  .guide-table tbody tr{transition:background .15s,transform .15s var(--ease-out, ease)}
  .guide-table tbody tr:hover{transform:translateX(2px)}
}

/* ── admin stat cards ── */
.stat-card{transition:border-color .2s,transform .18s var(--ease-out, ease),box-shadow .2s}

/* ── reduced motion ── */
@media(prefers-reduced-motion:reduce){
  html.js-ready body > main,
  html.js-ready body > .guide-wrap,
  html.js-ready body > .legal-wrap,
  html.js-ready #login,
  html.js-ready #app,
  .login .login-card{animation:none!important}
  html.js-reveal .reveal:not(.in){opacity:1;transform:none}
  .reveal{transition:none!important}
  .modal,.modal-overlay,.pf-modal,
  .modal-card,.modal-box,.pf-modal-card,
  #login .login-card{transition:none!important;transform:none!important;opacity:1!important}
  .modal,.modal-overlay,.pf-modal{opacity:1;visibility:visible}
  .toast.is-out{animation:none;opacity:0}
  .support-panel:not(.is-visible){transition:none!important}
  .guide-table tbody tr:hover{transform:none}
}