/* ============================================
   EBOOKS BUNDLE - Mario Velásquez
   Custom Styles & Design System
   ============================================ */

/* --- Material Symbols --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* --- Base Typography --- */
body {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .font-serif {
  font-family: 'Cormorant Garamond', serif;
}

/* --- Gradient CTA --- */
.gradient-cta {
  background: linear-gradient(135deg, #9c4400 0%, #e8752a 100%);
  transition: transform 0.2s ease-out, box-shadow 0.3s ease-out;
}

.gradient-cta:hover {
  box-shadow: 0 12px 40px rgba(232, 117, 42, 0.35);
  transform: translateY(-2px);
}

/* --- Navigation Glassmorphism --- */
.nav-glass {
  background: rgba(253, 249, 244, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* --- Mobile Menu --- */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-menu.open { transform: translateX(0); }

.mobile-menu-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* --- FAQ Accordion --- */
details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] summary .faq-icon { transform: rotate(180deg); }
.faq-icon { transition: transform 0.3s ease-out; }

/* --- Ambient Shadows --- */
.shadow-ambient { box-shadow: 0px 20px 50px rgba(28, 28, 25, 0.05); }
.shadow-ambient-lg { box-shadow: 0px 30px 60px rgba(28, 28, 25, 0.08); }

/* --- Card Hover --- */
.card-hover {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0px 20px 50px rgba(28, 28, 25, 0.08);
}

/* ============================================
   SCROLL ANIMATIONS
   Uses [data-animate] attribute approach:
   Elements start visible by default (no flash of invisible content).
   JS adds .animate-ready on load, THEN elements hide.
   When scrolled into view, JS adds .visible to animate in.
   ============================================ */

/* Only hide elements AFTER JS marks the body as ready */
body.animations-ready .fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up.visible { opacity: 1 !important; transform: translateY(0) !important; }

body.animations-ready .fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-left.visible { opacity: 1 !important; transform: translateX(0) !important; }

body.animations-ready .fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.fade-right.visible { opacity: 1 !important; transform: translateX(0) !important; }

body.animations-ready .scale-in {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scale-in.visible { opacity: 1 !important; transform: scale(1) !important; }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* ============================================
   IMAGE ANIMATIONS
   Same approach: only hidden after JS is ready.
   ============================================ */

/* Reveal with clip-path */
body.animations-ready .img-reveal {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.8s ease-out, clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-reveal.visible {
  opacity: 1 !important;
  clip-path: inset(0 0% 0 0) !important;
}

body.animations-ready .img-reveal-left {
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  transition: opacity 0.8s ease-out, clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-reveal-left.visible {
  opacity: 1 !important;
  clip-path: inset(0 0 0 0%) !important;
}

/* Zoom in reveal */
body.animations-ready .img-zoom-in {
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 0.7s ease-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-zoom-in.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Image hover effects */
.img-hover-zoom {
  overflow: hidden;
  border-radius: 0.75rem;
}
.img-hover-zoom img {
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-hover-zoom:hover img {
  transform: scale(1.08);
}

/* Tilt on hover */
.img-tilt {
  transition: transform 0.4s ease-out;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.img-tilt:hover {
  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg) scale(1.02);
}

/* ============================================
   CONTINUOUS ANIMATIONS
   ============================================ */

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-delay { animation: float 5s ease-in-out 1s infinite; }

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(232, 117, 42, 0.15); }
  50% { box-shadow: 0 0 40px rgba(232, 117, 42, 0.4); }
}
.animate-pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }

@keyframes blobMorph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
}
.blob { animation: blobMorph 8s ease-in-out infinite; }

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-badge {
  background: linear-gradient(90deg, #e8752a 0%, #ffb68f 50%, #e8752a 100%);
  background-size: 200% 100%;
  animation: shimmer 3s ease-in-out infinite;
}

/* ============================================
   CAROUSEL
   ============================================ */
.carousel-track {
  display: flex;
  gap: 1.25rem;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 640px) {
  .carousel-slide {
    flex: 0 0 calc(50% - 0.625rem);
    max-width: calc(50% - 0.625rem);
  }
}

@media (min-width: 768px) {
  .carousel-slide {
    flex: 0 0 calc(33.333% - 0.833rem);
    max-width: calc(33.333% - 0.833rem);
  }
}

@media (min-width: 1024px) {
  .carousel-slide {
    flex: 0 0 calc(25% - 0.9375rem);
    max-width: calc(25% - 0.9375rem);
  }
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: #dec1b3;
  transition: all 0.3s ease-out;
  cursor: pointer;
}
.carousel-dot.active {
  background: #e8752a;
  width: 28px;
}

/* ============================================
   UTILITIES
   ============================================ */

.gradient-text {
  background: linear-gradient(135deg, #9c4400, #e8752a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dots-pattern {
  background-image: radial-gradient(circle, #dec1b3 1px, transparent 1px);
  background-size: 24px 24px;
}

.pb-safe {
  padding-bottom: env(safe-area-inset-bottom, 12px);
}

::selection {
  background: rgba(232, 117, 42, 0.2);
  color: #1c1c19;
}

html { scroll-behavior: smooth; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f7f3ee; }
::-webkit-scrollbar-thumb { background: #dec1b3; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8a7266; }

/* --- Accessibility: 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;
  }
  .fade-up, .fade-left, .fade-right, .scale-in,
  .img-reveal, .img-reveal-left, .img-zoom-in {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}

/* --- Clickable Elements --- */
a, button, summary, .card-hover, .carousel-dot, [role="button"] {
  cursor: pointer;
}