/* ==========================================================================
   VetAssistant — motion & polish layer
   Scroll-driven: almost every effect is triggered by the viewport, not by
   the pointer. Hover is kept only where it is real UX feedback (buttons,
   controls, inputs).
   Additive only: reuses the existing brand tokens from styles-*.css
   (--primary, --primary-glow, --accent, --brand-amber, --gradient-*).
   No brand colour is redefined here.
   ========================================================================== */

:root {
  --va-ease: cubic-bezier(.22, 1, .36, 1);
  --va-ease-soft: cubic-bezier(.4, 0, .2, 1);
  --va-primary-10: color-mix(in oklab, var(--primary) 10%, transparent);
  --va-primary-18: color-mix(in oklab, var(--primary) 18%, transparent);
  --va-primary-35: color-mix(in oklab, var(--primary) 35%, transparent);
  --va-glow-soft: 0 18px 44px -24px color-mix(in oklab, var(--primary) 55%, transparent);
  --va-glow-strong: 0 30px 70px -30px color-mix(in oklab, var(--primary) 70%, transparent);
}

/* --------------------------------------------------------------------------
   1. Scroll reveal
   Hidden only when JS is running (html.va-js), so no-JS users see everything.
   Variants: (default) rise · left · right · zoom · fade
   -------------------------------------------------------------------------- */
html.va-js [data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .8s var(--va-ease),
    transform .8s var(--va-ease);
}

html.va-js [data-reveal="left"]  { transform: translateX(-38px); }
html.va-js [data-reveal="right"] { transform: translateX(38px); }
html.va-js [data-reveal="zoom"]  { transform: scale(.93) translateY(22px); }

html.va-js [data-reveal].va-in {
  opacity: 1;
  transform: none;
}

/* "fade" reveals opacity only, so the transform stays free for parallax.
   Declared after .va-in so it keeps ownership of `transform` throughout. */
html.va-js [data-reveal="fade"],
html.va-js [data-reveal="fade"].va-in {
  transform: translate3d(0, var(--va-py, 0px), 0);
  transition: opacity .8s var(--va-ease);
}

/* --------------------------------------------------------------------------
   2. Parallax
   JS writes --va-py on each [data-parallax] element every animation frame.
   These elements never transition `transform`, so the motion tracks the
   scroll exactly instead of lagging behind an easing curve.
   -------------------------------------------------------------------------- */
[data-parallax] {
  transform: translate3d(0, var(--va-py, 0px), 0);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   3. Sticky header + reading progress
   -------------------------------------------------------------------------- */
.va-header {
  transition:
    box-shadow .4s var(--va-ease-soft),
    background-color .4s var(--va-ease-soft);
}

.va-header > div {
  transition: padding .35s var(--va-ease-soft);
}

.va-header.is-scrolled {
  box-shadow: 0 10px 30px -22px color-mix(in oklab, var(--primary) 65%, transparent);
  background-color: color-mix(in oklab, var(--background) 94%, transparent);
}

.va-header.is-scrolled > div {
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Header nav + CTA are styled here directly rather than through Tailwind
   utility classes: this stylesheet is a pre-compiled, purged bundle that
   only ships the exact classes the original build used (e.g. it has no
   `gap-6`), so ad-hoc utility classes added later can silently do nothing. */
.va-nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
}

/* 5 nav items no longer fit next to the logo + CTA below desktop widths
   (they measure wider than the header at 640–1023px and would wrap or
   force horizontal scroll), so the inline nav only appears at lg and the
   hamburger below handles every narrower width, phone included. */
@media (min-width: 1024px) {
  .va-nav { display: flex; }
}

.va-nav a {
  position: relative;
  padding-block: .3rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--secondary-foreground);
  text-decoration: none;
  transition: color .25s var(--va-ease-soft);
}

.va-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -1px;
  height: 2px;
  border-radius: 999px;
  background: var(--gradient-primary);
  transition: right .3s var(--va-ease-soft);
}

