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

/* Neumorphic Design System - Soft 3D Relief Effects 
All colors MUST be HSL.
*/

@layer base {
  :root {
    /* Dark Mode Neumorphic Color Palette - Vibrant & Clear */
    --background: 215 28% 7%; /* Rich dark background */
    --foreground: 0 0% 98%; /* Bright white text */
    
    --card: 215 25% 9%; /* Slightly lighter dark cards */
    --card-foreground: 0 0% 98%;
    
    --popover: 215 25% 9%;
    --popover-foreground: 0 0% 98%;
    
    --primary: 195 98% 60%; /* #35D5FD - Bright blue */
    --primary-foreground: 215 28% 7%;
    
    --secondary: 215 20% 18%; /* Lighter secondary */
    --secondary-foreground: 0 0% 98%;
    
    --muted: 215 20% 15%;
    --muted-foreground: 0 0% 80%; /* Much brighter muted text */
    
    --accent: 215 18% 20%;
    --accent-foreground: 0 0% 98%;
    
    --destructive: 0 75% 60%;
    --destructive-foreground: 0 0% 98%;
    
    --border: 215 15% 25%; /* Lighter borders */
    --input: 215 20% 15%;
    --ring: 195 98% 60%; /* #35D5FD - Bright blue */
    
    --radius: 1rem;
    
    /* Enhanced Neumorphic Shadows - Vibrant Context */
    --shadow-raised: 10px 10px 20px rgba(0, 0, 0, 0.5), -10px -10px 20px rgba(255, 255, 255, 0.03);
    --shadow-inset: inset 10px 10px 20px rgba(0, 0, 0, 0.5), inset -10px -10px 20px rgba(255, 255, 255, 0.03);
    --shadow-pressed: 6px 6px 12px rgba(0, 0, 0, 0.5), -6px -6px 12px rgba(255, 255, 255, 0.03);
    --shadow-soft: 6px 6px 15px rgba(0, 0, 0, 0.4), -6px -6px 15px rgba(255, 255, 255, 0.02);
    
    /* Enhanced Gradients */
    --gradient-raised: linear-gradient(145deg, hsl(215 25% 11%), hsl(215 28% 7%));
    --gradient-pressed: linear-gradient(145deg, hsl(215 28% 7%), hsl(215 25% 11%));
    
    /* Vibrant highlight color */
    --highlight: 195 98% 60%; /* #35D5FD - Bright blue */
    --highlight-foreground: 215 28% 7%;
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --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: Arial, Helvetica, sans-serif;
  }

  h1, h2, h3 {
    color: hsl(var(--primary));
  }
}

