/**
 * Rocket Section Navigator – Frontend Styles v1.4.0
 * El cohete vuela libremente hacia los títulos.
 *
 * @package RocketNavigator
 * @version 1.4.0
 */

/* ─── Variables CSS ────────────────────────────────────────────────────────────── */
:root {
  --rn-size           : 220px   !important; /* Cohete aún más grande */
  --rn-z              : 9999    !important;
  --rn-speed          : 1200ms  !important;
  --rn-offset-x       : 16px    !important;
  --rn-glow           : rgba(180, 50, 255, 0.65) !important; /* Glow morado */
  --rn-ease           : cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  --rn-dot-color      : rgba(255, 255, 255, 0.28) !important;
  --rn-dot-active     : #ffffff !important;
  --rn-dot-size       : 7px     !important;
  --rn-dot-gap        : 8px     !important;
}

/* ─── Wrapper ──────────────────────────────────────────────────────────────────── */
#rocket-navigator-wrapper,
.rn-wrapper {
  position       : fixed          !important;
  top            : 0              !important;
  bottom         : 0              !important;
  display        : flex           !important;
  flex-direction : column         !important;
  align-items    : center         !important;
  justify-content: center         !important;
  pointer-events : none           !important;
  z-index        : var(--rn-z)    !important;
  gap            : 10px           !important;
}

/* Panel de dots anclado al lateral */
.rn-wrapper.rn-pos-right {
  right : var(--rn-offset-x) !important;
  left  : auto               !important;
}
.rn-wrapper.rn-pos-left {
  left  : var(--rn-offset-x) !important;
  right : auto               !important;
}

/* ─── Canvas trail ─────────────────────────────────────────────────────────────── */
.rn-trail-canvas {
  position       : fixed      !important;
  top            : 0          !important;
  left           : 0          !important;
  width          : 100vw      !important;
  height         : 100vh      !important;
  pointer-events : none       !important;
  z-index        : calc(var(--rn-z) - 1) !important;
  opacity        : 0.9        !important;
}

/* ─── Dots panel ───────────────────────────────────────────────────────────────── */
.rn-dots {
  display        : flex           !important;
  flex-direction : column         !important;
  align-items    : center         !important;
  gap            : var(--rn-dot-gap) !important;
  pointer-events : auto           !important;
  padding        : 11px 8px       !important;
  background     : rgba(0, 0, 0, 0.50) !important;
  backdrop-filter: blur(16px)     !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-radius  : 22px           !important;
  border         : 1px solid rgba(255, 255, 255, 0.09) !important;
  box-shadow     : 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  max-height     : 60vh           !important;
  overflow-y     : auto           !important;
  scrollbar-width: none           !important;
}
.rn-dots::-webkit-scrollbar { display: none !important; }

.rn-dot {
  width          : var(--rn-dot-size)   !important;
  height         : var(--rn-dot-size)   !important;
  border-radius  : 50%                  !important;
  background     : var(--rn-dot-color)  !important;
  opacity        : 1                    !important;
  cursor         : pointer              !important;
  transition     : all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border         : none                 !important;
  padding        : 0                    !important;
  position       : relative             !important;
  flex-shrink    : 0                    !important;
  outline        : none                 !important;
}
.rn-dot:hover {
  background : rgba(255, 255, 255, 0.7) !important;
  transform  : scale(1.5)              !important;
}
.rn-dot.is-active {
  width        : var(--rn-dot-size)        !important;
  height       : calc(var(--rn-dot-size) * 3.2) !important;
  border-radius: 10px                      !important;
  background   : #ffffff                   !important;
  transform    : none                      !important;
  box-shadow   : 0 0 8px rgba(255,255,255,0.6), 0 0 18px rgba(255,255,255,0.2) !important;
  animation    : rn-dot-pulse 2s ease-out infinite !important;
}

.rn-dot::before {
  content        : attr(data-label)         !important;
  position       : absolute                 !important;
  white-space    : nowrap                   !important;
  background     : rgba(5, 5, 15, 0.9)     !important;
  color          : #fff                     !important;
  font-size      : 10px                     !important;
  font-weight    : 500                      !important;
  letter-spacing : 0.3px                   !important;
  font-family    : -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  padding        : 3px 8px                 !important;
  border-radius  : 5px                     !important;
  pointer-events : none                     !important;
  opacity        : 0                        !important;
  transition     : opacity 0.18s ease       !important;
  top            : 50%                      !important;
  transform      : translateY(-50%)         !important;
  backdrop-filter: blur(8px)               !important;
}
.rn-wrapper.rn-pos-right .rn-dot::before { right: calc(100% + 10px) !important; }
.rn-wrapper.rn-pos-left  .rn-dot::before { left:  calc(100% + 10px) !important; }
.rn-dot:hover::before { opacity: 1 !important; }

