/* ===================================================
   NoctaviaTravel - Animations
=================================================== */

/* ── KEYFRAMES ────────────────────────────────── */
@keyframes fadeInUp    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInDown  { from{opacity:0;transform:translateY(-30px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInLeft  { from{opacity:0;transform:translateX(-30px)} to{opacity:1;transform:translateX(0)} }
@keyframes fadeInRight { from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:translateX(0)} }
@keyframes scaleIn     { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes rotateIn    { from{opacity:0;transform:rotate(-10deg) scale(.9)} to{opacity:1;transform:rotate(0) scale(1)} }
@keyframes shimmer     { 0%{background-position:-1000px 0} 100%{background-position:1000px 0} }
@keyframes float       { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes glowPulse   { 0%,100%{box-shadow:0 0 20px rgba(0,87,255,.2)} 50%{box-shadow:0 0 40px rgba(0,87,255,.5)} }
@keyframes slideRight  { from{width:0} to{width:100%} }
@keyframes countUp     { from{opacity:0} to{opacity:1} }
@keyframes ripple      { 0%{transform:scale(0);opacity:1} 100%{transform:scale(4);opacity:0} }
@keyframes gradientShift { 0%{background-position:0 50%} 50%{background-position:100% 50%} 100%{background-position:0 50%} }
@keyframes typewriter  { from{width:0} to{width:100%} }
@keyframes blink       { 0%,100%{border-right-color:transparent} 50%{border-right-color:var(--secondary)} }
@keyframes particleFloat {
  0%{transform:translateY(0) translateX(0) rotate(0deg);opacity:1}
  100%{transform:translateY(-100px) translateX(20px) rotate(360deg);opacity:0}
}

/* ── ANIMATION CLASSES ────────────────────────── */
.animate-float     { animation: float 3s ease-in-out infinite; }
.animate-glow      { animation: glowPulse 2s ease-in-out infinite; }
.animate-gradient  {
  background-size: 300% 300% !important;
  animation: gradientShift 8s ease infinite;
}
.animate-fade-up   { animation: fadeInUp .6s ease forwards; }
.animate-scale-in  { animation: scaleIn .5s ease forwards; }

/* ── HOVER EFFECTS ────────────────────────────── */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.15); }

.hover-scale { transition: transform .3s ease; }
.hover-scale:hover { transform: scale(1.05); }

.hover-glow:hover { box-shadow: 0 0 0 3px rgba(0,87,255,.3), 0 8px 30px rgba(0,87,255,.3); }

/* ── UNDERLINE ANIMATE ────────────────────────── */
.underline-anim { position: relative; }
.underline-anim::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: width .4s ease;
}
.underline-anim:hover::after { width: 100%; }

/* ── GRADIENT BORDER ──────────────────────────── */
.gradient-border {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
}
.gradient-border-inner {
  background: #fff;
  border-radius: calc(var(--radius-lg) - 1px);
  padding: 24px;
}

/* ── SHIMMER SKELETON ─────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 37%, #f0f0f0 63%);
  background-size: 1000px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── COUNTER ANIMATION ────────────────────────── */
.counter-animated { transition: all 1s ease; }

/* ── SCROLL PROGRESS ──────────────────────────── */
#scrollProgress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  transform-origin: left;
  z-index: 9999;
  transform: scaleX(0);
  transition: transform .1s linear;
}

/* ── PARTICLES BACKGROUND ─────────────────────── */
.particles-bg { position: relative; overflow: hidden; }
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFloat linear infinite;
}

/* ── TYPEWRITER ───────────────────────────────── */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid var(--secondary);
  animation: typewriter 3s steps(40) 1s both, blink .75s step-end infinite;
}

/* ── RIPPLE EFFECT ────────────────────────────── */
.ripple-btn { position: relative; overflow: hidden; }
.ripple-btn .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  transform: scale(0);
  animation: ripple .6s linear;
  pointer-events: none;
}

/* ── TILT CARD ────────────────────────────────── */
.tilt-card { transform-style: preserve-3d; transition: transform .1s; }

/* ── SCROLL REVEAL ────────────────────────────── */
[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .8s ease, transform .8s ease; }
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal="left"]  { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="scale"] { transform: scale(.95); }
[data-reveal="left"].revealed,
[data-reveal="right"].revealed,
[data-reveal="scale"].revealed { transform: none; }

/* ── BLOB ANIMATION ───────────────────────────── */
.blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: blobMorph 8s ease-in-out infinite;
  background: linear-gradient(135deg, rgba(0,87,255,.1), rgba(0,194,168,.1));
}
@keyframes blobMorph {
  0%,100%{ border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%{ border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%{ border-radius: 40% 60% 30% 70% / 40% 40% 60% 50%; }
  75%{ border-radius: 60% 30% 70% 40% / 60% 70% 40% 60%; }
}

/* ── CARD FLIP ────────────────────────────────── */
.flip-card { perspective: 1000px; }
.flip-card-inner { transition: transform .6s; transform-style: preserve-3d; position: relative; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
}
.flip-card-back { transform: rotateY(180deg); }

/* ── NUMBER TICKER ────────────────────────────── */
.number-ticker { display: inline-flex; overflow: hidden; height: 1.2em; }
.number-ticker-digit { display: flex; flex-direction: column; transition: transform .5s ease; }

/* ── MARQUEE ──────────────────────────────────── */
.marquee-wrapper { overflow: hidden; }
.marquee-track {
  display: flex;
  gap: 30px;
  animation: marqueeAnim 20s linear infinite;
  width: max-content;
}
@keyframes marqueeAnim { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-wrapper:hover .marquee-track { animation-play-state: paused; }

/* ── IMAGE PARALLAX ───────────────────────────── */
.parallax-img { transition: transform .1s linear; will-change: transform; }

/* ── GLASSMORPHISM ────────────────────────────── */
.glass {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.2);
}
.glass-dark {
  background: rgba(15,23,42,.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,.1);
}

/* ── NEON GLOW ────────────────────────────────── */
.neon-text { color: var(--secondary); text-shadow: 0 0 10px rgba(0,194,168,.8), 0 0 20px rgba(0,194,168,.4); }
.neon-border { box-shadow: inset 0 0 10px rgba(0,87,255,.2), 0 0 10px rgba(0,87,255,.3); border: 1px solid rgba(0,87,255,.5); }

/* ── SOFT SHADOWS ─────────────────────────────── */
.shadow-primary { box-shadow: 0 10px 30px rgba(0,87,255,.3) !important; }
.shadow-secondary { box-shadow: 0 10px 30px rgba(0,194,168,.3) !important; }
.shadow-accent { box-shadow: 0 10px 30px rgba(255,159,28,.3) !important; }

/* ── LOADING SPINNER ──────────────────────────── */
.spinner-primary { color: var(--primary); }
@keyframes spinnerAnim { to{ transform: rotate(360deg); } }
.spinner-custom {
  width: 24px; height: 24px;
  border: 3px solid rgba(0,87,255,.2);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spinnerAnim .8s linear infinite;
  display: inline-block;
}

/* ── PROGRESS BAR ─────────────────────────────── */
.progress-animated .progress-bar {
  animation: progressAnim 2s ease forwards;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
}
@keyframes progressAnim { from{width:0} }

/* ── TOOLTIP CUSTOM ───────────────────────────── */
.tooltip-custom {
  position: relative;
  cursor: help;
}
.tooltip-custom::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dark);
  color: #fff;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: var(--transition);
  z-index: 100;
}
.tooltip-custom:hover::before { opacity: 1; bottom: 130%; }