/* ==========================================================================
   AGASTYA OVERSEAS — animations.css
   Effects-only stylesheet (no layout)
   Premium SaaS motion: Apple × Stripe × Linear × Framer × Webflow
   GPU-friendly: transform · opacity · filter
   ========================================================================== */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  --transition-fast: 0.25s ease;
  --transition-normal: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  --transition-spring: 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

  --anim-distance: 28px;
  --anim-distance-lg: 48px;
  --anim-scale-in: 0.92;
  --anim-blur: 12px;

  --glow-blue: 0 12px 40px rgba(37, 99, 235, 0.35);
  --glow-gold: 0 12px 36px rgba(251, 191, 36, 0.35);
  --glow-soft: 0 10px 30px rgba(15, 23, 42, 0.12);

  --glass-blur: 16px;
  --glass-blur-strong: 22px;
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-bg: rgba(255, 255, 255, 0.12);
  --glass-bg-light: rgba(255, 255, 255, 0.72);
  --glass-bg-dark: rgba(15, 23, 42, 0.55);
}

/* ==========================================================================
   Base transition helpers
   ========================================================================== */

.transition-fast {
  transition: transform var(--transition-fast), opacity var(--transition-fast),
    filter var(--transition-fast), box-shadow var(--transition-fast),
    border-color var(--transition-fast), background-color var(--transition-fast),
    color var(--transition-fast);
}

.transition-normal {
  transition: transform var(--transition-normal), opacity var(--transition-normal),
    filter var(--transition-normal), box-shadow var(--transition-normal),
    border-color var(--transition-normal), background-color var(--transition-normal),
    color var(--transition-normal);
}

.transition-slow {
  transition: transform var(--transition-slow), opacity var(--transition-slow),
    filter var(--transition-slow), box-shadow var(--transition-slow);
}

.gpu {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* ==========================================================================
   Glass
   ========================================================================== */

.glass,
.glass-card,
.glass-navbar,
.glass-footer,
.glass-light,
.glass-dark,
.glass-blue,
.glass-gold {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glow-soft);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
    border-color var(--transition-normal), background-color var(--transition-normal);
}

.glass::before,
.glass-card::before,
.glass-light::before,
.glass-dark::before,
.glass-blue::before,
.glass-gold::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.04) 42%,
    transparent 70%
  );
  opacity: 0.85;
  z-index: 0;
}

.glass > *,
.glass-card > *,
.glass-light > *,
.glass-dark > *,
.glass-blue > *,
.glass-gold > * {
  position: relative;
  z-index: 1;
}

.glass,
.glass-card {
  background: var(--glass-bg-light);
}

.glass-light {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.55);
}

.glass-dark {
  background: var(--glass-bg-dark);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.glass-navbar {
  background: rgba(248, 250, 252, 0.72);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.glass-footer {
  background: rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(var(--glass-blur-strong));
  -webkit-backdrop-filter: blur(var(--glass-blur-strong));
  border-color: rgba(255, 255, 255, 0.08);
}

.glass-blue {
  background: rgba(37, 99, 235, 0.14);
  border-color: rgba(59, 130, 246, 0.28);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

.glass-gold {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.32);
  box-shadow: 0 10px 30px rgba(251, 191, 36, 0.16);
}

.glass-card:hover,
.glass:hover {
  transform: translate3d(0, -6px, 0);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.14);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary,
.btn-secondary,
.btn-outline,
.btn-premium {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
    filter var(--transition-normal), background-color var(--transition-normal),
    border-color var(--transition-normal), color var(--transition-normal);
  will-change: transform;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-premium:hover {
  transform: translate3d(0, -3px, 0);
}

.btn-primary:active,
.btn-secondary:active,
.btn-outline:active,
.btn-premium:active {
  transform: translate3d(0, -1px, 0) scale(0.985);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-outline:focus-visible,
.btn-premium:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.55);
  outline-offset: 3px;
}

.btn-primary,
.btn-gradient {
  box-shadow: var(--glow-blue);
}

.btn-primary:hover,
.btn-gradient:hover {
  box-shadow: 0 18px 48px rgba(37, 99, 235, 0.45);
  filter: brightness(1.05);
}

.btn-secondary,
.btn-gold {
  box-shadow: var(--glow-gold);
}

.btn-secondary:hover,
.btn-gold:hover {
  box-shadow: 0 16px 42px rgba(251, 191, 36, 0.45);
}

.btn-outline:hover {
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
}

/* Shimmer sweep on gradient buttons */
.btn-primary::after,
.btn-gradient::after,
.btn-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: translate3d(-120%, 0, 0);
  transition: transform var(--transition-slow);
  pointer-events: none;
  z-index: 1;
}

.btn-primary:hover::after,
.btn-gradient:hover::after,
.btn-shimmer:hover::after {
  transform: translate3d(120%, 0, 0);
}

/* Ripple element (injected by JS) */
.btn-premium .ripple,
.btn-primary .ripple,
.btn-ripple .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: pulse 0.6s linear forwards;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 2;
}

