/* Custom CSS Variables for Tailwind Theme */
:root {
  /* Core Colors */
  --background: 0 0% 100%;
  --foreground: 220 25% 25%;

  /* Card & Surface Colors */
  --card: 0 0% 100%;
  --card-foreground: 220 25% 25%;
  --surface: 207 12% 91%;
  --surface-foreground: 220 25% 25%;

  /* Popover Colors */
  --popover: 0 0% 100%;
  --popover-foreground: 220 25% 25%;

  /* Primary Orange Theme */
  --primary: 18 95% 60%;
  --primary-foreground: 0 0% 100%;
  --primary-light: 18 100% 70%;
  --primary-glow: 18 85% 65%;

  /* Secondary Deep Blue/Teal */
  --secondary: 213 50% 35%;
  --secondary-foreground: 0 0% 100%;
  --secondary-light: 213 40% 45%;

  /* Muted & Neutral Colors */
  --muted: 210 20% 96%;
  --muted-foreground: 215 15% 50%;

  /* Accent Colors */
  --accent: 213 35% 90%;
  --accent-foreground: 213 50% 25%;

  /* Greek-inspired accent */
  --marble: 45 15% 95%;
  --marble-foreground: 220 25% 25%;

  /* Astronomical accents */
  --cosmic: 240 50% 20%;
  --cosmic-foreground: 0 0% 100%;
  --stardust: 240 30% 85%;

  /* Status Colors */
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --success: 142 76% 36%;
  --success-foreground: 0 0% 100%;

  /* Border & Input */
  --border: 210 20% 90%;
  --input: 210 20% 90%;
  --ring: 18 95% 60%;

  /* Planet Colors - matching the design system */
  --mercury: 40 80% 45%;
  --venus: 39 75% 50%;
  --earth: 200 75% 45%;
  --mars: 12 75% 50%;
  --jupiter: 30 75% 45%;

  /* Design System Values */
  --radius: 0.75rem;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-light)) 100%);
  --gradient-cosmic: linear-gradient(135deg, hsl(var(--cosmic)) 0%, hsl(var(--secondary)) 100%);
  --gradient-marble: linear-gradient(135deg, hsl(var(--marble)) 0%, hsl(var(--surface)) 100%);
  --gradient-subtle: #e7eced;

  /* Shadows */
  --shadow-marble: 0 10px 40px -10px hsl(var(--primary) / 0.15);
  --shadow-cosmic: 0 20px 60px -15px hsl(var(--cosmic) / 0.25);
  --shadow-card: 0 4px 20px -2px hsl(var(--foreground) / 0.08);

  /* Typography */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Animations */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Utility Classes */
.font-heading {
  font-family: var(--font-heading);
}

.font-body {
  font-family: var(--font-body);
}

.gradient-hero {
  background: var(--gradient-hero);
}

.gradient-cosmic {
  background: var(--gradient-cosmic);
}

.gradient-marble {
  background: var(--gradient-marble);
}

.gradient-subtle {
  background: var(--gradient-subtle);
}

.shadow-marble {
  box-shadow: var(--shadow-marble);
}

.shadow-cosmic {
  box-shadow: var(--shadow-cosmic);
}

.shadow-card {
  box-shadow: var(--shadow-card);
}

.transition-smooth {
  transition: var(--transition-smooth);
}

.transition-bounce {
  transition: var(--transition-bounce);
}

/* Greek architectural elements */
.greek-column::before {
  content: '';
  position: absolute;
  width: 10px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(52, 101, 164, 0.1), transparent);
  left: 0;
  top: 0;
}

.greek-pattern {
  background-image: 
    repeating-linear-gradient(
      90deg,
      rgba(52, 101, 164, 0.15) 0px,
      rgba(52, 101, 164, 0.15) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(52, 101, 164, 0.03) 0px,
      rgba(52, 101, 164, 0.03) 1px,
      transparent 1px,
      transparent 40px
    );
}

/* Additional Greek architectural elements */
.greek-border {
  background-image: 
    repeating-linear-gradient(
      90deg,
      rgba(52, 101, 164, 0.05) 0px,
      rgba(52, 101, 164, 0.05) 2px,
      transparent 2px,
      transparent 8px
    );
}

/* Astronomical elements */
.cosmic-stars {
  background-image: 
    radial-gradient(2px 2px at 20px 30px, rgba(51, 51, 153, 0.2), transparent),
    radial-gradient(2px 2px at 40px 70px, rgba(169, 180, 214, 0.3), transparent),
    radial-gradient(1px 1px at 90px 40px, rgba(51, 51, 153, 0.1), transparent),
    radial-gradient(1px 1px at 130px 80px, rgba(169, 180, 214, 0.2), transparent);
  background-repeat: repeat;
  background-size: 150px 100px;
}

.orbital-pattern {
  background-image: 
    radial-gradient(ellipse 200px 100px at center, transparent 39%, rgba(51, 51, 153, 0.05) 40%, rgba(51, 51, 153, 0.05) 41%, transparent 42%);
}