.va-nav a:hover { color: var(--foreground); }

.va-nav a:hover::after,
.va-nav a:focus-visible::after {
  right: 0;
}

/* --------------------------------------------------------------------------
   3b. Mobile / tablet menu (hamburger) — below the 1024px breakpoint above
   -------------------------------------------------------------------------- */
.va-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: .6rem;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
  transition: background-color .2s var(--va-ease-soft);
}

.va-menu-toggle:hover { background-color: var(--secondary); }

@media (min-width: 1024px) {
  .va-menu-toggle { display: none; }
}

.va-menu-toggle svg { pointer-events: none; }
.va-menu-toggle .va-icon-close { display: none; }
.va-header.is-menu-open .va-menu-toggle .va-icon-open { display: none; }
.va-header.is-menu-open .va-menu-toggle .va-icon-close { display: block; }

@media (max-width: 1023.98px) {
  .va-header.is-menu-open .va-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px -28px color-mix(in oklab, var(--primary) 55%, transparent);
    padding: .25rem 1.25rem .75rem;
  }

  .va-header.is-menu-open .va-nav a {
    padding-block: .8rem;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  }

  .va-header.is-menu-open .va-nav a:last-child {
    border-bottom: none;
  }

  .va-header.is-menu-open .va-nav a::after {
    display: none;
  }
}

.va-header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  height: 2rem;
  padding-inline: .9rem;
  border-radius: .6rem;
  background: var(--gradient-primary);
  color: var(--primary-foreground);
  font-size: .75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-elegant);
  transition: opacity .25s var(--va-ease-soft), transform .2s var(--va-ease-soft);
}

.va-header-cta:hover {
  opacity: .9;
  transform: translateY(-1px);
}

.va-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background-image: var(--gradient-primary);
  z-index: 60;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */
.va-hero {
  position: relative;
  overflow: hidden;
  background-size: 220% 220%;
  animation: va-gradient-drift 22s var(--va-ease-soft) infinite;
}

@keyframes va-gradient-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.va-hero > div:not(.va-orbs) {
  position: relative;
  z-index: 1;
}

/* Blurred orbs: the wrapper is parallaxed, the orbs drift inside it. */
.va-orbs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.va-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  opacity: .5;
}

.va-orb-1 {
  width: 26rem; height: 26rem;
  top: -8rem; left: -6rem;
  background: radial-gradient(circle at 30% 30%,
    color-mix(in oklab, var(--primary-glow) 55%, transparent), transparent 70%);
  animation: va-float-a 18s ease-in-out infinite;
}

.va-orb-2 {
  width: 20rem; height: 20rem;
  right: -4rem; bottom: -6rem;
  background: radial-gradient(circle at 60% 40%,
    color-mix(in oklab, var(--accent) 75%, transparent), transparent 70%);
  animation: va-float-b 24s ease-in-out infinite;
}

.va-orb-3 {
  width: 14rem; height: 14rem;
  top: 40%; left: 45%;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in oklab, var(--brand-amber) 30%, transparent), transparent 70%);
  opacity: .28;
  animation: va-float-a 30s ease-in-out infinite reverse;
}

@keyframes va-float-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(3rem, 2rem, 0) scale(1.12); }
}

@keyframes va-float-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); }
  50%      { transform: translate3d(-2.5rem, -2rem, 0) scale(.95); }
}

/* Staggered entrance for the hero copy (the one on-load animation — it is
   above the fold, so there is no scroll to trigger it). */
html.va-js .va-hero-copy > * {
  opacity: 0;
  animation: va-rise .9s var(--va-ease) forwards;
}

html.va-js .va-hero-copy > *:nth-child(1) { animation-delay: .05s; }
html.va-js .va-hero-copy > *:nth-child(2) { animation-delay: .16s; }
html.va-js .va-hero-copy > *:nth-child(3) { animation-delay: .27s; }
html.va-js .va-hero-copy > *:nth-child(4) { animation-delay: .38s; }
html.va-js .va-hero-copy > *:nth-child(5) { animation-delay: .49s; }

