/* ===========================================
   Omnichannel Visualization Styles
   =========================================== */

/* Section base styles */
.omni-section {
  position: relative;
}

/* ==========================================
   Floating Animation for Platform Tiles
   ========================================== */
@keyframes omni-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.omni-float-0 {
  animation: omni-float 4s ease-in-out infinite;
}

.omni-float-1 {
  animation: omni-float 4.5s ease-in-out infinite;
  animation-delay: 0.3s;
}

.omni-float-2 {
  animation: omni-float 3.5s ease-in-out infinite;
  animation-delay: 0.7s;
}

/* ==========================================
   Pulse Animation for Central Hub
   ========================================== */
@keyframes omni-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 20px 60px rgba(8, 8, 238, 0.4), 0 8px 20px rgba(8, 8, 238, 0.2);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 25px 70px rgba(8, 8, 238, 0.5), 0 10px 25px rgba(8, 8, 238, 0.25);
  }
}

.omni-pulse-animate {
  animation: omni-pulse 2s ease-in-out infinite;
}

/* ==========================================
   Glow Animation for Hub Background
   ========================================== */
@keyframes omni-glow {
  0%, 100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
}

.omni-glow-animate {
  animation: omni-glow 2s ease-in-out infinite;
}

/* ==========================================
   SVG Path Dash Animation
   ========================================== */
@keyframes omni-dash-flow {
  0% {
    stroke-dashoffset: 40;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.omni-dash-animate {
  animation: omni-dash-flow 2s linear infinite;
}

/* Staggered delays for each path */
.omni-dash-0 { animation-delay: 0s; }
.omni-dash-1 { animation-delay: 0.2s; }
.omni-dash-2 { animation-delay: 0.4s; }
.omni-dash-3 { animation-delay: 0.6s; }
.omni-dash-4 { animation-delay: 0.8s; }
.omni-dash-5 { animation-delay: 1.0s; }
.omni-dash-6 { animation-delay: 1.2s; }
.omni-dash-7 { animation-delay: 1.4s; }
.omni-dash-8 { animation-delay: 1.6s; }

/* ==========================================
   Platform Tile Styles
   ========================================== */
.omni-platform-tile {
  will-change: transform, opacity;
}

.omni-platform-tile:hover .omni-tile-inner {
  transform: translateY(-4px);
}

.omni-platform-tile:hover .omni-tile-label {
  opacity: 1 !important;
  max-height: 20px !important;
}

/* ==========================================
   Responsive Styles
   ========================================== */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
  .omni-visualization-container {
    transform: scale(1);
  }
}

/* Tablet (768px - 1199px) */
@media (max-width: 1199px) {
  .omni-visualization-container {
    transform: scale(0.9);
    height: 540px !important;
  }
}

/* Mobile Landscape (576px - 767px) */
@media (max-width: 767px) {
  .omni-section {
    padding: 60px 0 !important;
  }

  .omni-visualization-container {
    transform: scale(0.7);
    height: 420px !important;
  }

  .omni-platform-tile .omni-tile-inner {
    padding: 14px !important;
  }

  .omni-platform-tile .omni-tile-inner > div:first-child {
    width: 40px !important;
    height: 40px !important;
  }

  .omni-platform-tile .omni-tile-inner svg {
    width: 20px !important;
    height: 20px !important;
  }

  .omni-central-hub > div:last-child {
    width: 110px !important;
    height: 110px !important;
    border-radius: 22px !important;
  }

  .omni-central-hub img {
    width: 50px !important;
    height: 50px !important;
  }
}

/* Mobile Portrait (less than 576px) */
@media (max-width: 575px) {
  .omni-section {
    padding: 40px 0 !important;
  }

  .omni-visualization-container {
    transform: scale(0.55);
    height: 330px !important;
    margin-top: -40px !important;
    margin-bottom: -40px !important;
  }

  /* Hide website category platforms on very small screens */
  .omni-tile-website {
    display: none !important;
  }

  .omni-platform-tile .omni-tile-inner {
    padding: 12px !important;
  }

  .omni-central-hub > div:last-child {
    width: 90px !important;
    height: 90px !important;
    border-radius: 18px !important;
  }

  .omni-central-hub img {
    width: 40px !important;
    height: 40px !important;
  }

  .omni-central-hub span {
    font-size: 11px !important;
  }
}

/* Very small screens (less than 400px) */
@media (max-width: 399px) {
  .omni-visualization-container {
    transform: scale(0.45);
    height: 270px !important;
  }
}

/* ==========================================
   Reduced Motion Preference
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  .omni-float-0,
  .omni-float-1,
  .omni-float-2,
  .omni-pulse-animate,
  .omni-glow-animate,
  .omni-dash-animate {
    animation: none !important;
  }

  .omni-platform-tile,
  .omni-central-hub,
  .omni-tile-inner {
    transition: none !important;
  }
}

/* ==========================================
   Feature Pills Responsive
   ========================================== */
@media (max-width: 767px) {
  .omni-section .container > div:last-child {
    gap: 10px !important;
    margin-top: 20px !important;
  }

  .omni-section .container > div:last-child > div {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }

  .omni-section .container > div:last-child > div > div:first-child {
    width: 26px !important;
    height: 26px !important;
  }
}

/* ==========================================
   Print Styles
   ========================================== */
@media print {
  .omni-section {
    display: none;
  }
}

/* ==========================================
   High Contrast Mode
   ========================================== */
@media (forced-colors: active) {
  .omni-platform-tile .omni-tile-inner {
    border: 2px solid CanvasText !important;
  }

  .omni-central-hub > div:last-child {
    border: 3px solid CanvasText !important;
  }
}