/* Site-wide motion utilities: scroll fade-up, number counters, card hover-lift,
   step stroke-fill, and image glow-on-hover. Shared across all pages. */

@media (prefers-reduced-motion: no-preference) {
  .sm-fade-up {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
  }
  .sm-fade-up.sm-visible {
    opacity: 1;
    transform: none;
  }
}

/* Header logo: slow continuous spin in place around the vertical axis, like a
   globe turning (not a flat clock-hand rotation), desktop only. Respects
   prefers-reduced-motion. */
@keyframes baja-logo-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  .nav-logo {
    animation: baja-logo-spin 12s linear infinite;
  }
}

/* Soft color-fade hover for every pill-style button/link sitewide.
   Actual hover colors come from either the quick-hover custom-property
   pattern (--qh-bg/--qh-color/--qh-border) or a framework style-hover rule —
   this just guarantees the transition so the change eases instead of snaps. */
.pill-btn {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.dropdown-panel a {
  transition: background-color .25s ease, color .25s ease;
}
a {
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}

/* Smooth ease for FAQ / accordion-style drawers.
   Markup: <div class="sm-accordion" style="grid-template-rows:{{ 1fr-or-0fr }};"><div style="overflow:hidden;">content</div></div> */
.sm-accordion {
  display: grid;
  transition: grid-template-rows .35s cubic-bezier(.22,.61,.36,1);
}

/* Number counters: stable width while animating */
.sm-counter {
  font-variant-numeric: tabular-nums;
}

/* Generic card hover-lift: stroke darkens, card eases upward, reverses on unhover.
   Set --sm-hover-border on each element to its own darker stroke color. */
.sm-hover-card {
  transition: transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s ease, box-shadow .35s ease;
}
.sm-hover-card:hover {
  transform: translateY(-6px);
  border-color: var(--sm-hover-border, #9AA5AD);
}

/* Step-section top stroke: fills left-to-right on hover, reverses on unhover.
   Markup: <div class="sm-stroke-track"><div class="sm-stroke-bar"></div>...content</div> */
.sm-stroke-track {
  position: relative;
}
.sm-stroke-track > .sm-stroke-bar {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.sm-stroke-track:hover > .sm-stroke-bar,
.sm-stroke-track.sm-stroke-active > .sm-stroke-bar {
  transform: scaleX(1);
}

/* Soft glow-on-hover behind an image/badge.
   Markup: <div class="sm-glow-hover" style="position:relative;"><div class="sm-glow-hover-halo"></div><img ...></div> */
.sm-glow-hover-halo {
  position: absolute;
  inset: -14%;
  border-radius: inherit;
  background: radial-gradient(closest-side, var(--sm-glow-color, rgba(22,166,226,0.55)), transparent 72%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: 0;
}
.sm-glow-hover:hover .sm-glow-hover-halo {
  opacity: 1;
}
.sm-glow-hover > img,
.sm-glow-hover > *:not(.sm-glow-hover-halo) {
  position: relative;
  z-index: 1;
}