@layer base {
  :root {
    /* Landing page specific tokens (copied from tender-links) */
    --lp-gradient-start: 330 100% 50%;
    --lp-gradient-end: 271 76% 53%;
    --lp-glow: 330 100% 50%;
    --lp-surface: 270 12% 14%;
    --lp-surface-hover: 270 12% 18%;
  }
}

@layer components {
  /* imagetovideo LP theme: match welcome-popup colors */
  .lp-imagetovideo {
    /* copy from welcome-popup/src/index.css (HSL) */
    --background: hsl(260 20% 8%);
    --foreground: hsl(270 15% 92%);

    --card: hsl(260 18% 12%);
    --card-foreground: hsl(270 15% 92%);

    --popover: hsl(260 18% 14%);
    --popover-foreground: hsl(270 15% 92%);

    --primary: hsl(330 80% 60%);
    --primary-foreground: hsl(0 0% 100%);

    --secondary: hsl(260 16% 16%);
    --secondary-foreground: hsl(270 15% 85%);

    --muted: hsl(260 14% 18%);
    --muted-foreground: hsl(260 10% 50%);

    --accent: hsl(270 50% 55%);
    --accent-foreground: hsl(0 0% 100%);

    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(210 40% 98%);

    --border: hsl(260 14% 20%);
    --input: hsl(260 14% 20%);
    --ring: hsl(330 80% 60%);

    /* map welcome-popup sidebar tokens into this project's sidebar variables */
    --sidebar: hsl(260 20% 10%);
    --sidebar-foreground: hsl(260 10% 50%);
    --sidebar-primary: hsl(330 80% 60%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(260 16% 16%);
    --sidebar-accent-foreground: hsl(270 15% 92%);
    --sidebar-border: hsl(260 14% 16%);
    --sidebar-ring: hsl(330 80% 60%);

    /* match welcome-popup typography */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }

  .lp-gradient-text {
    background: linear-gradient(
      135deg,
      hsl(var(--lp-gradient-start)),
      hsl(var(--lp-gradient-end))
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .lp-gradient-bg {
    background: linear-gradient(
      135deg,
      hsl(var(--lp-gradient-start)),
      hsl(var(--lp-gradient-end))
    );
  }

  .lp-gradient-border {
    border: 1px solid transparent;
    background-clip: padding-box;
    position: relative;
  }

  .lp-gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
      135deg,
      hsl(var(--lp-gradient-start)),
      hsl(var(--lp-gradient-end))
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .lp-glow {
    box-shadow:
      0 0 40px -10px hsl(var(--lp-glow) / 0.4),
      0 0 80px -20px hsl(var(--lp-gradient-end) / 0.2);
  }

  .lp-pulse-glow {
    animation: lp-pulse 2s ease-in-out infinite;
  }

  @keyframes lp-pulse {
    0%,
    100% {
      box-shadow: 0 0 20px -5px hsl(var(--lp-glow) / 0.3);
    }
    50% {
      box-shadow: 0 0 40px -5px hsl(var(--lp-glow) / 0.6);
    }
  }

  @keyframes lp-shimmer {
    0% {
      background-position: -200% 0;
    }
    100% {
      background-position: 200% 0;
    }
  }

  .lp-shimmer {
    background: linear-gradient(
      90deg,
      transparent 0%,
      hsl(var(--lp-gradient-start) / 0.4) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: lp-shimmer 1.5s ease-in-out infinite;
  }

  .lp-floating-heart {
    position: absolute;
    bottom: 100%;
    animation: lp-float-up 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 20;
  }

  @keyframes lp-float-up {
    0% {
      opacity: 1;
      transform: translateY(0) scale(0.5) rotate(0deg);
    }
    50% {
      opacity: 1;
      transform: translateY(-40px) scale(1.3) rotate(15deg);
    }
    100% {
      opacity: 0;
      transform: translateY(-80px) scale(0.8) rotate(-10deg);
    }
  }

  .lp-heart-bounce {
    animation: lp-heart-pop 0.6s cubic-bezier(0.17, 0.67, 0.21, 1.69) forwards;
  }

  @keyframes lp-heart-pop {
    0% {
      transform: scale(1);
    }
    30% {
      transform: scale(2.2) rotate(-15deg);
    }
    50% {
      transform: scale(1.8) rotate(10deg);
    }
    70% {
      transform: scale(2) rotate(-5deg);
    }
    100% {
      transform: scale(1);
    }
  }

  .lp-label-pop {
    animation: lp-label-scale 0.8s cubic-bezier(0.17, 0.67, 0.21, 1.69) forwards;
  }

  @keyframes lp-label-scale {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.6);
    }
    100% {
      transform: scale(1);
    }
  }

  .lp-bar-flash {
    animation: lp-bar-glow 0.8s ease-out;
  }

  @keyframes lp-bar-glow {
    0% {
      box-shadow: 0 0 0 0 hsl(var(--lp-gradient-start) / 0.6);
    }
    50% {
      box-shadow:
        0 0 30px 8px hsl(var(--lp-gradient-start) / 0.5),
        0 0 60px 16px hsl(var(--lp-gradient-end) / 0.3);
    }
    100% {
      box-shadow: 0 0 0 0 transparent;
    }
  }

  .lp-tip-explode {
    animation: lp-tip-pop 0.6s ease-out;
  }

  @keyframes lp-tip-pop {
    0% {
      transform: translateY(-50%) scale(1);
    }
    40% {
      transform: translateY(-50%) scale(2.5);
    }
    100% {
      transform: translateY(-50%) scale(1);
    }
  }

  .lp-score-popup {
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    animation: lp-popup 1.2s cubic-bezier(0.17, 0.67, 0.21, 1.69) forwards;
    background: linear-gradient(135deg, hsl(var(--lp-gradient-start)), hsl(var(--lp-gradient-end)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px hsl(var(--lp-gradient-start) / 0.5));
    z-index: 30;
  }

  @keyframes lp-popup {
    0% {
      opacity: 0;
      transform: translate(-50%, 0) scale(0.5);
    }
    30% {
      opacity: 1;
      transform: translate(-50%, -16px) scale(1.4);
    }
    70% {
      opacity: 1;
      transform: translate(-50%, -24px) scale(1.1);
    }
    100% {
      opacity: 0;
      transform: translate(-50%, -40px) scale(0.8);
    }
  }

  .bg-lp-surface {
    background-color: hsl(var(--lp-surface));
  }

  .bg-lp-surface-hover:hover {
    background-color: hsl(var(--lp-surface-hover));
  }
}