/* The Haveio motion signature, shared across every marketing page.
   Same recipe as the portal (app.haveio.co.uk): opacity + a little blur +
   a very small scale — never a slide, never a bounce. Movement (translate)
   is reserved for cases where it's spatially meaningful. One easing curve
   everywhere. See app/src/components/motion/tokens.ts for the React
   equivalent of these exact numbers. */

:root {
  --hv-ease: cubic-bezier(.16, 1, .3, 1);
  --hv-dur-micro: .15s;    /* hover, focus, press */
  --hv-dur-standard: .2s;  /* dropdowns, tab/content swaps */
  --hv-dur-entrance: .4s;  /* a card or section entering the page */
  --hv-dur-hero: .7s;      /* the one or two largest elements above the fold */
}

.hv-reading-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 100;
  pointer-events: none;
  background: linear-gradient(90deg, #00866f, #00c7a3);
  transform: scaleX(0);
  transform-origin: left;
}

.hv-btn:focus-visible, summary:focus-visible, [data-nav-toggle]:focus-visible {
  outline: 2px solid #00c7a3;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  .hv-hero-copy h1 { animation: hv-rise .8s var(--hv-ease) both; }
  .hv-hero-copy > p { animation: hv-rise .8s .12s var(--hv-ease) both; }
  .hv-hero-copy .hv-btn { animation: hv-rise .8s .22s var(--hv-ease) both; }
  .hv-journey2-stage.hv-motion-seen::before { animation: hv-node-highlight 1.2s var(--hv-ease); }
  .hv-benefit, .hv-journey2-stage { transition: transform .3s var(--hv-ease), border-color .3s var(--hv-ease), box-shadow .3s var(--hv-ease); }
  @media (hover: hover) and (pointer: fine) {
    .hv-benefit:hover, .hv-journey2-stage:hover { transform: translateY(-6px); border-color: #00c7a3; box-shadow: 0 12px 28px rgba(0,134,111,.12); }
    .hv-nav-links a { position: relative; }
    .hv-nav-links a::after { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 2px; background: #00c7a3; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--hv-ease); }
    .hv-nav-links a:hover::after, .hv-nav-links a:focus-visible::after { transform: scaleX(1); }
  }
  .hv-btn { transition: transform .22s var(--hv-ease), box-shadow .22s var(--hv-ease), background .22s var(--hv-ease); }
  .hv-btn:hover { transform: translateY(-4px); }
  .hv-btn span[aria-hidden="true"] { display: inline-block; transition: transform .22s var(--hv-ease); }
  .hv-btn:hover span[aria-hidden="true"] { transform: translateX(4px); }
  .hv-btn:active { transform: scale(.98); }
  .hv-nav-menu.is-open { animation: hv-fade-in .18s var(--hv-ease) both; }
  details[open] > :not(summary) { animation: hv-fade-in .2s var(--hv-ease) both; }
}

@keyframes hv-node-highlight {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,199,163,0); }
  45% { box-shadow: 0 0 0 9px rgba(0,199,163,.2); }
}

@media (hover: hover) and (pointer: fine) {
  .hv-footer-col a { transition: color .15s var(--hv-ease); }
  .hv-footer-col a:hover { color: #00c7a3; }
}

@keyframes hv-fade-in {
  from { opacity: 0; filter: blur(6px); }
  to   { opacity: 1; filter: blur(0); }
}

/* The default reveal-on-scroll / page-entrance recipe: fade + subtle
   blur-in + a very small scale change. Used by site-motion.js's reveal()
   and directly via class for static entrances. */
@keyframes hv-content-in {
  from { opacity: 0; filter: blur(6px); transform: scale(.985); }
  to   { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* For the handful of hero-level elements where a little lift reads as
   more confident than a pure fade — kept small (14px, not 26+) per the
   "no huge movements" rule. */
@keyframes hv-rise {
  from { opacity: 0; filter: blur(6px); transform: translateY(14px) scale(.99); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

.hv-fade-in { animation: hv-fade-in var(--hv-dur-entrance) var(--hv-ease) both; }
.hv-content-in { animation: hv-content-in var(--hv-dur-entrance) var(--hv-ease) both; }
.hv-rise { animation: hv-rise var(--hv-dur-hero) var(--hv-ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}