@layer components {
  /* Neumorphic Components */
  .neu-raised {
    background: var(--gradient-raised);
    box-shadow: var(--shadow-raised);
    transition: var(--transition-smooth);
  }
  
  .neu-pressed {
    background: var(--gradient-pressed);
    box-shadow: var(--shadow-inset);
    transition: var(--transition-smooth);
  }
  
  .neu-soft {
    background: hsl(var(--background));
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
  }
  
  .neu-button {
    @apply neu-raised rounded-2xl border-0;
  }
  
  .neu-button:hover {
    box-shadow: var(--shadow-pressed);
    transform: translateY(-2px);
  }
  
  .neu-button:active {
    @apply neu-pressed;
    transform: translateY(0);
  }
  
  .neu-card {
    @apply neu-raised p-6 rounded-3xl;
  }
  
.neu-card:hover {
    background: linear-gradient(145deg, hsl(var(--primary) / 0.12), hsl(var(--primary) / 0.06));
    box-shadow: 0 8px 24px hsl(var(--primary) / 0.2), 0 0 30px hsl(var(--primary) / 0.14);
    transform: translateY(-3px);
  }
  
  /* Disable hover glow for specific cards */
  .neu-card.no-hover:hover {
    background: var(--gradient-raised);
    box-shadow: var(--shadow-raised);
    transform: none;
  }
  
  /* Bright Blue Illuminated Effects */
.blue-illuminated {
    background: linear-gradient(145deg, hsl(var(--primary) / 0.18), hsl(var(--primary) / 0.12));
    box-shadow: 0 6px 22px hsl(var(--primary) / 0.16), inset 0 1px 0 hsl(var(--primary) / 0.08);
    border: 1px solid hsl(var(--primary) / 0.14);
    transition: all 0.3s ease-in-out;
  }
  
  .blue-illuminated:hover {
    background: linear-gradient(145deg, hsl(var(--primary) / 0.25), hsl(var(--primary) / 0.2));
    box-shadow: 0 10px 28px hsl(var(--primary) / 0.22), inset 0 1px 0 hsl(var(--primary) / 0.12);
    border: 1px solid hsl(var(--primary) / 0.2);
    transform: translateY(-2px);
  }
  
.service-card:hover {
    background: linear-gradient(145deg, hsl(var(--primary) / 0.15), hsl(var(--primary) / 0.08));
    box-shadow: 0 10px 28px hsl(var(--primary) / 0.22), 0 0 30px hsl(var(--primary) / 0.18);
    transform: translateY(-4px) scale(1.01);
    border: 1px solid hsl(var(--primary) / 0.22);
  }
  
  .neu-input {
    @apply neu-pressed rounded-2xl border-0 bg-transparent;
  }
  
  /* Interactive Elements */
  .story-link {
    @apply relative inline-block after:content-[''] after:absolute after:w-full after:scale-x-0 after:h-0.5 after:bottom-0 after:left-0 after:bg-primary after:origin-bottom-right after:transition-transform after:duration-300 hover:after:scale-x-100 hover:after:origin-bottom-left;
  }
  
  .hover-scale {
    @apply transition-transform duration-200 hover:scale-105;
  }
  
  /* Sticky Header Enhancement */
  .sticky-header {
    backdrop-filter: blur(12px);
    background: hsl(var(--background) / 0.95);
    border-bottom: 1px solid hsl(var(--border) / 0.2);
  }

  /* High Contrast Mode */
  .high-contrast {
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;
    --card: 0 0% 10%;
    --card-foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --secondary: 0 0% 20%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 20%;
    --muted-foreground: 0 0% 100%;
    --accent: 0 0% 30%;
    --accent-foreground: 0 0% 100%;
    --border: 0 0% 50%;
  }

  /* AR Mode Styles for CDC Page */
  .ar-mode {
    background: linear-gradient(45deg, #0a0a0a, #1a1a2e, #16213e) !important;
    position: relative;
  }
  
  .ar-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 20%, rgba(53, 213, 253, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(53, 213, 253, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 40% 70%, rgba(53, 213, 253, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
  }
  
  .ar-card {
    border: 1px solid rgba(53, 213, 253, 0.3) !important;
    box-shadow: 0 0 30px rgba(53, 213, 253, 0.2) !important;
  }
  
  .ar-section-card {
    border: 1px solid rgba(53, 213, 253, 0.2) !important;
    transition: all 0.3s ease;
  }
  
  .ar-section-card:hover {
    box-shadow: 0 0 20px rgba(53, 213, 253, 0.3) !important;
    transform: translateY(-2px);
  }
  
  .ar-content-card {
    border: 2px solid rgba(53, 213, 253, 0.3) !important;
    box-shadow: 0 0 40px rgba(53, 213, 253, 0.2) !important;
  }
  
  .ar-article-card {
    border: 1px solid rgba(53, 213, 253, 0.2) !important;
    background: linear-gradient(145deg, rgba(53, 213, 253, 0.05), rgba(53, 213, 253, 0.02)) !important;
  }
  
  .ar-icon-glow {
    box-shadow: 0 0 20px rgba(53, 213, 253, 0.4) !important;
  }
  
  .ar-icon-pulse {
    animation: pulse-ar 2s infinite;
  }
  
  .ar-button-active {
    box-shadow: 0 0 25px rgba(53, 213, 253, 0.5) !important;
    border: 1px solid rgba(53, 213, 253, 0.6) !important;
  }
  
  .ar-article-number {
    background: linear-gradient(145deg, rgba(53, 213, 253, 0.2), rgba(53, 213, 253, 0.1)) !important;
    border: 1px solid rgba(53, 213, 253, 0.3) !important;
  }
  
  .ar-article-content {
    background: linear-gradient(145deg, rgba(53, 213, 253, 0.08), rgba(53, 213, 253, 0.04)) !important;
    border: 1px solid rgba(53, 213, 253, 0.2) !important;
  }
  
  .ar-help-card {
    border: 2px solid rgba(53, 213, 253, 0.4) !important;
    box-shadow: 0 0 50px rgba(53, 213, 253, 0.3) !important;
  }
  
  .ar-feature-card {
    background: linear-gradient(145deg, rgba(53, 213, 253, 0.1), rgba(53, 213, 253, 0.05)) !important;
    border: 1px solid rgba(53, 213, 253, 0.3) !important;
  }
  
  @keyframes pulse-ar {
    0%, 100% { box-shadow: 0 0 10px rgba(53, 213, 253, 0.3); }
    50% { box-shadow: 0 0 20px rgba(53, 213, 253, 0.6); }
  }

  /* Google Reviews Styles */
  .google-review-card {
    @apply bg-gradient-to-br from-background/50 to-card/50 backdrop-blur-sm;
    border: 1px solid hsl(var(--border) / 0.3);
    box-shadow: 
      0 8px 32px hsl(var(--primary) / 0.1),
      0 4px 16px hsl(var(--foreground) / 0.05),
      inset 0 1px 0 hsl(var(--background) / 0.8);
  }

  .review-avatar {
    @apply ring-2 ring-primary/20 ring-offset-2 ring-offset-background;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .review-avatar:hover {
    @apply ring-primary/40 scale-105;
  }

  .review-text {
    @apply relative;
  }

  .review-text::before {
    content: '"';
    @apply absolute -top-2 -left-2 text-4xl text-primary/30 font-serif;
  }

  .review-text::after {
    content: '"';
    @apply absolute -bottom-6 -right-2 text-4xl text-primary/30 font-serif;
  }

  .google-badge {
    @apply bg-gradient-to-r from-blue-500 to-green-500 text-white;
    box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
  }

  .review-card-infinite {
    @apply neu-soft;
    background: linear-gradient(145deg, hsl(var(--card) / 0.8), hsl(var(--background) / 0.9));
    border: 1px solid hsl(var(--primary) / 0.1);
    box-shadow: 
      0 4px 20px hsl(var(--primary) / 0.08),
      0 2px 8px hsl(var(--foreground) / 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .review-card-infinite:hover {
    border: 1px solid hsl(var(--primary) / 0.2);
    box-shadow: 
      0 8px 32px hsl(var(--primary) / 0.15),
      0 4px 16px hsl(var(--foreground) / 0.08);
    transform: translateY(-2px);
  }
}

/* Responsividade adicional para dispositivos móveis */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .neu-card {
    padding: 1rem;
    margin: 0.5rem 0;
  }
  
  h1 {
    font-size: 1.5rem;
    line-height: 1.2;
  }
  
  h2 {
    font-size: 1.25rem;
    line-height: 1.3;
  }
  
  .review-card-infinite {
    min-height: 160px;
    padding: 1rem;
  }
  
  /* Otimizações para botões touch */
  button, .btn, [role="button"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }
  
  .neu-card {
    padding: 0.75rem;
    margin: 0.25rem 0;
  }
  
  .review-card-infinite {
    min-height: 140px;
    padding: 0.75rem;
  }
  
  button, .btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }
  
  /* Texto responsivo */
  h1 {
    font-size: 1.25rem;
  }
  
  h2 {
    font-size: 1.125rem;
  }
}

/* Performance otimizations para redes móveis */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

.smooth-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Lazy loading melhorado */
img {
  loading: lazy;
  decoding: async;
}

/* Suporte a reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .smooth-scroll {
    scroll-behavior: auto;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .touch-manipulation {
    touch-action: manipulation;
  }
  
  /* Hover states para touch devices */
  .neu-card:hover {
    transform: none;
  }
  
  button:hover, .btn:hover {
    transform: none;
  }
  
  /* Active states para feedback visual */
  button:active, .btn:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
}

/* Performance optimizations */
.gpu-accelerated {
  will-change: transform, opacity;
  transform: translateZ(0);
}

.smooth-scroll {
  scroll-behavior: smooth;
}

/* Optimize animations for better performance */
.service-card {
  will-change: transform, box-shadow;
  backface-visibility: hidden;
}

.service-card:hover {
  transform: translateZ(0) scale(1.02);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .service-card {
    transition: none;
  }
  
  .floating-icon {
    animation: none;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Lazy loading optimization */
img {
  loading: lazy;
  content-visibility: auto;
}

/* Optimize font loading */
@font-face {
  font-display: swap;
}

/* Neural Brain Animation Keyframes */
@keyframes brain-rotate {
  0% {
    transform: rotateY(0deg) rotateX(0deg);
  }
  25% {
    transform: rotateY(90deg) rotateX(5deg);
  }
  50% {
    transform: rotateY(180deg) rotateX(0deg);
  }
  75% {
    transform: rotateY(270deg) rotateX(-5deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(0deg);
  }
}

@keyframes brain-pulse {
  0%, 100% {
    border-color: hsl(180 100% 50% / 0.7);
    box-shadow: 0 0 15px hsl(180 100% 50% / 0.3);
  }
  50% {
    border-color: hsl(180 100% 60% / 0.9);
    box-shadow: 0 0 25px hsl(180 100% 50% / 0.5);
  }
}

@keyframes brain-pulse-alt {
  0%, 100% {
    border-color: hsl(270 100% 50% / 0.7);
    box-shadow: 0 0 15px hsl(270 100% 50% / 0.3);
  }
  50% {
    border-color: hsl(270 100% 60% / 0.9);
    box-shadow: 0 0 25px hsl(270 100% 50% / 0.5);
  }
}

@keyframes neural-flow {
  0% {
    opacity: 0.4;
    filter: brightness(0.8);
  }
  50% {
    opacity: 1;
    filter: brightness(1.4);
  }
  100% {
    opacity: 0.4;
    filter: brightness(0.8);
  }
}

@keyframes neural-node {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    filter: brightness(1.5);
  }
}

@keyframes neural-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

@keyframes core-pulse {
  0%, 100% {
    border-color: hsl(0 0% 100% / 0.8);
    box-shadow: 0 0 10px hsl(0 0% 100% / 0.3);
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    border-color: hsl(0 0% 100% / 1);
    box-shadow: 0 0 20px hsl(0 0% 100% / 0.6);
    transform: translate(-50%, -50%) scale(1.2);
  }
}

@keyframes synapse {
  0%, 100% {
    opacity: 0.3;
    transform: scaleX(0.8);
  }
  50% {
    opacity: 0.8;
    transform: scaleX(1.2);
  }
}

@keyframes holo-scan {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10%, 90% {
    opacity: 0.6;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

@keyframes power-pellet {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1); 
    box-shadow: 0 0 10px currentColor; 
  }
  50% { 
    opacity: 0.3; 
    transform: scale(1.3); 
    box-shadow: 0 0 20px currentColor; 
  }
}

@keyframes float-orb {
  0% { transform: translateY(0px) scale(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-80px) scale(1); opacity: 0; }
}

.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-800 { animation-delay: 0.8s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-1200 { animation-delay: 1.2s; }
.animation-delay-1500 { animation-delay: 1.5s; }

.animate-pacman-move {
  animation: pacman-move 3s ease-in-out infinite;
}

.animate-ghost-move {
  animation: ghost-move 2.5s ease-in-out infinite;
}

.animate-ghost-move-2 {
  animation: ghost-move-2 3.5s ease-in-out infinite;
}

.animate-power-pellet {
  animation: power-pellet 1.5s ease-in-out infinite;
}

.animate-float-orb {
  animation: float-orb 4s linear infinite;
}