@keyframes va-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes va-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}

/* Badge — gentle pulse ring */
.va-hero-copy > span:first-child {
  position: relative;
  box-shadow: 0 0 0 0 var(--va-primary-35);
}

html.va-js .va-hero-copy > span:first-child {
  animation: va-rise .9s var(--va-ease) forwards, va-badge-pulse 3.4s ease-out infinite;
  animation-delay: .05s, 1.2s;
}

@keyframes va-badge-pulse {
  0%        { box-shadow: 0 0 0 0 var(--va-primary-35); }
  60%, 100% { box-shadow: 0 0 0 14px transparent; }
}

/* Animated gradient wordmark */
.text-gradient {
  background-image: linear-gradient(
    100deg,
    var(--primary) 0%,
    var(--primary-glow) 35%,
    var(--primary) 60%,
    var(--primary-glow) 100%
  );
  background-size: 220% 100%;
  animation: va-sheen 7s linear infinite;
}

@keyframes va-sheen {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}

/* Hero visual */
html.va-js .va-hero-visual {
  opacity: 0;
  animation: va-rise-zoom 1.1s var(--va-ease) .25s forwards;
}

@keyframes va-rise-zoom {
  from { opacity: 0; transform: translateY(34px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Window dots blink in sequence */
.va-hero-visual span.rounded-full { animation: va-dot 3.6s ease-in-out infinite; }
.va-hero-visual span.rounded-full:nth-of-type(2) { animation-delay: .3s; }
.va-hero-visual span.rounded-full:nth-of-type(3) { animation-delay: .6s; }

@keyframes va-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* Timeline rows in the mock card slide in one after another */
html.va-js .va-hero-visual ul > li {
  opacity: 0;
  animation: va-slide-in .7s var(--va-ease) forwards;
}

html.va-js .va-hero-visual ul > li:nth-child(1) { animation-delay: .95s; }
html.va-js .va-hero-visual ul > li:nth-child(2) { animation-delay: 1.1s; }
html.va-js .va-hero-visual ul > li:nth-child(3) { animation-delay: 1.25s; }
html.va-js .va-hero-visual ul > li:nth-child(4) { animation-delay: 1.4s; }

@keyframes va-slide-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}

/* Paw avatar in the mock card */
.va-hero-visual .bg-primary-gradient svg {
  animation: va-paw 5s ease-in-out 2s infinite;
  transform-origin: 50% 70%;
}

@keyframes va-paw {
  0%, 88%, 100% { transform: rotate(0); }
  92%           { transform: rotate(-10deg) scale(1.08); }
  96%           { transform: rotate(8deg) scale(1.08); }
}

/* Counters tick up when they scroll into view — keep the numbers from
   reflowing their row while they run. */
[data-count] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. Buttons — the one place hover still earns its keep
   -------------------------------------------------------------------------- */
a.bg-primary-gradient,
button.bg-primary-gradient {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-size: 160% 100%;
  transition:
    transform .35s var(--va-ease),
    box-shadow .35s var(--va-ease),
    background-position .6s var(--va-ease),
    opacity .3s var(--va-ease-soft);
}

a.bg-primary-gradient::after,
button.bg-primary-gradient::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-18deg);
  transition: transform .75s var(--va-ease);
  pointer-events: none;
  z-index: -1;
}

a.bg-primary-gradient:hover,
button.bg-primary-gradient:hover:not(:disabled) {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: var(--va-glow-strong);
}

a.bg-primary-gradient:hover::after,
button.bg-primary-gradient:hover:not(:disabled)::after {
  transform: translateX(360%) skewX(-18deg);
}

a.bg-primary-gradient:active,
button.bg-primary-gradient:active:not(:disabled) {
  transform: translateY(0) scale(.985);
}

