/**
 * CarHub Kenya — Premium Automotive Skeleton Loading System
 * Purpose-built automotive skeleton states, vehicle silhouette animations,
 * road-inspired motion tracks, progressive image reveal, and accessible
 * reduced-motion fallbacks across all public, portal, and dashboard pages.
 */

:root {
  --skel-base: #e2e8f0;
  --skel-highlight: #f8fafc;
  --skel-accent: rgba(16, 185, 129, 0.16);
  --skel-dark-base: #1e293b;
  --skel-dark-highlight: #334155;
  --skel-radius-sm: 6px;
  --skel-radius-md: 12px;
  --skel-radius-lg: 16px;
}

/* Screen-reader only utility for accessible loading announcements */
.ch-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   1. Top Navigation & Async Action Highway Progress Track
   ========================================================================== */
.ch-nav-road-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 10050;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: rgba(15, 23, 42, 0.25);
  overflow: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ch-nav-road-bar.is-active {
  opacity: 1;
  visibility: visible;
}

.ch-nav-road-progress {
  position: relative;
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, #059669 0%, #10b981 60%, #38bdf8 100%);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.8);
  animation: chNavRoadSweep 1.15s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes chNavRoadSweep {
  0% { transform: translateX(-100%); width: 25%; }
  50% { width: 45%; }
  100% { transform: translateX(320%); width: 25%; }
}

/* ==========================================================================
   2. Core Shimmer & Automotive Road Track Banner
   ========================================================================== */
.ch-skel-box,
.ch-skel-line,
.ch-skel-pill,
.ch-skel-circle,
.ch-skel-btn {
  position: relative;
  overflow: hidden;
  background-color: var(--skel-base);
  background-image: linear-gradient(
    100deg,
    var(--skel-base) 20%,
    var(--skel-highlight) 48%,
    rgba(16, 185, 129, 0.10) 54%,
    var(--skel-base) 80%
  );
  background-size: 240% 100%;
  animation: chSkelShimmer 1.65s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  border-radius: var(--skel-radius-sm);
}

.ch-skel-dark .ch-skel-box,
.ch-skel-dark .ch-skel-line,
.ch-skel-dark .ch-skel-pill,
.ch-skel-dark .ch-skel-circle,
.ch-skel-dark .ch-skel-btn {
  background-color: var(--skel-dark-base);
  background-image: linear-gradient(
    100deg,
    var(--skel-dark-base) 20%,
    var(--skel-dark-highlight) 48%,
    rgba(56, 189, 248, 0.14) 54%,
    var(--skel-dark-base) 80%
  );
  background-size: 240% 100%;
}

@keyframes chSkelShimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

.ch-skel-line {
  height: 0.85rem;
  width: 100%;
  margin-bottom: 0.5rem;
}

.ch-skel-line.title {
  height: 1.25rem;
  width: 72%;
  margin-bottom: 0.45rem;
}

.ch-skel-line.subtitle {
  height: 0.78rem;
  width: 56%;
  margin-bottom: 0.75rem;
}

.ch-skel-line.price {
  height: 1.4rem;
  width: 115px;
  margin-bottom: 0.25rem;
}

.ch-skel-pill {
  height: 1.55rem;
  width: 74px;
  border-radius: 999px;
  display: inline-block;
}

.ch-skel-btn {
  height: 2.1rem;
  width: 78px;
  border-radius: 8px;
  display: inline-block;
}

/* Automotive Road-Inspired Motion Track Banner */
.ch-skel-road-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1.15rem;
  margin-bottom: 1.15rem;
  background: linear-gradient(135deg, #090d16 0%, #0f172a 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--skel-radius-md);
  color: #e2e8f0;
  overflow: hidden;
  position: relative;
}

.ch-skel-road-info {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: #f8fafc;
  z-index: 2;
}

.ch-skel-road-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: chSkelPulseDot 1.3s ease-in-out infinite;
}

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

.ch-skel-road-track {
  position: relative;
  flex: 1;
  max-width: 320px;
  height: 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ch-skel-road-markings {
  position: absolute;
  bottom: 4px;
  left: 0;
  width: 200%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.75) 0px,
    rgba(16, 185, 129, 0.75) 18px,
    transparent 18px,
    transparent 36px
  );
  animation: chSkelRoadFlow 0.55s linear infinite;
}

@keyframes chSkelRoadFlow {
  from { transform: translateX(0); }
  to { transform: translateX(-36px); }
}

.ch-skel-car-icon {
  width: 68px;
  height: 24px;
  position: relative;
  z-index: 2;
  animation: chSkelCarCruise 2.2s ease-in-out infinite;
}

@keyframes chSkelCarCruise {
  0%, 100% { transform: translateX(8px) translateY(0); }
  50% { transform: translateX(95px) translateY(-1px); }
}

/* ==========================================================================
   3. Vehicle Image Skeleton & Progressive Image Reveal
   ========================================================================== */
.ch-img-skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    110deg,
    #0f172a 22%,
    #1e293b 48%,
    #0f172a 78%
  );
  background-size: 220% 100%;
  animation: chSkelShimmer 1.7s linear infinite;
}

.ch-img-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 70' fill='none'%3E%3Cpath d='M22 48 L18 40 C16 34 20 28 28 26 L46 23 L68 12 C75 9 92 8 112 9 L134 11 C142 12 150 18 156 26 L168 30 C173 32 175 37 174 44 L170 48 L152 49 C150 37 130 37 128 49 L62 49 C60 37 40 37 38 49 Z' stroke='rgba(148,163,184,0.22)' stroke-width='2' fill='rgba(15,23,42,0.35)'/%3E%3Ccircle cx='50' cy='49' r='9' stroke='rgba(56,189,248,0.28)' stroke-width='2'/%3E%3Ccircle cx='140' cy='49' r='9' stroke='rgba(16,185,129,0.28)' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center 46%;
  background-size: 44% auto;
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.ch-img-skeleton::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 18%;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.45) 0px,
    rgba(16, 185, 129, 0.45) 14px,
    transparent 14px,
    transparent 28px
  );
  animation: chSkelRoadFlow 0.65s linear infinite;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.ch-img-skeleton.is-loaded {
  animation: none;
}