/* ─── Cohete Libre ─────────────────────────────────────────────────────────────── */
.rn-rocket {
  position       : fixed                    !important;
  width          : 300px                    !important; /* TAMAÑO FORZADO */
  height         : 300px                    !important; /* TAMAÑO FORZADO */
  pointer-events : auto                     !important;
  cursor         : pointer                  !important;
  z-index        : calc(var(--rn-z) + 1)   !important;
  transform-origin: center center           !important;
  /* Transición suave para top y left, permitiendo vuelo en 2D */
  transition     : top var(--rn-speed) var(--rn-ease),
                   left var(--rn-speed) var(--rn-ease),
                   filter 0.3s ease         !important;
  filter         : drop-shadow(0 4px 12px rgba(0,0,0,0.5)) !important;
  will-change    : top, left, transform, filter !important;
}

/* ─── FUEGO MORADO PERMANENTE ──────────────────────────────────────────────────── */
.rn-rocket::after {
  content        : '' !important;
  position       : absolute !important;
  top            : 65% !important; /* Inicia justo en el escape de la nave */
  left           : 50% !important;
  width          : 12% !important; /* Más angosta para estilizar el pico */
  height         : 45% !important; /* Más larga hacia abajo */
  background     : linear-gradient(180deg, #ffffff 0%, #e066ff 15%, #8a2be2 60%, transparent 100%) !important;
  border-radius  : 50% 50% 50% 50% / 10% 10% 90% 90% !important; /* Forma de pico hacia abajo */
  filter         : blur(1.5px) !important;
  box-shadow     : 0 0 15px 5px rgba(138, 43, 226, 0.7), 0 0 30px 10px rgba(224, 102, 255, 0.4) !important;
  animation      : rn-purple-fire 0.08s ease-in-out infinite alternate !important;
  z-index        : -1 !important;
  pointer-events : none !important;
  transform-origin: top center !important;
  transform      : translateX(-50%) !important;
}

@keyframes rn-purple-fire {
  0%   { transform: translateX(-50%) scaleY(0.9) scaleX(0.95); opacity: 0.85; }
  100% { transform: translateX(-50%) scaleY(1.1) scaleX(1.05); opacity: 1; }
}

/* Al volar, el fuego morado se hace más intenso y largo */
.rn-rocket.is-flying::after {
  height         : 70% !important; /* Aún más larga al volar */
  filter         : blur(2.5px) !important;
  box-shadow     : 0 0 25px 10px rgba(138, 43, 226, 0.9), 0 0 50px 15px rgba(224, 102, 255, 0.6) !important;
  animation      : rn-purple-fire-fly 0.06s ease-in-out infinite alternate !important;
}

@keyframes rn-purple-fire-fly {
  0%   { transform: translateX(-50%) scaleY(0.95) scaleX(0.9); opacity: 0.9; }
  100% { transform: translateX(-50%) scaleY(1.3) scaleX(1.1); opacity: 1; }
}

/* El cohete ya NO hereda su posición de la barra lateral, es libre */
.rn-wrapper.rn-pos-right .rn-rocket,
.rn-wrapper.rn-pos-left .rn-rocket {
  right: auto !important;
}

.rn-rocket:hover {
  filter : drop-shadow(0 0 20px var(--rn-glow)) brightness(1.1) !important;
  animation: rn-rocket-hover 3.5s ease-in-out infinite,
             rn-glow-pulse 1.5s ease-in-out infinite !important;
}

/* Imagen del cohete */
.rn-rocket__img {
  width             : 100%             !important;
  height            : 100%             !important;
  display           : block            !important;
  object-fit        : contain          !important;
  object-position   : center           !important;
  user-select       : none             !important;
  -webkit-user-drag : none            !important;
  transform         : scale(1.6)       !important; /* ESCALADO PARA ELIMINAR PADDING TRANSPARENTE DEL PNG */
  transition        : transform 0.3s ease !important;
}

.rn-rocket.is-flying .rn-rocket__img {
  animation: rn-rocket-fly 0.25s ease-in-out infinite alternate !important;
}

/* Rotaciones dinámicas basadas en la dirección */
/* El JS añade clases según si va arriba/abajo/izquierda/derecha */
.rn-rocket.rn-going-up   { transform: rotate(-8deg) !important; }
.rn-rocket.rn-going-down { transform: rotate(8deg)  !important; }
.rn-rocket.rn-going-left { transform: rotate(-15deg) !important; }
.rn-rocket.rn-going-right{ transform: rotate(15deg) !important; }

/* Efectos de estado */
.rn-rocket.rn-landing {
  animation: rn-landing-bounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

.rn-rocket.rn-boost {
  animation: rn-boost-burst 0.35s ease-out !important;
}



/* ─── Indicador de título ──────────────────────────────────────────────────────── */
.rn-title-highlight {
  position: relative !important;
  z-index: 10 !important;
}
.rn-title-highlight::before {
  content: '' !important;
  position: absolute !important;
  inset: -8px -12px !important;
  border-radius: 8px !important;
  background: rgba(255, 107, 53, 0.1) !important;
  border: 1px solid rgba(255, 107, 53, 0.4) !important;
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.2) !important;
  pointer-events: none !important;
  z-index: -1 !important;
  animation: rn-highlight-fade 1.5s ease-out forwards !important;
}

@keyframes rn-highlight-fade {
  0%   { opacity: 0; transform: scale(0.95); }
  20%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* ─── Keyframes ────────────────────────────────────────────────────────────────── */
@keyframes rn-rocket-hover {
  0%   { transform: translateY(0px)   rotate(0deg);   }
  30%  { transform: translateY(-8px)  rotate(-2deg);  }
  60%  { transform: translateY(2px)   rotate(1.5deg); }
  100% { transform: translateY(0px)   rotate(0deg);   }
}

@keyframes rn-rocket-fly {
  0%   { transform: translate(-3px, -2px) rotate(-1.5deg) scale(1.6); }
  100% { transform: translate(3px, 2px)  rotate(1.5deg)  scale(1.6); }
}

@keyframes rn-landing-bounce {
  0%   { transform: scale(1.15) translateY(-10px); }
  40%  { transform: scale(0.9) translateY(4px);  }
  70%  { transform: scale(1.05) translateY(-3px); }
  100% { transform: scale(1)    translateY(0);    }
}

@keyframes rn-boost-burst {
  0%   { transform: scale(1);    filter: drop-shadow(0 0 0px var(--rn-glow));  }
  40%  { transform: scale(1.3);  filter: drop-shadow(0 0 40px var(--rn-glow)); }
  100% { transform: scale(1);    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }
}

@keyframes rn-glow-pulse {
  0%   { filter: drop-shadow(0 0 14px var(--rn-glow)) brightness(1.08); }
  50%  { filter: drop-shadow(0 0 30px var(--rn-glow)) drop-shadow(0 0 50px rgba(255,100,30,0.2)) brightness(1.15); }
  100% { filter: drop-shadow(0 0 14px var(--rn-glow)) brightness(1.08); }
}

@keyframes rn-entrance {
  0%   { opacity: 0; transform: translateX(32px) scale(0.8); }
  100% { opacity: 1; transform: translateX(0) scale(1);    }
}

@keyframes rn-dot-pulse {
  0%   { box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 18px rgba(255,255,255,0.2); }
  50%  { box-shadow: 0 0 16px rgba(255,255,255,0.9), 0 0 32px rgba(255,255,255,0.3); }
  100% { box-shadow: 0 0 8px rgba(255,255,255,0.6), 0 0 18px rgba(255,255,255,0.2); }
}

/* ─── Oculto ───────────────────────────────────────────────────────────────────── */
#rocket-navigator-wrapper.rn-hidden { display: none !important; }

/* ─── Responsive ───────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --rn-offset-x: 5px !important;
  }
  
  /* Hacemos la nave mucho más pequeña en móviles */
  .rn-rocket {
    width: 100px !important;
    height: 100px !important;
  }
  
  /* Hacemos el panel de navegación un poco más sutil */
  .rn-dots {
    transform: scale(0.85) !important;
    transform-origin: right center !important;
  }

  /* Forzamos que siempre se vea en móvil, ignorando la configuración previa del admin */
  #rocket-navigator-wrapper {
    display: flex !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rn-rocket__img, .rn-rocket, .rn-dot {
    animation  : none !important;
    transition : none !important;
  }
}