/* HPS FREIGHT — homepage logistics animations (index only) */

/* ── Hero FX stack (above bg, below content) ── */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.hero-fx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(249, 212, 35, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(249, 212, 35, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(105deg, black 30%, transparent 75%);
  animation: gridDrift 24s linear infinite;
}

@keyframes gridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 48px 48px, 48px 48px; }
}

.hero-fx-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-fx-svg {
  width: 100%;
  height: 100%;
}

/* Route layer */
.hero-hub {
  fill: var(--yellow);
  filter: drop-shadow(0 0 12px rgba(249, 212, 35, 0.8));
}

.hero-hub-ring {
  fill: none;
  stroke: rgba(249, 212, 35, 0.45);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: hubRing 3s ease-out infinite;
}

.hero-hub-ring--2 {
  animation-delay: 1s;
}

@keyframes hubRing {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}

.hero-route-line {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 12 10;
  animation: routeFlow 2.5s linear infinite;
}

.hero-route-line--main {
  stroke: rgba(255, 255, 255, 0.55);
}

.hero-route-line--west {
  stroke: rgba(249, 212, 35, 0.75);
  animation-duration: 3.2s;
}

.hero-route-line--regional {
  stroke: rgba(255, 255, 255, 0.35);
  animation-duration: 4s;
  animation-direction: reverse;
}

@keyframes routeFlow {
  to { stroke-dashoffset: -44; }
}

.hero-waypoint {
  fill: var(--white);
  opacity: 0.85;
  animation: waypointBlink 2s ease-in-out infinite;
}

.hero-waypoint:nth-of-type(5) { animation-delay: 0.3s; }
.hero-waypoint:nth-of-type(6) { animation-delay: 0.9s; }
.hero-waypoint:nth-of-type(7) { animation-delay: 1.4s; }
.hero-waypoint:nth-of-type(8) { animation-delay: 2s; }

@keyframes waypointBlink {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

.hero-pulse-dot {
  fill: var(--red);
  filter: drop-shadow(0 0 8px rgba(196, 30, 58, 0.9));
}

.hero-truck-body { fill: var(--yellow); }
.hero-truck-cab { fill: #fff; }
.hero-truck-wheel { fill: #1a1a1a; stroke: #444; stroke-width: 1; }

/* Warehouse layer */
.hero-fx-warehouse {
  background: linear-gradient(180deg, transparent 40%, rgba(249, 212, 35, 0.03) 100%);
}

.hero-shelf {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(249, 212, 35, 0.5), transparent);
  animation: shelfPulse 4s ease-in-out infinite;
}

.hero-shelf--1 { top: 28%; left: 8%; width: 35%; animation-delay: 0s; }
.hero-shelf--2 { top: 42%; left: 15%; width: 42%; animation-delay: 0.5s; }
.hero-shelf--3 { top: 56%; left: 5%; width: 38%; animation-delay: 1s; }
.hero-shelf--4 { top: 70%; left: 12%; width: 45%; animation-delay: 1.5s; }

@keyframes shelfPulse {
  0%, 100% { opacity: 0.25; transform: scaleX(0.85); }
  50% { opacity: 0.9; transform: scaleX(1); }
}

.hero-pallet {
  position: absolute;
  width: 22px;
  height: 18px;
  border: 2px solid rgba(249, 212, 35, 0.6);
  background: rgba(249, 212, 35, 0.12);
  animation: palletStack 6s ease-in-out infinite;
}

.hero-pallet--1 { top: 32%; left: 22%; animation-delay: 0s; }
.hero-pallet--2 { top: 46%; left: 28%; animation-delay: 1.2s; }
.hero-pallet--3 { top: 60%; left: 18%; animation-delay: 2.4s; }

@keyframes palletStack {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-8px); opacity: 1; }
}

.hero-scan-beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
  box-shadow: 0 0 20px rgba(249, 212, 35, 0.6);
  top: 25%;
  animation: scanBeam 5s ease-in-out infinite;
}