.btn-glow {
  animation: glow 2.8s ease-in-out infinite;
}

.btn-gradient-move {
  background-size: 200% 200%;
  animation: gradientShift 5s ease infinite;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.service-card,
.destination-card,
.dest-card,
.testimonial-card,
.feature-card,
.country-card,
.journey-step {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
    border-color var(--transition-normal), filter var(--transition-normal);
  will-change: transform;
}

.service-card:hover,
.feature-card:hover,
.country-card:hover,
.testimonial-card:hover,
.journey-step:hover {
  transform: translate3d(0, -10px, 0) scale(1.01);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.14);
}

.destination-card:hover,
.dest-card:hover {
  transform: translate3d(0, -10px, 0);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.2);
}

.destination-card:hover img,
.dest-card:hover img,
.image-zoom:hover img {
  transform: translate3d(0, 0, 0) scale(1.1);
}

.destination-card img,
.dest-card img,
.image-zoom img {
  transition: transform var(--transition-slow);
  will-change: transform;
}

/* Gradient border glow on hover */
.service-card:hover,
.feature-card:hover,
.country-card:hover {
  border-color: rgba(37, 99, 235, 0.28);
  box-shadow: 0 18px 50px rgba(37, 99, 235, 0.18);
}

.card-tilt:hover {
  transform: translate3d(0, -8px, 0) rotate(-0.6deg);
}

.card-glow:hover {
  box-shadow: 0 18px 50px rgba(37, 99, 235, 0.22);
}

.card-lift:hover {
  transform: translate3d(0, -10px, 0);
}

.flip-card {
  transform-style: preserve-3d;
  transition: transform var(--transition-slow);
}

.flip-card:hover {
  transform: rotateY(180deg);
}

/* ==========================================================================
   Image effects
   ========================================================================== */

