/* ============================================================================
   Backup Logistics - motion
   ----------------------------------------------------------------------------
   Every animation here answers one of four questions, and nothing is animated
   because it looked nice:
     hierarchy   - the hero enters in reading order, so the eye lands on the
                   headline before the buttons
     storytelling- section content arrives as you reach it
     feedback    - a card lifts under the cursor so it reads as pressable
     state       - counters run once when their proof comes into view

   All of it is transform and opacity only, so it stays on the compositor.
   All of it collapses to static under prefers-reduced-motion, including the
   marquee and the counters. The audience opens this on mobile data in a cab.

   WHAT IS NOT IN HERE. The photograph motion - the frame settle, the sequence
   stagger, the lane marking draw - lives in site.css beside the photograph
   system it belongs to. Only five of the eleven pages load THIS file, and
   services, carriers and about, which carry most of the photography, are not
   among them. Anything that has to work on every page goes in site.css, with
   its own reduced-motion block. That rule was learned the expensive way when
   the theme-switch freeze sat in here and six pages stayed broken.
   ========================================================================= */

/* ---- hero entrance -----------------------------------------------------
   Runs once on load, staggered in reading order. No scroll involvement, so
   there is nothing to jank. */
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes revealImage {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}

.enter > * {
  animation: rise .7s var(--ease) both;
}
.enter > *:nth-child(1) { animation-delay: .05s; }
.enter > *:nth-child(2) { animation-delay: .15s; }
.enter > *:nth-child(3) { animation-delay: .25s; }
.enter > *:nth-child(4) { animation-delay: .35s; }

.enter-media { animation: revealImage 1s var(--ease) both; animation-delay: .1s; overflow: hidden; }
.enter-late  { animation: fade .8s var(--ease) both; animation-delay: .55s; }

/* ---- hover feedback ----------------------------------------------------- */
.lift {
  transition: transform var(--med) var(--ease),
              box-shadow var(--med) var(--ease),
              border-color var(--med) var(--ease);
}
@media (hover: hover) {
  .lift:hover { transform: translateY(-3px); box-shadow: var(--lift-3); border-color: var(--rule-strong); }
}

/* A photo tile that eases in slightly on hover. Contained by overflow:hidden
   on the tile, so nothing reflows. */
.zoom img { transition: transform .6s var(--ease); }
@media (hover: hover) {
  .zoom:hover img { transform: scale(1.045); }
}

/* ---- counters ----------------------------------------------------------
   The number is in the markup as real text, so it is correct with JS off and
   correct for a screen reader. The script only animates toward it. */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---- equipment marquee --------------------------------------------------
   ONE per site, on the home page only. It exists because the equipment list
   is breadth rather than detail, and a static list of eight items would take
   more vertical space than it deserves. Duplicated track for a seamless loop,
   aria-hidden on the copy so it is not read twice. */
.marquee {
  overflow: hidden; position: relative;
  border-block: 1px solid var(--rule);
  background: var(--surface);
  padding-block: var(--s5);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; width: max-content; gap: var(--s7);
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: var(--t-small); font-weight: 500; color: var(--ink-soft);
  white-space: nowrap;
}
.marquee-item::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- press feedback -----------------------------------------------------
   FEEDBACK, and specifically feedback for the half of this audience that has
   no cursor. Every hover state on the site is invisible on a phone, so a
   pressable surface that is not a .btn - a card that is a link, a tile, a row -
   gets the one acknowledgement a touch screen can give: it takes the press.
   1px, 90ms, gone. Anything more reads as a bug. */
.press { transition: transform 90ms var(--ease); }
.press:active { transform: translateY(1px) scale(.995); }

/* ---- link and button micro-feedback ------------------------------------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--on-dark-sheen), transparent);
  transform: translateX(-100%);
}
@media (hover: hover) {
  .btn-primary:hover::after { transform: translateX(100%); transition: transform .6s var(--ease); }
}

/* ---- the switch --------------------------------------------------------
   One block, everything off. Anything added above must be answered here. */
@media (prefers-reduced-motion: reduce) {
  .enter > *, .enter-media, .enter-late {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
  .marquee-track { animation: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .lift, .zoom img, .btn-primary::after { transition: none !important; }
  .lift:hover { transform: none !important; }
  .zoom:hover img { transform: none !important; }
  .btn-primary::after { display: none; }
  .press, .press:active { transition: none !important; transform: none !important; }
}