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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Sanpiti Nursing Home Design System */
    --background: 0 0% 100%;
    --foreground: 173 26% 19%;

    /* Glassmorphism cards */
    --card: 0 0% 100%;
    --card-foreground: 173 26% 19%;

    --popover: 0 0% 100%;
    --popover-foreground: 173 26% 19%;

    /* Sanpiti Brand Colors */
    --primary: 181 40% 45%;
    --primary-foreground: 0 0% 100%;
    --primary-soft: 181 42% 85%;
    --primary-glow: 182 42% 69%;
    
    /* Medium-style Sanpiti Palette */
    --medium-gold: 39 83% 54%;        /* E69F24 */
    --medium-gold-light: 44 68% 57%;  /* DEB547 */
    --medium-teal-light: 180 50% 70%; /* 8CD1D3 */
    --medium-teal: 181 40% 57%;       /* 67BBBD */
    --medium-teal-dark: 181 40% 45%;  /* 5AA0A2 */
    --medium-green: 173 26% 19%;      /* 243D3A */
    
    /* Sanpiti Color Palette */
    --sanpiti-gold: 39 80% 52%;
    --sanpiti-gold-light: 44 68% 57%;
    --sanpiti-teal: 182 42% 69%;
    --sanpiti-teal-dark: 181 40% 57%;
    --sanpiti-green: 173 26% 19%;
    --sanpiti-red: 7 100% 34%;
    --sanpiti-gray: 0 0% 95%;
    
    /* Bright Medical/Health themed gradients */
    --medical-start: 180 100% 25%;
    --medical-mid: 195 90% 35%;
    --medical-end: 210 80% 45%;
    
    /* Natural gradient colors from reference image */
    --coral-50: 14 100% 96%;
    --coral-100: 13 100% 89%;
    --coral-200: 13 95% 80%;
    --coral-300: 13 90% 70%;
    --coral-400: 13 85% 60%;
    --coral-500: 13 80% 50%;
    --coral-600: 13 75% 45%;
    --coral-700: 13 70% 40%;
    --coral-800: 13 65% 35%;
    --coral-900: 13 60% 25%;
    
    /* Bright Wellness gradient */
    --wellness-start: 140 80% 45%;
    --wellness-mid: 160 85% 40%;
    --wellness-end: 180 90% 35%;
    
    /* Animated gradient background */
    --gradient-animated: linear-gradient(-45deg, 
      hsl(var(--primary) / 0.02),
      hsl(var(--medical-start) / 0.02),
      hsl(var(--wellness-start) / 0.02),
      hsl(var(--primary-glow) / 0.02));
      
    /* Animated background size for gradient animation */
    --bg-size: 400% 400%;

    /* Bright neutral grays */
    --secondary: 0 0% 98%;
    --secondary-foreground: 212 20% 25%;
    
    --muted: 0 0% 99%;
    --muted-foreground: 212 15% 40%;

    --accent: 180 30% 97%;
    --accent-foreground: 212 20% 25%;

    --success: 140 70% 40%;
    --success-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 93%;
    --input: 0 0% 93%;
    --ring: 185 85% 40%;

    --radius: 1.25rem;

    /* Brand Color Gradients - CI Colors */
    --brand-amber: 46 89% 48%;
    --brand-amber-light: 46 72% 59%;
    --brand-teal: 187 38% 64%;
    --brand-teal-light: 188 52% 80%;
    --brand-dark: 171 36% 22%;
    
    /* Gradient variables */
    --gradient-brand: linear-gradient(135deg, hsl(var(--brand-amber)) 0%, hsl(var(--brand-amber-light)) 50%, hsl(var(--brand-teal)) 100%);
    --gradient-header: linear-gradient(135deg, hsl(var(--brand-amber)) 0%, hsl(var(--brand-teal)) 100%);
    --gradient-warm: linear-gradient(135deg, hsl(var(--brand-amber)) 0%, hsl(var(--brand-amber-light)) 100%);
    --gradient-cool: linear-gradient(135deg, hsl(var(--brand-teal-light)) 0%, hsl(var(--brand-teal)) 100%);

    /* Modern Apple-style gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--medical-start)), hsl(var(--medical-end)));
    --gradient-wellness: linear-gradient(135deg, hsl(var(--wellness-start)), hsl(var(--wellness-end)));
    --gradient-hero: linear-gradient(135deg, hsl(var(--medical-start) / 0.1), hsl(var(--medical-end) / 0.05));
    --gradient-card: linear-gradient(145deg, hsl(0 0% 100% / 0.9), hsl(0 0% 100% / 0.7));
    --gradient-glass: linear-gradient(145deg, hsl(0 0% 100% / 0.25), hsl(0 0% 100% / 0.1));
    
    /* Dynamic gradients for modern look */
    --gradient-dynamic-1: linear-gradient(135deg, hsl(var(--accent-blue)), hsl(var(--accent-purple)));
    --gradient-dynamic-2: linear-gradient(135deg, hsl(var(--accent-purple)), hsl(var(--accent-pink)));
    --gradient-dynamic-3: linear-gradient(135deg, hsl(var(--accent-orange)), hsl(var(--accent-blue)));
    
    /* Additional healing and wellness colors */
    --healing-gold: 45 90% 60%;
    --wellness-sage: 140 30% 60%;
    --golden-start: 45 95% 55%;
    --golden-end: 35 90% 50%;
    
    /* Modern shadows with color */
    --shadow-subtle: 0 1px 3px hsl(0 0% 0% / 0.1);
    --shadow-medium: 0 4px 12px hsl(0 0% 0% / 0.1);
    --shadow-large: 0 8px 32px hsl(0 0% 0% / 0.12);
    --shadow-glow: 0 0 40px hsl(var(--primary) / 0.3);
    --shadow-glow-strong: 0 0 60px hsl(var(--primary) / 0.4);
    
    /* Glassmorphism blur */
    --blur-glass: blur(20px);
    --blur-subtle: blur(8px);

    /* Typography */
    --font-heading: 'IBM Plex Sans Thai', sans-serif;
    --font-body: 'IBM Plex Sans Thai', sans-serif;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'IBM Plex Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    font-weight: 600;
  }
}