@keyframes scanBeam {
  0%, 100% { top: 22%; opacity: 0.3; }
  50% { top: 72%; opacity: 1; }
}

/* Delivery layer */
.hero-drop {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 2px solid var(--yellow);
  border-radius: 50%;
  animation: dropZone 3.5s ease-in-out infinite;
}

.hero-drop::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(249, 212, 35, 0.35);
  border-radius: 50%;
  animation: dropRing 3.5s ease-out infinite;
}

.hero-drop--1 { top: 30%; left: 55%; animation-delay: 0s; }
.hero-drop--2 { top: 45%; left: 72%; animation-delay: 0.7s; }
.hero-drop--3 { top: 55%; left: 40%; animation-delay: 1.4s; }
.hero-drop--4 { top: 38%; left: 85%; animation-delay: 2.1s; }
.hero-drop--5 { top: 62%; left: 65%; animation-delay: 2.8s; }

@keyframes dropZone {
  0%, 100% { transform: scale(1); background: transparent; }
  50% { transform: scale(1.2); background: rgba(249, 212, 35, 0.25); }
}

@keyframes dropRing {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Particles — floating pallet chips */
.hero-fx-particles span {
  position: absolute;
  width: 8px;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(249, 212, 35, 0.25);
  animation: particleFloat 14s linear infinite;
}

.hero-fx-particles span:nth-child(1) { left: 12%; top: 20%; animation-duration: 16s; }
.hero-fx-particles span:nth-child(2) { left: 35%; top: 75%; animation-duration: 12s; animation-delay: -3s; }
.hero-fx-particles span:nth-child(3) { left: 58%; top: 15%; animation-duration: 18s; animation-delay: -6s; }
.hero-fx-particles span:nth-child(4) { left: 78%; top: 55%; animation-duration: 13s; animation-delay: -2s; }
.hero-fx-particles span:nth-child(5) { left: 90%; top: 30%; animation-duration: 15s; animation-delay: -8s; }
.hero-fx-particles span:nth-child(6) { left: 25%; top: 50%; animation-duration: 17s; animation-delay: -4s; }
.hero-fx-particles span:nth-child(7) { left: 65%; top: 80%; animation-duration: 11s; animation-delay: -1s; }
.hero-fx-particles span:nth-child(8) { left: 48%; top: 40%; animation-duration: 19s; animation-delay: -9s; }

@keyframes particleFloat {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { transform: translate(40px, -120px) rotate(25deg); opacity: 0; }
}

/* Dispatch HUD */
.hero-fx-hud {
  position: absolute;
  inset: 0;
}

.hero-hud-corner {
  position: absolute;
  width: 48px;
  height: 48px;
  border-color: rgba(249, 212, 35, 0.5);
  border-style: solid;
  animation: hudPulse 4s ease-in-out infinite;
}

.hero-hud-corner--tl { top: 12%; left: 4%; border-width: 2px 0 0 2px; }
.hero-hud-corner--tr { top: 12%; right: 4%; border-width: 2px 2px 0 0; animation-delay: 0.5s; }
.hero-hud-corner--bl { bottom: 18%; left: 4%; border-width: 0 0 2px 2px; animation-delay: 1s; }
.hero-hud-corner--br { bottom: 18%; right: 4%; border-width: 0 2px 2px 0; animation-delay: 1.5s; }

@keyframes hudPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.hero-hud-barcode {
  position: absolute;
  bottom: 22%;
  left: 5%;
  display: flex;
  gap: 3px;
  height: 28px;
  align-items: flex-end;
}

.hero-hud-barcode i {
  display: block;
  width: 3px;
  background: rgba(249, 212, 35, 0.5);
  animation: barcodeTick 1.2s ease-in-out infinite;
}

.hero-hud-barcode i:nth-child(1) { height: 12px; animation-delay: 0s; }
.hero-hud-barcode i:nth-child(2) { height: 22px; animation-delay: 0.1s; }
.hero-hud-barcode i:nth-child(3) { height: 8px; animation-delay: 0.2s; }
.hero-hud-barcode i:nth-child(4) { height: 26px; animation-delay: 0.15s; }
.hero-hud-barcode i:nth-child(5) { height: 16px; animation-delay: 0.25s; }
.hero-hud-barcode i:nth-child(6) { height: 24px; animation-delay: 0.05s; }
.hero-hud-barcode i:nth-child(7) { height: 10px; animation-delay: 0.3s; }
.hero-hud-barcode i:nth-child(8) { height: 20px; animation-delay: 0.12s; }

@keyframes barcodeTick {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); }
  50% { opacity: 1; transform: scaleY(1); }
}

