@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-surface-dark text-gray-100 antialiased;
  }
}

@layer components {
  .input-field {
    @apply w-full rounded border border-gray-600 bg-surface-light px-3 py-2 text-sm text-white placeholder-gray-500 focus:border-accent focus:outline-none;
  }

  .mockup-upload-box {
    animation: mockup-border-pulse 3s ease-in-out infinite;
  }

  .mockup-upload-box-image {
    animation: mockup-border-pulse 3s ease-in-out infinite,
      mockup-float 4s ease-in-out infinite;
  }

  .mockup-upload-box-audio {
    animation: mockup-border-pulse 3s ease-in-out infinite 0.5s,
      mockup-float 4s ease-in-out infinite 0.5s;
  }

  .mockup-icon-image {
    animation: mockup-icon-glow 3s ease-in-out infinite;
  }

  .mockup-icon-audio {
    animation: mockup-icon-glow 3s ease-in-out infinite 0.5s;
  }

  .mockup-progress-shimmer {
    animation: mockup-shimmer 2s ease-in-out infinite;
  }

  .mockup-dot-1 {
    animation: processing-dot 1.4s ease-in-out infinite;
  }

  .mockup-dot-2 {
    animation: processing-dot 1.4s ease-in-out infinite 0.2s;
  }

  .mockup-dot-3 {
    animation: processing-dot 1.4s ease-in-out infinite 0.4s;
  }

  .benefits-flow-line {
    animation: benefits-flow-pulse 2s ease-in-out infinite;
  }

  .benefits-process-icon {
    animation: benefits-process-pulse 2.5s ease-in-out infinite;
  }

  .benefits-flow-path {
    stroke-dasharray: 6 8;
    animation: benefits-flow-dash 2s linear infinite;
  }

  .mobile-sidebar-panel-open {
    animation: mobile-sidebar-open 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .mobile-sidebar-panel-close {
    animation: mobile-sidebar-close 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
  }

  .mobile-sidebar-close-btn-open {
    animation: mobile-sidebar-close-btn-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .mobile-sidebar-close-btn-close {
    animation: mobile-sidebar-close-btn-out 0.2s ease-in forwards;
  }

  .mobile-sidebar-link {
    @apply relative block overflow-hidden rounded-lg px-4 py-3 text-base font-medium text-gray-300 transition-all duration-300 ease-out;
  }

  .mobile-sidebar-link::before {
    content: "";
    @apply absolute bottom-2 left-0 top-2 w-1 origin-left scale-y-0 rounded-r bg-accent transition-transform duration-300 ease-out;
  }

  .mobile-sidebar-link:hover {
    @apply translate-x-1 bg-surface-light text-white shadow-[inset_0_0_0_1px_rgba(74,158,255,0.12)];
  }

  .mobile-sidebar-link:hover::before {
    @apply scale-y-100;
  }

  .mobile-sidebar-link-active {
    @apply bg-surface-light text-white shadow-[inset_0_0_0_1px_rgba(74,158,255,0.2)];
  }

  .mobile-sidebar-link-active::before {
    @apply scale-y-100;
  }

  .mobile-sidebar-link-danger:hover {
    @apply bg-red-500/10 text-red-300 shadow-[inset_0_0_0_1px_rgba(239,68,68,0.2)];
  }

  .mobile-sidebar-link-danger:hover::before {
    @apply bg-red-400;
  }

  .badge-marquee {
    @apply relative w-full overflow-hidden;
    mask-image: linear-gradient(
      to right,
      transparent,
      black 8%,
      black 92%,
      transparent
    );
  }

  .badge-marquee-track {
    @apply flex w-max items-center gap-10;
    animation: badge-marquee-scroll var(--badge-marquee-duration, 28s) linear infinite;
  }

  .badge-marquee:hover .badge-marquee-track {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .badge-marquee-track {
      animation: none;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
    }

    .badge-marquee-item[aria-hidden="true"] {
      display: none;
    }
  }

  .badge-marquee-item {
    @apply flex shrink-0 items-center justify-center;
  }

  .badge-marquee-slot {
    @apply flex h-14 max-h-14 items-center justify-center;
  }

  .badge-marquee-slot a,
  .badge-marquee-link {
    @apply m-0 inline-flex items-center p-0 leading-none no-underline;
  }

  .badge-marquee-slot img,
  .badge-marquee-slot iframe,
  .badge-marquee-slot svg,
  .badge-marquee-slot object {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    max-height: 3.5rem !important;
    width: auto !important;
    height: auto !important;
    max-width: min(280px, 70vw) !important;
    object-fit: contain;
    vertical-align: middle;
  }
}

@keyframes mockup-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes mockup-border-pulse {
  0%,
  100% {
    border-color: rgb(75 85 99 / 0.5);
    box-shadow: 0 0 0 0 rgb(255 255 255 / 0);
  }
  50% {
    border-color: rgb(156 163 175 / 0.7);
    box-shadow: 0 0 12px 0 rgb(255 255 255 / 0.04);
  }
}

@keyframes mockup-icon-glow {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.05);
  }
}

@keyframes mockup-shimmer {
  0% {
    left: -30%;
    opacity: 0;
  }
  30% {
    opacity: 0.6;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes processing-dot {
  0%,
  20% {
    opacity: 0;
  }
  40%,
  100% {
    opacity: 1;
  }
}

@keyframes benefits-flow-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@keyframes benefits-process-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
  }
  50% {
    box-shadow: 0 0 28px rgba(239, 68, 68, 0.4);
  }
}

@keyframes benefits-flow-dash {
  to {
    stroke-dashoffset: -28;
  }
}

@keyframes mobile-sidebar-open {
  from {
    opacity: 0.85;
    transform: translateX(100%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes mobile-sidebar-close {
  from {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
  to {
    opacity: 0.85;
    transform: translateX(100%) scale(0.96);
  }
}

@keyframes mobile-sidebar-close-btn-in {
  from {
    opacity: 0;
    transform: scale(0.6) rotate(-90deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes mobile-sidebar-close-btn-out {
  from {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  to {
    opacity: 0;
    transform: scale(0.6) rotate(90deg);
  }
}

@keyframes badge-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
