/* ===================================================================
   JD's Vegan Dives — Animations & Micro-interactions
   Scroll-triggered reveals, staggered entrances, parallax hints
   =================================================================== */

/* --- Scroll Reveal Base ---
   .jdvd-will-animate is added by JS only to elements below the viewport.
   Elements already in view never get hidden. */
.jdvd-reveal.jdvd-will-animate {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.jdvd-reveal.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Staggered children */
.jdvd-stagger.jdvd-will-animate > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.jdvd-stagger.is-visible > *:nth-child(1)  { transition-delay: 0ms; }
.jdvd-stagger.is-visible > *:nth-child(2)  { transition-delay: 80ms; }
.jdvd-stagger.is-visible > *:nth-child(3)  { transition-delay: 160ms; }
.jdvd-stagger.is-visible > *:nth-child(4)  { transition-delay: 240ms; }
.jdvd-stagger.is-visible > *:nth-child(5)  { transition-delay: 320ms; }
.jdvd-stagger.is-visible > *:nth-child(6)  { transition-delay: 400ms; }
.jdvd-stagger.is-visible > *:nth-child(7)  { transition-delay: 480ms; }
.jdvd-stagger.is-visible > *:nth-child(8)  { transition-delay: 560ms; }
.jdvd-stagger.is-visible > *:nth-child(9)  { transition-delay: 640ms; }
.jdvd-stagger.is-visible > *:nth-child(10) { transition-delay: 720ms; }
.jdvd-stagger.is-visible > *:nth-child(11) { transition-delay: 800ms; }
.jdvd-stagger.is-visible > *:nth-child(12) { transition-delay: 880ms; }

.jdvd-stagger.is-visible > * {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* --- Scale-in variant --- */
.jdvd-reveal--scale.jdvd-will-animate {
  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);
}

.jdvd-reveal--scale.is-visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* --- Slide-in-left --- */
.jdvd-reveal--left.jdvd-will-animate {
  opacity: 0;
  transform: translateX(-40px);
}
.jdvd-reveal--left.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* --- Slide-in-right --- */
.jdvd-reveal--right.jdvd-will-animate {
  opacity: 0;
  transform: translateX(40px);
}
.jdvd-reveal--right.is-visible {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

/* --- Blur-in --- */
.jdvd-reveal--blur.jdvd-will-animate {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px);
  transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease;
}
.jdvd-reveal--blur.is-visible {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

/*
 * On narrow viewports, never leave scroll-reveal elements stuck at opacity: 0
 * (IntersectionObserver / layout timing edge cases on real devices).
 */
@media (max-width: 768px) {
  .jdvd-reveal.jdvd-will-animate,
  .jdvd-reveal--scale.jdvd-will-animate,
  .jdvd-reveal--left.jdvd-will-animate,
  .jdvd-reveal--right.jdvd-will-animate,
  .jdvd-reveal--blur.jdvd-will-animate,
  .jdvd-stagger.jdvd-will-animate > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* --- Reduced motion: skip all animations --- */
@media (prefers-reduced-motion: reduce) {
  .jdvd-will-animate {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .jdvd-will-animate > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- Number counter pulse --- */
@keyframes jdvd-count-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.jdvd-count-done {
  animation: jdvd-count-pop 0.3s ease;
}

/* --- Floating animation for decorative elements --- */
@keyframes jdvd-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-12px) rotate(2deg); }
  66%      { transform: translateY(6px) rotate(-1deg); }
}

.jdvd-float {
  animation: jdvd-float 6s ease-in-out infinite;
}

.jdvd-float--delay-1 { animation-delay: -2s; }
.jdvd-float--delay-2 { animation-delay: -4s; }

/* --- Gradient text shimmer --- */
@keyframes jdvd-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.jdvd-text-shimmer {
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-warm) 25%,
    var(--accent-peach) 50%,
    var(--accent-warm) 75%,
    var(--accent) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: jdvd-shimmer 4s linear infinite;
}

/* --- Mesh gradient background --- */
@keyframes jdvd-mesh-move {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

/* --- Pulse glow for CTAs --- */
@keyframes jdvd-glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(11, 61, 46, 0.3); }
  50%      { box-shadow: 0 0 40px rgba(11, 61, 46, 0.5); }
}

.jdvd-btn--glow {
  animation: jdvd-glow-pulse 2.5s ease-in-out infinite;
}

/* --- Horizontal scroll container --- */
.jdvd-hscroll {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: var(--space-2) 0 var(--space-4);
  scrollbar-width: none;
}

.jdvd-hscroll::-webkit-scrollbar {
  display: none;
}

.jdvd-hscroll > * {
  scroll-snap-align: start;
  flex-shrink: 0;
}

/* --- Scroll progress dots --- */
.jdvd-scroll-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-4);
}

.jdvd-scroll-dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.jdvd-scroll-dots__dot.is-active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

/* --- Image shine on hover --- */
.jdvd-shine {
  position: relative;
  overflow: hidden;
}

.jdvd-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.15) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: none;
  pointer-events: none;
}

.jdvd-shine:hover::after {
  transform: translateX(100%);
  transition: transform 0.6s ease;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .jdvd-reveal,
  .jdvd-stagger > *,
  .jdvd-reveal--scale,
  .jdvd-reveal--left,
  .jdvd-reveal--right,
  .jdvd-reveal--blur {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .jdvd-float,
  .jdvd-text-shimmer,
  .jdvd-btn--glow {
    animation: none;
  }
}