/* ==========================================================================
   Advantist Medical — motion
   Every effect is opt-in via data-anim="..." and only runs once the element
   scrolls into view. js/main.js adds .in-view. Anything here is switched off
   wholesale when the visitor asks for reduced motion.
   ========================================================================== */

[data-anim] {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-anim].in-view {
  opacity: 1;
  transform: none;
  filter: none;
}

/* --- fade ------------------------------------------------------------- */
[data-anim="fade"] {
  transform: none;
}

[data-anim="fade-up"] {
  transform: translateY(38px);
}

[data-anim="fade-down"] {
  transform: translateY(-32px);
}

/* --- slide ------------------------------------------------------------ */
[data-anim="slide-left"] {
  transform: translateX(-56px);
}

[data-anim="slide-right"] {
  transform: translateX(56px);
}

/* --- zoom / puff ------------------------------------------------------ */
[data-anim="zoom"] {
  transform: scale(0.9);
}

/* Puff: arrives large, soft and out of focus, then resolves. */
[data-anim="puff"] {
  transform: scale(1.28);
  filter: blur(9px);
}

/* --- fold ------------------------------------------------------------- */
[data-anim="fold"] {
  transform: perspective(1100px) rotateX(-72deg);
  transform-origin: top center;
}

/* --- bounce ----------------------------------------------------------- */
[data-anim="bounce"] {
  transform: translateY(30px);
}
[data-anim="bounce"].in-view {
  animation: anim-bounce 0.85s cubic-bezier(0.28, 1.4, 0.5, 1) both;
}
@keyframes anim-bounce {
  0% {
    transform: translateY(30px);
    opacity: 0;
  }
  55% {
    transform: translateY(-11px);
    opacity: 1;
  }
  78% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* --- explode ---------------------------------------------------------- */
/* Pieces arrive from a compressed centre and settle outward. Used once, on
   the clinical-domain set, where the parts really do belong to one whole. */
[data-anim="explode"] {
  transform: scale(0.55) rotate(-7deg);
}
[data-anim="explode"].in-view {
  animation: anim-explode 0.78s cubic-bezier(0.2, 1.25, 0.42, 1) both;
}
@keyframes anim-explode {
  0% {
    transform: scale(0.55) rotate(-7deg);
    opacity: 0;
  }
  62% {
    transform: scale(1.06) rotate(1.5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

/* --- highlight -------------------------------------------------------- */
/* A copper wash sweeps behind the phrase, then stays as a soft underlay. */
.hl {
  position: relative;
  display: inline;
  background-image: linear-gradient(
    to right,
    rgba(197, 144, 106, 0.32),
    rgba(197, 144, 106, 0.32)
  );
  background-repeat: no-repeat;
  background-size: 0% 42%;
  background-position: 0 82%;
  transition: background-size 0.85s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s;
  padding: 0 0.08em;
}
.hl.in-view {
  background-size: 100% 42%;
}

/* --- stagger ---------------------------------------------------------- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-stagger].in-view > * {
  opacity: 1;
  transform: none;
}

/* --- counters --------------------------------------------------------- */
.count-up {
  font-variant-numeric: tabular-nums;
}

/* --- pointer-reactive tilt -------------------------------------------- */
/* Applied to the ledger rails and gallery tiles; JS sets the CSS variables
   from the pointer position, so the surface leans toward the cursor. */
.tilt {
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg))
    translateZ(0);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform-style: preserve-3d;
}
.tilt.is-tracking {
  transition: transform 0.08s linear;
}

/* Magnetic pull on primary buttons — the button leans into an approaching
   cursor, so the click target feels sought rather than static. */
.magnetic {
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.22s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- pulse cue -------------------------------------------------------- */
.pulse-dot {
  position: relative;
}
.pulse-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1.5px solid var(--copper);
  opacity: 0;
  animation: anim-pulse 2.6s ease-out infinite;
}
@keyframes anim-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.6;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* --- accordion reveal ------------------------------------------------- */
.reveal-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal-panel > div {
  overflow: hidden;
}
.reveal-panel.is-open {
  grid-template-rows: 1fr;
}

/* ==========================================================================
   Reduced motion — everything resolves instantly, nothing is left hidden
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-anim],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hl {
    background-size: 100% 42% !important;
  }
  .hero-trace path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  .hero h1 .w {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tilt {
    transform: none !important;
  }
  .parallax-layer {
    transform: none !important;
  }
}

/* Safety net: if scripting is unavailable, show all animated content. */
.no-js [data-anim],
.no-js [data-stagger] > * {
  opacity: 1;
  transform: none;
  filter: none;
}
.no-js .hl {
  background-size: 100% 42%;
}