/* ════════════════════════════════════════════════════════════════
   TX 3D SYSTEM — Turisteando Xtar
   Depth · Tilt · Parallax · Scroll reveal
   Filosofía: editorial premium con profundidad geométrica
   ════════════════════════════════════════════════════════════════ */

/* ─── Variables del sistema 3D ─────────────────────────────────── */
:root {
  --tx3d-perspective: 1200px;
  --tx3d-card-rotate-max: 10deg;
  --tx3d-card-lift: 24px;
  --tx3d-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --tx3d-dur: 0.6s;
}

/* ══════════════════════════════════════════════════════════════════
   HERO — CIUDAD FLOTANTE canvas layer
   ══════════════════════════════════════════════════════════════════ */
#tx-ciudad-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;       /* sobre hero-bg, bajo hero-overlay */
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.8s ease;
}
#tx-ciudad-canvas.ready { opacity: 1; }

/* (Los map-pins flotantes y sus capas de parallax fueron eliminados
   en jul 2026: se encimaban sobre el titular del hero.) */

/* ══════════════════════════════════════════════════════════════════
   TOUR CARDS — Lens Tilt (CSS 3D + JS tracking)
   ══════════════════════════════════════════════════════════════════ */
.tour-card {
  transform-style: preserve-3d;
  perspective: var(--tx3d-perspective);
}
.tx-card-tilt {
  transition: transform var(--tx3d-dur) var(--tx3d-ease),
              box-shadow var(--tx3d-dur) var(--tx3d-ease);
  transform-style: preserve-3d;
  will-change: transform;
}
/* Shine overlay — sigue al mouse */
.tx-card-shine {
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255,255,255,.15) 0%,
    rgba(255,255,255,.03) 40%,
    transparent 70%
  );
}
.tour-card:hover .tx-card-shine,
.guia-card:hover .tx-card-shine { opacity: 1; }

/* Tour card floating emoji en 3D */
.tour-card-emoji {
  transition: transform 0.5s var(--tx3d-ease);
  transform: translateZ(0);
  will-change: transform;
}
.tour-card:hover .tour-card-emoji {
  transform: translateZ(30px) scale(1.1);
}

/* ══════════════════════════════════════════════════════════════════
   SCROLL 3D REVEAL — Secciones entran con profundidad
   ══════════════════════════════════════════════════════════════════ */
.tx-reveal-3d {
  opacity: 0;
  transform: perspective(var(--tx3d-perspective)) rotateX(10deg) translateY(48px) scale(0.97);
  transition:
    opacity 0.8s var(--tx3d-ease),
    transform 0.9s var(--tx3d-ease);
  will-change: transform, opacity;
}
.tx-reveal-3d.revealed {
  opacity: 1;
  transform: perspective(var(--tx3d-perspective)) rotateX(0deg) translateY(0px) scale(1);
}
/* Variante: entra desde la izquierda */
.tx-reveal-3d-left {
  opacity: 0;
  transform: perspective(var(--tx3d-perspective)) rotateY(15deg) translateX(-48px);
  transition:
    opacity 0.8s var(--tx3d-ease),
    transform 0.9s var(--tx3d-ease);
}
.tx-reveal-3d-left.revealed {
  opacity: 1;
  transform: perspective(var(--tx3d-perspective)) rotateY(0deg) translateX(0px);
}
/* Stagger de hijos */
.tx-reveal-3d:nth-child(1) { transition-delay: 0s; }
.tx-reveal-3d:nth-child(2) { transition-delay: 0.1s; }
.tx-reveal-3d:nth-child(3) { transition-delay: 0.2s; }
.tx-reveal-3d:nth-child(4) { transition-delay: 0.3s; }
.tx-reveal-3d:nth-child(5) { transition-delay: 0.4s; }
.tx-reveal-3d:nth-child(6) { transition-delay: 0.5s; }

/* ══════════════════════════════════════════════════════════════════
   STATS BAR — 3D flip de números al entrar a viewport
   ══════════════════════════════════════════════════════════════════ */
.hero-stat-val {
  display: inline-block;
  transition: transform 0.6s var(--tx3d-ease), opacity 0.6s;
}
.tx-stat-counting {
  animation: statFlip 0.5s var(--tx3d-ease) forwards;
}
@keyframes statFlip {
  0%   { transform: perspective(200px) rotateX(-90deg); opacity: 0; }
  100% { transform: perspective(200px) rotateX(0deg);   opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   FLOATING GEOMETRY — Decoración geométrica de fondo en secciones
   ══════════════════════════════════════════════════════════════════ */
.tx-geo-bg {
  position: relative;
  overflow: hidden;
}
.tx-geo-bg::before,
.tx-geo-bg::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: geoFloat 12s ease-in-out infinite;
}
.tx-geo-bg::before {
  width: 300px; height: 300px;
  top: -80px; right: -60px;
  background: radial-gradient(circle, rgba(200,150,10,.06), transparent 70%);
  animation-delay: 0s;
}
.tx-geo-bg::after {
  width: 200px; height: 200px;
  bottom: -40px; left: -30px;
  background: radial-gradient(circle, rgba(20,17,225,.05), transparent 70%);
  animation-delay: 4s;
}
@keyframes geoFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(12px, -16px) scale(1.06); }
  66%       { transform: translate(-8px, 10px) scale(0.96); }
}

/* ══════════════════════════════════════════════════════════════════
   DIARIO — 3D Editorial article cards
   ══════════════════════════════════════════════════════════════════ */
.dp-article {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--tx3d-ease), box-shadow 0.5s var(--tx3d-ease);
}
.dp-article:hover {
  transform: perspective(900px) rotateX(-1.5deg) translateY(-4px);
  box-shadow: 0 28px 60px -12px rgba(0,0,0,.16), 0 0 0 1px rgba(186,52,2,.06);
}

/* ══════════════════════════════════════════════════════════════════
   3D FLOATING ORBS — ambient depth in hero
   ══════════════════════════════════════════════════════════════════ */
.tx-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  animation: orbDrift var(--orb-dur, 14s) ease-in-out infinite;
  animation-delay: var(--orb-delay, 0s);
}
@keyframes orbDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25%       { transform: translate3d(var(--orb-tx, 20px), var(--orb-ty, -14px), 30px) scale(1.04); }
  75%       { transform: translate3d(calc(var(--orb-tx, 20px) * -0.5), var(--orb-ty, 14px), -20px) scale(0.97); }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE: reducir 3D effects para preservar performance
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .tx-reveal-3d,
  .tx-reveal-3d-left {
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .tx-reveal-3d.revealed,
  .tx-reveal-3d-left.revealed {
    transform: translateY(0);
  }
  .tx-card-tilt {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .tour-card:hover .tour-card-emoji {
    transform: none;
  }
  #tx-ciudad-canvas { display: none; }
  .tx-geo-bg::before, .tx-geo-bg::after { display: none; }
}