/* ────────────────────────────────────────────────────────────────────
   DEFERRED ANIMATIONS & NON-CRITICAL STYLES
   These styles are loaded asynchronously after initial render.
   Contains all custom animations, scrollbar styles, and enhanced effects.
──────────────────────────────────────────────────────────────────── */

/* Marquee animation for announcement bar */
@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.animate-marquee {
  animation: marquee 45s linear infinite;
}

/* Custom medical spa animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-soft {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.animate-pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 2s linear infinite;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  background-size: 200px 100%;
}

.shadow-3xl {
  box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25);
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.treatment-button {
  position: relative;
  overflow: hidden;
}

.treatment-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.treatment-button:active::before {
  width: 300px;
  height: 300px;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #14b8a6;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0d9488;
}

.perspective-1000 {
  perspective: 1000px;
}

.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 700ms;
}

@keyframes glow {
  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3), 0 0 30px rgba(255, 255, 255, 0.2);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.5), 0 0 40px rgba(255, 255, 255, 0.3);
  }
}

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

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

.animate-warm-gradient {
  background-size: 200% 200%;
  animation: warm-gradient 8s ease infinite;
}

@keyframes shimmer-glow {
  0%,
  100% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(251, 191, 36, 0.4), 0 0 30px rgba(251, 191, 36, 0.3);
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(251, 191, 36, 0.6), 0 0 40px rgba(251, 191, 36, 0.4),
      0 0 50px rgba(251, 191, 36, 0.2);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .animate-glow {
    animation: none;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
  .animate-warm-gradient {
    animation: none;
  }
  .animate-shimmer-glow {
    animation: none;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }
}

/* Animation utilities for shadcn/ui components */
@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}

.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}

.animate-out {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}

.fade-in-0 { --tw-enter-opacity: 0; }
.fade-out-0 { --tw-exit-opacity: 0; }

.zoom-in-95 { --tw-enter-scale: .95; }
.zoom-out-95 { --tw-exit-scale: .95; }

.slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }
.slide-in-from-bottom-2 { --tw-enter-translate-y: 0.5rem; }
.slide-in-from-left-2 { --tw-enter-translate-x: -0.5rem; }
.slide-in-from-right-2 { --tw-enter-translate-x: 0.5rem; }
.slide-in-from-left-1\/2 { --tw-enter-translate-x: -50%; }
.slide-in-from-top-\[48\%\] { --tw-enter-translate-y: -48%; }
.slide-in-from-left-52 { --tw-enter-translate-x: -13rem; }
.slide-in-from-right-52 { --tw-enter-translate-x: 13rem; }

.slide-out-to-top-2 { --tw-exit-translate-y: -0.5rem; }
.slide-out-to-bottom-2 { --tw-exit-translate-y: 0.5rem; }
.slide-out-to-left-2 { --tw-exit-translate-x: -0.5rem; }
.slide-out-to-right-2 { --tw-exit-translate-x: 0.5rem; }
.slide-out-to-left-1\/2 { --tw-exit-translate-x: -50%; }
.slide-out-to-top-\[48\%\] { --tw-exit-translate-y: -48%; }
.slide-out-to-left-52 { --tw-exit-translate-x: -13rem; }
.slide-out-to-right-52 { --tw-exit-translate-x: 13rem; }

.dark {
  --background: hsl(222.2 84% 4.9%);
  --foreground: hsl(210 40% 98%);
  --card: hsl(222.2 84% 4.9%);
  --card-foreground: hsl(210 40% 98%);
  --popover: hsl(222.2 84% 4.9%);
  --popover-foreground: hsl(210 40% 98%);
  --primary: hsl(180 62% 55%);
  --primary-foreground: hsl(222.2 84% 4.9%);
  --secondary: hsl(217.2 32.6% 17.5%);
  --secondary-foreground: hsl(210 40% 98%);
  --muted: hsl(217.2 32.6% 17.5%);
  --muted-foreground: hsl(215 20.2% 65.1%);
  --accent: hsl(173 58% 39%);
  --accent-foreground: hsl(210 40% 98%);
  --destructive: hsl(0 62.8% 30.6%);
  --destructive-foreground: hsl(210 40% 98%);
  --border: hsl(217.2 32.6% 17.5%);
  --input: hsl(217.2 32.6% 17.5%);
  --ring: hsl(180 62% 55%);
  --chart-1: hsl(220 70% 50%);
  --chart-2: hsl(160 60% 45%);
  --chart-3: hsl(30 80% 55%);
  --chart-4: hsl(280 65% 60%);
  --chart-5: hsl(340 75% 55%);

  /* Dark mode brand colors */
  --brand-primary: hsl(180 62% 55%);
  --brand-primary-hover: hsl(180 62% 60%);
  --brand-primary-light: hsl(173 40% 20%);
  --brand-accent: hsl(173 58% 39%);
  --brand-accent-hover: hsl(173 60% 35%);

  --neutral: hsl(210 40% 98%);
  --neutral-foreground: hsl(222.2 84% 4.9%);
  --neutral-hover: hsl(210 40% 90%);

  --sidebar-background: hsl(240 5.9% 10%);
  --sidebar-foreground: hsl(240 4.8% 95.9%);
  --sidebar-primary: hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(240 3.7% 15.9%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border: hsl(240 3.7% 15.9%);
  --sidebar-ring: hsl(217.2 91.2% 59.8%);
}