button.bg-primary-gradient:disabled { transform: none; }

a.border-input {
  transition:
    transform .35s var(--va-ease),
    box-shadow .35s var(--va-ease),
    border-color .35s var(--va-ease);
}

a.border-input:hover {
  transform: translateY(-2px);
  border-color: var(--va-primary-35);
  box-shadow: var(--va-glow-soft);
}

/* --------------------------------------------------------------------------
   6. Cards — everything happens as they enter the viewport
   -------------------------------------------------------------------------- */
.va-card {
  position: relative;
  transition: box-shadow .5s var(--va-ease);
}

/* Gradient hairline that sweeps in and fades out as the card arrives —
   only where masking is supported, otherwise it would flood the card. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .va-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, var(--primary), var(--primary-glow), transparent 65%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
  }

  html.va-js .va-card.va-in::before {
    animation: va-ring 1.5s var(--va-ease) .15s both;
  }
}

@keyframes va-ring {
  0%   { opacity: 0; }
  35%  { opacity: .95; }
  100% { opacity: 0; }
}

/* Diagonal light sweep across the card on entry */
.va-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 35%, var(--va-primary-18) 50%, transparent 65%);
  background-size: 300% 100%;
  background-position: 120% 0;
  opacity: 0;
  pointer-events: none;
}

html.va-js .va-feature.va-in::after {
  animation: va-wash 1.4s var(--va-ease) .2s both;
}

@keyframes va-wash {
  0%   { opacity: 0; background-position: 120% 0; }
  25%  { opacity: 1; }
  100% { opacity: 0; background-position: -60% 0; }
}

/* Card icons pop in behind the card itself */
html.va-js .va-card[data-reveal] > svg,
html.va-js .va-card[data-reveal] > span:first-child {
  opacity: 0;
  transform: scale(.6) rotate(-14deg);
  transition:
    opacity .6s var(--va-ease) .12s,
    transform .7s var(--va-ease) .12s;
}

html.va-js .va-card.va-in > svg,
html.va-js .va-card.va-in > span:first-child {
  opacity: 1;
  transform: none;
}

/* Testimonial avatars pop the same way */
html.va-js .va-quote figcaption > span:first-child {
  opacity: 0;
  transform: scale(.5);
  transition:
    opacity .6s var(--va-ease) .25s,
    transform .7s var(--va-ease) .25s;
}

html.va-js .va-quote.va-in figcaption > span:first-child {
  opacity: 1;
  transform: none;
}

/* A card only reacts to the pointer with a soft shadow — no movement. */
.va-card:hover { box-shadow: var(--va-glow-soft); }

/* --------------------------------------------------------------------------
   7. Checklists — items arrive one by one, the ticks draw themselves
   -------------------------------------------------------------------------- */
html.va-js .va-checklist > li svg path,
html.va-js .va-demo-list > li svg path {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
}

html.va-js .va-checklist > li.va-in svg path,
html.va-js .va-demo-list > li.va-in svg path {
  animation: va-draw .55s var(--va-ease-soft) .2s forwards;
}

@keyframes va-draw {
  to { stroke-dashoffset: 0; }
}

html.va-js .va-checklist > li > span:first-child {
  transform: scale(.6);
  transition: transform .6s var(--va-ease) .1s;
}

html.va-js .va-checklist > li.va-in > span:first-child {
  transform: none;
}

.va-media { overflow: hidden; }

/* --------------------------------------------------------------------------
   8. Demo panel & form
   -------------------------------------------------------------------------- */
.va-demo-card {
  position: relative;
  overflow: hidden;
  background-size: 200% 200%;
  animation: va-gradient-drift 26s var(--va-ease-soft) infinite;
}

.va-demo-card > div { position: relative; z-index: 1; }

.va-demo-card input {
  transition:
    border-color .3s var(--va-ease-soft),
    box-shadow .3s var(--va-ease-soft);
}