.image-hover,
.image-zoom,
.image-parallax,
.image-reveal,
.image-mask,
.image-float {
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.image-hover img,
.image-zoom img,
.image-parallax img,
.image-reveal img,
.image-mask img,
.image-float img {
  transition: transform var(--transition-slow), filter var(--transition-normal),
    opacity var(--transition-normal);
  will-change: transform;
}

.image-hover:hover img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

.image-parallax img {
  transform: scale(1.12);
}

.image-reveal {
  clip-path: inset(0 100% 0 0);
  animation: imageReveal 1s var(--ease-out-expo) forwards;
}

.image-mask {
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
  mask-image: linear-gradient(90deg, #000 60%, transparent);
}

.image-float {
  animation: float 5.5s ease-in-out infinite;
}

@keyframes imageReveal {
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* ==========================================================================
   Icon effects
   ========================================================================== */

.icon-bounce:hover {
  animation: bounceSoft 0.7s var(--transition-spring);
}

.icon-spin:hover {
  animation: rotateFast 0.8s linear;
}

.icon-grow,
.icon-hover {
  transition: transform var(--transition-normal), filter var(--transition-normal);
}

.icon-grow:hover,
.icon-hover:hover {
  transform: scale(1.12) translate3d(0, -2px, 0);
}

.icon-pulse {
  animation: pulseSoft 2.2s ease-in-out infinite;
}

.icon-glow {
  filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.45));
  transition: filter var(--transition-normal);
}

.icon-glow:hover {
  filter: drop-shadow(0 0 16px rgba(37, 99, 235, 0.7));
}

.icon-wrap {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.feature-card:hover .icon-wrap,
.service-card:hover .icon-wrap {
  transform: scale(1.08) rotate(-4deg);
}

/* ==========================================================================
   Text effects
   ========================================================================== */

.text-gradient,
.gradient-text {
  background: linear-gradient(90deg, #2563eb, #3b82f6, #fbbf24);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-gradient-animated,
.gradient-text-shine {
  background: linear-gradient(90deg, #93c5fd, #ffffff, #fbbf24, #93c5fd);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shine 4s linear infinite;
}

.text-glow {
  text-shadow: 0 0 18px rgba(37, 99, 235, 0.35);
}

.text-underline-anim {
  position: relative;
  display: inline-block;
}

.text-underline-anim::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-normal);
}

.text-underline-anim:hover::after {
  transform: scaleX(1);
}

.text-reveal {
  animation: fadeUp 0.9s var(--ease-out-expo) both;
}

.text-tracking:hover {
  letter-spacing: 0.04em;
  transition: letter-spacing var(--transition-normal);
}

.typing-cursor::after {
  content: "|";
  margin-left: 2px;
  animation: pulseSoft 1s steps(1, end) infinite;
  opacity: 0.7;
}

/* ==========================================================================
   Background effects
   ========================================================================== */

.bg-animated-gradient {
  background-size: 200% 200%;
  animation: gradientShift 12s ease infinite;
}

.bg-blob,
.bg-blob-2,
.bg-blob-3 {
  pointer-events: none;
  will-change: transform;
}

.bg-blob {
  animation: blob 10s ease-in-out infinite;
}

.bg-blob-2 {
  animation: blob2 12s ease-in-out infinite;
}

.bg-blob-3 {
  animation: blob3 14s ease-in-out infinite;
}

.bg-floating-circles::before,
.bg-floating-circles::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.35;
  animation: floatSlow 9s ease-in-out infinite;
}

.bg-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.bg-grid-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
}

.bg-glow-overlay::after {
  content: "";
  position: absolute;
  inset: 10% 20%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.22), transparent 65%);
  filter: blur(30px);
  animation: pulseSoft 5s ease-in-out infinite;
}

.particle-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

/* ==========================================================================
   Hero effects
   ========================================================================== */

.hero-orb,
.hero-blob {
  animation: blob 10s ease-in-out infinite;
  will-change: transform;
}

.hero-orb-2 {
  animation: blob2 12s ease-in-out infinite;
}

.airplane,
.hero-airplane {
  animation: airplaneFly 6s ease-in-out infinite;
  will-change: transform;
}

.globe-ring,
.hero-globe {
  animation: globeSpin 28s linear infinite;
  will-change: transform;
}

.float-card,
.country-float,
.floating-country-card {
  animation: floatingCard 5.5s ease-in-out infinite;
  will-change: transform;
  transition: transform var(--transition-fast);
}

.float-y {
  animation: float 5s ease-in-out infinite;
}

.float-y-delay {
  animation: floatSlow 6s ease-in-out 0.8s infinite;
}

.float-x {
  animation: countryFloat 7s ease-in-out infinite;
}

.hero-light-rays::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: conic-gradient(
    from 180deg at 50% 50%,
    transparent 0deg,
    rgba(255, 255, 255, 0.05) 40deg,
    transparent 80deg,
    rgba(255, 255, 255, 0.04) 140deg,
    transparent 180deg
  );
  animation: rotateSlow 40s linear infinite;
  opacity: 0.5;
}

