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

/* LUMEUS Design System - Premium wellness aesthetic with Apple-inspired animations */

@layer base {
  :root {
    /* Core Brand Colors */
    --background: 0 0% 100%;
    --foreground: 217 32% 17%;

    /* Wellness Primary - Calming Blue */
    --primary: 220 70% 60%;
    --primary-light: 220 85% 70%;
    --primary-dark: 220 60% 45%;
    --primary-glow: 220 85% 75%;
    --primary-foreground: 0 0% 100%;

    /* Wellness Secondary - Soft Purple */
    --secondary: 260 50% 70%;
    --secondary-light: 260 65% 80%;
    --secondary-dark: 260 45% 55%;
    --secondary-foreground: 0 0% 100%;

    /* Wellness Accent - Soft Purple */
    --accent: 280 60% 65%;
    --accent-light: 285 70% 75%;
    --accent-foreground: 0 0% 100%;

    /* Neutral Palette */
    --muted: 220 15% 96%;
    --muted-foreground: 220 10% 45%;
    --muted-dark: 220 15% 90%;

    /* Card System */
    --card: 0 0% 100%;
    --card-foreground: 217 32% 17%;
    --card-border: 220 15% 92%;

    /* Interface Elements */
    --border: 220 15% 90%;
    --input: 220 15% 94%;
    --ring: 220 70% 60%;
    --destructive: 0 65% 55%;
    --destructive-foreground: 0 0% 100%;

    /* Premium Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
    --gradient-wellness: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary-light)) 0%, hsl(240 60% 75%) 50%, hsl(250 45% 70%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(var(--muted)) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
    
    /* Service Card Gradients - Subtle tints based on icon colors */
    --gradient-card-app: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(260 30% 97%) 100%);
    --gradient-card-prevention: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(280 35% 97%) 100%);
    --gradient-card-masterclass: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(220 40% 97%) 100%);
    --gradient-card-corporate: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(220 45% 97%) 100%);

    /* Apple-inspired Shadows */
    --shadow-soft: 0 4px 16px hsl(var(--primary) / 0.08);
    --shadow-medium: 0 8px 32px hsl(var(--primary) / 0.12);
    --shadow-large: 0 16px 64px hsl(var(--primary) / 0.16);
    --shadow-glow: 0 0 40px hsl(var(--primary) / 0.15);

    /* Premium Transitions - Apple-style easing */
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-apple: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --radius: 0.5rem;

    --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 {
    /* Dark Mode - Premium wellness aesthetic */
    --background: 217 35% 8%;
    --foreground: 220 15% 95%;

    /* Adjusted for dark mode */
    --primary: 220 80% 70%;
    --primary-light: 220 90% 80%;
    --primary-dark: 220 70% 55%;
    --primary-glow: 220 90% 85%;
    --primary-foreground: 217 35% 8%;

    --secondary: 260 60% 75%;
    --secondary-light: 260 75% 85%;
    --secondary-dark: 260 55% 60%;
    --secondary-foreground: 217 35% 8%;

    --accent: 280 70% 75%;
    --accent-light: 285 80% 85%;
    --accent-foreground: 217 35% 8%;

    --muted: 217 25% 15%;
    --muted-foreground: 220 15% 65%;
    --muted-dark: 217 25% 12%;

    --card: 217 30% 12%;
    --card-foreground: 220 15% 95%;
    --card-border: 217 25% 20%;

    --border: 217 25% 18%;
    --input: 217 25% 15%;
    --ring: 220 80% 70%;
    --destructive: 0 75% 65%;
    --destructive-foreground: 217 35% 8%;

    /* Dark mode gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
    --gradient-wellness: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary-dark)) 0%, hsl(240 50% 60%) 50%, hsl(250 35% 55%) 100%);
    --gradient-card: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(var(--muted)) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)) 0%, hsl(var(--muted)) 100%);
    
    /* Service Card Gradients - Dark mode subtle tints */
    --gradient-card-app: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(260 25% 15%) 100%);
    --gradient-card-prevention: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(280 30% 15%) 100%);
    --gradient-card-masterclass: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(220 35% 15%) 100%);
    --gradient-card-corporate: linear-gradient(145deg, hsl(var(--card)) 0%, hsl(220 40% 15%) 100%);

    /* Dark mode shadows */
    --shadow-soft: 0 4px 16px hsl(0 0% 0% / 0.3);
    --shadow-medium: 0 8px 32px hsl(0 0% 0% / 0.4);
    --shadow-large: 0 16px 64px hsl(0 0% 0% / 0.5);
    --shadow-glow: 0 0 40px hsl(var(--primary) / 0.3);
    --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-sans antialiased;
    font-feature-settings: 'rlig' 1, 'calt' 1;
  }

  /* Apple-inspired smooth scrolling */
  html {
    scroll-behavior: smooth;
  }
}

