/* Vyankatesh Tours — motion layer (loaded from index.html; does not replace theme tokens) */

:root {
  --vt-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --vt-fast: 0.55s;
  --vt-med: 0.65s;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ——— Nav polish (sticky already in app CSS; strengthen + micro-interactions) ——— */

html.vt-motion .site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  will-change: transform;
}

html.vt-motion .site-nav a {
  position: relative;
}

html.vt-motion .site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lux-amber-400), var(--lux-amber-500));
  transition: width 0.3s var(--vt-ease-out);
  pointer-events: none;
}

html.vt-motion .site-nav a:hover::after,
html.vt-motion .site-nav a.active::after {
  width: 100%;
}

html.vt-motion .btn-header-cta {
  position: relative;
  isolation: isolate;
}

html.vt-motion .btn-header-cta::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px solid rgba(251, 191, 36, 0.45);
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.3s var(--vt-ease-out),
    transform 0.3s var(--vt-ease-out);
  pointer-events: none;
  z-index: -1;
}

html.vt-motion .btn-header-cta:hover::after {
  opacity: 1;
  transform: scale(1);
}

/* ——— Footer ——— */

html.vt-motion .site-footer .footer-links a {
  transition: color 0.3s ease;
}

html.vt-motion .site-footer .footer-inner {
  opacity: 0;
  animation: vtFadeIn 0.75s ease-out 0.15s forwards;
}

/* ——— Home hero (page-load) ——— */

html.vt-motion .lux-home .lux-hero-blobs {
  will-change: transform;
}

html.vt-motion .lux-home .lux-hero-badge {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  animation: vtHeroBadgeIn 0.6s var(--vt-ease-out) forwards;
}

html.vt-motion .lux-home .lux-hero-title {
  opacity: 0;
  transform: translate3d(-18px, 0, 0);
  animation: vtFadeSlideLeft 0.65s var(--vt-ease-out) 0.08s forwards;
}

html.vt-motion .lux-home .lux-hero-accent {
  display: inline-block;
  text-shadow:
    0 0 12px rgba(251, 191, 36, 0.35),
    0 0 28px rgba(245, 158, 11, 0.22);
  animation: vtAccentGlow 2.6s ease-in-out 0.55s infinite;
}

html.vt-motion .lux-home .lux-hero-lead {
  opacity: 0;
  animation: vtFadeIn 0.75s ease-out 0.8s forwards;
}

html.vt-motion .lux-home .lux-hero-ctas .lux-btn:nth-child(1) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: vtSlideUpFade 0.55s var(--vt-ease-out) 0.95s forwards;
}

html.vt-motion .lux-home .lux-hero-ctas .lux-btn:nth-child(2) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  animation: vtSlideUpFade 0.55s var(--vt-ease-out) 1.05s forwards;
}

@media (hover: hover) {
  html.vt-motion .lux-home .lux-hero-ctas .lux-btn:hover {
    transform: translate3d(0, -2px, 0) scale(1.05);
  }

  html.vt-motion .lux-home .lux-hero-ctas .lux-btn:active {
    transform: translate3d(0, 0, 0) scale(1);
  }
}

html.vt-motion .lux-home .lux-hero-stats {
  opacity: 0;
  animation: vtFadeIn 0.65s ease-out 1.15s forwards;
}

/* ——— Popular journeys: scroll reveal + hover (disable first-paint keyframes animation) ——— */

html.vt-motion .lux-home .lux-tour-card.lux-tour-card--enter {
  animation: none !important;
}

html.vt-motion .lux-home .lux-tour-card {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition:
    opacity var(--vt-med) ease-out,
    transform var(--vt-med) var(--vt-ease-out),
    box-shadow 0.3s var(--vt-ease-out),
    border-color 0.3s ease;
  transition-delay: var(--vt-stagger, 0s);
}

html.vt-motion .lux-home .lux-tour-card[data-vt-revealed] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (hover: hover) {
  html.vt-motion .lux-home .lux-tour-card:hover {
    transform: translate3d(0, -10px, 0);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
    border-color: rgba(251, 191, 36, 0.55);
  }

  html.vt-motion .lux-home .lux-tour-card[data-vt-revealed]:hover {
    transform: translate3d(0, -10px, 0);
  }

  html.vt-motion .lux-home .lux-tour-card:hover .lux-tour-img {
    transform: scale(1.08);
  }
}

