/* ======================================================
   FOUNDAITION · GLITCH FX LAYER
   Capa de efectos: RGB split, decode, tears, noise.
   Todo gateado tras prefers-reduced-motion.
   ====================================================== */

@media (prefers-reduced-motion: no-preference) {

/* ── NOISE OVERLAY (estática analógica global) ───────── */
.glx-noise {
  position: fixed;
  inset: -100%;
  z-index: 9000;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: glx-noise-shift .45s steps(4) infinite;
}
@keyframes glx-noise-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1.5%); }
  50%  { transform: translate(1.5%, -2%); }
  75%  { transform: translate(-1%, -1%); }
  100% { transform: translate(2%, 2%); }
}

/* ── GLOBAL TEAR FLASH (desgarro RGB de pantalla) ────── */
.glx-flash {
  position: fixed;
  inset: 0;
  z-index: 9001;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    linear-gradient(180deg,
      transparent 0%, transparent 18%,
      rgba(244, 185, 66, .25) 18.5%, transparent 19.5%,
      transparent 38%,
      rgba(37, 205, 251, .3) 38.5%, transparent 40%,
      transparent 57%,
      rgba(244, 185, 66, .2) 57.5%, transparent 58.5%,
      transparent 76%,
      rgba(37, 205, 251, .22) 76.5%, transparent 78%,
      transparent 100%);
}
.glx-flash.on { animation: glx-flash-anim .18s steps(3) 1; }
@keyframes glx-flash-anim {
  0%   { opacity: 1; transform: translateY(0) skewX(0); }
  33%  { opacity: .7; transform: translateY(-1.5vh) skewX(-1.5deg); }
  66%  { opacity: 1; transform: translateY(1vh) skewX(1deg); }
  100% { opacity: 0; transform: translateY(0); }
}

/* ── HERO IMG: sacudida cromática durante el burst ───── */
.glx-burst .hero-img {
  animation: glx-img-jolt .35s steps(5) 1;
}
@keyframes glx-img-jolt {
  0%   { transform: scale(1.05) translateX(0); filter: saturate(1.1); }
  20%  { transform: scale(1.06) translateX(-10px); filter: saturate(2) hue-rotate(-18deg) contrast(1.2); }
  40%  { transform: scale(1.05) translateX(7px); filter: saturate(1.4) hue-rotate(12deg); }
  60%  { transform: scale(1.07) translateX(-4px) translateY(3px); filter: saturate(2.2) contrast(1.3); }
  80%  { transform: scale(1.05) translateX(3px); filter: saturate(1.2); }
  100% { transform: scale(1.05) translateX(0); filter: saturate(1.1); }
}

/* ── WORDMARK: capas RGB clonadas por JS ─────────────── */
.glx-host { position: relative; }
.glx-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.glx-layer-r, .glx-layer-r * { color: #F4B942 !important; text-shadow: none !important; }
.glx-layer-c, .glx-layer-c * { color: #25CDFB !important; text-shadow: none !important; }

.glx-burst .glx-layer-r { animation: glx-slice-r .38s steps(2, jump-none) 1; }
.glx-burst .glx-layer-c { animation: glx-slice-c .38s steps(2, jump-none) 1; }
.glx-burst.glx-host > :not(.glx-layer) { animation: glx-base-jitter .38s steps(4) 1; }

@keyframes glx-slice-r {
  0%   { opacity: .85; transform: translate(-7px, -3px); clip-path: inset(12% 0 74% 0); }
  25%  { opacity: .85; transform: translate(6px, 2px);  clip-path: inset(58% 0 18% 0); }
  50%  { opacity: .85; transform: translate(-9px, 1px); clip-path: inset(30% 0 52% 0); }
  75%  { opacity: .85; transform: translate(5px, -2px); clip-path: inset(80% 0 4% 0); }
  100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes glx-slice-c {
  0%   { opacity: .85; transform: translate(8px, 3px);   clip-path: inset(64% 0 22% 0); }
  25%  { opacity: .85; transform: translate(-6px, -2px); clip-path: inset(8% 0 78% 0); }
  50%  { opacity: .85; transform: translate(7px, -1px);  clip-path: inset(44% 0 38% 0); }
  75%  { opacity: .85; transform: translate(-8px, 2px);  clip-path: inset(22% 0 64% 0); }
  100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes glx-base-jitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3px, 1px) skewX(-.6deg); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, 1px) skewX(.4deg); }
  100% { transform: translate(0, 0); }
}

/* ── DECODE (caracteres en proceso de descifrado) ────── */
.glx-decoding { color: rgba(37, 205, 251, .75) !important; }

/* ── SECTION TITLES: glitch-in al entrar en viewport ─── */
.glx-in {
  animation: glx-title-in .5s steps(6, jump-none) 1;
}
@keyframes glx-title-in {
  0% {
    opacity: .2;
    transform: translateX(-12px);
    clip-path: inset(40% 0 40% 0);
    text-shadow: -6px 0 0 rgba(244, 185, 66, .8), 6px 0 0 rgba(37, 205, 251, .8);
  }
  30% {
    opacity: 1;
    transform: translateX(8px);
    clip-path: inset(10% 0 55% 0);
    text-shadow: 5px 0 0 rgba(244, 185, 66, .7), -5px 0 0 rgba(37, 205, 251, .7);
  }
  55% {
    transform: translateX(-5px);
    clip-path: inset(60% 0 5% 0);
    text-shadow: -3px 0 0 rgba(244, 185, 66, .55), 3px 0 0 rgba(37, 205, 251, .55);
  }
  80% {
    transform: translateX(2px);
    clip-path: inset(0 0 0 0);
    text-shadow: 2px 0 0 rgba(244, 185, 66, .3), -2px 0 0 rgba(37, 205, 251, .3);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    text-shadow: none;
  }
}

/* ── COUNTDOWN: flicker en cada tick ─────────────────── */
.glx-tick { animation: glx-tick-anim .22s steps(3) 1; }
@keyframes glx-tick-anim {
  0%   { transform: translateY(-2px); opacity: .4; text-shadow: -3px 0 0 rgba(244,185,66,.8), 3px 0 0 rgba(37,205,251,.8); }
  50%  { transform: translateY(1px);  opacity: 1;  text-shadow: 2px 0 0 rgba(244,185,66,.5), -2px 0 0 rgba(37,205,251,.5); }
  100% { transform: translateY(0);    opacity: 1;  text-shadow: none; }
}

/* ── HOVER FX: tracks, nav logo, botones hero ────────── */
.track-card:hover .tc-title {
  animation: glx-hover-jitter .3s steps(4) 1;
}
.nav-logo:hover {
  animation: glx-hover-jitter .3s steps(4) 1;
  text-shadow: -2px 0 0 rgba(244,185,66,.7), 2px 0 0 rgba(37,205,251,.7);
}
.btn-hero-primary:hover, .mf-cta:hover {
  animation: glx-hover-jitter .25s steps(3) 1;
}
@keyframes glx-hover-jitter {
  0%   { transform: translate(0); }
  25%  { transform: translate(-2px, 1px) skewX(-2deg); }
  50%  { transform: translate(2px, -1px) skewX(1.5deg); }
  75%  { transform: translate(-1px, 0); }
  100% { transform: translate(0); }
}

/* ── TICKER: inversión de vídeo ocasional ────────────── */
.ticker-wrap, .ticker { position: relative; }
.glx-invert { animation: glx-invert-anim .15s steps(2) 1; }
@keyframes glx-invert-anim {
  0%   { filter: invert(1) hue-rotate(180deg); }
  100% { filter: none; }
}

} /* end prefers-reduced-motion */