@layer utilities {
  /* Apple-style Animation Classes */
  .animate-fade-in-up {
    animation: fade-in-up 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .animate-fade-in {
    animation: fade-in 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .animate-fade-in-scale {
    animation: fade-in-scale 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .animate-stagger-1 { animation-delay: 0.1s; }
  .animate-stagger-2 { animation-delay: 0.2s; }
  .animate-stagger-3 { animation-delay: 0.3s; }
  .animate-stagger-4 { animation-delay: 0.4s; }

  /* Premium Hover Effects */
  .hover-lift {
    transition: var(--transition-apple);
  }
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-medium);
  }

  .hover-glow {
    transition: var(--transition-smooth);
  }
  .hover-glow:hover {
    box-shadow: var(--shadow-glow);
  }

  /* Gradient Text */
  .gradient-text {
    background: linear-gradient(315deg, hsl(220 90% 85%) 0%, hsl(240 70% 80%) 50%, hsl(250 60% 75%) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Blue to Purple Gradient (from Stress S to R) */
  .gradient-blue-purple {
    background: linear-gradient(135deg, hsl(220 90% 60%), hsl(250 70% 65%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Background Gradients */
  .bg-gradient-primary { background: var(--gradient-primary); }
  .bg-gradient-wellness { background: var(--gradient-wellness); }
  .bg-gradient-hero { background: var(--gradient-hero); }
  .bg-gradient-card { background: var(--gradient-card); }
  .bg-gradient-subtle { background: var(--gradient-subtle); }
  
  /* Service Card Gradients */
  .bg-gradient-card-app { background: var(--gradient-card-app); }
  .bg-gradient-card-prevention { background: var(--gradient-card-prevention); }
  .bg-gradient-card-masterclass { background: var(--gradient-card-masterclass); }
  .bg-gradient-card-corporate { background: var(--gradient-card-corporate); }

  /* Glass Morphism */
  .glass {
    background: hsl(var(--card) / 0.8);
    backdrop-filter: blur(16px);
    border: 1px solid hsl(var(--border) / 0.2);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fade-in-scale {
  from {
    opacity: 0;
    transform: scale3d(0.95, 0.95, 1);
  }
  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

/* Hero Section Custom Animations */
@keyframes heroTextEnter {
  0% {
    opacity: 0;
    transform: translateY(60px) scale(1.1);
  }
  60% {
    opacity: 1;
    transform: translateY(-10px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes phoneScale {
  0% {
    opacity: 0;
    transform: scale(0.8) rotateY(15deg);
  }
  70% {
    opacity: 1;
    transform: scale(1.05) rotateY(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
  }
}

@keyframes floatPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.8;
  }
}

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

/* Mobile viewport and safe area utilities */
@layer utilities {
  .pt-safe-top {
    padding-top: env(safe-area-inset-top, 1rem);
  }
  
  .min-h-screen-mobile {
    min-height: 100vh;
    min-height: 100dvh;
  }
  
}


/* Phone Animation Keyframes */
@keyframes phonePopUp {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(60px);
  }
  70% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes slideOutLeft {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-120px) translateY(14px) scale(1.1);
  }
}

@keyframes slideOutRight {
  0% {
    opacity: 0;
    transform: translateX(0) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(120px) translateY(14px) scale(1.1);
  }
}

/* Mobile viewport height utilities */
.h-screen-mobile {
  height: 100vh;
  height: 100dvh;
}

.min-h-screen-mobile {
  min-height: 100vh;  
  min-height: 100dvh;
}

/* Phone Animation Classes - Optimized for 2s max load time */
.phone-main {
  animation: phonePopUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 1.1s;
  opacity: 0;
}

.phone-left {
  animation: slideOutLeft 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

.phone-right {
  animation: slideOutRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  animation-delay: 1.5s;
  opacity: 0;
}

/* Mobile-specific phone animations with faster timing */
@media (max-width: 1023px) {
  .phone-main {
    animation: none !important;
    animation-delay: 0;
    opacity: 1 !important;
  }

  .phone-left {
    animation: none !important;
    animation-delay: 0;
    opacity: 1 !important;
  }

  .phone-right {
    animation: none !important;
    animation-delay: 0;
    opacity: 1 !important;
  }
}

/* Remove mobile overrides - they conflict with animations */

/* Custom pulse-scale animation */
@keyframes pulse-scale {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Checkered background for transparent images */
.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;
}