.hero-hud-status {
  position: absolute;
  top: 14%;
  right: 5%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.85);
}

.hero-hud-dot {
  width: 8px;
  height: 8px;
  background: #4caf50;
  border-radius: 50%;
  animation: hudLive 1.5s ease-in-out infinite;
}

@keyframes hudLive {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.6); }
  50% { box-shadow: 0 0 0 8px rgba(76, 175, 80, 0); }
}

/* Phase visibility — three distinct hero moods */
.hero[data-hero-phase="route"] .hero-fx-routes { opacity: 1; }
.hero[data-hero-phase="warehouse"] .hero-fx-warehouse { opacity: 1; }
.hero[data-hero-phase="delivery"] .hero-fx-delivery { opacity: 1; }

.hero[data-hero-phase="warehouse"] .hero-bg-image {
  animation-name: kenBurnsWarehouse;
}

.hero[data-hero-phase="delivery"] .hero-bg-image {
  animation-name: kenBurnsDelivery;
}

@keyframes kenBurnsWarehouse {
  0% { transform: scale(1.05) translate(1%, 0); }
  100% { transform: scale(1.2) translate(-2%, -2%); }
}

@keyframes kenBurnsDelivery {
  0% { transform: scale(1.08) translate(-1%, 1%); }
  100% { transform: scale(1.15) translate(2%, -1%); }
}

/* Animated route lines overlay */
.hero-line-path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: drawHeroLine 4s ease forwards, pulseLine 5s ease-in-out 4s infinite;
}

.hero-line-path--accent {
  stroke: rgba(249, 212, 35, 0.65);
  stroke-width: 2;
  animation-duration: 5s, 5s;
  animation-delay: 0.4s, 4.4s;
}

.hero-line-path:nth-child(3) {
  animation-delay: 0.8s, 4.8s;
}

@keyframes drawHeroLine {
  to { stroke-dashoffset: 0; }
}

/* Live dispatch ticker */
.hero-live-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(26, 26, 26, 0.75);
  border-top: 1px solid rgba(249, 212, 35, 0.25);
  overflow: hidden;
  padding: 0.45rem 0;
}

.hero-live-ticker-track {
  display: flex;
  gap: 2.5rem;
  white-space: nowrap;
  animation: heroTicker 40s linear infinite;
}

.hero-live-ticker span {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.hero-live-ticker span::before {
  content: "▸ ";
  color: var(--yellow);
}

@keyframes heroTicker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hero content enhancements */
.hero-metrics {
  display: flex;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.hero-metric {
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--yellow);
  backdrop-filter: blur(6px);
  animation: metricIn 0.8s var(--ease) backwards;
}

.hero-metric:nth-child(1) { animation-delay: 0.85s; }
.hero-metric:nth-child(2) { animation-delay: 1s; }
.hero-metric:nth-child(3) { animation-delay: 1.15s; }

.hero-metric strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
}

.hero-metric span {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
}

@keyframes metricIn {
  from { opacity: 0; transform: translateX(-16px); }
  to { opacity: 1; transform: translateX(0); }
}

.hero-visual-frame {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  border: 2px solid rgba(249, 212, 35, 0.35);
}

.hero-visual-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: visualShine 5s ease-in-out infinite;
}

