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

/* 
  AIRISA ORGANIC MOVEMENT DESIGN SYSTEM
  ------------------------------------
  Core Utilities for Asymmetry & Depth
*/

  header {
    @apply dark:bg-emerald-950/90 dark:border-emerald-900/50 backdrop-blur-md;
  }
  
  :root {
    --color-accent: #008000;  /* Logo Green — light mode */
    --color-accent-glow: rgba(0, 128, 0, 0.35);
  }

  .dark {
    --color-accent: #006400;  /* Dark Forest — dark mode */
    --color-accent-glow: rgba(0, 100, 0, 0.45);
  }

  .dark body {
    @apply bg-emerald-950 text-emerald-50;
  }

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom Ken Burns for Hero */
@keyframes kenBurns {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes glowEmerald {
  0% {
    box-shadow: 0 0 5px rgba(0, 128, 0, 0.25);
  }
  50% {
    box-shadow: 0 0 22px rgba(0, 128, 0, 0.55);
  }
  100% {
    box-shadow: 0 0 5px rgba(0, 128, 0, 0.25);
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes pingPong {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Slides exactly to the end of the track, accounting for container padding */
    transform: translateX(calc(-100% + 100vw - 64px));
  }
}

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

@keyframes iconPop {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(0, 128, 0, 0));
  }
  50% {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px rgba(0, 128, 0, 0.6));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0px rgba(0, 128, 0, 0));
  }
}

@layer base {
  body {
    @apply bg-white dark:bg-emerald-950 transition-colors duration-500;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .animate-fade-in-up {
    animation: fadeInUp 1200ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  /* Clean Background Utility (Cream/Paper Tone) */
  .bg-paper {
    background-color: #f6f7f6; /* matches emerald-50 for high-fidelity cream feel */
    transition: background-color 500ms;
  }
  
  html.dark .bg-paper {
    background-color: #18201c; /* matches new emerald-950 */
  }

  /* Soft-Sharp Hybrid Geometry */
  .organic-radius {
    border-top-right-radius: 60px;
    border-bottom-left-radius: 60px;
    border-top-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  /* Custom Stagger Delays */
  .delay-100 {
    animation-delay: 100ms;
  }
  .delay-200 {
    animation-delay: 200ms;
  }
  .delay-300 {
    animation-delay: 300ms;
  }
  .delay-400 {
    animation-delay: 400ms;
  }
  .delay-500 {
    animation-delay: 500ms;
  }

  /* Brand Accent Glow */
  .shadow-brand {
    box-shadow: 0 0 20px rgba(0, 128, 0, 0.25);
  }

  /* Vivid Lime Glow for Hovers & Accents (light mode) */
  .shadow-emerald-glow {
    box-shadow: 0 0 28px rgba(0, 128, 0, 0.5), 0 0 60px rgba(0, 128, 0, 0.15);
  }

  .dark .shadow-brand {
    box-shadow: 0 0 20px rgba(0, 100, 0, 0.4);
  }

  .dark .shadow-emerald-glow {
    box-shadow: 0 0 28px rgba(0, 100, 0, 0.6), 0 0 60px rgba(0, 100, 0, 0.2);
  }

  .glow-brand {
    position: relative;
  }

  .glow-brand::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(0, 128, 0, 0.15) 0%, rgba(0, 128, 0, 0) 70%);
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
  }

  .dark .glow-brand::after {
    background: radial-gradient(circle, rgba(0, 100, 0, 0.25) 0%, rgba(0, 100, 0, 0) 70%);
  }

  .text-lime {
    @apply text-brand-green;
  }

  .animate-glow-emerald {
    animation: glowEmerald 3s ease-in-out infinite;
  }

  .bg-emerald-glow {
    background-color: rgba(0, 128, 0, 0.08);
    box-shadow: 0 0 18px rgba(0, 128, 0, 0.3);
  }

  .dark .bg-emerald-glow {
    background-color: rgba(0, 100, 0, 0.15);
    box-shadow: 0 0 18px rgba(0, 100, 0, 0.4);
  }

  /* Custom Scrollbar */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  /* Marquee Animation */
  .animate-marquee {
    animation: marquee 40s linear infinite;
  }

  .animate-ping-pong {
    animation: pingPong 15s ease-in-out infinite alternate;
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-icon-pop {
    animation: iconPop 3s ease-in-out infinite;
  }

  .pause {
    animation-play-state: paused;
  }
}