/* Landing polish + scroll motion (shared by landing.html and landing-sr.html).
   Everything that hides or moves content is gated by `html.js`, which the inline
   head script sets only when motion is allowed — no JS / reduced motion = static page. */

:root {
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --track: color-mix(in srgb, var(--coral) 22%, var(--bg-sunken));
}

/* ---------- Desktop rhythm ---------- */
.wrap { max-width: 1120px; }
@media (min-width: 1024px) {
  .hero { padding: 104px 0 80px; }
  .hero-grid { gap: 72px; }
  h1 { font-size: clamp(44px, 4.4vw, 56px); }
  .lead { font-size: 20px; }
  section { padding: 96px 0; }
  .section-head { margin-bottom: 56px; }
  .section-head p { font-size: 18px; }
  .card { padding: 34px 30px; }
  .card h3 { font-size: 22px; }
  .card p { font-size: 16px; }
  .step h3 { font-size: 19px; }
  .step p { font-size: 15px; }
  .who .panel { padding: 36px 32px; }
  .final { padding: 88px 48px; }
  .final h2 { font-size: 40px; }
}

/* ---------- Header: transparent on top, solid + progress when scrolled ---------- */
header.site::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--coral), var(--foster));
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
}
.js header.site { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.js header.site:not(.scrolled) {
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: transparent;
}
.js header.site.scrolled { box-shadow: 0 6px 24px rgba(70, 40, 20, 0.06); }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero::before {
  content: '';
  position: absolute; z-index: -1; inset: -30% -10% -10%;
  background:
    radial-gradient(38% 42% at 12% 22%, color-mix(in srgb, var(--coral) 22%, transparent), transparent 70%),
    radial-gradient(34% 40% at 88% 28%, color-mix(in srgb, var(--foster) 22%, transparent), transparent 70%),
    radial-gradient(40% 38% at 62% 92%, color-mix(in srgb, var(--adoption) 14%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 62%, transparent);
}
h1 .accent {
  white-space: nowrap;
  color: var(--coral-press);
  background: linear-gradient(100deg, #e0481a, #ea6a14);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
  h1 .accent { background-image: linear-gradient(100deg, var(--coral), var(--foster)); }
}

/* Floating paw marks (injected by landing-motion.js) */
.deco {
  position: absolute; z-index: -1; pointer-events: none;
  width: var(--s); height: var(--s);
  background: var(--coral); opacity: var(--o, 0.1);
  -webkit-mask: url('/paw-mark.svg') center / contain no-repeat; mask: url('/paw-mark.svg') center / contain no-repeat;
  rotate: var(--r, 0deg);
  translate: 0 calc(var(--py, 0) * var(--k, 0) * 1px);
  animation: drift 9s ease-in-out infinite alternate;
}
.deco:nth-of-type(2) { animation-duration: 11s; animation-delay: -3s; }
.deco:nth-of-type(3) { animation-duration: 7s; animation-delay: -5s; }
@keyframes drift { from { transform: translate3d(0, -8px, 0) scale(1); } to { transform: translate3d(0, 10px, 0) scale(1.04); } }
@media (max-width: 520px) { .deco:nth-of-type(3) { display: none; } .deco { --s: 96px; } }

/* ---------- Scroll reveal ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity 0.75s var(--ease-out) calc(var(--i, 0) * var(--stagger, 90ms)),
    transform 0.75s var(--ease-out) calc(var(--i, 0) * var(--stagger, 90ms));
  will-change: opacity, transform;
}
.js [data-reveal='scale'] { transform: translate3d(0, 36px, 0) scale(0.94); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (min-width: 861px) {
  .js [data-reveal='left'] { transform: translate3d(-44px, 0, 0); }
  .js [data-reveal='right'] { transform: translate3d(44px, 0, 0); }
  .js [data-reveal='left'].in, .js [data-reveal='right'].in { transform: none; }
}
@media (max-width: 860px) {
  .cards [data-reveal], .steps [data-reveal], .who [data-reveal] { --stagger: 0ms; }
}

/* ---------- Buttons ---------- */
.btn-primary { transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.2s ease; }
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in srgb, var(--coral) 38%, transparent); }
  .btn-ghost:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .btn { transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.2s ease; }
}

/* ---------- Help-type cards ---------- */
.card { position: relative; overflow: hidden; transition: transform 0.3s var(--ease-out), box-shadow 0.3s ease, border-color 0.3s ease; }
.card.foster { --accent: var(--foster); }
.card.adoption { --accent: var(--adoption); }
.card.fundraise { --accent: var(--fundraise); }
.card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
}
.card .ico { transition: transform 0.35s var(--ease-out); }
@media (hover: hover) {
  .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 40%, var(--divider)); }
  .card:hover::before { opacity: 1; }
  .card:hover .ico { transform: rotate(-6deg) scale(1.1); }
}

/* ---------- Steps: progress line + lit-up numbers ---------- */
.steps { position: relative; }
.step { position: relative; z-index: 1; }
.step .num { position: relative; transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s var(--ease-out), box-shadow 0.35s ease; }
.js .step.on .num { background: var(--coral); color: #fff; transform: scale(1.1); box-shadow: 0 6px 16px color-mix(in srgb, var(--coral) 35%, transparent); }
.steps::before, .steps::after { content: none; position: absolute; border-radius: 2px; }
@media (min-width: 861px) {
  .step { text-align: center; }
  .step .num { margin-left: auto; margin-right: auto; }
  .step p { text-wrap: balance; }
  .js .steps::before, .js .steps::after { content: ''; left: calc(12.5% - 7.5px); top: 19px; height: 2px; width: calc(75% + 15px); background: var(--track); transform-origin: 0 50%; }
  .js .steps::after { background: linear-gradient(90deg, var(--coral), var(--foster)); transform: scaleX(var(--p, 0)); }
}
@media (max-width: 520px) {
  .js .steps::before, .js .steps::after { content: ''; left: 19px; top: 20px; width: 2px; height: var(--track-h, 0px); background: var(--track); transform-origin: 50% 0; }
  .js .steps::after { background: linear-gradient(180deg, var(--coral), var(--foster)); transform: scaleY(var(--p, 0)); }
}

/* ---------- Audience panels ---------- */
.who li::marker { color: var(--coral); }

/* ---------- Final CTA ---------- */
.final {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(120deg, #e8532a, #cf3f16 55%, #e8532a); background-size: 200% 200%;
}
.final .deco { background: #fff; --o: 0.12; }
.final .btn-primary { color: #8c2e0e; }
.js .final { animation: gradShift 14s ease-in-out infinite alternate; }
.js .final .btn-primary { animation: ring 2.8s ease-out infinite; }
@keyframes gradShift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); } 70%, 100% { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .deco, .final, .final .btn-primary { animation: none !important; }
  .card, .card .ico, .btn, .step .num { transition: none !important; }
}