/* welcome/polish.css — entrance + interaction animations for /welcome
 * Presentation-only. Scoped to html[data-route="/welcome"].
 * The welcome page is the landing page — a strong first impression matters.
 * Reduced-motion fallbacks included.
 * G8 / polish/e1-remaining-routes 2026-06-09
 */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes lp-fade-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lp-logo-drop {
  from { opacity: 0; transform: translateY(-20px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lp-wordmark-in {
  from { opacity: 0; letter-spacing: .35em; }
  to   { opacity: 1; }
}
@keyframes lp-feature-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lp-red-pulse {
  0%, 100% { box-shadow: 0 10px 30px rgba(255,45,45,.42); }
  50%       { box-shadow: 0 14px 40px rgba(255,45,45,.62); }
}

/* ── Brand entrance ───────────────────────────────────────── */
html[data-route="/welcome"] .lp-logo {
  animation: lp-logo-drop .5s .05s cubic-bezier(.34,1.56,.64,1) both;
}
html[data-route="/welcome"] .lp-wordmark {
  animation: lp-wordmark-in .55s .15s ease both;
}
html[data-route="/welcome"] .lp-tagline {
  animation: lp-fade-rise .45s .25s ease both;
}

/* ── CTA entrance ─────────────────────────────────────────── */
html[data-route="/welcome"] .lp-cta {
  animation: lp-fade-rise .4s .35s ease both;
}
/* Primary CTA: persistent red pulse after load */
html[data-route="/welcome"] .lp-btn-primary {
  animation: lp-red-pulse 3s 1.2s ease-in-out infinite;
}
/* Don't override hover transform — welcome/index.html already has it */

/* ── Features stagger ─────────────────────────────────────── */
html[data-route="/welcome"] .lp-features {
  animation: lp-fade-rise .45s .42s ease both;
}
html[data-route="/welcome"] .lp-feature {
  animation: lp-feature-rise .4s ease both;
  transition: transform .18s ease, box-shadow .18s ease;
}
html[data-route="/welcome"] .lp-feature:nth-child(1) { animation-delay: .48s; }
html[data-route="/welcome"] .lp-feature:nth-child(2) { animation-delay: .56s; }
html[data-route="/welcome"] .lp-feature:nth-child(3) { animation-delay: .64s; }
html[data-route="/welcome"] .lp-feature:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(255, 45, 45, .15);
}

/* ── Focus-visible on CTA links ───────────────────────────── */
html[data-route="/welcome"] .lp-btn:focus-visible {
  outline: 2px solid var(--brand-red, #FF2D2D);
  outline-offset: 4px;
}

/* ── Dead sidebar-toggle hamburger (AUD-34) ───────────────────
 * chrome.js injects a global #wcross-burger sidebar-collapse toggle on every
 * route >=880px, but /welcome is a self-contained chromeless landing page
 * with no .app/.sidebar markup for it to act on (see index.html comment,
 * "no app sidebar/chrome"). Clicking it toggled an inert html class with
 * zero visible effect. Hide it here rather than editing shared chrome.js. */
html[data-route="/welcome"] #wcross-burger {
  display: none !important;
}

/* ── Reduced-motion overrides ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-route="/welcome"] .lp-logo,
  html[data-route="/welcome"] .lp-wordmark,
  html[data-route="/welcome"] .lp-tagline,
  html[data-route="/welcome"] .lp-cta,
  html[data-route="/welcome"] .lp-features,
  html[data-route="/welcome"] .lp-feature {
    animation: none;
    opacity: 1;
  }
  html[data-route="/welcome"] .lp-btn-primary {
    animation: none;
  }
  html[data-route="/welcome"] .lp-feature:hover {
    transform: none;
  }
}