.hero-dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  animation: pulseSoft 2s ease-in-out infinite;
}

.hero-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.hero-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

/* Mouse parallax helpers (JS applies transform) */
.parallax-layer {
  will-change: transform;
  transition: transform 0.15s linear;
}

.parallax-depth-1 { --parallax-strength: 8px; }
.parallax-depth-2 { --parallax-strength: 14px; }
.parallax-depth-3 { --parallax-strength: 22px; }

/* ==========================================================================
   Scroll effects
   ========================================================================== */

.reveal,
.scroll-reveal,
.section-reveal,
.opacity-reveal,
.mask-reveal,
.scale-reveal {
  opacity: 0;
  transform: translate3d(0, var(--anim-distance), 0);
  transition: opacity var(--transition-slow), transform var(--transition-slow),
    filter var(--transition-slow);
  will-change: transform, opacity;
}

.reveal.is-visible,
.reveal.visible,
.scroll-reveal.is-visible,
.section-reveal.is-visible,
.opacity-reveal.is-visible,
.mask-reveal.is-visible,
.scale-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.opacity-reveal {
  transform: none;
  filter: blur(4px);
}

.scale-reveal {
  transform: scale(var(--anim-scale-in));
}

.mask-reveal {
  clip-path: inset(0 0 100% 0);
}

.mask-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.45s; }
.reveal-delay-5 { transition-delay: 0.6s; }

/* ==========================================================================
   Timeline effects
   ========================================================================== */

.timeline-line {
  transform-origin: left center;
  transform: scaleX(0);
  animation: shine 1.2s var(--ease-out-expo) forwards;
}

.timeline-line.is-visible,
.journey-track.is-visible .timeline-line {
  transform: scaleX(1);
  transition: transform var(--transition-slow);
}

.timeline-dot,
.journey-step .step-num {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
    background-color var(--transition-normal), color var(--transition-normal);
}

.timeline-dot {
  animation: pulseSoft 2.4s ease-in-out infinite;
}

.journey-step:hover .step-num,
.timeline-icon:hover {
  transform: scale(1.08);
  box-shadow: var(--glow-blue);
}

/* ==========================================================================
   Counter effects
   ========================================================================== */

.trust-item .num,
.counter,
.counter-glow {
  transition: transform var(--transition-normal), text-shadow var(--transition-normal),
    color var(--transition-normal);
}

.trust-item:hover .num,
.counter:hover,
.counter-glow:hover {
  transform: translate3d(0, -2px, 0) scale(1.04);
  text-shadow: 0 0 24px rgba(37, 99, 235, 0.35);
}

/* ==========================================================================
   Testimonial effects
   ========================================================================== */

