/* Social Media AutoPost Logo Styles */

:root {
  --logo-primary: #6C63FF;
  --logo-cyan: #00D2FF;
  --logo-yellow: #FFD93D;
  --logo-shadow: rgba(108, 99, 255, 0.3);
}

/* CSS-based Logo Container */
.logo-container {
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
}

.logo-container.small {
  width: 64px;
  height: 64px;
}

.logo-container.medium {
  width: 128px;
  height: 128px;
}

.logo-container.large {
  width: 256px;
  height: 256px;
}

/* CSS Logo using gradients and shapes */
.css-logo {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--logo-primary) 0%, var(--logo-cyan) 100%);
  border-radius: 50%;
  box-shadow: 0 4px 20px var(--logo-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.css-logo::before {
  content: 'S';
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  font-size: 5em;
  color: white;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  z-index: 2;
}

.logo-container.small .css-logo::before {
  font-size: 1.5em;
}

.logo-container.medium .css-logo::before {
  font-size: 3em;
}

.logo-container.large .css-logo::before {
  font-size: 7em;
}

/* Connection nodes around the logo */
.logo-node {
  position: absolute;
  width: 12%;
  height: 12%;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-node::after {
  content: '';
  width: 50%;
  height: 50%;
  background: white;
  border-radius: 50%;
}

.logo-node.node-1 {
  background: var(--logo-yellow);
  top: 15%;
  right: 12%;
  animation: pulse 3s ease-in-out infinite;
  animation-delay: 0s;
}

.logo-node.node-2 {
  background: var(--logo-cyan);
  top: 44%;
  right: 5%;
  animation: pulse 3s ease-in-out infinite;
  animation-delay: 0.5s;
}

.logo-node.node-3 {
  background: var(--logo-yellow);
  bottom: 15%;
  right: 12%;
  animation: pulse 3s ease-in-out infinite;
  animation-delay: 1s;
}

.logo-node.node-4 {
  background: var(--logo-primary);
  bottom: 15%;
  left: 12%;
  animation: pulse 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

.logo-node.node-5 {
  background: var(--logo-cyan);
  top: 44%;
  left: 5%;
  animation: pulse 3s ease-in-out infinite;
  animation-delay: 2s;
}

.logo-node.node-6 {
  background: var(--logo-yellow);
  top: 15%;
  left: 12%;
  animation: pulse 3s ease-in-out infinite;
  animation-delay: 2.5s;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

/* Logo with text */
.logo-with-text {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-text {
  display: flex;
  flex-direction: column;
}

.logo-text .brand-name {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #2D3436;
  line-height: 1.2;
}

.logo-text .brand-tagline {
  font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  color: #636E72;
  margin-top: 0.25rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .logo-with-text {
    gap: 0.75rem;
  }

  .logo-text .brand-name {
    font-size: 1.25rem;
  }

  .logo-text .brand-tagline {
    font-size: 0.75rem;
  }
}