@layer components {
  /* Modern Apple-style Buttons */
  .btn-modern-primary {
    @apply relative overflow-hidden bg-gradient-to-r from-primary via-primary-glow to-primary 
           text-white px-8 py-4 rounded-2xl font-semibold text-lg 
           transition-all duration-700 ease-out hover:scale-110 
           shadow-lg hover:shadow-2xl cursor-pointer;
    background-size: 200% 100%;
    animation: gradient-shift 3s ease-in-out infinite, pulse-glow 2s ease-in-out infinite;
    color: white !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .btn-modern-primary:hover {
    background-position: 100% 0;
    transform: translateY(-4px) scale(1.1);
    box-shadow: var(--shadow-glow-strong);
    animation: gradient-shift 1s ease-in-out infinite, pulse-glow 1s ease-in-out infinite;
    color: white !important;
  }

  .btn-modern-primary:active {
    transform: translateY(-2px) scale(1.05);
    color: white !important;
  }

  .btn-modern-secondary {
    @apply relative bg-white/80 backdrop-blur-md text-foreground 
           border border-white/20 px-8 py-4 rounded-2xl font-semibold text-lg
           transition-all duration-700 ease-out hover:bg-white/90 hover:scale-110
           shadow-md hover:shadow-lg cursor-pointer;
    animation: float 4s ease-in-out infinite;
  }

  .btn-modern-secondary:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: var(--shadow-glow);
    animation: float 2s ease-in-out infinite;
  }

  .btn-modern-secondary:active {
    transform: translateY(-2px) scale(1.05);
  }

  .btn-glass {
    @apply relative bg-white/10 backdrop-blur-md text-white 
           border border-white/20 px-8 py-4 rounded-2xl font-medium
           transition-all duration-500 ease-out hover:bg-white/20 hover:scale-105
           shadow-sm cursor-pointer;
  }

  /* Modern Gradient Sections */
  .section-modern-hero {
    background: linear-gradient(135deg, 
      hsl(var(--medical-start) / 0.03) 0%, 
      hsl(var(--medical-mid) / 0.05) 50%, 
      hsl(var(--medical-end) / 0.03) 100%);
  }

  .section-glass {
    @apply relative;
    background: var(--gradient-glass);
    backdrop-filter: var(--blur-glass);
  }

  .section-glass::before {
    content: '';
    @apply absolute inset-0 rounded-3xl;
    background: var(--gradient-dynamic-1);
    opacity: 0.05;
    z-index: -1;
  }

  /* Modern Cards with Glassmorphism */
  .card-modern {
    @apply relative bg-white/70 backdrop-blur-xl border border-white/20 
           rounded-3xl transition-all duration-700 ease-out 
           hover:scale-105 hover:bg-white/80 shadow-md;
  }

  .card-modern:hover {
    @apply shadow-xl;
    transform: translateY(-8px) scale(1.02);
  }

  .card-gradient-modern {
    @apply relative text-white border-0 rounded-3xl overflow-hidden
           transition-all duration-700 ease-out hover:scale-105 shadow-lg;
    background: var(--gradient-primary);
    box-shadow: var(--shadow-glow);
  }

  .card-gradient-wellness {
    @apply relative text-white border-0 rounded-3xl overflow-hidden
           transition-all duration-700 ease-out hover:scale-105 shadow-md;
    background: var(--gradient-wellness);
  }

  .card-floating {
    @apply relative;
    animation: float 6s ease-in-out infinite;
  }

  /* Advanced Animations */
  .fade-in-modern {
    @apply opacity-0 translate-y-8 scale-95 
           transition-all duration-1000 ease-out;
  }

  .fade-in-modern.animate {
    @apply opacity-100 translate-y-0 scale-100;
  }

  .slide-in-modern {
    @apply opacity-0 translate-x-8 
           transition-all duration-1000 ease-out;
  }

  .slide-in-modern.animate {
    @apply opacity-100 translate-x-0;
  }

  .scale-in-modern {
    @apply opacity-0 scale-90 
           transition-all duration-700 ease-out;
  }

  .scale-in-modern.animate {
    @apply opacity-100 scale-100;
  }

  /* Interactive Elements */
  .interactive-card {
    @apply cursor-pointer transition-all duration-500 ease-out;
  }

  .interactive-card:hover {
    transform: translateY(-4px) rotateX(5deg);
    @apply shadow-xl;
  }

  /* Parallax and modern effects */
  .parallax-modern {
    @apply transition-transform duration-700 ease-out;
  }

  .glass-effect {
    backdrop-filter: var(--blur-glass);
    background: linear-gradient(145deg, 
      hsl(0 0% 100% / 0.25), 
      hsl(0 0% 100% / 0.1));
    border: 1px solid hsl(0 0% 100% / 0.2);
  }

  /* Gradient text */
  .text-gradient-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-wellness {
    background: var(--gradient-wellness);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Floating elements */
  .floating-element {
    animation: float 4s ease-in-out infinite;
  }

  .floating-element:nth-child(2) {
    animation-delay: 1s;
  }

  .floating-element:nth-child(3) {
    animation-delay: 2s;
  }
  
  /* Apple-style classes */
  .card-apple {
    @apply transition-all duration-700 ease-out hover:scale-105 shadow-lg hover:shadow-xl;
  }
  
  .card-soft {
    @apply shadow-lg hover:shadow-xl transition-all duration-300;
  }
  
  .card-medical {
    @apply shadow-xl hover:shadow-2xl transition-all duration-500;
  }
  
  .section-white {
    @apply bg-white;
  }
  
  .section-golden {
    background: linear-gradient(135deg, hsl(var(--golden-start)), hsl(var(--golden-end)));
  }
  
  .section-teal {
    background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-glow)));
  }
  
  .sticky-cta {
    @apply fixed bottom-6 right-6 z-40 md:hidden;
  }
  
  .btn-apple-primary {
    @apply bg-gradient-to-r from-primary to-primary-glow text-white hover:from-primary/90 hover:to-primary-glow/90 transition-all duration-500 hover:scale-110 cursor-pointer;
    animation: pulse-glow 3s ease-in-out infinite;
  }

  .btn-apple-primary:hover {
    transform: translateY(-2px) scale(1.1);
    animation: pulse-glow 1s ease-in-out infinite;
  }

  /* CTA Animation Classes */
  .btn-cta-animate {
    @apply relative overflow-hidden;
    animation: pulse-glow 2s ease-in-out infinite, float 4s ease-in-out infinite;
  }

  .btn-cta-animate:hover {
    transform: translateY(-4px) scale(1.1);
    animation: pulse-glow 1s ease-in-out infinite;
  }

  .btn-cta-animate::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent;
    transform: translateX(-100%);
    transition: transform 0.6s ease-in-out;
  }

  .btn-cta-animate:hover::before {
    transform: translateX(100%);
  }
}

