/* Qualivision Services — micro-interactions and motion.
   Loaded on every page after the page stylesheets. Resting appearance is unchanged:
   everything here is a hover/focus/scroll state. Motion uses the individual
   `translate` / `scale` properties so it composes with existing `transform` rules.
   All motion is disabled for visitors who prefer reduced motion (end of file). */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Buttons & links ---------- */
.button {
  transition: translate .25s var(--ease-out), box-shadow .25s var(--ease-out), filter .25s, background-color .25s, color .25s;
}
.button .icon,
.text-link .icon {
  transition: translate .25s var(--ease-out);
}
.button:active {
  scale: .98;
}
.text-link {
  transition: color .2s;
}

/* Header navigation: the active underline grows in on hover for the other items. */
.main-nav a {
  transition: color .2s;
}
.main-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--teal);
  scale: 0 1;
  transition: scale .3s var(--ease-out);
}
.main-nav .active::after {
  scale: 1 1;
}

/* ---------- Cards, icons, steps ---------- */
.service-card {
  transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.service-photo {
  transition: scale .6s var(--ease-out);
}
.service-icon .icon {
  transition: scale .35s var(--ease-out);
}
.value > .icon,
.stat > .icon,
.step-icon,
.steps h3 span {
  transition: translate .3s var(--ease-out), scale .3s var(--ease-out);
}
.client-logos img {
  transition: scale .3s var(--ease-out), opacity .3s;
}

/* ---------- Footer ---------- */
.footer-column > a,
.social-links a,
.back-top {
  transition: color .2s, background-color .2s, border-color .2s, translate .25s var(--ease-out), box-shadow .25s;
}

/* Hover effects only for devices with a real pointer (no sticky hover on touch). */
@media (hover: hover) and (pointer: fine) {
  .button:hover {
    translate: 0 -2px;
    box-shadow: 0 10px 22px rgb(0 169 189 / 28%);
    filter: brightness(1.05);
  }
  .button:hover .icon,
  .text-link:hover .icon {
    translate: 4px 0;
  }
  .button-outline:hover {
    background-color: rgb(0 169 189 / 14%);
    box-shadow: 0 10px 22px rgb(0 35 50 / 18%);
  }
  .text-link:hover {
    color: var(--navy);
  }
  .main-nav a:hover {
    color: var(--teal-ink);
  }
  .main-nav a:hover::after {
    scale: 1 1;
  }

  .service-card:hover {
    translate: 0 -6px;
    box-shadow: 0 18px 38px rgb(14 48 70 / 14%);
    border-color: #cfe4ec;
  }
  .service-card:hover .service-photo {
    scale: 1.06;
  }
  .service-card:hover .service-icon .icon {
    scale: 1.1;
  }
  .value:hover > .icon,
  .stat:hover > .icon,
  .steps li:hover .step-icon {
    translate: 0 -5px;
  }
  .steps li:hover h3 span {
    scale: 1.1;
  }
  .client-logos img:hover {
    scale: 1.08;
  }

  .footer-column > a:hover {
    color: var(--cyan);
  }
  .social-links a:hover {
    background-color: var(--teal);
    border-color: var(--teal);
    color: white;
    translate: 0 -3px;
  }
  .back-top:hover {
    translate: 0 -4px;
    box-shadow: 0 10px 22px rgb(0 0 0 / 25%);
  }
}

/* ---------- Hero entrance (pure CSS: runs with or without JavaScript) ---------- */
@keyframes qv-rise {
  from { opacity: 0; translate: 0 26px; }
  to   { opacity: 1; translate: none; }
}
@keyframes qv-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
main > section:first-of-type :has(> h1) > * {
  animation: qv-rise .9s var(--ease-out) both;
}
main > section:first-of-type :has(> h1) > :nth-child(2) { animation-delay: .1s; }
main > section:first-of-type :has(> h1) > :nth-child(3) { animation-delay: .2s; }
main > section:first-of-type :has(> h1) > :nth-child(n+4) { animation-delay: .3s; }
main > section:first-of-type :is([class*="hero-keywords"], [class*="hero-statement"]) {
  animation: qv-fade 1.2s .45s ease-out both;
}

/* ---------- Scroll reveal (classes added by Assets/js/main.js) ---------- */
.reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .8s var(--ease-out), translate .8s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  translate: none;
}

/* ---------- Reading progress bar & floating back-to-top (added by JS) ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--cyan));
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
.to-top {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 90;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--teal-ink);
  color: white;
  box-shadow: 0 8px 20px rgb(0 35 50 / 25%);
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity .3s, visibility .3s, translate .3s var(--ease-out), background-color .2s;
}
/* M15: the button floats over light AND dark sections: a white halo inside the ring keeps it >= 3:1 everywhere. */
.to-top:focus-visible {
  outline-offset: 3px;
  box-shadow: 0 0 0 3px white, 0 8px 20px rgb(0 35 50 / 25%);
}
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  translate: none;
}
.to-top .icon {
  width: 22px;
  height: 22px;
  rotate: -90deg;
}
@media (hover: hover) and (pointer: fine) {
  .to-top:hover {
    background-color: var(--navy);
  }
}
@media (max-width: 600px) {
  .to-top {
    width: 42px;
    height: 42px;
  }
}

/* ---------- Accessibility & print ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal {
    opacity: 1;
    translate: none;
  }
  .service-card:hover,
  .service-card:hover .service-photo {
    translate: none;
    scale: none;
  }
}
@media print {
  .reveal { opacity: 1; translate: none; }
  .scroll-progress, .to-top { display: none; }
}