.va-demo-card input:focus {
  border-color: var(--va-primary-35);
  box-shadow: 0 0 0 4px var(--va-primary-10);
}

.va-demo-card label {
  display: inline-block;
  transition: color .3s var(--va-ease-soft);
}

.va-demo-card .grid > div:focus-within > label { color: var(--primary); }

#demo-form-message:not([hidden]) {
  animation: va-rise .5s var(--va-ease) both;
}

/* --------------------------------------------------------------------------
   9. FAQ accordion — real height animation
   -------------------------------------------------------------------------- */
html.va-js .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  transition:
    grid-template-rows .45s var(--va-ease),
    opacity .35s var(--va-ease-soft);
}

html.va-js .faq-panel > * { min-height: 0; }

html.va-js .faq-item.is-open .faq-panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.faq-trigger {
  text-decoration: none !important;
  transition: color .3s var(--va-ease-soft);
}

.faq-trigger:hover,
.faq-item.is-open .faq-trigger { color: var(--primary); }

.faq-trigger svg {
  transition: transform .45s var(--va-ease) !important;
}

.faq-item.is-open .faq-trigger svg { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   10. Back-to-top
   -------------------------------------------------------------------------- */
.va-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.9rem;
  width: 2.9rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  color: var(--primary-foreground);
  background-image: var(--gradient-primary);
  box-shadow: var(--va-glow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition:
    opacity .4s var(--va-ease),
    transform .4s var(--va-ease),
    visibility .4s,
    box-shadow .4s var(--va-ease);
}

.va-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.va-top:hover { box-shadow: var(--va-glow-strong); }

.va-top svg { display: block; }

/* --------------------------------------------------------------------------
   11. Section headings draw their own underline on arrival
   -------------------------------------------------------------------------- */
.va-title {
  position: relative;
  padding-bottom: .65rem;
}

.va-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 3.5rem;
  border-radius: 999px;
  background-image: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .8s var(--va-ease) .3s;
}

html:not(.va-js) .va-title::after,
.va-title.va-in::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   12. Respect the user's motion preference
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Motion is reduced, not removed. Content still animates in as you scroll —
     but only by fading. Nothing travels across the screen, nothing parallaxes
     and nothing loops forever. */

  html.va-js [data-reveal] {
    transform: none !important;
    transition: opacity .6s ease !important;
  }

  /* Keyframed entrances become plain fades, keeping their stagger delays. */
  html.va-js .va-hero-copy > *,
  html.va-js .va-hero-visual,
  html.va-js .va-hero-visual ul > li {
    animation-name: va-fade !important;
  }

  html.va-js .va-hero-copy > span:first-child {
    animation-name: va-fade !important;
  }

  /* Icon and avatar pops keep the fade, drop the scale/rotate. */
  html.va-js .va-card[data-reveal] > svg,
  html.va-js .va-card[data-reveal] > span:first-child,
  html.va-js .va-quote figcaption > span:first-child,
  html.va-js .va-checklist > li > span:first-child {
    transform: none !important;
    transition: opacity .6s var(--va-ease) .12s !important;
  }

  /* No parallax, no ambient drift, no infinite loops. */
  [data-parallax] { transform: none !important; }

  .va-hero,
  .va-demo-card,
  .va-orb,
  .va-hero-visual span.rounded-full,
  .va-hero-visual .bg-primary-gradient svg,
  .text-gradient,
  .va-feature::after,
  a.bg-primary-gradient::after,
  button.bg-primary-gradient::after {
    animation: none !important;
  }

  /* Hover/press feedback stops moving the button. */
  a.bg-primary-gradient:hover,
  button.bg-primary-gradient:hover:not(:disabled),
  a.bg-primary-gradient:active,
  button.bg-primary-gradient:active:not(:disabled),
  a.border-input:hover {
    transform: none;
  }
}