/* ============================================================
   EAGLES TEAM — Motion layer
   Loads AFTER style.css + tweaks-overrides.css so it overrides
   the old static carriers row and adds page motion.
   Built on the tokens in colors_and_type.css.
   Sections:  1) Carriers marquee   2) Hero load sequence
              3) Scroll reveals      4) Reduced-motion fallbacks
   ============================================================ */

/* ============================================================
   1) CARRIERS MARQUEE
   ============================================================ */
.carriers-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* feather both edges so logos dissolve instead of hard-cutting */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* The belt: two identical sets side-by-side; translate -50% (one full
   set) for a seamless, jump-free loop. */
.carriers-track {
  display: flex;
  width: max-content;
  animation: carriers-scroll 50s linear infinite;
  will-change: transform;
}
.carriers-marquee:hover .carriers-track,
.carriers-marquee:focus-within .carriers-track {
  animation-play-state: paused;
}

.carriers-set {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding-right: clamp(40px, 5vw, 72px); /* matches inner gap so the loop point stays exact */
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.carriers-set li { display: flex; align-items: center; }

.carriers-set img {
  height: 132px;
  width: 132px;          /* logos are square (580x580) */
  flex: none;
  object-fit: contain;
  opacity: 0.85;
  transition: transform var(--dur-3) var(--ease-soar),
              opacity   var(--dur-2) var(--ease-out),
              filter    var(--dur-2) var(--ease-out);
}
.carriers-set img:hover {
  opacity: 1;
  filter: brightness(1.08);
  transform: translateY(-6px) scale(1.06);
}

@keyframes carriers-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (max-width: 1024px) {
  .carriers-set img { height: 108px; width: 108px; }
}
@media (max-width: 640px) {
  .carriers-set img { height: 84px; width: 84px; }
  .carriers-track { animation-duration: 38s; }
}

/* ============================================================
   2) HERO LOAD SEQUENCE
   Staggered rise on first paint. Pure CSS — no JS dependency,
   so it can't flash or stall.
   ============================================================ */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.hero-eyebrow,
.hero-headline,
.hero-lead,
.hero-ctas,
.hero-strip {
  animation: hero-rise var(--dur-4) var(--ease-soar) both;
}
.hero-eyebrow  { animation-delay: 60ms;  }
.hero-headline { animation-delay: 160ms; }
.hero-lead     { animation-delay: 300ms; }
.hero-ctas     { animation-delay: 440ms; }
.hero-strip    { animation-delay: 580ms; }

/* ============================================================
   3) SCROLL REVEALS
   .reveal-up    — element fades + rises once when scrolled into view
   .reveal-stagger — its direct children rise in sequence
   JS adds .is-visible via IntersectionObserver.
   ============================================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity   var(--dur-4) var(--ease-soar),
              transform var(--dur-4) var(--ease-soar);
  will-change: opacity, transform;
}
.reveal-up.is-visible { opacity: 1; transform: none; }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity   var(--dur-4) var(--ease-soar),
              transform var(--dur-4) var(--ease-soar);
  will-change: opacity, transform;
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms;   }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms;  }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }

/* ============================================================
   4) REDUCED-MOTION FALLBACKS
   Everything resolves to its final, fully-visible state with no
   movement. The marquee becomes a tidy centered grid.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .carriers-marquee {
    overflow: visible;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .carriers-track {
    animation: none;
    transform: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
  .carriers-set[aria-hidden="true"] { display: none; }
  .carriers-set {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--s-6);
    padding-right: 0;
  }
  .carriers-set img,
  .carriers-set img:hover { transition: none; transform: none; }

  .hero-eyebrow, .hero-headline, .hero-lead, .hero-ctas, .hero-strip { animation: none; }

  .reveal-up,
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   5) WEEKLY GROSS RESULT CARDS  (/results/)
   ============================================================ */
.wg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}
.wg-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-1);
}
.wg-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.wg-driver { font-weight: 700; color: var(--eagle-green); font-size: var(--fs-18); }
.wg-badge {
  font-size: var(--fs-12); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-deep);
  background: rgba(201,168,76,0.16); padding: 5px 12px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.wg-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 22px; }
