/* Logo Breathing Animation - Calm, Organic Wavy Effect */

.logo-breathe-grid {
  width: 100%;
  padding: 50px 20px;
  position: relative;
  overflow: visible;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

.ecw-ecosystem-grid {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;

  /* Edge fade mask - elliptical visibility with strong corner fade */
  mask-image: radial-gradient(ellipse 140% 60% at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 18%,
      rgba(0, 0, 0, 0.97) 24%,
      rgba(0, 0, 0, 0.88) 30%,
      rgba(0, 0, 0, 0.72) 38%,
      rgba(0, 0, 0, 0.5) 46%,
      rgba(0, 0, 0, 0.3) 54%,
      rgba(0, 0, 0, 0.15) 62%,
      rgba(0, 0, 0, 0.06) 70%,
      rgba(0, 0, 0, 0.02) 76%,
      rgba(0, 0, 0, 0.005) 82%,
      rgba(0, 0, 0, 0) 90%);

  -webkit-mask-image: radial-gradient(ellipse 140% 60% at 50% 50%,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 18%,
      rgba(0, 0, 0, 0.97) 24%,
      rgba(0, 0, 0, 0.88) 30%,
      rgba(0, 0, 0, 0.72) 38%,
      rgba(0, 0, 0, 0.5) 46%,
      rgba(0, 0, 0, 0.3) 54%,
      rgba(0, 0, 0, 0.15) 62%,
      rgba(0, 0, 0, 0.06) 70%,
      rgba(0, 0, 0, 0.02) 76%,
      rgba(0, 0, 0, 0.005) 82%,
      rgba(0, 0, 0, 0) 90%);

  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}

/* Safari/fallback overlay */
.ecw-ecosystem-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1000;
  background: radial-gradient(ellipse 140% 60% at 50% 50%,
      transparent 0%,
      transparent 18%,
      rgba(255, 255, 255, 0.03) 24%,
      rgba(255, 255, 255, 0.12) 30%,
      rgba(255, 255, 255, 0.28) 38%,
      rgba(255, 255, 255, 0.5) 46%,
      rgba(255, 255, 255, 0.7) 54%,
      rgba(255, 255, 255, 0.85) 62%,
      rgba(255, 255, 255, 0.94) 70%,
      rgba(255, 255, 255, 0.98) 76%,
      rgba(255, 255, 255, 0.995) 82%,
      rgba(255, 255, 255, 1) 90%);
  mix-blend-mode: screen;
  opacity: 0;
}

@supports not (-webkit-mask-image: radial-gradient(ellipse, black, transparent)) {
  .ecw-ecosystem-grid::before {
    opacity: 1;
  }
}

.ecw-grid-row {
  display: flex;
  width: 100%;
  gap: 1%;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  z-index: 1;
  isolation: isolate;
  overflow: visible;
  padding: 10px;
  box-sizing: border-box;
}

/* Logo Breathing Item - Base State (Inactive) */
.logo-breathe-item {
  position: relative;
  width: calc((100% - 9 * 1%) / 10);
  aspect-ratio: 1;
  flex-shrink: 0;
  opacity: var(--default-opacity, 0.2);
  transform: scale(var(--scale-min, 0.985));
  transition: opacity var(--breathe-fade, var(--fade-duration, 1.2s)) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--breathe-fade, var(--fade-duration, 1.2s)) cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
  z-index: 1;
  overflow: visible;
}

/* Ensure images start with opacity 0 to prevent flashes */
.logo-breathe-item img {
  opacity: 1;
  transition: filter var(--fade-duration, 1.2s) ease;
}

/* Logo Breathing Item - Visible State */
.logo-breathe-item.is-visible {
  opacity: 1;
  z-index: 10;
}

/* Scale handling - no pulse by default */
.logo-breathe-item.is-visible {
  transform: scale(1);
}

/* Optional scale pulse when enabled */
.logo-breathe-item.is-visible[data-scale-enabled="1"] {
  animation: breathePulse calc(var(--fade-duration, 1.2s) * 2) ease-in-out infinite;
  transform: none;
  /* Let animation control transform */
}

@keyframes breathePulse {

  0%,
  100% {
    transform: scale(var(--scale-min, 0.985));
  }

  50% {
    transform: scale(1);
  }
}

/* Card Inner Container */
.ecw-logo-inner {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  border-radius: 32px;
  /* Default, can be overridden by JS based on actual size */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  transition: border-color var(--fade-duration, 1.2s) ease,
    box-shadow var(--fade-duration, 1.2s) cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.3s ease;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Visible state styling - subtle glow */
.logo-breathe-item.is-visible .ecw-logo-inner {
  border-color: rgba(156, 39, 176, 0.3);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(156, 39, 176, 0.08),
    0 8px 24px rgba(156, 39, 176, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Hover state for inactive logos */
.logo-breathe-item:hover:not(.is-visible) .ecw-logo-inner {
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Logo Image - Default State */
.ecw-logo-img {
  max-width: 75%;
  max-height: 75%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: filter var(--fade-duration, 1.2s) ease,
    max-width 0.3s ease,
    max-height 0.3s ease;
  backface-visibility: hidden;
  filter: grayscale(100%) brightness(0.95);
}

/* Logo Image - Visible State (full color) */
.logo-breathe-item.is-visible .ecw-logo-img {
  filter: grayscale(0%) brightness(1);
}

/* Logo Image - Hover State (slight color) */
.logo-breathe-item:hover:not(.is-visible) .ecw-logo-img {
  filter: grayscale(70%) brightness(1);
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .ecw-ecosystem-grid {
    max-width: 100%;
  }

  .ecw-logo-inner {
    padding: 16px;
  }

  .ecw-grid-row {
    gap: 0.8%;
  }

  .logo-breathe-item {
    width: calc((100% - 9 * 0.8%) / 10);
  }
}

@media (max-width: 1200px) {
  .logo-breathe-grid {
    padding: 50px 15px;
  }

  .ecw-ecosystem-grid {
    max-width: 100%;
  }

  .ecw-logo-inner {
    padding: 15px;
  }

  .ecw-grid-row {
    gap: 0.7%;
    flex-wrap: wrap;
  }

  .logo-breathe-item {
    width: calc((100% - 9 * 0.7%) / 10);
  }
}

@media (max-width: 768px) {
  .logo-breathe-grid {
    padding: 40px 10px;
  }

  .ecw-logo-inner {
    padding: 14px;
  }

  .ecw-grid-row {
    gap: 0.6%;
    flex-wrap: wrap;
  }

  .logo-breathe-item {
    width: calc((100% - 9 * 0.6%) / 10);
  }
}

@media (max-width: 480px) {
  .logo-breathe-grid {
    padding: 30px 10px;
  }

  .ecw-logo-inner {
    padding: 12px;
  }

  .ecw-grid-row {
    gap: 0.5%;
    flex-wrap: wrap;
  }

  .logo-breathe-item {
    width: calc((100% - 9 * 0.5%) / 10);
  }
}

/* Editor preview */
.ecw-ecosystem-editor-preview {
  padding: 20px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}