.testimonial-card::before {
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.testimonial-card:hover::before {
  opacity: 0.18;
  transform: translate3d(0, -4px, 0) scale(1.05);
}

.stars,
.stars-anim {
  display: inline-block;
  animation: sparkle 2.8s ease-in-out infinite;
}

.quote-anim {
  animation: fadeUp 0.9s var(--ease-out-expo) both;
}

/* ==========================================================================
   FAQ effects
   ========================================================================== */

.faq-modern .accordion-button,
.accordion-button {
  transition: background-color var(--transition-normal), color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.faq-modern .accordion-button::after,
.accordion-button::after {
  transition: transform var(--transition-normal);
}

.faq-modern .accordion-collapse,
.accordion-collapse {
  transition: height var(--transition-normal);
}

.faq-modern .accordion-item {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.faq-modern .accordion-item:hover {
  transform: translate3d(0, -2px, 0);
}

/* ==========================================================================
   Navbar effects
   ========================================================================== */

.site-header {
  transition: background-color var(--transition-normal), box-shadow var(--transition-normal),
    backdrop-filter var(--transition-normal), border-color var(--transition-normal);
}

.site-header.is-solid {
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
}

.navbar-nav .nav-link {
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.navbar-nav .nav-link::after {
  transition: transform var(--transition-normal);
}

.navbar-cta-glow,
.site-header .btn-gold,
.site-header .btn-premium {
  animation: glow 3.2s ease-in-out infinite;
}

.navbar-cta-glow:hover,
.site-header .btn-gold:hover,
.site-header .btn-premium:hover {
  animation: none;
}

/* ==========================================================================
   Footer effects
   ========================================================================== */

.site-footer a {
  transition: color var(--transition-fast), transform var(--transition-fast),
    opacity var(--transition-fast);
}

.site-footer a:hover {
  transform: translate3d(0, -1px, 0);
}

.social-icon,
.site-footer .social a {
  transition: transform var(--transition-normal), color var(--transition-normal),
    filter var(--transition-normal);
}

.social-icon:hover,
.site-footer .social a:hover {
  transform: translate3d(0, -3px, 0) scale(1.08);
  filter: drop-shadow(0 6px 12px rgba(251, 191, 36, 0.25));
}

.newsletter-form input {
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast);
}

.newsletter-form input:focus {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.18);
}

/* ==========================================================================
   Loaders
   ========================================================================== */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #0f172a;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #3b82f6;
  animation: rotateFast 0.8s linear infinite;
}

.loader-dots {
  display: inline-flex;
  gap: 8px;
}

.loader-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  animation: bounceSoft 1s ease-in-out infinite;
}

.loader-dots span:nth-child(2) {
  animation-delay: 0.12s;
  background: #60a5fa;
}

.loader-dots span:nth-child(3) {
  animation-delay: 0.24s;
  background: #fbbf24;
}

.loader-logo {
  animation: pulseSoft 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(37, 99, 235, 0.45));
}

/* ==========================================================================
   Cursor effects
   ========================================================================== */

.cursor-glow {
  pointer-events: none;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), transparent 70%);
  filter: blur(8px);
  mix-blend-mode: screen;
  will-change: transform;
}

.magnetic,
.magnetic-target {
  transition: transform var(--transition-fast);
  will-change: transform;
}

.cursor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3b82f6;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.6);
  pointer-events: none;
}

/* ==========================================================================
   Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #e2e8f0;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #2563eb, #1e40af);
  border-radius: 999px;
  border: 2px solid #e2e8f0;
  transition: background var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
}

/* ==========================================================================
   Text selection
   ========================================================================== */

::selection {
  background: rgba(37, 99, 235, 0.22);
  color: #0f172a;
}

::-moz-selection {
  background: rgba(37, 99, 235, 0.22);
  color: #0f172a;
}

/* ==========================================================================
   Animation utility classes
   ========================================================================== */

.fade-up {
  animation: fadeUp 0.9s var(--ease-out-expo) both;
}

.fade-down {
  animation: fadeDown 0.9s var(--ease-out-expo) both;
}

.fade-left {
  animation: fadeLeft 0.9s var(--ease-out-expo) both;
}

.fade-right {
  animation: fadeRight 0.9s var(--ease-out-expo) both;
}

.zoom-in {
  animation: zoomIn 0.9s var(--ease-out-expo) both;
}

.zoom-out {
  animation: zoomOut 0.9s var(--ease-out-expo) both;
}

.scale-in {
  animation: scaleIn 0.85s var(--ease-out-expo) both;
}

.blur-in {
  animation: blurIn 0.9s var(--ease-out-expo) both;
}

.rotate-in {
  animation: rotateIn 0.9s var(--ease-out-expo) both;
}

.float {
  animation: float 5s ease-in-out infinite;
}

.float-slow {
  animation: floatSlow 7s ease-in-out infinite;
}

.float-fast {
  animation: floatFast 3.5s ease-in-out infinite;
}

