/* squeez.in motion, shared by every page. Transform and opacity only. Everything here is off under
   prefers-reduced-motion. Reveal states hide content only when motion.js has run (html.js-motion), so with
   JavaScript off every page is fully visible. The home page keeps its own motion in home.css. */

/* The header fades in on load (every page, the home page included). */
@media (prefers-reduced-motion: no-preference) {
  .h-top { animation: mo-header-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
}
@keyframes mo-header-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Scroll reveal (subpages). --d staggers siblings; motion.js sets it. */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion main.page [data-reveal] {
    transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms);
  }
  html.js-motion main.page [data-reveal]:not(.in) { opacity: 0; transform: translateY(14px); }
  html.js-motion main.page [data-reveal].in { opacity: 1; transform: none; }
}

/* Buttons and links: a small lift on hover, a press on click. Fine pointers only for the lift. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:not([aria-disabled="true"]):hover, .btn-ghost:hover { transform: translateY(-1px); }
  .btn-brand:hover { transform: translateY(-1px); }
}
.btn, .btn-ghost, .link-btn, .radios button, .switch {
  transition: transform 0.18s ease, opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .btn:active, .btn-ghost:active, .link-btn:active, .radios button:active, .h-claim-link:active, .h-top nav a:active { transform: scale(0.97); }
}
.link-btn:hover { text-decoration-color: var(--ink); }

/* How: the numbered steps draw in one after another, and a line joins them that fills as you scroll.
   The line is two transform bars: a track and a fill (scaleY on a phone, scaleX on a wide screen). */
html.js-motion .prose .steps { --fill: 0; }
.prose .steps { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: mo-step; position: relative; gap: 22px; }
.prose .steps > li { counter-increment: mo-step; position: relative; margin: 0; padding: 0 0 0 52px; }
.prose .steps > li::before {
  content: counter(mo-step); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--navHot); background: var(--bg);
  font: 600 15px/1 var(--mono); color: var(--ink);
}
.prose .steps::before, .prose .steps::after {
  content: ""; position: absolute; left: 16px; top: 17px; bottom: 17px; width: 2px; border-radius: 2px; pointer-events: none;
}
.prose .steps::before { background: var(--line); }
.prose .steps::after {
  background: linear-gradient(var(--brandInk), var(--navHot)); transform-origin: top center;
  transform: scaleY(var(--fill, 1));
}
@media (min-width: 900px) {
  .prose.wide .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
  .prose.wide .steps > li { padding: 52px 0 0 0; }
  .prose.wide .steps > li::before { top: 0; left: 0; }
  .prose .steps::before, .prose .steps::after { left: 17px; right: 17px; top: 17px; bottom: auto; width: auto; height: 2px; }
  .prose .steps::after { transform-origin: left center; transform: scaleX(var(--fill, 1)); background: linear-gradient(90deg, var(--brandInk), var(--navHot)); }
}
@media (prefers-reduced-motion: reduce) {
  .prose .steps::after { transform: none; }
}

/* Pricing: the plan cards lift on hover. The recommended plan carries a slow iridescent conic rim (the
   command bar's rim on the home page). The rim is an oversized square turning behind an inner fill, clipped
   to the card, so its corners never leave the card; on hover the rim brightens (opacity). */
.plan { position: relative; isolation: isolate; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plan:hover { transform: translateY(-5px); }
}
.plan--rec { overflow: clip; border: 0; }
.plan--rec::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 180%; height: 180%; translate: -50% -50%;
  z-index: -2; pointer-events: none; opacity: 0.6; transition: opacity 0.45s ease;
  background: conic-gradient(#BFD0FF, #8F7CFF, #F4F8FF, #8F7CFF, #BFD0FF);
}
.plan--rec::after {
  content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: 10px; pointer-events: none;
  background: var(--surface);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .plan--rec:hover::before { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  .plan--rec::before { animation: mo-spin 16s linear infinite; backface-visibility: hidden; }
}
@keyframes mo-spin { to { transform: rotate(360deg); } }

/* Agents and code: the example types out once in view. The height is reserved by motion.js (min-height),
   so nothing below moves. The caret is an extra glyph at the end of the line. */
.typing::after { content: "▍"; color: var(--navHot); margin-left: 1px; }

/* Skeleton shimmer: rows and cards that are still being checked. Shimmer moves a light band (transform). */
.skel {
  position: relative; overflow: hidden; border-radius: 6px; background: var(--chip); color: transparent !important;
}
.skel::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(233, 238, 255, 0.14) 50%, transparent 70%);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .skel::after { animation: mo-shimmer 1.4s ease-in-out infinite; }
}
@keyframes mo-shimmer { to { transform: translateX(100%); } }
.pv-skel { height: 132px; margin-top: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
.pv-skel { position: relative; overflow: hidden; }
.pv-skel::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(233, 238, 255, 0.10) 50%, transparent 70%); transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) { .pv-skel::after { animation: mo-shimmer 1.4s ease-in-out infinite; } }

/* Results arrive smoothly: a state that changes fades in, and a verdict badge pops. */
@media (prefers-reduced-motion: no-preference) {
  .link-list .side .chip, .pv-chip { animation: mo-fade 0.35s ease both; }
  .verdict .badge, .pv-verdict-badge { animation: mo-pop 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
  .verdict, .pv-card { animation: mo-fade 0.4s ease both; }
}
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-pop { from { transform: scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* Legal pages: only the section reveal, calm. */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .policy [data-reveal] { transition-duration: 0.8s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html.js-motion main.page [data-reveal] { opacity: 1; transform: none; }
}