/* Keyframe Animations */
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-10px) rotate(1deg); }
  50% { transform: translateY(-5px) rotate(-1deg); }
  75% { transform: translateY(-15px) rotate(0.5deg); }
}

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

@keyframes gradient-animate {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Animated gradient background for hero */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  75% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animated-gradient {
  background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #f5576c, #4facfe);
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
}

/* Healthcare innovation gradient with multi-layer effects */
.clarion-gradient {
  position: relative;
  background: linear-gradient(45deg, 
    #f4f1e8 0%,
    #efecd9 8%,
    #e8e5ca 16%,
    #ddd9bb 24%,
    #d0cbac 32%,
    #c2bd9d 40%,
    #b4b08e 48%,
    #a1b5c5 56%,
    #8ebedb 64%,
    #7bc7f0 72%,
    #68d0ff 80%,
    #55d9ff 88%,
    #42e2ff 96%,
    #2febff 100%
  );
  background-size: 600% 600%;
  animation: videoFlow 25s ease-in-out infinite;
}

.clarion-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 15% 25%, rgba(244, 241, 232, 0.6) 0%, transparent 35%),
    radial-gradient(circle at 85% 15%, rgba(104, 208, 255, 0.4) 0%, transparent 45%),
    radial-gradient(circle at 25% 75%, rgba(47, 235, 255, 0.3) 0%, transparent 40%),
    radial-gradient(circle at 75% 85%, rgba(161, 181, 197, 0.5) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(208, 203, 172, 0.2) 0%, transparent 55%);
  animation: glowWaves 30s ease-in-out infinite;
}

