/* ==========================================================================
   ALEGRÍAS TOURS - SCROLL REVEALS & PHYSICAL ANIMATIONS
   Subtle transforms, clipping reveals, zero fade parade, 100% smooth.
   Strictly respects prefers-reduced-motion.
   ========================================================================== */

/* Motion primitives */
.reveal-slide-up {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1), transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.reveal-slide-up.is-revealed {
  transform: translateY(0);
  opacity: 1;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 750ms cubic-bezier(0.16, 1, 0.3, 1), transform 750ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

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

/* Stagger delays for grid items */
.stagger-1 { transition-delay: 80ms; }
.stagger-2 { transition-delay: 160ms; }
.stagger-3 { transition-delay: 240ms; }
.stagger-4 { transition-delay: 320ms; }
.stagger-5 { transition-delay: 400ms; }

/* Parallax accent hover */
.img-hover-zoom {
  overflow: hidden;
}

.img-hover-zoom img {
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.img-hover-zoom:hover img {
  transform: scale(1.04);
}

/* Respect user accessibility while preserving smooth interface feedback */
@media (prefers-reduced-motion: reduce) {
  /* Only soften intense looping keyframe spins, do not kill UI transitions */
  .spin-slow {
    animation-duration: 10s !important;
  }
}

/* ==========================================================================
   TRANSICIONES DE PÁGINA CON EFECTO SLIDE & SMOOTH FADE
   Suave, cinematográfico y sin cortes bruscos entre secciones y páginas.
   ========================================================================== */
@keyframes pageEnterSlide {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageExitSlide {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

main,
.reservation-main-wrap,
.buses-main-page {
  animation: pageEnterSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform;
}

body.page-is-exiting main,
body.page-is-exiting .reservation-main-wrap,
body.page-is-exiting .buses-main-page {
  animation: pageExitSlide 0.22s cubic-bezier(0.4, 0, 1, 1) forwards !important;
  pointer-events: none;
}

/* ==========================================================================
   PANTALLA DE CARGA OFICIAL ALEGRÍAS TOURS (5 SEGUNDOS)
   "Es hora de probar algo diferente"
   "No más agencias aburridaaaaaas"
   "Preparando todo..."
   Colores del logo: Azul Noche #0F172A, Amarillo Marca #FFC700 sólido (sin neón ni brillos)
   ========================================================================== */
html.preloader-skipped .plane-preloader {
  display: none !important;
}

.plane-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background-color: #0B1325;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), visibility 600ms;
}

.plane-preloader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 540px;
}

/* =========================================================================
   SISTEMA DE LOGO ANIMADO UNIFICADO (HEADER Y PRELOADER)
   Alegrías Tours - Elementos auténticos separados:
   - Montaña / Fondo: logo-element-backdrop.png
   - Bus en movimiento: logo-element-bus.png
   - Ruedas giratorias: logo-element-wheel.png (front & rear)
   ========================================================================= */

.brand-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.brand-logo-animated {
  position: relative;
  width: 58px;
  height: 58px;
  display: inline-block;
  vertical-align: middle;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.brand-link:hover .brand-logo-animated {
  transform: scale(1.06);
}

.brand-logo-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

.brand-logo-bus-wrap {
  position: absolute;
  top: 33.5%;
  left: 30%;
  width: 40%;
  height: 22.8%;
  z-index: 2;
  transform-origin: 50% 85%;
  animation: busRideMountain 3.2s ease-in-out infinite;
  will-change: transform;
}

.brand-logo-bus-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
}

/* Ruedas giratorias integradas */
.brand-logo-wheel {
  position: absolute;
  width: 13.5%;
  height: 23.5%;
  z-index: 2;
  animation: spinBusWheel 1.1s linear infinite;
  will-change: transform;
  transform-origin: center center;
}

.brand-logo-wheel.wheel-rear {
  left: 15.2%;
  top: 73.5%;
}

.brand-logo-wheel.wheel-front {
  left: 68.2%;
  top: 73.5%;
}

/* 2. Logo Animado en Preloader */
.preloader-logo-wrap {
  width: 170px;
  height: 170px;
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-animated-logo {
  width: 160px;
  height: 160px;
  filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.45));
}

@keyframes spinBusWheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes busRideMountain {
  0% {
    transform: translateX(-14%) translateY(3.5%) rotate(-3.5deg);
  }
  20% {
    transform: translateX(-4%) translateY(-1%) rotate(-1deg);
  }
  45% {
    transform: translateX(6%) translateY(-5%) rotate(1.5deg);
  }
  70% {
    transform: translateX(15%) translateY(2%) rotate(3.5deg);
  }
  85% {
    transform: translateX(4%) translateY(0%) rotate(0.5deg);
  }
  100% {
    transform: translateX(-14%) translateY(3.5%) rotate(-3.5deg);
  }
}

@media (max-width: 640px) {
  .brand-logo-animated {
    width: 44px;
    height: 44px;
  }
}

/* Fallback legacy preloader face */
.preloader-face {
  display: none;
}

.preloader-title {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.2vw, 1.95rem);
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  line-height: 1.25;
}

.preloader-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 800;
  color: #FFC700;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  line-height: 1.3;
  word-break: break-all;
}

#preloader-o-stream {
  color: #FFE066;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 4px;
}

/* Barra de progreso de exactamente 5 segundos */
.preloader-progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
  margin-bottom: 12px;
}

.preloader-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #FFC700;
  border-radius: 9999px;
  animation: fillFiveSeconds 5s linear forwards;
}

@keyframes fillFiveSeconds {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

.preloader-tagline {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: #94A3B8;
  letter-spacing: 0.02em;
}