/* Flattened from n8n.module.css. Class map:
   logoStage → n8n-logoStage, halo → n8n-halo, ring → n8n-ring,
   logo → n8n-logo.
   @keyframes (logoEnter, logoFloat, ringSpin, haloPulse) are left
   unrenamed — they are not class selectors. */

/*
 * Scoped styles for the n8n hero logo. All animation lives here so it stays
 * inside the CSP (CSS Modules are bundled, no inline styles) and out of the
 * way of other pages.
 */

/* Stage centers the logo and hosts the glow halo behind it. */
.n8n-logoStage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  margin: 0 auto 28px;
}

/* Soft, pulsing brand-colored halo sitting behind the logo. */
.n8n-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(99, 102, 241, 0.45) 0%,
    rgba(79, 70, 229, 0.22) 45%,
    rgba(79, 70, 229, 0) 72%
  );
  filter: blur(6px);
  animation: haloPulse 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* Rotating conic-gradient brand ring orbiting behind the logo. */
.n8n-ring {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(99, 102, 241, 0) 0deg,
    rgba(99, 102, 241, 0.85) 90deg,
    rgba(79, 70, 229, 0) 200deg,
    rgba(129, 140, 248, 0.7) 320deg,
    rgba(99, 102, 241, 0) 360deg
  );
  /* Mask to a thin ring so only the glowing edge shows. */
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%);
  mask: radial-gradient(circle, transparent 60%, #000 62%, #000 70%, transparent 72%);
  animation: ringSpin 9s linear infinite;
  pointer-events: none;
}

.n8n-logo {
  position: relative;
  width: 128px;
  height: 128px;
  object-fit: contain;
  /* Entrance (fade + scale-in), then a gentle continuous float. */
  animation:
    logoEnter 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
    logoFloat 6s ease-in-out 0.9s infinite;
  filter: drop-shadow(0 10px 22px rgba(79, 70, 229, 0.28));
}

@keyframes logoEnter {
  from {
    opacity: 0;
    transform: scale(0.6) translateY(12px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes logoFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes ringSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes haloPulse {
  0%,
  100% {
    transform: scale(0.92);
    opacity: 0.65;
  }
  50% {
    transform: scale(1.08);
    opacity: 1;
  }
}

/* Responsive: scale the whole stage down on small screens. */
@media (max-width: 600px) {
  .n8n-logoStage {
    width: 120px;
    height: 120px;
    margin-bottom: 22px;
  }
  .n8n-logo {
    width: 96px;
    height: 96px;
  }
  .n8n-ring {
    width: 112px;
    height: 112px;
  }
}

/* Accessibility: respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .n8n-logo {
    animation: logoEnter 0.01s both;
  }
  .n8n-halo {
    animation: none;
    opacity: 0.7;
  }
  .n8n-ring {
    animation: none;
    opacity: 0.5;
  }
}