/* Button styles */
.btn-hero {
  background: var(--gradient-hero);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-marble);
  transition: var(--transition-smooth);
  font-weight: 600;
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.btn-hero:hover {
  transform: translateY(-2px) scale(1.1) translateZ(0);
}

.btn-marble {
  background: var(--gradient-marble);
  color: hsl(var(--marble-foreground));
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
  border: 1px solid hsl(var(--border));
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.btn-marble:hover {
  transform: translateY(-6px) translateZ(0);
}

.btn-cosmic {
  background: var(--gradient-cosmic);
  color: hsl(var(--cosmic-foreground));
  box-shadow: var(--shadow-cosmic);
  transition: var(--transition-smooth);
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.btn-cosmic:hover {
  transform: translateY(-6px) translateZ(0);
}

/* Card styles */
.card {
  background-color: hsla(0, 0%, 100%, 0.9);
  backdrop-filter: blur(4px);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px -2px hsla(220, 25%, 25%, 0.08);
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
  border: 1px solid hsla(210, 20%, 90%, 0.5);
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.card:hover:not(.content-card):not(.question-card):not(.result-main-card) {
  transform: translateY(-5px) scale(1.05) translateZ(0);
  box-shadow: 0 10px 40px -10px hsla(18, 95%, 60%, 0.15);
}

/* Disable hover effects on tutor dashboard */
.tutor-dashboard .card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Disable hover pop-out on pricing comparison cards */
.slide-in-left.card:hover,
.slide-in-right.card:hover {
  transform: none !important;
  box-shadow: 0 4px 20px -2px hsla(220, 25%, 25%, 0.08) !important;
}

/* Ensure gradient text works */
.gradient-text-hero {
  background: linear-gradient(135deg, #f97316, #fb923c, #1d4ed8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* Additional utility classes for the new design */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-foreground {
  --tw-gradient-from: hsl(var(--foreground));
  --tw-gradient-to: hsl(var(--foreground) / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-earth {
  --tw-gradient-to: hsl(var(--earth));
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.text-transparent {
  color: transparent;
}

.text-muted-foreground {
  color: hsl(var(--muted-foreground));
}

.text-foreground {
  color: hsl(var(--foreground));
}

.hover\\:text-primary:hover {
  color: hsl(var(--primary));
}

.transition-colors {
  transition: color 0.3s ease;
}

/* Mission Link - Scrolls with page content */
.mission-link-fixed {
  background: var(--gradient-marble);
  color: hsl(var(--foreground));
  box-shadow: var(--shadow-card);
  border: 1px solid hsl(var(--border));
  backdrop-filter: blur(8px);
  text-decoration: none;
  /* Fix for tab switching rendering issues */
  will-change: transform;
  transform: translateZ(0);
}

.mission-link-fixed:hover {
  background: var(--gradient-hero);
  color: hsl(var(--primary-foreground));
  box-shadow: var(--shadow-marble);
  transform: translateY(-2px) translateZ(0);
  text-decoration: none;
}

/* Position at top-right of page content, scrolls with page */
.mission-link-container {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 50;
}

.bg-card {
  background-color: hsl(var(--card));
}

.bg-card\/50 {
  background-color: hsl(var(--card) / 0.5);
}

.border-green-500\/30 {
  border-color: rgb(34 197 94 / 0.3);
}

.border-border\/20 {
  border-color: hsl(var(--border) / 0.2);
}

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

/* Scroll reveal animations for landing page */
.fade-in,
.slide-in-left,
.slide-in-right {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}

.slide-in-left {
  transform: translateX(-24px);
}

.slide-in-right {
  transform: translateX(24px);
}

.fade-in.visible,
.slide-in-left.visible,
.slide-in-right.visible {
  opacity: 1;
  transform: none;
}

/* Staggered children animation container */

.stagger-animation > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease, transform 500ms ease;
  will-change: opacity, transform;
}

.stagger-animation.visible > * {
  opacity: 1;
  transform: none;
}

/* Provide simple nth-child delays for nicer cascade without JS loops */
.stagger-animation.visible > *:nth-child(1) { transition-delay: 40ms; }
.stagger-animation.visible > *:nth-child(2) { transition-delay: 80ms; }
.stagger-animation.visible > *:nth-child(3) { transition-delay: 120ms; }
.stagger-animation.visible > *:nth-child(4) { transition-delay: 160ms; }
.stagger-animation.visible > *:nth-child(5) { transition-delay: 200ms; }
.stagger-animation.visible > *:nth-child(6) { transition-delay: 240ms; }
.stagger-animation.visible > *:nth-child(7) { transition-delay: 280ms; }
.stagger-animation.visible > *:nth-child(8) { transition-delay: 320ms; }
.stagger-animation.visible > *:nth-child(9) { transition-delay: 360ms; }
.stagger-animation.visible > *:nth-child(10) { transition-delay: 400ms; }