.ch-img-skeleton.is-loaded::before,
.ch-img-skeleton.is-loaded::after {
  opacity: 0;
  visibility: hidden;
}

.ch-img-progressive {
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s ease;
}

.ch-img-progressive.is-revealed {
  opacity: 1;
}

/* ==========================================================================
   4. Realistic Vehicle Card & Category Card Skeletons
   ========================================================================== */
.ch-skel-vehicle-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.ch-skel-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(145deg, #090d16, #0f172a);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ch-skel-media-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  z-index: 2;
}

.ch-skel-media-badges .ch-skel-pill {
  background-color: rgba(255, 255, 255, 0.14);
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.24) 50%,
    rgba(255, 255, 255, 0.10) 100%
  );
  background-size: 200% 100%;
  height: 1.35rem;
}

.ch-skel-silhouette-track {
  position: relative;
  width: 70%;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ch-skel-silhouette-svg {
  width: 100%;
  height: auto;
  opacity: 0.85;
  animation: chSkelFloatCar 2.2s ease-in-out infinite;
}

@keyframes chSkelFloatCar {
  0%, 100% { transform: translateY(0px) translateX(-4px); }
  50% { transform: translateY(-2px) translateX(4px); }
}

.ch-skel-silhouette-road {
  width: 100%;
  height: 2px;
  margin-top: 2px;
  overflow: hidden;
  position: relative;
}

.ch-skel-silhouette-road::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 200%;
  background: repeating-linear-gradient(
    90deg,
    rgba(16, 185, 129, 0.7) 0px,
    rgba(16, 185, 129, 0.7) 14px,
    transparent 14px,
    transparent 28px
  );
  animation: chSkelRoadFlow 0.5s linear infinite;
}

.ch-skel-body {
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ch-skel-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.85rem 0;
}

.ch-skel-footer {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border, #e2e8f0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.ch-skel-actions {
  display: flex;
  gap: 0.4rem;
}

/* ==========================================================================
   5. 360° Virtual Showroom & Vehicle Detail Stage Skeleton
   ========================================================================== */
.ch-skel-360-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 360px;
  background: radial-gradient(circle at 50% 30%, #1e293b 0%, #0f172a 65%, #020617 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--skel-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  color: #cbd5e1;
}

.ch-skel-360-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: auto 0;
  text-align: center;
}

.ch-skel-turntable-ring {
  position: relative;
  width: 240px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ch-skel-turntable-oval {
  position: absolute;
  bottom: 4px;
  width: 220px;
  height: 36px;
  border-radius: 50%;
  border: 2px dashed rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
  animation: chSkelTurntablePulse 1.8s ease-in-out infinite;
}

@keyframes chSkelTurntablePulse {
  0%, 100% { transform: scaleX(0.97); opacity: 0.65; }
  50% { transform: scaleX(1.03); opacity: 1; }
}

/* ==========================================================================
   6. Inline Value & Pricing Calculation Skeleton
   ========================================================================== */
.ch-val-loading {
  position: relative;
  color: transparent !important;
  border-radius: 4px;
  background-color: #e2e8f0;
  background-image: linear-gradient(
    90deg,
    #e2e8f0 0%,
    #f8fafc 50%,
    #e2e8f0 100%
  );
  background-size: 200% 100%;
  animation: chSkelShimmer 1.2s linear infinite;
  user-select: none;
  display: inline-block;
  min-width: 58px;
}

/* ==========================================================================
   7. Dashboard Table & KPI Skeletons
   ========================================================================== */
.ch-skel-table-row td {
  padding: 0.85rem 0.75rem;
}

.ch-skel-kpi-card {
  background: #ffffff;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--skel-radius-md);
  padding: 1.25rem;
}

/* ==========================================================================
   8. Content Progressive Reveal & Error / Retry Card
   ========================================================================== */
.ch-reveal-enter {
  animation: chContentReveal 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes chContentReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ch-skel-error-card {
  background: #ffffff;
  border: 1px solid #fecdd3;
  border-left: 4px solid #e11d48;
  border-radius: var(--skel-radius-md);
  padding: 1.5rem;
  text-align: center;
  margin: 1rem 0;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.ch-skel-error-card.ch-skel-error-dark {
  background: #0f172a;
  border-color: rgba(244, 63, 94, 0.45);
  color: #f8fafc;
}

.ch-skel-error-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0.35rem 0 0.35rem;
  color: inherit;
}

.ch-skel-error-desc {
  font-size: 0.88rem;
  color: #64748b;
  margin: 0 auto 1rem;
  max-width: 480px;
}

.ch-skel-error-dark .ch-skel-error-desc {
  color: #94a3b8;
}

/* ==========================================================================
   9. Reduced Motion Accessibility Support
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .ch-skel-box,
  .ch-skel-line,
  .ch-skel-pill,
  .ch-skel-circle,
  .ch-skel-btn,
  .ch-img-skeleton,
  .ch-img-skeleton::after,
  .ch-skel-road-markings,
  .ch-skel-car-icon,
  .ch-skel-silhouette-svg,
  .ch-skel-silhouette-road::after,
  .ch-skel-turntable-oval,
  .ch-val-loading,
  .ch-nav-road-progress {
    animation: none !important;
    transition: none !important;
  }

  .ch-img-progressive {
    transition: none !important;
    opacity: 1 !important;
  }
}