@keyframes visualShine {
  0%, 100% { transform: translateX(-100%); }
  45%, 55% { transform: translateX(100%); }
}

.hero-visual-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  background: rgba(26, 26, 26, 0.85);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}

.hero-visual-tag-dot {
  width: 6px;
  height: 6px;
  background: #4caf50;
  border-radius: 50%;
  animation: hudLive 1.5s ease-in-out infinite;
}

.hero-scroll-cue {
  position: absolute;
  bottom: 4.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.3s;
}

.hero-scroll-cue:hover {
  color: var(--yellow);
}

.hero-scroll-cue-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--yellow), transparent);
  animation: scrollCueLine 2s ease-in-out infinite;
}

.hero-scroll-cue-text {
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

@keyframes scrollCueLine {
  0%, 100% { transform: scaleY(0.6); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

.hero-content {
  z-index: 4;
}

/* ── Section-specific animations ── */
.home-conveyor::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: repeating-linear-gradient(
    90deg,
    var(--black) 0,
    var(--black) 12px,
    transparent 12px,
    transparent 24px
  );
  animation: conveyorBelt 1.2s linear infinite;
}

.home-conveyor {
  position: relative;
}

@keyframes conveyorBelt {
  to { background-position: 24px 0; }
}

.yellow-card-anim {
  position: relative;
  overflow: hidden;
}

.yellow-card-anim::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(249, 212, 35, 0.25), transparent);
  animation: cardScan 4s ease-in-out infinite;
}

@keyframes cardScan {
  0%, 100% { left: -100%; }
  50% { left: 120%; }
}

.home-pillar-anim {
  position: relative;
}

.home-pillar-anim::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--yellow);
  transition: width 0.5s var(--ease);
}

.home-pillar-anim:hover::before {
  width: 100%;
}

.home-pillar-anim .num {
  transition: transform 0.4s var(--ease), color 0.3s;
}

.home-pillar-anim:hover .num {
  transform: translateX(6px);
  color: var(--red);
}

.service-card-anim {
  position: relative;
  overflow: hidden;
}

.service-card-anim::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: var(--red);
  transition: width 0.45s var(--ease);
}

.service-card-anim:hover::after {
  width: 100%;
}

.service-card-anim:nth-child(1):hover { transform: translateY(-6px) rotate(-0.3deg); }
.service-card-anim:nth-child(2):hover { transform: translateY(-8px); }
.service-card-anim:nth-child(3):hover { transform: translateY(-6px) rotate(0.3deg); }
.service-card-anim:nth-child(4):hover { transform: translateY(-10px) scale(1.01); }

.service-card-anim .icon {
  transition: transform 0.4s var(--ease);
}

.service-card-anim:hover .icon {
  transform: scale(1.08) translateY(-4px);
}

.parallax-cta-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: gridDrift 20s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.z-image-anim {
  position: relative;
  overflow: hidden;
}

.z-image-anim img {
  transition: transform 0.7s var(--ease);
}

.z-section.visible .z-image-anim img,
.z-image-anim:hover img {
  transform: scale(1.04);
}

.z-image-anim::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color 0.4s;
}

.z-section.visible .z-image-anim::after {
  border-color: rgba(249, 212, 35, 0.4);
  animation: zFramePulse 3s ease-in-out infinite;
}

@keyframes zFramePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.home-coverage-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.home-coverage-map .map-label {
  fill: rgba(79, 195, 247, 0.9);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.global-map-wrap .location-panel {
  position: relative;
  z-index: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-fx *,
  .hero-bg-image,
  .hero-line-path,
  .hero-live-ticker-track,
  .hero-visual-shine,
  .hero-scroll-cue-line,
  .home-marquee-track,
  .home-conveyor::after,
  .yellow-card-anim::after,
  .home-coverage-map .map-line {
    animation: none !important;
  }

  .hero-fx-routes { opacity: 0.6 !important; }
  .hero-fx-warehouse,
  .hero-fx-delivery { opacity: 0 !important; }
}