/**
 * @file
 * CTA Banner Component Styles.
 *
 * Includes:
 * - Default dark variant with gooey gradient background
 * - Branded variant with primary color background
 */

@layer components {
  /* ==========================================
   * Branded Variant (Emons-style primary color)
   * ========================================== */
  .cta-banner--branded {
    /* Override gooey variables for branded variant */
    --gooey-bg1: var(--color-primary-600);
    --gooey-bg2: var(--color-primary-700);
  }

  .cta-banner--branded h2,
  .cta-banner--branded h3 {
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.02em;
  }

  /* Branded buttons styling */
  .cta-banner--branded .btn-group .btn {
    border-color: white;
    color: white;
  }

  .cta-banner--branded .btn-group .btn:hover {
    background-color: white;
    color: var(--color-primary-600);
  }

  .cta-banner--branded .btn-group .btn--primary {
    background-color: white;
    color: var(--color-primary-600);
    border-color: white;
  }

  .cta-banner--branded .btn-group .btn--primary:hover {
    background-color: transparent;
    color: white;
    border-color: white;
  }

  /* ==========================================
   * Default Dark Variant (Gooey Gradient)
   * ========================================== */
  .cta-banner {
    /* Gooey gradient colors - black tones */
    --gooey-bg1: hsl(0 0% 3%);
    --gooey-bg2: hsl(0 0% 1%);
    --gooey-color1: 30, 30, 30; /* Dark black */
    --gooey-color2: 20, 20, 20; /* Darker */
    --gooey-color3: 15, 15, 15; /* Very dark */
    --gooey-color4: 40, 40, 40; /* Slightly lighter black */
    --gooey-color5: 10, 10, 10; /* Almost pure black */
    --gooey-interactive: 25, 25, 25; /* Black */
    --gooey-circle-size: 70%;
    --gooey-blending: normal;
  }

  /* Gooey gradient background container - transparent to show grid beneath */
  .cta-banner__gooey {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: transparent;
    z-index: 1;
  }

  /* SVG filter for gooey effect - hidden but referenced */
  .cta-banner__gooey svg {
    position: absolute;
    width: 0;
    height: 0;
  }

  /* Container for gradient blobs with gooey filter - black ambient covering grid */
  .cta-banner__gradients {
    filter: url(#cta-goo) blur(80px);
    width: 100%;
    height: 100%;
    opacity: 0.85;
  }

  /* Keyframe animations for blob movement */
  @keyframes cta-move-vertical {
    0% { transform: translateY(-30%); }
    50% { transform: translateY(30%); }
    100% { transform: translateY(-30%); }
  }

  @keyframes cta-move-circle {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(180deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes cta-move-horizontal {
    0% { transform: translateX(-30%) translateY(-5%); }
    50% { transform: translateX(30%) translateY(5%); }
    100% { transform: translateX(-30%) translateY(-5%); }
  }

  /* Base blob styles */
  .cta-banner__blob {
    position: absolute;
    mix-blend-mode: var(--gooey-blending);
    width: var(--gooey-circle-size);
    height: var(--gooey-circle-size);
    top: calc(50% - var(--gooey-circle-size) / 2);
    left: calc(50% - var(--gooey-circle-size) / 2);
    /* ds-exception: Circle shape */
    border-radius: 50%;
  }

  /* Individual blob variations - black ambient covering center */
  .cta-banner__blob--1 {
    background: radial-gradient(
      circle at center,
      rgba(var(--gooey-color1), 1) 0,
      rgba(var(--gooey-color1), 0) 50%
    ) no-repeat;
    animation: cta-move-vertical 45s ease infinite;
    opacity: 1;
  }

  .cta-banner__blob--2 {
    background: radial-gradient(
      circle at center,
      rgba(var(--gooey-color2), 1) 0,
      rgba(var(--gooey-color2), 0) 50%
    ) no-repeat;
    transform-origin: calc(50% - 300px);
    animation: cta-move-circle 35s reverse infinite;
    opacity: 0.9;
  }

  .cta-banner__blob--3 {
    background: radial-gradient(
      circle at center,
      rgba(var(--gooey-color3), 1) 0,
      rgba(var(--gooey-color3), 0) 50%
    ) no-repeat;
    top: calc(50% - var(--gooey-circle-size) / 2 + 150px);
    left: calc(50% - var(--gooey-circle-size) / 2 - 300px);
    transform-origin: calc(50% + 300px);
    animation: cta-move-circle 55s linear infinite;
    opacity: 0.8;
  }

  .cta-banner__blob--4 {
    background: radial-gradient(
      circle at center,
      rgba(var(--gooey-color4), 0.9) 0,
      rgba(var(--gooey-color4), 0) 50%
    ) no-repeat;
    transform-origin: calc(50% - 150px);
    animation: cta-move-horizontal 50s ease infinite;
    opacity: 0.8;
  }

  .cta-banner__blob--5 {
    background: radial-gradient(
      circle at center,
      rgba(var(--gooey-color5), 0.9) 0,
      rgba(var(--gooey-color5), 0) 50%
    ) no-repeat;
    width: calc(var(--gooey-circle-size) * 1.5);
    height: calc(var(--gooey-circle-size) * 1.5);
    top: calc(50% - var(--gooey-circle-size) * 0.75);
    left: calc(50% - var(--gooey-circle-size) * 0.75);
    transform-origin: calc(50% - 500px) calc(50% + 150px);
    animation: cta-move-circle 40s ease infinite;
    opacity: 0.7;
  }

  /* Interactive blob - follows mouse cursor */
  .cta-banner__blob--interactive {
    background: radial-gradient(
      circle at center,
      rgba(var(--gooey-interactive), 0.6) 0,
      rgba(var(--gooey-interactive), 0) 50%
    ) no-repeat;
    width: 80%;
    height: 80%;
    top: -40%;
    left: -40%;
    opacity: 0.3;
    /* Transform controlled by JavaScript */
    transition: transform 0.1s ease-out;
  }

  /* Pulsing glow on primary CTA button */
  @keyframes cta-pulse-glow {
    0%, 100% {
      /* ds-exception: Keyframe animation shadow */
      box-shadow: 0 0 20px rgba(187, 182, 41, 0.3);
    }
    50% {
      /* ds-exception: Keyframe animation shadow */
      box-shadow: 0 0 40px rgba(187, 182, 41, 0.5);
    }
  }

  .cta-banner .btn-group .btn-primary {
    animation: cta-pulse-glow 3s ease-in-out infinite;
  }

  /* Reduce motion for accessibility */
  @media (prefers-reduced-motion: reduce) {
    .cta-banner__blob {
      animation: none !important;
    }
    .cta-banner__blob--interactive {
      display: none;
    }
    .cta-banner .btn-group .btn-primary {
      animation: none !important;
    }
  }
}