html.vt-motion .lux-home .lux-tour-card .lux-tour-price {
  transition: transform 0.3s var(--vt-ease-out), opacity 0.3s ease;
}

@media (hover: hover) {
  html.vt-motion .lux-home .lux-tour-card:hover .lux-tour-price {
    transform: translate3d(0, -8px, 0);
  }
}

/* Stars appear sequentially after card reveal */
html.vt-motion .lux-home .lux-tour-card[data-vt-revealed] .lux-star {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 6px, 0) scale(0.92);
  animation: vtStarIn 0.35s var(--vt-ease-out) forwards;
}

html.vt-motion .lux-home .lux-tour-card[data-vt-revealed] .lux-star:nth-child(1) {
  animation-delay: calc(var(--vt-stagger, 0s) + 0.05s);
}
html.vt-motion .lux-home .lux-tour-card[data-vt-revealed] .lux-star:nth-child(2) {
  animation-delay: calc(var(--vt-stagger, 0s) + 0.12s);
}
html.vt-motion .lux-home .lux-tour-card[data-vt-revealed] .lux-star:nth-child(3) {
  animation-delay: calc(var(--vt-stagger, 0s) + 0.19s);
}
html.vt-motion .lux-home .lux-tour-card[data-vt-revealed] .lux-star:nth-child(4) {
  animation-delay: calc(var(--vt-stagger, 0s) + 0.26s);
}
html.vt-motion .lux-home .lux-tour-card[data-vt-revealed] .lux-star:nth-child(5) {
  animation-delay: calc(var(--vt-stagger, 0s) + 0.33s);
}

@media (hover: hover) {
  html.vt-motion .lux-home .lux-tour-actions .lux-btn:hover {
    transform: translate3d(0, -2px, 0) scale(1.05);
    box-shadow: 0 12px 34px rgba(245, 158, 11, 0.35);
  }

  html.vt-motion .lux-home .lux-tour-actions .lux-btn--outline:hover {
    box-shadow: 0 10px 30px rgba(251, 191, 36, 0.18);
  }
}

/* ——— Section heading choreography ——— */

html.vt-motion .lux-home .lux-section-head .lux-kicker,
html.vt-motion .lux-home .lux-section-head .lux-section-title,
html.vt-motion .lux-home .lux-section-head .lux-section-sub {
  opacity: 0;
}

html.vt-motion .lux-home .lux-section-head[data-vt-revealed] .lux-kicker {
  animation: vtSlideInLeft 0.6s var(--vt-ease-out) forwards;
}

html.vt-motion .lux-home .lux-section-head[data-vt-revealed] .lux-section-title {
  animation: vtSlideInLeft 0.65s var(--vt-ease-out) 0.08s forwards;
}

html.vt-motion .lux-home .lux-section-head[data-vt-revealed] .lux-section-sub {
  animation: vtSlideInRight 0.65s var(--vt-ease-out) 0.18s forwards;
}

/* ——— Features ——— */

html.vt-motion .lux-home .lux-feature {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--vt-med) ease-out,
    transform var(--vt-med) var(--vt-ease-out),
    box-shadow 0.3s var(--vt-ease-out),
    border-color 0.3s ease;
  transition-delay: var(--vt-stagger, 0s);
}

html.vt-motion .lux-home .lux-feature[data-vt-revealed] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.vt-motion .lux-home .lux-features-grid .lux-feature:nth-child(1)[data-vt-revealed] .lux-feature-icon {
  animation: vtIconSpin 0.8s var(--vt-ease-out) both;
  animation-delay: var(--vt-stagger, 0s);
}

html.vt-motion .lux-home .lux-features-grid .lux-feature:nth-child(2)[data-vt-revealed] .lux-feature-icon {
  animation:
    vtIconSpin 0.8s var(--vt-ease-out) both,
    vtShieldPulse 2s ease-in-out infinite;
  animation-delay: var(--vt-stagger, 0s), calc(var(--vt-stagger, 0s) + 0.85s);
}

html.vt-motion .lux-home .lux-features-grid .lux-feature:nth-child(3) .lux-feature-icon {
  position: relative;
  overflow: hidden;
}