.wg-stat { background: var(--bg-muted); border-radius: var(--r-md); padding: 16px; }
.wg-stat.is-gross { grid-column: 1 / -1; border: 1px solid var(--border-accent); background: rgba(201,168,76,0.08); }
.wg-num {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-30);
  line-height: 1; color: var(--eagle-green); letter-spacing: -0.01em;
}
.wg-stat.is-gross .wg-num { font-size: var(--fs-36); }
.wg-num .unit { color: var(--eagles-gold); font-size: 0.7em; }
.wg-label {
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-secondary); margin-top: 10px; font-weight: 700;
}
.wg-trips-title {
  font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--fg-secondary); font-weight: 700; margin: 0 0 4px;
}
.wg-trip {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-14);
}
.wg-trip:last-child { border-bottom: none; }
.wg-trip-lane { color: var(--stone-700); font-weight: 600; }
.wg-trip-meta { color: var(--fg-secondary); white-space: nowrap; }
.wg-trip-amt { font-weight: 700; color: var(--eagle-green); white-space: nowrap; margin-left: auto; }
.wg-foot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  font-size: var(--fs-13); color: var(--fg-secondary);
}
@media (max-width: 420px) { .wg-stats { grid-template-columns: 1fr; } }

/* ============================================================
   6) MICRO-INTERACTIONS
   Subtle hover lifts on cards, icon nudges, animated underlines.
   ============================================================ */
.get-card,
.result-card,
.system-step,
.how-step {
  transition: transform var(--dur-3) var(--ease-soar),
              box-shadow var(--dur-3) var(--ease-soar),
              border-color var(--dur-2) var(--ease-out);
}
.get-card:hover,
.result-card:hover,
.system-step:hover,
.how-step:hover {
  transform: translateY(-4px);
}
.result-card:hover {
  border-color: rgba(255,255,255,0.28);
  box-shadow: 0 16px 40px -16px rgba(0,0,0,0.5);
}

.system-step-icon,
.how-step-icon {
  transition: transform var(--dur-2) var(--ease-soar);
}
.system-step:hover .system-step-icon,
.how-step:hover .how-step-icon {
  transform: scale(1.1);
}

.btn .lucide {
  transition: transform var(--dur-2) var(--ease-soar);
}
.btn:hover .lucide {
  transform: translateX(3px);
}

.nav-links a,
.footer-list a {
  position: relative;
}
.nav-links a::after,
.footer-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transition: right var(--dur-3) var(--ease-soar);
}
.nav-links a:hover::after,
.footer-list a:hover::after {
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .get-card, .result-card, .system-step, .how-step,
  .system-step-icon, .how-step-icon, .btn .lucide,
  .nav-links a::after, .footer-list a::after {
    transition: none;
  }
  .get-card:hover, .result-card:hover, .system-step:hover, .how-step:hover,
  .system-step:hover .system-step-icon, .how-step:hover .how-step-icon,
  .btn:hover .lucide {
    transform: none;
  }
}

/* ============================================================
   7) CUSTOM CURSOR
   Dot snaps to the pointer; ring trails with easing. Disabled
   entirely on touch/coarse pointers and prefers-reduced-motion
   (see eagles-cursor.js — it bails before adding any DOM/class).
   ============================================================ */
.eagles-cursor-dot,
.eagles-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(var(--x, -100px), var(--y, -100px), 0) translate(-50%, -50%) scale(var(--cursor-scale, 1));
}
.eagles-cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--eagles-gold);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-soar);
  --cursor-scale: 1;
}
.eagles-cursor-ring {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(201, 168, 76, 0.5);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-soar),
              border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
  --cursor-scale: 1;
}
html.has-custom-cursor .eagles-cursor-dot,
html.has-custom-cursor .eagles-cursor-ring {
  opacity: 1;
}
html.has-custom-cursor.is-cursor-hidden .eagles-cursor-dot,
html.has-custom-cursor.is-cursor-hidden .eagles-cursor-ring {
  opacity: 0;
}
html.has-custom-cursor.is-cursor-active .eagles-cursor-dot {
  --cursor-scale: 0;
}
html.has-custom-cursor.is-cursor-active .eagles-cursor-ring {
  --cursor-scale: 1.7;
  border-color: var(--eagles-gold);
  background: rgba(201, 168, 76, 0.1);
}
html.has-custom-cursor,
html.has-custom-cursor * {
  cursor: none;
}