/* ============================================================================
   fx-premium.css — Efectos premium adicionales (Fase 4+)
   - Page transitions
   - Cursor trail
   - Marquee ticker
   - Glitch effect
   - Badge 3D flotante
   - Split text
   - Scrollbar dorado
   - Chart tooltip
   - Radar chart animado
   Todos respetan modo LITE y prefers-reduced-motion.
   ============================================================================ */

/* ==========================================================================
   SCROLLBAR custom (todos los modos)
   ========================================================================== */
html {
  scrollbar-color: #E8C86A #0B1E3F;
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--c-bg);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-gold), var(--c-gold-dark));
  border-radius: 10px;
  border: 2px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--c-gold-2), var(--c-gold));
}

/* ==========================================================================
   PAGE TRANSITIONS (fade entre páginas)
   ========================================================================== */
html[data-mode="full"] body {
  opacity: 1;
  transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[data-mode="full"] body.page-leave {
  opacity: 0;
  transform: translateY(-8px);
}
html[data-mode="full"] body.page-enter {
  animation: page-enter 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
@keyframes page-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   MARQUEE TICKER (primeros puestos scrolling infinito)
   ========================================================================== */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(232, 200, 106, 0.08) 20%,
    rgba(232, 200, 106, 0.12) 50%,
    rgba(232, 200, 106, 0.08) 80%,
    transparent 100%);
  padding: var(--s-4) 0;
  border-top: 1px solid rgba(232, 200, 106, 0.2);
  border-bottom: 1px solid rgba(232, 200, 106, 0.2);
  position: relative;
  --marquee-duration: 50s;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--c-bg), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--c-bg), transparent);
}
.marquee__track {
  display: inline-flex;
  gap: var(--s-7);
  padding-left: var(--s-7);
}
html[data-mode="full"] .marquee__track {
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}
html[data-mode="full"] .marquee:hover .marquee__track {
  animation-play-state: paused;
}
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--c-gold);
  font-family: var(--f-title);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.marquee__item::before {
  content: "◆";
  color: rgba(232, 200, 106, 0.4);
  font-size: 10px;
}
.marquee__item--gold {
  color: var(--c-gold);
}
.marquee__item--white {
  color: var(--c-white);
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
html[data-mode="lite"] .marquee__track {
  overflow-x: auto;
  white-space: nowrap;
}
html[data-mode="lite"] .marquee::before,
html[data-mode="lite"] .marquee::after {
  display: none;
}

/* ==========================================================================
   GLITCH effect (badge hero ocasional)
   ========================================================================== */
.glitch {
  position: relative;
  display: inline-block;
}
html[data-mode="full"] .glitch.is-glitching::before,
html[data-mode="full"] .glitch.is-glitching::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
html[data-mode="full"] .glitch.is-glitching::before {
  animation: glitch-red 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  color: #ff4757;
  text-shadow: 2px 0 #ff4757;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}
html[data-mode="full"] .glitch.is-glitching::after {
  animation: glitch-blue 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  color: #4C9BE6;
  text-shadow: -2px 0 #4C9BE6;
  clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}
@keyframes glitch-red {
  0%, 100% { transform: translate(0); opacity: 0.8; }
  20% { transform: translate(-4px, 1px); }
  40% { transform: translate(-2px, -1px); }
  60% { transform: translate(1px, 2px); }
  80% { transform: translate(3px, 0); }
}
@keyframes glitch-blue {
  0%, 100% { transform: translate(0); opacity: 0.8; }
  20% { transform: translate(4px, -1px); }
  40% { transform: translate(2px, 1px); }
  60% { transform: translate(-1px, -2px); }
  80% { transform: translate(-3px, 0); }
}

/* ==========================================================================
   BADGE 3D (hero badge flotante)
   ========================================================================== */
html[data-mode="full"] .badge-3d {
  display: inline-block;
  transform-style: preserve-3d;
  animation: badge-float 5s ease-in-out infinite;
  will-change: transform;
}
@keyframes badge-float {
  0%, 100% { transform: perspective(600px) translateY(0) rotateX(6deg) rotateY(-2deg); }
  50% { transform: perspective(600px) translateY(-6px) rotateX(-4deg) rotateY(3deg); }
}
html[data-mode="full"] .badge-3d:hover {
  animation: badge-spin 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes badge-spin {
  0% { transform: perspective(600px) rotateY(0deg); }
  100% { transform: perspective(600px) rotateY(360deg); }
}

/* ==========================================================================
   SPLIT TEXT (palabras animadas)
   ========================================================================== */
html[data-mode="full"] [data-split] {
  display: inline-block;
}
html[data-mode="full"] .split-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px) rotate(4deg);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform, opacity;
}
html[data-mode="full"] .split-word.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(0);
}

