/* Mastrolindo Descursiones Safaris Design System Tokens */
:root {
  --savanna-gold: #f59e0b;
  --savanna-amber: #d97706;
  --primary-orange: #c2410c;
  --secondary-orange: #ea580c;
  --safari-noir: #1c1917;
  --safari-dark: #120e0b;
  --safari-card: #241f1c;
  --canvas-ivory: #faf8f5;
  --warm-cream: #fef3c7;
  --border-subtle: #e7e5e4;
  --whatsapp: #25d366;
}

/* Material Symbols configuration */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.material-symbols-outlined.fill-icon {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Smooth Accordion with Animated Height */
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  list-style: none;
}

details[open] summary .accordion-chevron {
  transform: rotate(180deg);
}

.accordion-chevron {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

details[open] .accordion-body {
  grid-template-rows: 1fr;
}

.accordion-body > .accordion-inner {
  overflow: hidden;
}

/* ─── Scroll-Triggered Reveal Animations ─── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered card entrances within grids */
  .reveal-stagger > .reveal { transition-delay: 0ms; }
  .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0ms; }
  .reveal-stagger > .reveal:nth-child(2) { transition-delay: 80ms; }
  .reveal-stagger > .reveal:nth-child(3) { transition-delay: 160ms; }
  .reveal-stagger > .reveal:nth-child(4) { transition-delay: 240ms; }
  .reveal-stagger > .reveal:nth-child(5) { transition-delay: 320ms; }
  .reveal-stagger > .reveal:nth-child(6) { transition-delay: 400ms; }
  .reveal-stagger > .reveal:nth-child(7) { transition-delay: 480ms; }
  .reveal-stagger > .reveal:nth-child(8) { transition-delay: 560ms; }
  .reveal-stagger > .reveal:nth-child(9) { transition-delay: 640ms; }

  /* Slide from left variant */
  .reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
  }

  /* Slide from right variant */
  .reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
  }

  /* Scale-up variant for feature highlight cards */
  .reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
  }
}

/* Fallback for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Tasteful Transitions */
.card-hover-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Custom Scrollbar for modern feel */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}

/* Subtle image shimmer placeholder */
.image-loading-shimmer {
  background: linear-gradient(90deg, #f5f5f4 0%, #e7e5e4 50%, #f5f5f4 100%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Line clamps */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}