html.vt-motion .lux-home .lux-features-grid .lux-feature:nth-child(3)[data-vt-revealed] .lux-feature-icon {
  animation: vtIconSpin 0.8s var(--vt-ease-out) both;
  animation-delay: var(--vt-stagger, 0s);
}

html.vt-motion .lux-home .lux-features-grid .lux-feature:nth-child(3)[data-vt-revealed] .lux-feature-icon::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 45%,
    transparent 70%
  );
  transform: translate3d(-40%, 0, 0);
  animation: vtShimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}

@media (hover: hover) {
  html.vt-motion .lux-home .lux-feature:hover {
    transform: translate3d(0, -8px, 0);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28);
    border-color: rgba(251, 191, 36, 0.35);
  }

  html.vt-motion .lux-home .lux-feature[data-vt-revealed]:hover {
    transform: translate3d(0, -8px, 0);
  }
}

/* ——— CTA under journeys ——— */

html.vt-motion .lux-home .lux-journeys-cta {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 0.6s ease-out, transform 0.6s var(--vt-ease-out);
}

html.vt-motion .lux-home .lux-journeys-cta[data-vt-revealed] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ——— Reduced motion: show final state ——— */

html.vt-motion.vt-reduced .lux-home .lux-hero-badge,
html.vt-motion.vt-reduced .lux-home .lux-hero-title,
html.vt-motion.vt-reduced .lux-home .lux-hero-lead,
html.vt-motion.vt-reduced .lux-home .lux-hero-ctas .lux-btn,
html.vt-motion.vt-reduced .lux-home .lux-hero-stats,
html.vt-motion.vt-reduced .site-footer .footer-inner {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html.vt-motion.vt-reduced .lux-home .lux-hero-accent {
  animation: none !important;
}

html.vt-motion.vt-reduced .lux-home .lux-tour-card,
html.vt-motion.vt-reduced .lux-home .lux-feature,
html.vt-motion.vt-reduced .lux-home .lux-journeys-cta {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

html.vt-motion.vt-reduced .lux-home .lux-tour-card .lux-star,
html.vt-motion.vt-reduced .lux-home .lux-feature .lux-feature-icon {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html.vt-motion.vt-reduced .lux-home .lux-features-grid .lux-feature:nth-child(3) .lux-feature-icon::after {
  animation: none !important;
  opacity: 0 !important;
}

html.vt-motion.vt-reduced .lux-home .lux-section-head .lux-kicker,
html.vt-motion.vt-reduced .lux-home .lux-section-head .lux-section-title,
html.vt-motion.vt-reduced .lux-home .lux-section-head .lux-section-sub {
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* ——— Mobile: softer motion ——— */

@media (max-width: 767px) {
  html.vt-motion .lux-home .lux-tour-card {
    transform: translate3d(0, 18px, 0);
  }

  @media (hover: hover) {
    html.vt-motion .lux-home .lux-tour-card:hover {
      transform: translate3d(0, -6px, 0);
    }

    html.vt-motion .lux-home .lux-tour-card[data-vt-revealed]:hover {
      transform: translate3d(0, -6px, 0);
    }

    html.vt-motion .lux-home .lux-tour-card:hover .lux-tour-img {
      transform: scale(1.05);
    }
  }

  html.vt-motion .lux-home .lux-hero-title {
    animation-duration: 0.5s;
  }
}

/* ——— Keyframes ——— */

@keyframes vtHeroBadgeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vtFadeSlideLeft {
  from {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vtFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes vtSlideUpFade {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vtAccentGlow {
  0%,
  100% {
    text-shadow:
      0 0 12px rgba(251, 191, 36, 0.35),
      0 0 28px rgba(245, 158, 11, 0.22);
    filter: saturate(1);
  }
  50% {
    text-shadow:
      0 0 18px rgba(251, 191, 36, 0.55),
      0 0 42px rgba(245, 158, 11, 0.32);
    filter: saturate(1.08);
  }
}

@keyframes vtStarIn {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes vtSlideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-22px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes vtSlideInRight {
  from {
    opacity: 0;
    transform: translate3d(22px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

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

@keyframes vtShieldPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.18);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(251, 191, 36, 0);
  }
}

@keyframes vtShimmer {
  0% {
    transform: translate3d(-55%, 0, 0);
  }
  100% {
    transform: translate3d(55%, 0, 0);
  }
}