/* ============================================
   QuestEarth v2.0 — Premium Student UI
   ============================================ */

/* ---- Base & Body ---- */
body {
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle ambient background glow */
body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -30%;
  width: 80%;
  height: 100%;
  background: radial-gradient(circle, rgba(37, 128, 235, 0.04), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
body::after {
  content: '';
  position: fixed;
  bottom: -40%;
  right: -20%;
  width: 70%;
  height: 90%;
  background: radial-gradient(circle, rgba(249, 115, 22, 0.03), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* ---- Custom Scrollbar ---- */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ---- Text Gradients ---- */
.text-gradient {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #2580eb, #60b8fa);
}
.text-gradient-warm {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #f97316, #fbbf24);
}
.text-gradient-cool {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, #10b981, #34d399);
}

/* ---- Scroll Reveal ---- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for children */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---- Hero Decorations ---- */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: blobPulse 8s ease-in-out infinite alternate;
}
@keyframes blobPulse {
  0% { transform: scale(1) translate(0, 0); }
  33% { transform: scale(1.1) translate(15px, -20px); }
  66% { transform: scale(0.95) translate(-10px, 15px); }
  100% { transform: scale(1) translate(0, 0); }
}

/* ---- Floating Icons (Hero decoration) ---- */
.floating-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.06);
  animation: floatItem 6s ease-in-out infinite;
  pointer-events: none;
}
.floating-icon:nth-child(even) {
  animation-duration: 7s;
  animation-delay: 1s;
}
.floating-icon:nth-child(3n) {
  animation-duration: 8s;
  animation-delay: 2s;
}
@keyframes floatItem {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(2deg); }
  75% { transform: translateY(8px) rotate(-2deg); }
}

/* ---- Card Hover Lift ---- */
.card-hover-lift {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.card-hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

/* ---- 3D Tilt Cards ---- */
.card-tilt {
  transition: transform 0.4s ease;
  transform-style: preserve-3d;
}
.card-tilt:hover {
  transform: perspective(800px) rotateY(-2deg) rotateX(2deg) translateY(-4px);
}

/* ---- Gradient Borders ---- */
.gradient-border {
  position: relative;
  background: white;
  border-radius: 1.5rem;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 1.6rem;
  background: linear-gradient(135deg, #2580eb, #10b981, #f97316);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gradient-border:hover::before {
  opacity: 1;
}

/* ---- Animated Counter ---- */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ---- Feature Cards (features.php) ---- */
.feature-card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.1));
  pointer-events: none;
}
.feature-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15);
}
.feature-card .feature-icon {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.feature-card:hover .feature-icon {
  transform: scale(1.15) rotate(-5deg);
}

/* ---- Map Frame ---- */
.map-frame {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
}
.map-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1.25rem;
  box-shadow: inset 0 0 0 3px rgba(37, 128, 235, 0.15);
  z-index: 10;
  pointer-events: none;
}

/* ---- Quiz Options ---- */
.quiz-option {
  transition: all 0.2s ease;
}
.quiz-option:hover {
  transform: translateX(4px);
}
.quiz-option:active {
  transform: scale(0.99);
}

/* ---- Confetti Burst (quiz result) ---- */
@keyframes confettiFall {
  0% { transform: translateY(-100%) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall 3s ease-in forwards;
  pointer-events: none;
}

/* ---- Chat Bubbles ---- */
.chat-bubble-ai {
  position: relative;
}
.chat-bubble-ai::before {
  content: '';
  position: absolute;
  left: -6px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  background: white;
  border-radius: 0 0 0 8px;
  border-left: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
}

/* ---- Wave Separator (footer) ---- */
.wave-separator {
  position: relative;
}
.wave-separator::before {
  content: '';
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%230f172a' d='M0,32L48,37.3C96,43,192,53,288,53.3C384,53,480,43,576,37.3C672,32,768,32,864,37.3C960,43,1056,53,1152,53.3C1248,53,1344,43,1392,37.3L1440,32L1440,60L1392,60C1344,60,1248,60,1152,60C1056,60,960,60,864,60C768,60,672,60,576,60C480,60,384,60,288,60C192,60,96,60,48,60L0,60Z'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
}

/* ---- Prose / Content Styles ---- */
.prose img { 
  border-radius: 1rem; 
  margin: 1.5rem auto; 
  box-shadow: 0 10px 30px -5px rgba(0,0,0,0.08); 
  transition: transform 0.3s ease;
}
.prose img:hover { transform: scale(1.01); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.04); }
.prose th, .prose td { padding: 1rem; border-bottom: 1px solid #e2e8f0; }
.prose th { background: #f8fafc; font-weight: 700; text-align: left; color: #1e293b; }
.prose tr:last-child td { border-bottom: none; }

/* ---- Login/Register Split Layout ---- */
.auth-illustration {
  background: linear-gradient(135deg, #2580eb 0%, #1d6ad8 50%, #1e56af 100%);
  position: relative;
  overflow: hidden;
}
.auth-illustration::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent 60%);
}
.auth-illustration::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -30%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15), transparent 60%);
}

/* ---- Shimmer Loading ---- */
.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
  animation: shimmerMove 1.5s infinite;
}
@keyframes shimmerMove {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ---- Pulse Dot (online indicator) ---- */
.pulse-dot {
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: inherit;
  animation: pulseRing 2s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

/* ---- Gradient text animation ---- */
.animated-gradient-text {
  background: linear-gradient(90deg, #2580eb, #10b981, #f97316, #2580eb);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientSlide 6s ease infinite;
}
@keyframes gradientSlide {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}