/* Hirondl sitewide micro-interactions (WC14, added 2026-06-14).
   Small, additive hover polish applied across every page. Loaded from each
   page's <head> AFTER its inline <style>, so the transition declarations here
   win on ties while only ADDING transform/shadow/underline (existing colour and
   background hovers are preserved). CSS only, no markup changes.

   Motion: every page already ships a global
   `@media (prefers-reduced-motion: reduce)` reset that collapses all
   transitions to ~0ms, so all of the movement below is automatically disabled
   for visitors who ask for reduced motion. The keyboard focus ring (a sky
   outline on :focus-visible) already shipped sitewide and is unchanged here. */

/* ── Solid buttons: a small lift and soft shadow on hover ── */
.btn-primary,
.form-submit,
.cs-gate-btn,
.cookie-btn-accept{
  transition:background .15s, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.btn-primary:hover,
.form-submit:hover,
.cs-gate-btn:hover,
.cookie-btn-accept:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(10,16,50,.28);
}
.btn-primary:active,
.form-submit:active,
.cs-gate-btn:active,
.cookie-btn-accept:active{
  transform:translateY(0);
  box-shadow:none;
}

/* ── Outline buttons: same lift, lighter shadow ── */
.btn-secondary{
  transition:border-color .15s, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.btn-secondary:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.btn-secondary:active{
  transform:translateY(0);
  box-shadow:none;
}

/* ── Content cards: lift, with a sky underline that grows in ──
   Note: on the index pages these same cards also carry the scroll-reveal
   class, whose `transform`/`transition` rules sit at (0,3,1)/(0,2,1). The
   `html.js`-prefixed selectors below match that specificity and win by source
   order (this file loads after each page's inline styles), so the hover lift
   and its timing are not swallowed by the reveal entrance. */
.blog-card,
.cs-rel-card,
html.js .blog-card,
html.js .cs-rel-card{
  position:relative;
  /* opacity .6s is kept so the scroll-reveal fade-in on these cards still
     plays; transform/box-shadow .25s drive the hover lift. */
  transition:opacity .6s ease, background .15s, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}
.blog-card::after,
.cs-rel-card::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;
  background:var(--sky);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.blog-card:hover,
.cs-rel-card:hover,
html.js .blog-card:hover,
html.js .cs-rel-card:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 36px rgba(10,16,50,.14);
}
.blog-card:hover::after,
.cs-rel-card:hover::after{
  transform:scaleX(1);
}

/* ── Navigation links: a sliding underline instead of a plain colour change.
   The current-page link (.active) keeps its underline shown. The filled
   "Book a call" CTA (.nav-cta) is excluded so it stays a button. ── */
.nav-links a:not(.nav-cta){
  position:relative;
}
.nav-links a:not(.nav-cta)::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-4px;
  height:2px;
  background:var(--sky);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after{
  transform:scaleX(1);
}
