/**
 * Next Arrival Component Styles
 * 
 * Squarespace Theme-Aware Styling
 * Uses Squarespace CSS variables for automatic theme integration.
 * Component inherits colors from nearest [data-section-theme] ancestor.
 */

/* =============================================================================
   Container
   ============================================================================= */

.ewp-next-arrival {
  /* Status colors - semantic and consistent */
  --ewp-next-arrival-primary: var(--green);
  --ewp-next-arrival-arriving: var(--red);
  --ewp-next-arrival-delayed: var(--yellow);

  display: block;
  font-family: inherit;
  color: var(--paragraphMediumColor);
  line-height: inherit;
  white-space: normal;
}

.ewp-next-arrival__text {
  display: block;
}

/* =============================================================================
   Live Indicator Dot
   ============================================================================= */

.ewp-next-arrival__live {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875em;
  line-height: 1;
}

.ewp-next-arrival__live-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.375rem;
  background-color: var(--ewp-next-arrival-primary);
  border-radius: 50%;
  vertical-align: middle;
  animation: ewp-next-arrival-pulse 2s ease-in-out infinite;
}

.ewp-next-arrival__live-label {
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* First arrival time (number) - emphasized */
.ewp-next-arrival__time {
  font-size: 1.75em;
  font-weight: 600;
  color: var(--yellow);
  /* Fixed-width digits so the number ticking down doesn't nudge the layout */
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
   States
   ============================================================================= */

/* Loading */
.ewp-next-arrival--loading {
  opacity: 0.6;
  animation: ewp-next-arrival-fade 1.5s ease-in-out infinite;
}

/* Arriving soon (within 2 minutes) */
.ewp-next-arrival--arriving {
  color: var(--ewp-next-arrival-arriving);
  font-weight: 600;
}

.ewp-next-arrival--arriving .ewp-next-arrival__live-dot {
  background-color: var(--ewp-next-arrival-arriving);
}

/* Delayed */
.ewp-next-arrival--delayed {
  color: var(--ewp-next-arrival-delayed);
}

.ewp-next-arrival--delayed .ewp-next-arrival__live-dot {
  background-color: var(--ewp-next-arrival-delayed);
}

/* No service */
.ewp-next-arrival--no-service {
  color: var(--paragraphSmallColor);
  font-style: italic;
}

/* Error */
.ewp-next-arrival--error {
  color: var(--paragraphSmallColor);
  opacity: 0.7;
}

/* =============================================================================
   Animations
   ============================================================================= */

@keyframes ewp-next-arrival-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(0.9);
  }
}

@keyframes ewp-next-arrival-fade {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.3;
  }
}

/* =============================================================================
   Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ewp-next-arrival__live-dot,
  .ewp-next-arrival--loading {
    animation: none;
  }
  
  .ewp-next-arrival__live-dot {
    opacity: 0.7;
  }
  
  .ewp-next-arrival--loading {
    opacity: 0.6;
  }
}