/* ============================================================
   MAMA TAVA TRAVEL — Animation System
   ============================================================ */

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes clipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes scrollLine {
  0%   { opacity: 1; transform: scaleY(1) translateY(0); }
  50%  { opacity: 0.5; transform: scaleY(0.6) translateY(10px); }
  100% { opacity: 0; transform: scaleY(0) translateY(20px); }
}
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}
@keyframes pulse-aqua {
  0%, 100% { box-shadow: 0 0 0 0 rgba(131,193,198,0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(131,193,198,0); }
}
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes heroKenBurns {
  0%   { transform: scale(1)   translateX(0)    translateY(0); }
  50%  { transform: scale(1.04) translateX(-1%)  translateY(-0.5%); }
  100% { transform: scale(1)   translateX(0)    translateY(0); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO IMAGE ANIMATION
   ============================================================ */
.hero__bg img { animation: heroKenBurns 18s ease-in-out infinite; }

/* ============================================================
   SCROLL REVEAL BASE
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.delay-1  { transition-delay: 0.08s; }
.delay-2  { transition-delay: 0.16s; }
.delay-3  { transition-delay: 0.24s; }
.delay-4  { transition-delay: 0.32s; }
.delay-5  { transition-delay: 0.40s; }
.delay-6  { transition-delay: 0.48s; }

/* ============================================================
   HERO ENTRANCE (CSS only, no JS)
   ============================================================ */
.hero__eyebrow { animation: fadeDown 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both; }
.hero__headline { animation: fadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both; }
.hero__sub      { animation: fadeUp 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; }
.hero__actions  { animation: fadeUp 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both; }
.hero__scroll   { animation: fadeIn 1.0s ease 1.2s both; }

/* Page hero */
.page-hero__label   { animation: fadeRight 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.page-hero__title   { animation: fadeUp  1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.page-hero__sub     { animation: fadeUp  0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; }

/* ============================================================
   FLOATING ANIMATIONS
   ============================================================ */
.float-wa { animation: float 3s ease-in-out infinite; }
.float-wa:hover { animation: none; }

/* ============================================================
   LOADING SKELETON
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface2) 50%,
    var(--surface) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: var(--r-md);
}

/* ============================================================
   NAV ENTRANCE
   ============================================================ */
.nav { animation: fadeDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }

/* ============================================================
   COUNTER ANIMATION
   ============================================================ */
.counter-animated { animation: countUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ============================================================
   IMAGE OVERLAY HOVER REVEAL
   ============================================================ */
.img-reveal-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(52,66,98,0.7), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.img-reveal-wrap:hover .img-reveal-overlay { opacity: 1; }

/* ============================================================
   MARQUEE / TICKER
   ============================================================ */
.marquee-wrap {
  position: relative;
  z-index: 5;
  margin-top: -72px;
  margin-bottom: -72px;
  overflow: hidden;
  white-space: nowrap;
  padding: 72px 0;
  background: linear-gradient(to right, #ffffff 0%, #C8E1E1 30%, #83C1C6 60%, #354363 100%);
  /* 5 wide arches top + bottom — transparent outside reveals hero (top) and services (bottom) */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,35 Q10,0 20,35 Q30,0 40,35 Q50,0 60,35 Q70,0 80,35 Q90,0 100,35 L100,65 Q90,100 80,65 Q70,100 60,65 Q50,100 40,65 Q30,100 20,65 Q10,100 0,65 Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0,35 Q10,0 20,35 Q30,0 40,35 Q50,0 60,35 Q70,0 80,35 Q90,0 100,35 L100,65 Q90,100 80,65 Q70,100 60,65 Q50,100 40,65 Q30,100 20,65 Q10,100 0,65 Z' fill='white'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.marquee-track {
  position: relative;
  z-index: 3;
  display: inline-flex;
  animation: marqueeScroll 24s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);      /* 32px — matches total inter-item padding so star is centred */
  padding: 0 var(--s4); /* 16px each side → 16+16=32px between star and next word */
  font-size: var(--size-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #354363;
  white-space: nowrap;
}
.marquee-item span { color: #354363; }
.marquee-dot {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   PAGE TRANSITION
   ============================================================ */
.page-transition-enter {
  animation: fadeIn 0.5s ease both;
}

/* ============================================================
   SMOOTH IMAGE LOAD
   ============================================================ */
img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
img.loaded { opacity: 1; }
img[src] { opacity: 1; } /* Fallback for already loaded */