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

:root {
  --background: #fefdfb;
  --foreground: #0f172a;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.5);
}

@layer base {
  body {
    background: var(--background);
    color: var(--foreground);
    font-feature-settings: 'rlig' 1, 'calt' 1;
  }

  /* Smooth scroll */
  html {
    scroll-behavior: smooth;
  }
}

@layer components {
  /* Glass morphism effect */
  .glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }

  .glass-dark {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Premium card effect */
  .card-premium {
    @apply bg-white/80 backdrop-blur-xl rounded-3xl border border-white/50;
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.05),
      0 10px 15px -3px rgba(0, 0, 0, 0.05),
      0 20px 25px -5px rgba(0, 0, 0, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  .card-premium:hover {
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.07),
      0 10px 15px -3px rgba(0, 0, 0, 0.07),
      0 25px 50px -12px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.8);
  }

  /* Gradient text */
  .text-gradient {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-wood-600 via-wood-500 to-wood-400;
  }

  .text-gradient-forest {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-forest-600 via-forest-500 to-forest-400;
  }

  /* Shimmer effect */
  .shimmer {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
  }

  /* Glow button */
  .btn-glow {
    @apply relative overflow-hidden;
  }

  .btn-glow::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-wood-400/0 via-wood-400/30 to-wood-400/0;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
  }

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

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

  /* Section divider */
  .section-divider {
    @apply relative;
  }

  .section-divider::after {
    content: '';
    @apply absolute bottom-0 left-1/2 -translate-x-1/2 w-24 h-1 bg-gradient-to-r from-transparent via-wood-400 to-transparent rounded-full;
  }

  /* Wood texture overlay */
  .wood-texture {
    position: relative;
  }

  .wood-texture::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
  }

  /* Interactive hover lift */
  .hover-lift {
    @apply transition-all duration-300;
  }

  .hover-lift:hover {
    transform: translateY(-4px);
  }

  /* Badge shine effect */
  .badge-shine {
    @apply relative overflow-hidden;
  }

  .badge-shine::after {
    content: '';
    @apply absolute top-0 -left-full w-full h-full;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s ease;
  }

  .badge-shine:hover::after {
    left: 100%;
  }

  /* Input focus glow */
  .input-glow:focus {
    box-shadow: 0 0 0 3px rgba(222, 165, 110, 0.2);
  }

  /* Gradient border */
  .border-gradient {
    @apply relative;
    background: linear-gradient(white, white) padding-box,
                linear-gradient(135deg, #dea56e, #22c55e) border-box;
    border: 2px solid transparent;
  }

  /* Hero text shadow */
  .hero-text-shadow {
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  }

  /* Mesh gradient background */
  .mesh-gradient {
    background-color: #fefdfb;
    background-image:
      radial-gradient(at 40% 20%, rgba(222, 165, 110, 0.15) 0px, transparent 50%),
      radial-gradient(at 80% 0%, rgba(34, 197, 94, 0.1) 0px, transparent 50%),
      radial-gradient(at 0% 50%, rgba(222, 165, 110, 0.1) 0px, transparent 50%),
      radial-gradient(at 80% 50%, rgba(245, 233, 211, 0.2) 0px, transparent 50%),
      radial-gradient(at 0% 100%, rgba(34, 197, 94, 0.08) 0px, transparent 50%),
      radial-gradient(at 80% 100%, rgba(222, 165, 110, 0.12) 0px, transparent 50%);
  }
}

@layer utilities {
  /* Hide scrollbar */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Perspective for 3D effects */
  .perspective-1000 {
    perspective: 1000px;
  }

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

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

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #dea56e, #c6713f);
  border-radius: 5px;
  border: 2px solid #faf3e6;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #c6713f, #a55936);
}

/* Custom selection */
::selection {
  background: #dea56e;
  color: white;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid #dea56e;
  outline-offset: 2px;
}

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

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

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

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1.3); opacity: 0; }
}

@keyframes bounce-subtle {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

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

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

@keyframes scale-in {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.1); }
  50% { transform: scale(1); }
  75% { transform: scale(1.1); }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

.animate-bounce-subtle {
  animation: bounce-subtle 0.5s ease-out;
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out;
}

.animate-slide-in-up {
  animation: slide-in-up 0.3s ease-out;
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

.animate-scale-in {
  animation: scale-in 0.2s ease-out;
}

.animate-wiggle {
  animation: wiggle 0.5s ease-in-out;
}

.animate-heartbeat {
  animation: heartbeat 1s ease-in-out;
}

/* Skeleton wave animation */
.skeleton-wave::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: skeleton-wave 1.5s ease-in-out infinite;
}

