/* ==========================================================================
   AMAZING THAILAND CLUB — animation.css
   1. Keyframes
   2. Scroll-reveal (Intersection Observer driven)
   3. Ripple / shine / lift effects
   4. Ambient motion
   5. Reduced-motion fallbacks
   ========================================================================== */

/* ==========================================================================
   1. KEYFRAMES
   ========================================================================== */
@keyframes fade-in      { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop-in      { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes mascot-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-11px) rotate(-1.2deg); } }
@keyframes cue-bounce   { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(11px); opacity: .35; } }
@keyframes ripple-out   { to { transform: scale(2.6); opacity: 0; } }
@keyframes shimmer      { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
@keyframes pulse-ring   { 0% { box-shadow: 0 0 0 0 rgba(247, 223, 160, .55); } 70% { box-shadow: 0 0 0 16px rgba(247, 223, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(247, 223, 160, 0); } }
@keyframes heart-beat   { 0%, 100% { transform: scale(1); } 22% { transform: scale(1.18); } 40% { transform: scale(1); } 60% { transform: scale(1.12); } }

/* ==========================================================================
   2. SCROLL REVEAL
   Elements start hidden only when JS is available (html.js), so the page
   stays fully readable with JavaScript disabled.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transition:
    opacity .7s cubic-bezier(.22, .61, .36, 1),
    transform .7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js .reveal[data-reveal="up"]    { transform: translateY(34px); }
.js .reveal[data-reveal="down"]  { transform: translateY(-34px); }
.js .reveal[data-reveal="left"]  { transform: translateX(42px); }
.js .reveal[data-reveal="right"] { transform: translateX(-42px); }
.js .reveal[data-reveal="zoom"]  { transform: scale(.93); }

.js .reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   3. INTERACTION EFFECTS
   ========================================================================== */

/* --- button ripple --- */
.ripple {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transform: scale(0);
  opacity: .8;
  pointer-events: none;
  animation: ripple-out .62s cubic-bezier(.22, .61, .36, 1) forwards;
}
.btn > *, .searchbar__submit > * { position: relative; z-index: 1; }

/* --- gold shine sweep on primary buttons --- */
.btn--gold::before,
.btn--crimson::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .55) 48%, transparent 64%);
  background-size: 260% 100%;
  background-position: -160% 0;
  opacity: 0;
  transition: opacity .2s ease;
}
.btn--gold:hover::before,
.btn--crimson:hover::before {
  opacity: 1;
  animation: shimmer 1.05s ease-out;
}

/* --- pulsing play button --- */
.video-link__btn { animation: pulse-ring 2.8s ease-out infinite; }

/* --- beating hearts in script accents --- */
.script-note__heart svg { animation: heart-beat 2.6s ease-in-out infinite; transform-origin: center; }

/* --- scroll cue --- */
.scroll-cue__dot { animation: cue-bounce 1.9s ease-in-out infinite; }

/* --- header drawer --- */
.header-search { animation: drop-in .3s cubic-bezier(.4, 0, .2, 1) both; }

/* --- image zoom is declared with the components; this adds a subtle
       brightness lift so hovers feel "premium" without a second repaint --- */
.dest-card__media img,
.holiday-card__media img,
.exp-card__img {
  transition: transform .75s cubic-bezier(.22, .61, .36, 1), filter .45s ease;
}
.dest-card:hover .dest-card__media img,
.holiday-card:hover .holiday-card__media img,
.exp-card:hover .exp-card__img { filter: saturate(1.08) brightness(1.03); }

/* --- glass panels get a soft entrance sheen --- */
.about__quote::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%);
  pointer-events: none;
}
.about__quote { overflow: hidden; }

/* --- counters animate their own numbers via JS; keep them stable --- */
.stats__num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   4. AMBIENT MOTION
   ========================================================================== */
.mascot__img { animation: mascot-float 5.5s ease-in-out infinite; }

/* gentle parallax drift on band imagery (JS sets --band-shift) */
.band__img, .footer-scene__img {
  transform: translate3d(0, var(--band-shift, 0px), 0) scale(1.06);
  transition: transform .18s linear;
}

/* ==========================================================================
   5. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal { opacity: 1 !important; transform: none !important; }
  .band__img, .footer-scene__img { transform: none; }
  .mascot__img { animation: none; }
}

/* Horizontal reveals need side room to travel through. Below large desktop the
   container gutter is too tight, so they fall back to the vertical rise. */
@media (max-width: 1279px) {
  .js .reveal[data-reveal="left"],
  .js .reveal[data-reveal="right"] { transform: translateY(34px); }
}