@import "@fontsource/vazirmatn/400.css";
@import "@fontsource/vazirmatn/500.css";
@import "@fontsource/vazirmatn/700.css";

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

@layer base {
  :root {
    /* Warm cream background, deep charcoal text */
    --background: 40 25% 98%;
    --foreground: 30 18% 12%;
    --card: 0 0% 100%;
    --card-foreground: 30 18% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 30 18% 12%;
    /* Rich purple — primary brand (tarot/mystical) */
    --primary: 262 52% 42%;
    --primary-foreground: 0 0% 100%;
    /* Soft warm gray */
    --secondary: 40 20% 94%;
    --secondary-foreground: 30 18% 22%;
    --muted: 40 18% 94%;
    --muted-foreground: 30 10% 48%;
    /* Gold accent for highlights */
    --accent: 42 96% 56%;
    --accent-foreground: 30 25% 15%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 40 14% 89%;
    --input: 40 14% 89%;
    --ring: 262 52% 42%;
    --radius: 1rem;
    /* Extra semantic tokens for UI */
    --gradient-start: 262 52% 42%;
    --gradient-end: 280 45% 35%;
    --gold: 42 96% 56%;
    --surface: 40 22% 97%;
  }

  .dark {
    --background: 30 18% 8%;
    --foreground: 40 15% 95%;
    --card: 30 18% 11%;
    --card-foreground: 40 15% 95%;
    --popover: 30 18% 11%;
    --popover-foreground: 40 15% 95%;
    --primary: 262 55% 58%;
    --primary-foreground: 0 0% 100%;
    --secondary: 30 18% 16%;
    --secondary-foreground: 40 15% 90%;
    --muted: 30 18% 16%;
    --muted-foreground: 40 10% 58%;
    --accent: 42 90% 50%;
    --accent-foreground: 30 25% 8%;
    --destructive: 0 62% 45%;
    --destructive-foreground: 0 0% 100%;
    --border: 30 14% 18%;
    --input: 30 14% 18%;
    --ring: 262 55% 58%;
    --surface: 30 18% 12%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    @apply m-0 p-0 antialiased scroll-smooth;
  }
  body {
    @apply m-0 bg-background p-0 text-foreground;
  }
  /* Typography scale */
  h1 {
    @apply tracking-tight font-bold;
  }
  h2 {
    @apply tracking-tight font-semibold;
  }
}

@layer components {
  /* Gradient for CTAs and hero */
  .gradient-primary {
    background: linear-gradient(
      135deg,
      hsl(var(--primary)) 0%,
      hsl(280 45% 35%) 100%
    );
  }
  .text-gradient {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(
      135deg,
      hsl(var(--primary)) 0%,
      hsl(var(--gradient-end)) 100%
    );
  }
  /* Subtle card lift */
  .card-hover {
    @apply transition-all duration-300;
  }
  .card-hover:hover {
    @apply shadow-lg -translate-y-0.5;
  }
  /* Section backgrounds */
  .section-alt {
    background-color: hsl(var(--surface));
  }
}

@layer utilities {
  .animate-in-fade {
    animation: fade-in 0.5s ease-out forwards;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Tarot character animations */
@keyframes tarot-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes tarot-sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(4deg);
  }
}

@keyframes tarot-glow {
  0%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px hsl(var(--primary) / 0.3));
  }
  50% {
    opacity: 0.95;
    filter: drop-shadow(0 0 16px hsl(var(--primary) / 0.5));
  }
}

@keyframes tarot-glow-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

.animate-tarot-float {
  animation: tarot-float 4s ease-in-out infinite;
}

.animate-tarot-sway {
  transform-origin: 135px 85px;
  animation: tarot-sway 3s ease-in-out infinite;
}

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

.animate-tarot-glow-pulse {
  transform-origin: 174px 120px;
  animation: tarot-glow-pulse 2.5s ease-in-out infinite;
}

/* Home hero star sparkles — high floor opacity so many stay visible together */
@keyframes sparkle-twinkle {
  0%,
  100% {
    opacity: 0.88;
    transform: scale(0.72) rotate(0deg);
  }
  20%,
  80% {
    opacity: 0.96;
    transform: scale(1.18) rotate(20deg);
  }
  50% {
    opacity: 1;
    transform: scale(1.38) rotate(45deg);
  }
}

@keyframes sparkle-shimmer {
  0%,
  100% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.22;
  }
}

.animate-sparkle-twinkle {
  animation: sparkle-twinkle 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.home-sparkle-star {
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.home-sparkle-glow {
  border-radius: 50%;
  filter: blur(3px);
}

.home-sparkle-shimmer {
  background: radial-gradient(
      ellipse 80% 50% at 50% 0%,
      rgba(251, 191, 36, 0.22),
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 40% at 80% 20%,
      rgba(250, 204, 21, 0.18),
      transparent 65%
    );
  animation: sparkle-shimmer 6s ease-in-out infinite;
}

.home-sparkle-shimmer-alt {
  background: radial-gradient(
      ellipse 50% 35% at 20% 60%,
      rgba(253, 224, 71, 0.14),
      transparent 60%
    ),
    radial-gradient(
      ellipse 45% 30% at 70% 80%,
      rgba(245, 158, 11, 0.16),
      transparent 55%
    );
  animation: sparkle-shimmer 8s ease-in-out infinite reverse;
}

@media (prefers-reduced-motion: reduce) {
  .animate-sparkle-twinkle,
  .home-sparkle-shimmer,
  .home-sparkle-shimmer-alt {
    animation: none;
    opacity: 0.55;
  }
}

.select-page-bg {
  background-color: #f3efe6;
  background-image:
    url("/selectbg.png"),
    linear-gradient(
      180deg,
      #f3efe6 0%,
      #eef1ea 28%,
      #e6ece3 52%,
      #dde8dc 78%,
      #d4e3d4 100%
    );
  background-size: cover, 100% 100%;
  background-position: center top, top center;
  background-repeat: no-repeat, no-repeat;
}