/* ============================================================
   OCEAN GOAT TOURS — ANIMATIONS
   Keyframes, scroll reveal, hero entrance, micro-interactions
   ============================================================ */

/* --------------------------------------------------
   KEYFRAMES
   -------------------------------------------------- */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0);  opacity: 1;   }
  50%       { transform: translateY(7px); opacity: 0.45; }
}

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

@keyframes marquee-scroll {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

/* Clip-path reveal — for premium text entrances */
@keyframes clipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0%   0 0); }
}

/* --------------------------------------------------
   SCROLL REVEAL
   Add [data-animate] to any element.
   JS (utils.js) applies .animate-in when visible.
   -------------------------------------------------- */

[data-animate] {
  opacity: 0;
  transition:
    opacity   0.35s var(--ease-out),
    transform 0.35s var(--ease-out);
}

[data-animate="fade-up"]    { transform: translateY(28px); }
[data-animate="fade-in"]    { transform: translateY(0);    }
[data-animate="fade-down"]  { transform: translateY(-20px);}
[data-animate="slide-left"] { transform: translateX(-36px);}
[data-animate="slide-right"]{ transform: translateX(36px); }
[data-animate="scale-in"]   { transform: scale(0.95);      }

[data-animate].animate-in {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays for grouped elements */
[data-animate-delay="1"] { transition-delay: 0.06s; }
[data-animate-delay="2"] { transition-delay: 0.13s; }
[data-animate-delay="3"] { transition-delay: 0.20s; }
[data-animate-delay="4"] { transition-delay: 0.27s; }
[data-animate-delay="5"] { transition-delay: 0.34s; }
[data-animate-delay="6"] { transition-delay: 0.41s; }

/* --------------------------------------------------
   HERO ENTRANCE ANIMATIONS
   Applied directly to hero elements — fire on load
   -------------------------------------------------- */

.hero-animate-1 { animation: fadeDown 0.75s var(--ease-out) 0.15s both; }
.hero-animate-2 { animation: fadeUp   0.75s var(--ease-out) 0.35s both; }
.hero-animate-3 { animation: fadeUp   0.75s var(--ease-out) 0.52s both; }
.hero-animate-4 { animation: fadeUp   0.75s var(--ease-out) 0.68s both; }
.hero-animate-5 { animation: fadeIn   1.00s var(--ease-out) 1.10s both; }

/* --------------------------------------------------
   LOADING SKELETON
   -------------------------------------------------- */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-ink-700)  25%,
    var(--color-ink-500)  50%,
    var(--color-ink-700)  75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--radius-md);
}

/* --------------------------------------------------
   PARALLAX (applied via JS — class only, no animation)
   -------------------------------------------------- */

.parallax-img {
  will-change: transform;
}

/* --------------------------------------------------
   REDUCED MOTION — respect user preference
   -------------------------------------------------- */

@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;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .parallax-img {
    will-change: auto;
    transform: none !important;
  }

  .hero-animate-1,
  .hero-animate-2,
  .hero-animate-3,
  .hero-animate-4,
  .hero-animate-5 {
    animation: none !important;
    opacity: 1 !important;
  }
}