.clarion-gradient::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(120deg, transparent 0%, rgba(244, 241, 232, 0.15) 20%, transparent 40%),
    linear-gradient(240deg, transparent 0%, rgba(47, 235, 255, 0.1) 20%, transparent 40%);
  background-size: 300% 300%;
  animation: lightSweep 35s linear infinite;
  pointer-events: none;
}


@keyframes videoFlow {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 50% 100%;
  }
  75% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 0% 0%;
  }
}

@keyframes glowWaves {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1) rotate(0deg);
  }
  25% {
    opacity: 0.7;
    transform: scale(1.15) rotate(3deg);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.9) rotate(-2deg);
  }
  75% {
    opacity: 0.8;
    transform: scale(1.1) rotate(1deg);
  }
}

@keyframes lightSweep {
  0% {
    background-position: -300% -300%;
  }
  100% {
    background-position: 300% 300%;
  }
}

/* Text highlight effects */
.text-highlight {
  position: relative;
  display: inline-block;
}

.text-highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, hsl(var(--medium-gold)) 0%, hsl(var(--medium-teal)) 100%);
  opacity: 0.3;
  z-index: -1;
  border-radius: 4px;
}

.text-underline {
  position: relative;
  display: inline-block;
}

.text-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: hsl(var(--medium-teal));
  border-radius: 2px;
  animation: underlineGlow 2s ease-in-out infinite alternate;
}

@keyframes underlineGlow {
  0% { opacity: 0.6; transform: scaleX(1); }
  100% { opacity: 1; transform: scaleX(1.05); }
}

.bg-gradient-animated {
  background: var(--gradient-animated);
  background-size: var(--bg-size);
  animation: gradient-animate 15s ease infinite;
}

.animate-gradient-text {
  animation: gradient-animate 3s ease infinite;
}

.typewriter-headline {
  animation: fade-in 1s ease-out;
}

.slide-up-delayed {
  animation: slide-up 1s ease-out 0.5s both;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cta-primary:hover {
  animation: pulse-glow 1s ease-in-out infinite;
}

.cta-secondary:hover {
  animation: float 2s ease-in-out infinite;
  }

  /* Apple-style Scrollbar Hide */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

   /* Shimmer animation */
   @keyframes shimmer {
     0% {
       transform: translateX(-100%);
     }
     100% {
       transform: translateX(100%);
     }
   }

   /* Patient Info Page Animations */
   @keyframes gradient {
     0%, 100% { 
       background-position: 0% 50%; 
     }
     50% { 
       background-position: 100% 50%; 
     }
   }

   @keyframes gradient-xy {
     0%, 100% {
       background-size: 400% 400%;
       background-position: left center;
     }
     50% {
       background-size: 200% 200%;
       background-position: right center;
     }
   }

   .fade-in-up {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .fade-in-left {
     opacity: 0;
     transform: translateX(-30px);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .fade-in-right {
     opacity: 0;
     transform: translateX(30px);
     transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .fade-in-up.animate,
   .fade-in-left.animate,
   .fade-in-right.animate {
     opacity: 1;
     transform: translateY(0) translateX(0);
  }

/* Checkered background for transparency preview */
.bg-checkered {
  background-image: 
    linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
    linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
    linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}