.slide-up {
  animation: fadeUp 0.8s var(--ease-out-expo) both;
}

.slide-down {
  animation: fadeDown 0.8s var(--ease-out-expo) both;
}

.slide-left {
  animation: fadeLeft 0.8s var(--ease-out-expo) both;
}

.slide-right {
  animation: fadeRight 0.8s var(--ease-out-expo) both;
}

.glow {
  animation: glow 2.8s ease-in-out infinite;
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 60%
  );
  animation: shine 2.4s linear infinite;
  pointer-events: none;
}

.pulse {
  animation: pulseSoft 2s ease-in-out infinite;
}

.pulse-soft {
  animation: pulseSoft 2.6s ease-in-out infinite;
}

.bounce-soft {
  animation: bounceSoft 2s ease-in-out infinite;
}

.rotate-slow {
  animation: rotateSlow 20s linear infinite;
}

.rotate-fast {
  animation: rotateFast 4s linear infinite;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.35s; }
.delay-4 { animation-delay: 0.5s; }
.delay-5 { animation-delay: 0.65s; }

/* ==========================================================================
   GSAP support — initial states only
   ========================================================================== */

.gsap-hidden,
.gsap-reveal,
.gsap-scale,
.gsap-left,
.gsap-right,
.gsap-up,
.gsap-down,
.gsap-rotate {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.gsap-hidden {
  opacity: 0;
  visibility: hidden;
}

.gsap-reveal,
.gsap-up {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
}

.gsap-down {
  opacity: 0;
  transform: translate3d(0, -40px, 0);
}

.gsap-left {
  opacity: 0;
  transform: translate3d(-40px, 0, 0);
}

.gsap-right {
  opacity: 0;
  transform: translate3d(40px, 0, 0);
}

.gsap-scale {
  opacity: 0;
  transform: scale(0.9);
}

.gsap-rotate {
  opacity: 0;
  transform: rotate(-6deg) translate3d(0, 24px, 0);
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translate3d(0, var(--anim-distance), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translate3d(0, calc(var(--anim-distance) * -1), 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translate3d(calc(var(--anim-distance) * -1), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translate3d(var(--anim-distance), 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    opacity: 0;
    transform: scale(1.08);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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

@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.92);
  }
}

@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(var(--anim-blur));
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-8deg) translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -14px, 0);
  }
}

@keyframes floatSlow {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes floatFast {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -18px, 0);
  }
}

@keyframes rotateSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes globeSpin {
  from {
    transform: translate3d(-70%, -40%, 0) rotate(0deg);
  }
  to {
    transform: translate3d(-70%, -40%, 0) rotate(360deg);
  }
}

@keyframes rotateFast {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes blob {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(18px, -22px, 0) scale(1.06);
  }
  66% {
    transform: translate3d(-14px, 12px, 0) scale(0.96);
  }
}

@keyframes blob2 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  40% {
    transform: translate3d(-20px, 16px, 0) scale(1.08);
  }
  70% {
    transform: translate3d(12px, -18px, 0) scale(0.94);
  }
}

@keyframes blob3 {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(24px, 10px, 0) scale(1.1);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0);
    opacity: 0.55;
  }
  70% {
    transform: scale(3.2);
    opacity: 0;
  }
  100% {
    transform: scale(3.2);
    opacity: 0;
  }
}

@keyframes pulseSoft {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.72;
    transform: scale(1.04);
  }
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes shine {
  0% {
    background-position: -200% 0;
    transform: translate3d(-120%, 0, 0);
  }
  100% {
    background-position: 200% 0;
    transform: translate3d(120%, 0, 0);
  }
}

@keyframes wave {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  25% {
    transform: translate3d(0, -4px, 0) rotate(1deg);
  }
  75% {
    transform: translate3d(0, 4px, 0) rotate(-1deg);
  }
}

@keyframes lift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 12px 36px rgba(37, 99, 235, 0.28);
  }
  50% {
    box-shadow: 0 16px 48px rgba(37, 99, 235, 0.48);
  }
}

