songs2yt/app/globals.css

@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;
  }
}

@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);
  }
}