/* ==========================================================================
   THE TRIP HOLIC — ADVANCED ANIMATIONS & MICRO-INTERACTIONS DESIGN SYSTEM
   High Performance (GPU Accelerated: transform & opacity), 60 FPS,
   WCAG 2.1 AA Compliant (Strict prefers-reduced-motion support)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KEYFRAME DEFINITIONS
   -------------------------------------------------------------------------- */

/* Hero Panoramic Ken Burns Ambient Drift */
@keyframes tthKenBurns {
  0% {
    transform: scale(1.02) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-1%, -0.8%);
  }
  100% {
    transform: scale(1.02) translate(0, 0);
  }
}

/* Subtle Vertical Float (Badges, Floating Accents, 404 elements) */
@keyframes tthFloatSlow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes tthFloatGentle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(1deg);
  }
}

/* Shimmer / Light Beam Sweep (Buttons, Featured Badges, Banners) */
@keyframes tthShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Pulsing Radial Glow (Active status dots, Featured elements) */
@keyframes tthPulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(135, 218, 235, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(135, 218, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(135, 218, 235, 0);
  }
}

/* Secondary Orange Glow Pulse (CTAs, Hot Badges) */
@keyframes tthPulseOrange {
  0% {
    box-shadow: 0 0 0 0 rgba(252, 109, 0, 0.65);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(252, 109, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(252, 109, 0, 0);
  }
}

/* Dual Ring WhatsApp FAB Attention Ripple */
@keyframes tthFabRipple {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7), 0 0 0 0 rgba(37, 211, 102, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0), 0 0 0 20px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Phone Call Icon Periodic Vibration / Ring */
@keyframes tthPhoneRing {
  0%, 100% {
    transform: rotate(0deg);
  }
  2%, 6%, 10% {
    transform: rotate(14deg);
  }
  4%, 8%, 12% {
    transform: rotate(-14deg);
  }
  14% {
    transform: rotate(0deg);
  }
}

/* Timeline Flow Track Gradient Shine */
@keyframes tthTimelineFlow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

/* Soft Bounce Pop for Interactive Chips & Radios */
@keyframes tthPopIn {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Checkmark Celebration Pop */
@keyframes tthCheckmarkPop {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Subtle Border Shimmer */
@keyframes tthBorderShine {
  0%, 100% {
    border-color: rgba(135, 218, 235, 0.4);
  }
  50% {
    border-color: rgba(252, 109, 0, 0.65);
  }
}

/* --------------------------------------------------------------------------
   2. HERO SECTION ANIMATIONS
   -------------------------------------------------------------------------- */

/* Cinematic Background */
.tth-hero-bg {
  animation: tthKenBurns 22s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
  will-change: transform;
}

/* Hero Entrance Sequence */
.tth-hero-badge {
  opacity: 0;
  transform: translateY(-16px);
  animation: tthEntranceFadeDown 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.15s;
}

.tth-hero-title {
  opacity: 0;
  transform: translateY(24px);
  animation: tthEntranceFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.28s;
}

.tth-hero-desc {
  opacity: 0;
  transform: translateY(20px);
  animation: tthEntranceFadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.42s;
}

.tth-hero-search-wrapper,
.tth-hero-cta-group {
  opacity: 0;
  transform: translateY(22px);
  animation: tthEntranceFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.55s;
}

/* Quick destination tags stagger */
.tth-hero-search-wrapper .tth-pkg-chip {
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  animation: tthEntranceFadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.tth-hero-search-wrapper .tth-pkg-chip:nth-child(1) { animation-delay: 0.65s; }
.tth-hero-search-wrapper .tth-pkg-chip:nth-child(2) { animation-delay: 0.72s; }
.tth-hero-search-wrapper .tth-pkg-chip:nth-child(3) { animation-delay: 0.79s; }
.tth-hero-search-wrapper .tth-pkg-chip:nth-child(4) { animation-delay: 0.86s; }
.tth-hero-search-wrapper .tth-pkg-chip:nth-child(5) { animation-delay: 0.93s; }
.tth-hero-search-wrapper .tth-pkg-chip:nth-child(6) { animation-delay: 1.00s; }
.tth-hero-search-wrapper .tth-pkg-chip:nth-child(7) { animation-delay: 1.07s; }

@keyframes tthEntranceFadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tthEntranceFadeDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating Badges / Accents */
.tth-float-badge {
  animation: tthFloatSlow 4s ease-in-out infinite;
}

.tth-float-gentle {
  animation: tthFloatGentle 6s ease-in-out infinite;
}

/* Sub-page Hero Banner Entrance */
.tth-page-hero .tth-hero-breadcrumb {
  animation: tthEntranceFadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.tth-page-hero-badge {
  animation: tthEntranceFadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.1s;
}

.tth-page-hero-title {
  animation: tthEntranceFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.18s;
}

.tth-page-hero-desc {
  animation: tthEntranceFadeUp 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.28s;
}

/* --------------------------------------------------------------------------
   3. SCROLL-TRIGGERED REVEAL SYSTEM (IntersectionObserver Driven)
   -------------------------------------------------------------------------- */

/* Default Reveal: Smooth Fade & Slide Up */
.tth-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.tth-reveal.tth-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Directional: Slide In From Left */
.tth-reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.tth-reveal-left.tth-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Directional: Slide In From Right */
.tth-reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.tth-reveal-right.tth-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Tablet & Mobile: Convert horizontal translation to vertical to prevent viewport overflow */
@media (max-width: 991.98px) {
  .tth-reveal-left,
  .tth-reveal-right {
    transform: translateY(24px);
  }

  .tth-reveal-left.tth-revealed,
  .tth-reveal-right.tth-revealed {
    transform: translateY(0);
  }
}

/* Directional: Soft Scale Zoom In */
.tth-reveal-zoom {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.tth-reveal-zoom.tth-revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Children Utility Delays */
.tth-stagger-1 { transition-delay: 0.08s !important; }
.tth-stagger-2 { transition-delay: 0.16s !important; }
.tth-stagger-3 { transition-delay: 0.24s !important; }
.tth-stagger-4 { transition-delay: 0.32s !important; }
.tth-stagger-5 { transition-delay: 0.40s !important; }
.tth-stagger-6 { transition-delay: 0.48s !important; }

/* --------------------------------------------------------------------------
   4. CARD & GRID MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */

/* Trending Destination Capsule Cards */
.tth-capsule-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tth-capsule-card:hover {
  transform: translateY(-8px) scale(1.015) !important;
  box-shadow: 0 20px 38px -10px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(135, 218, 235, 0.5) !important;
}

.tth-capsule-card .tth-capsule-img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.tth-capsule-card:hover .tth-capsule-img {
  transform: scale(1.08);
  filter: brightness(1.03);
}

.tth-capsule-card .tth-capsule-action-btn {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.3s ease,
              color 0.3s ease !important;
}

.tth-capsule-card:hover .tth-capsule-action-btn {
  transform: scale(1.15) rotate(45deg);
  background-color: var(--tth-secondary-solid, #FC6D00) !important;
  color: #FFFFFF !important;
}

/* Tour Package Cards */
.tth-tour-card,
.tth-tour-item {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease !important;
}

.tth-tour-card:hover,
.tth-tour-item:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 16px 32px -8px rgba(14, 116, 144, 0.18), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-color: var(--tth-primary-border, #A5E4F2) !important;
}

.tth-tour-card-img-wrap img,
.tth-tour-media-img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tth-tour-card:hover .tth-tour-card-img-wrap img,
.tth-tour-item:hover .tth-tour-media-img {
  transform: scale(1.07) !important;
}

/* Destination Showcase Cards (destinations.html) */
.tth-destination-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease !important;
}

.tth-destination-card:hover {
  transform: translateY(-7px) !important;
  box-shadow: 0 16px 32px -8px rgba(14, 116, 144, 0.18), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  border-color: var(--tth-primary-border, #A5E4F2) !important;
}

.tth-dest-media img,
.tth-dest-img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tth-destination-card:hover .tth-dest-media img,
.tth-destination-card:hover .tth-dest-img {
  transform: scale(1.08) !important;
}

/* Trust / Credibility Cards */
.tth-trust-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease,
              background-color 0.35s ease !important;
}

.tth-trust-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 14px 28px -6px rgba(14, 116, 144, 0.15) !important;
  border-color: var(--tth-primary, #87DAEB) !important;
}

.tth-trust-card:hover .tth-trust-icon {
  transform: scale(1.1) rotate(6deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 4-Step Process Items */
.tth-step-item {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tth-step-item:hover {
  transform: translateY(-4px) !important;
}

.tth-step-node {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease !important;
}

.tth-step-item:hover .tth-step-node {
  transform: translateY(-4px) scale(1.05) !important;
  box-shadow: 0 10px 24px rgba(252, 109, 0, 0.28) !important;
  border-color: var(--tth-secondary-solid, #FC6D00) !important;
}

.tth-step-item:hover .tth-step-num {
  animation: tthPopIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Timeline Track Flowing Gradient Animation */
@media (min-width: 992px) {
  .tth-timeline-track {
    background: linear-gradient(90deg, 
      var(--tth-primary) 0%, 
      var(--tth-secondary) 50%, 
      var(--tth-primary) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: tthTimelineFlow 8s linear infinite !important;
  }
}

/* Testimonial Cards */
.tth-testimonial-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease !important;
}

.tth-testimonial-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 30px -8px rgba(23, 33, 33, 0.12) !important;
  border-color: var(--tth-primary-border, #A5E4F2) !important;
}

/* Blog & Article Cards */
.tth-article-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease !important;
}

.tth-article-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 32px -8px rgba(23, 33, 33, 0.14) !important;
  border-color: var(--tth-primary-border, #A5E4F2) !important;
}

.tth-article-img-wrap img {
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tth-article-card:hover .tth-article-img-wrap img {
  transform: scale(1.08) !important;
}

/* --------------------------------------------------------------------------
   5. BUTTON SHIMMER & INTERACTIVE FEEDBACK
   -------------------------------------------------------------------------- */

/* Brand Button Hover & Active States */
.btn-tth {
  position: relative;
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.22s ease,
              border-color 0.22s ease !important;
}

.btn-tth:hover {
  transform: translateY(-2px);
}

.btn-tth:active {
  transform: scale(0.97) translateY(0);
}

/* Light Sheen Sweep Overlay on Primary & Secondary Buttons */
.btn-tth-primary::after,
.btn-tth-secondary::after,
.btn-tth-accent::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.28) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  transition: left 0.65s ease;
}

.btn-tth-primary:hover::after,
.btn-tth-secondary:hover::after,
.btn-tth-accent:hover::after {
  left: 130%;
}

/* Button Icon Micro-Nudge */
.btn-tth i,
.btn-tth .bi {
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

.btn-tth:hover i.bi-arrow-right,
.btn-tth:hover i.bi-chevron-right,
.btn-tth:hover i.bi-arrow-up-right {
  transform: translateX(4px);
}

.btn-tth:hover i.bi-whatsapp {
  transform: scale(1.12);
}

.btn-tth:hover i.bi-telephone-fill,
.btn-tth:hover i.bi-telephone {
  animation: tthPhoneRing 1s ease infinite;
}

/* --------------------------------------------------------------------------
   6. FLOATING ACTIONS & CALL-TO-ACTION (FAB)
   -------------------------------------------------------------------------- */

/* WhatsApp Pulse Attention */
.tth-fab-whatsapp,
.tth-desktop-fab-whatsapp {
  animation: tthFabRipple 3.5s infinite ease-in-out;
}

/* Call Button Subtle Periodic Ring */
.tth-fab-call i,
.tth-desktop-fab-call i {
  animation: tthPhoneRing 4s infinite ease-in-out;
  transform-origin: center;
}

/* Floating Actions Back to Top Button */
.tth-back-to-top {
  position: fixed;
  bottom: 84px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tth-white, #FFFFFF);
  color: var(--tth-primary-dark, #0E7490);
  border: 1.5px solid var(--tth-primary-border, #A5E4F2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  z-index: 1030;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s ease,
              background-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease;
  text-decoration: none;
}

.tth-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.tth-back-to-top:hover {
  background: var(--tth-primary, #87DAEB);
  color: #0F172A;
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(14, 116, 144, 0.25);
}

@media (max-width: 767.98px) {
  .tth-back-to-top {
    bottom: 78px;
    right: 16px;
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

/* Final CTA Section Pulse Glow */
.tth-final-cta-section.has-card .tth-cta-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.tth-final-cta-section.has-card .tth-cta-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px -12px rgba(9, 79, 96, 0.35);
}

/* --------------------------------------------------------------------------
   7. INTERACTIVE ACCORDIONS, MODALS & INPUTS
   -------------------------------------------------------------------------- */

/* FAQ Accordion Item Micro-interaction */
.accordion-item {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.accordion-item:hover {
  border-color: var(--tth-primary-border, #A5E4F2) !important;
}

.accordion-button {
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease !important;
}

.accordion-button::after {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Modal Smooth Pop */
.modal.fade .modal-dialog {
  transform: scale(0.94) translateY(12px);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}

/* Form Controls Focus Elevation */
.form-control,
.form-select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

.form-control:focus,
.form-select:focus {
  transform: translateY(-1px);
}

/* Chip Buttons Interactive Pop */
.tth-chip-btn,
.tth-pkg-chip,
.tth-filter-btn {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              color 0.2s ease,
              box-shadow 0.2s ease !important;
}

.tth-chip-btn:hover,
.tth-pkg-chip:hover,
.tth-filter-btn:hover {
  transform: translateY(-2px) scale(1.02);
}

.tth-chip-btn:active,
.tth-pkg-chip:active,
.tth-filter-btn:active {
  transform: scale(0.96);
}

/* --------------------------------------------------------------------------
   8. NUMERICAL COUNT-UP PULSE
   -------------------------------------------------------------------------- */
.tth-stat-number.is-counting {
  color: var(--tth-secondary-solid, #FC6D00);
  transition: color 0.4s ease;
}

/* --------------------------------------------------------------------------
   9. STRICT ACCESSIBILITY: PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .tth-hero-bg {
    animation: none !important;
  }

  .tth-reveal,
  .tth-reveal-left,
  .tth-reveal-right,
  .tth-reveal-zoom,
  .tth-hero-badge,
  .tth-hero-title,
  .tth-hero-desc,
  .tth-hero-search-wrapper,
  .tth-hero-cta-group,
  .tth-hero-search-wrapper .tth-pkg-chip {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .tth-back-to-top {
    transition: none !important;
  }
}