@keyframes sparkle {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.85;
    filter: brightness(1.25);
  }
}

@keyframes orbit {
  from {
    transform: rotate(0deg) translate3d(40px, 0, 0) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translate3d(40px, 0, 0) rotate(-360deg);
  }
}

@keyframes cardHover {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes floatingCard {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -12px, 0);
  }
}

@keyframes airplaneFly {
  0% {
    transform: translate3d(0, 0, 0) rotate(-12deg);
  }
  50% {
    transform: translate3d(-36px, 16px, 0) rotate(-8deg);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(-12deg);
  }
}

@keyframes countryFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(10px, -8px, 0);
  }
}

@keyframes bounceSoft {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, -8px, 0);
  }
  60% {
    transform: translate3d(0, -3px, 0);
  }
}

/* WhatsApp FAB pulse ring */
.whatsapp-fab {
  animation: whatsappPulse 2.4s ease-out infinite;
}

@keyframes whatsappPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

.whatsapp-fab:hover {
  animation: none;
  transform: translate3d(0, -4px, 0) scale(1.06);
}

/* Marquee (transform only) */
.marquee-track {
  animation: marqueeX 35s linear infinite;
  will-change: transform;
}

.marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marqueeX {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Scholarship floating art */
.scholarship-art {
  animation: float 5.5s ease-in-out infinite;
}

/* Uni chip micro-hover */
.uni-chip {
  transition: transform var(--transition-normal), box-shadow var(--transition-normal),
    border-color var(--transition-normal), color var(--transition-normal);
}

.uni-chip:hover {
  transform: translate3d(0, -4px, 0);
}

/* Calc results entrance */
.calc-results.is-visible {
  animation: fadeUp 0.45s var(--ease-out-expo) both;
}

/* Scroll progress bar growth is width-driven in JS; keep GPU paint soft */
.scroll-progress {
  transition: width 0.05s linear;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

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

.will-change-opacity {
  will-change: opacity;
}

.will-change-auto {
  will-change: auto;
}

.no-anim {
  animation: none !important;
  transition: none !important;
}

.pause-anim {
  animation-play-state: paused !important;
}

.infinite {
  animation-iteration-count: infinite;
}

.once {
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.origin-center {
  transform-origin: center center;
}

.origin-left {
  transform-origin: left center;
}

.origin-top {
  transform-origin: top center;
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-normal: 0.01ms;
    --transition-slow: 0.01ms;
  }

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

  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .zoom-in,
  .zoom-out,
  .scale-in,
  .blur-in,
  .rotate-in,
  .float,
  .float-slow,
  .float-fast,
  .reveal,
  .scroll-reveal,
  .section-reveal,
  .opacity-reveal,
  .mask-reveal,
  .scale-reveal,
  .glow,
  .shimmer,
  .pulse,
  .pulse-soft,
  .bounce-soft,
  .rotate-slow,
  .rotate-fast,
  .marquee-track,
  .airplane,
  .hero-airplane,
  .globe-ring,
  .hero-globe,
  .globe-map-strip,
  .globe-earth,
  .globe-clouds,
  .globe-grid,
  .globe-orbit,
  .flight-plane,
  .globe-pin,
  .hero-orb,
  .float-y,
  .float-y-delay,
  .float-x,
  .float-card,
  .whatsapp-fab,
  .scholarship-art,
  .gsap-hidden,
  .gsap-reveal,
  .gsap-scale,
  .gsap-left,
  .gsap-right,
  .gsap-up,
  .gsap-down,
  .gsap-rotate {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .service-card:hover,
  .destination-card:hover,
  .dest-card:hover,
  .testimonial-card:hover,
  .feature-card:hover,
  .country-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-outline:hover,
  .btn-premium:hover,
  .card-lift:hover,
  .whatsapp-fab:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   End — animations.css
   ========================================================================== */