/* ==========================================================================
   IV Aruba — interactive motion layer
   Additive only. Loaded after styles.css. Looping animations are subtle by
   design (luxury wellness feel) and are automatically neutralised for users
   with prefers-reduced-motion via the global reduce rule in styles.css.
   ========================================================================== */

/* ---------- Keyframes ---------- */
@keyframes iv-float       { 0%,100% { transform: translateY(0);   } 50% { transform: translateY(-7px); } }
@keyframes iv-float-soft  { 0%,100% { transform: translateY(0);   } 50% { transform: translateY(-5px); } }
@keyframes iv-float-alt   { 0%,100% { transform: translateY(0);   } 50% { transform: translateY(5px);  } }
@keyframes iv-breathe     { 0%,100% { transform: scale(1);        } 50% { transform: scale(1.07);      } }
@keyframes iv-twinkle     { 0%,100% { opacity: 1;                 } 50% { opacity: .55;                } }
@keyframes iv-dot-pulse   { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .6; } }
@keyframes iv-rise        { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes iv-rise-right  { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }

/* ---------- Page load-in: hero (shows immediately, so animate on load) ---------- */
.hero2__copy > * { animation: iv-rise .9s var(--ease-out) both; }
.hero2__copy .eyebrow      { animation-delay: .05s; }
.hero2__title              { animation-delay: .15s; }
.hero2__lead               { animation-delay: .28s; }
.hero2__ctas               { animation-delay: .40s; }
.hero2__trust              { animation-delay: .52s; }
.hero2__media              { animation: iv-rise-right 1s var(--ease-out) both; animation-delay: .30s; }

/* ---------- Looping icon animations (interactive on mobile + desktop) ---------- */
/* "Why IV" benefit icons gently float, staggered */
.benefit__icon                  { animation: iv-float 4s ease-in-out infinite; }
.benefit:nth-child(2) .benefit__icon { animation-delay: .5s; }
.benefit:nth-child(3) .benefit__icon { animation-delay: 1s; }
.benefit:nth-child(4) .benefit__icon { animation-delay: 1.5s; }

/* Services + contact card icons float */
.svc-card__icon { animation: iv-float-soft 4.6s ease-in-out infinite; }
.ccard .icn     { animation: iv-float-soft 5s   ease-in-out infinite; }
.svc-card:nth-child(even) .svc-card__icon { animation-delay: .6s; }

/* Hero floating stat chips drift (positioned via inset, so transform is free) */
.hero2__chip--tl { animation: iv-float     5s   ease-in-out infinite; }
.hero2__chip--br { animation: iv-float-alt 5.5s ease-in-out infinite; }
.hero2__chip-ico, .finalcta__badge-ico { animation: iv-breathe 3.6s ease-in-out infinite; }

/* Process step numbers float in sequence */
.step__num { animation: iv-float-soft 3.4s ease-in-out infinite; }
.step:nth-child(2) .step__num { animation-delay: .8s; }
.step:nth-child(3) .step__num { animation-delay: 1.6s; }

/* Stars twinkle; marquee dots pulse */
.hero2__chip-stars, .review__stars { animation: iv-twinkle 3s ease-in-out infinite; }
.marquee__item .dot                { animation: iv-dot-pulse 2.4s ease-in-out infinite; }

/* ---------- Hover micro-interactions (desktop) ---------- */
.benefit { transition: transform .3s var(--ease-out); }
.benefit:hover { transform: translateY(-5px); }
.benefit:hover .benefit__icon,
.svc-card:hover .svc-card__icon,
.ccard:hover .icn {
  animation-play-state: paused;
  transform: translateY(-3px) scale(1.1);
  transition: transform .3s var(--ease-out);
}

.area-card { transition: transform .3s var(--ease-out), border-color .3s var(--ease-out); }
.area-card:hover { transform: translateY(-4px); }

/* Drip card image subtly zooms on hover */
.drip-card__img img { transition: transform .6s var(--ease-out); }
.drip-card:hover .drip-card__img img { transform: scale(1.06); }

/* Primary CTAs: arrow nudges forward on hover */
.btn .arrow { transition: transform .25s var(--ease-out); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Tap feedback (mobile, no hover) ---------- */
.drip-card:active, .area-card:active, .ccard:active, .svc-card:active,
.benefit:active, .btn:active { transform: scale(.985); }