@keyframes skeleton-wave {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Smooth scrolling for all elements */
* {
  scroll-behavior: smooth;
}

/* 3D transform support */
.perspective-1000 {
  perspective: 1000px;
}

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

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

/* Rotate animations for 3D effects */
.rotateX-90 {
  transform: rotateX(90deg);
}

.-rotateX-90 {
  transform: rotateX(-90deg);
}

.rotateX-0 {
  transform: rotateX(0deg);
}

/* Glassmorphism improvements */
.glass-premium {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Glow effects */
.glow-wood {
  box-shadow: 0 0 20px rgba(222, 165, 110, 0.3),
              0 0 40px rgba(222, 165, 110, 0.1);
}

.glow-forest {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3),
              0 0 40px rgba(34, 197, 94, 0.1);
}

/* Hover scale with smooth */
.hover-scale {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Card 3D hover effect */
.card-3d {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}

.card-3d:hover {
  transform: translateY(-8px) rotateX(2deg);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Animated underline */
.animated-underline {
  position: relative;
}

.animated-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #dea56e, #c6713f);
  transition: width 0.3s ease;
}

.animated-underline:hover::after {
  width: 100%;
}

/* Button ripple effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn-ripple:active::before {
  width: 300px;
  height: 300px;
}

/* Gradient text animation */
.gradient-text-animated {
  background: linear-gradient(
    90deg,
    #dea56e,
    #c6713f,
    #22c55e,
    #dea56e
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 8s ease infinite;
}

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

/* Morphing blob background */
.blob {
  animation: blob-morph 8s ease-in-out infinite;
}

@keyframes blob-morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 60% 30% 60% / 30% 70% 40% 70%;
  }
  75% {
    border-radius: 60% 40% 60% 30% / 70% 40% 60% 50%;
  }
}

/* Smooth image zoom on hover */
.img-zoom {
  overflow: hidden;
}

.img-zoom img {
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.img-zoom:hover img {
  transform: scale(1.1);
}

/* Text shadow for headings */
.text-shadow-lg {
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Focus ring animation */
.focus-ring-animated:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(222, 165, 110, 0.4);
  animation: focus-pulse 1.5s ease infinite;
}

@keyframes focus-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(222, 165, 110, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(222, 165, 110, 0.2); }
}

/* Slide animations */
@keyframes slide-in-bottom {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slide-out-bottom {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}

.animate-slide-in-bottom {
  animation: slide-in-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-out-bottom {
  animation: slide-out-bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Bounce in animation */
@keyframes bounce-in {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  70% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-bounce-in {
  animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Typing cursor blink */
@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

/* Fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

/* ============================================
   AI Chat Widget - Animated Glow Border
   ============================================ */

/* Chat widget container with rotating light */
.chat-glow-container {
  position: relative;
  border-radius: 1rem;
}

/* Rotating light border for chat window */
.chat-glow-border {
  position: absolute;
  inset: -2px;
  border-radius: 1.1rem;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 350deg,
    rgba(222, 165, 110, 0.9) 352deg,
    rgba(255, 255, 255, 1) 355deg,
    rgba(34, 197, 94, 0.9) 358deg,
    transparent 360deg
  );
  animation: rotate-light 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Glow trail */
.chat-glow-outer {
  position: absolute;
  inset: -6px;
  border-radius: 1.3rem;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 345deg,
    rgba(222, 165, 110, 0.4) 350deg,
    rgba(255, 255, 255, 0.5) 355deg,
    rgba(34, 197, 94, 0.4) 360deg
  );
  filter: blur(8px);
  animation: rotate-light 4s linear infinite;
  pointer-events: none;
  z-index: -1;
}

/* Minimized state - rotating light */
.chat-glow-minimized {
  position: relative;
}

.chat-glow-minimized-border {
  position: absolute;
  inset: -2px;
  border-radius: 0.9rem;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 350deg,
    rgba(222, 165, 110, 0.9) 352deg,
    rgba(255, 255, 255, 1) 355deg,
    rgba(34, 197, 94, 0.9) 358deg,
    transparent 360deg
  );
  animation: rotate-light 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Floating button glow effect */
.chat-button-glow {
  position: relative;
}

/* Rotating light ring around button */
.chat-button-glow-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 350deg,
    rgba(222, 165, 110, 0.9) 352deg,
    rgba(255, 255, 255, 1) 355deg,
    rgba(34, 197, 94, 0.9) 358deg,
    transparent 360deg
  );
  animation: rotate-light 3s linear infinite;
  pointer-events: none;
}

/* Glow trail for button */
.chat-button-glow-spark {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 345deg,
    rgba(222, 165, 110, 0.5) 350deg,
    rgba(255, 255, 255, 0.6) 355deg,
    rgba(34, 197, 94, 0.5) 360deg
  );
  animation: rotate-light 3s linear infinite;
  filter: blur(6px);
  pointer-events: none;
}

/* ============================================
   Hero Chat - Rotating Light Border (Homepage)
   ============================================ */

.hero-chat-wrapper {
  position: relative;
  padding: 2px;
  border-radius: 1.5rem;
}

/* Rotating conic gradient - the "laser" effect */
.hero-chat-light-border {
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 350deg,
    rgba(222, 165, 110, 0.8) 352deg,
    rgba(255, 255, 255, 1) 355deg,
    rgba(34, 197, 94, 0.8) 358deg,
    transparent 360deg
  );
  animation: rotate-light 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Inner mask to create border effect */
.hero-chat-light-border::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: calc(1.5rem - 2px);
  background: inherit;
  background: transparent;
}

/* Glow effect following the light */
.hero-chat-light-border::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 1.7rem;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    transparent 345deg,
    rgba(222, 165, 110, 0.5) 350deg,
    rgba(255, 255, 255, 0.6) 355deg,
    rgba(34, 197, 94, 0.5) 360deg
  );
  filter: blur(10px);
  animation: rotate-light 4s linear infinite;
  z-index: -1;
}

@keyframes rotate-light {
  from { --angle: 0deg; }
  to { --angle: 360deg; }
}

/* Fallback for browsers that don't support @property */
@supports not (background: conic-gradient(from var(--angle), red, blue)) {
  .hero-chat-light-border {
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 350deg,
      rgba(222, 165, 110, 0.8) 352deg,
      rgba(255, 255, 255, 1) 355deg,
      rgba(34, 197, 94, 0.8) 358deg,
      transparent 360deg
    );
    animation: rotate-light-fallback 4s linear infinite;
  }
  .hero-chat-light-border::after {
    animation: rotate-light-fallback 4s linear infinite;
  }
  @keyframes rotate-light-fallback {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}

/* CSS custom property for animation */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}