/* ==========================================================================
   CURSOR TRAIL (canvas overlay — estilos mínimos porque es JS)
   ========================================================================== */
.cursor-trail-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;
  mix-blend-mode: screen;
}
@media (hover: none), (max-width: 1023px) {
  .cursor-trail-canvas { display: none !important; }
}
html[data-mode="lite"] .cursor-trail-canvas { display: none !important; }

/* ==========================================================================
   CHART tooltip (usado en progreso.html y reporte.html)
   ========================================================================== */
.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(11, 30, 63, 0.96);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-gold);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-white);
  box-shadow: var(--sh-2);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -110%);
  transition: opacity 0.2s ease;
  z-index: 10;
}
.chart-tooltip.is-visible {
  opacity: 1;
}
.chart-tooltip__value {
  color: var(--c-gold);
  font-weight: 800;
  font-size: var(--fs-sm);
  display: block;
}
.chart-tooltip__label {
  color: var(--c-gray-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}

/* ==========================================================================
   RADAR CHART (reporte.html)
   ========================================================================== */
.radar-chart {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  display: block;
}
.radar-grid {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 1;
}
.radar-axis {
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}
.radar-area {
  fill: rgba(232, 200, 106, 0.25);
  stroke: #E8C86A;
  stroke-width: 2;
  stroke-linejoin: round;
  transform-origin: center;
}
html[data-mode="full"] .radar-area {
  animation: radar-draw 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  transform: scale(0);
  opacity: 0;
}
@keyframes radar-draw {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.radar-point {
  fill: var(--c-gold);
  stroke: var(--c-bg);
  stroke-width: 2;
  cursor: pointer;
  transition: r 0.2s ease;
}
.radar-point:hover {
  r: 7;
}
.radar-label {
  fill: var(--c-gray-1);
  font-size: 11px;
  font-family: var(--f-body);
  font-weight: 600;
  text-anchor: middle;
}
.radar-label-num {
  fill: var(--c-gold);
  font-size: 14px;
  font-family: var(--f-title);
  font-weight: 800;
  text-anchor: middle;
}

/* ==========================================================================
   LINE CHART interactivo (progreso.html)
   ========================================================================== */
.line-chart {
  cursor: crosshair;
}
.line-chart-hover-line {
  stroke: var(--c-gold);
  stroke-width: 1;
  stroke-dasharray: 3, 3;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.line-chart-hover-line.is-visible {
  opacity: 0.8;
}
.line-chart-hover-point {
  fill: var(--c-gold);
  stroke: var(--c-white);
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.line-chart-hover-point.is-visible {
  opacity: 1;
}

/* ==========================================================================
   TEXT gradient dinámico en titulares grandes
   ========================================================================== */
html[data-mode="full"] .text-gradient-gold {
  background: linear-gradient(120deg, #E8C86A 0%, #f4d882 40%, #E8C86A 60%, #b88f2f 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease-in-out infinite;
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ==========================================================================
   GLOW perimetral en secciones destacadas
   ========================================================================== */
html[data-mode="full"] .glow-border {
  position: relative;
}
html[data-mode="full"] .glow-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, rgba(232, 200, 106, 0.5) 50%, transparent 70%);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: glow-rotate 3s linear infinite;
  pointer-events: none;
}
@keyframes glow-rotate {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}

/* ==========================================================================
   Reduce motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .marquee__track,
  .badge-3d,
  .text-gradient-gold,
  .glow-border::before,
  .radar-area {
    animation: none !important;
  }
  .glitch.is-glitching::before,
  .glitch.is-glitching::after {
    display: none !important;
  }
}