/* ============================================================
   glitch-motion.css — Zero Glitch v2 motion layer
   Copy to: public/assets/css/glitch-motion.css
   ============================================================ */

/* ---------- keyframes ---------- */
@keyframes gm-titleglitch {
  0% { transform: translate(0,0) skewX(0); filter: none; }
  20% { transform: translate(-6px,2px) skewX(-8deg); filter: drop-shadow(4px 0 #ff00ff) drop-shadow(-4px 0 #00f3ff); }
  40% { transform: translate(5px,-2px) skewX(6deg); filter: drop-shadow(-4px 0 #ff00ff) drop-shadow(4px 0 #00f3ff); }
  60% { transform: translate(-3px,1px) skewX(-3deg); filter: drop-shadow(2px 0 #ff00ff) drop-shadow(-2px 0 #00f3ff); }
  100% { transform: translate(0,0) skewX(0); filter: none; }
}
@keyframes gm-cardglitch {
  0% { transform: translate(0,0) skewX(0); filter: none; clip-path: none; }
  15% { transform: translate(-5px,2px) skewX(-6deg); filter: drop-shadow(5px 0 rgba(255,0,255,.8)) drop-shadow(-5px 0 rgba(0,243,255,.8)); clip-path: inset(8% 0 12% 0); }
  30% { transform: translate(4px,-2px) skewX(5deg); filter: drop-shadow(-5px 0 rgba(255,0,255,.8)) drop-shadow(5px 0 rgba(0,243,255,.8)); clip-path: inset(45% 0 22% 0); }
  45% { transform: translate(-3px,1px) skewX(-3deg); filter: drop-shadow(3px 0 rgba(255,0,255,.7)) drop-shadow(-3px 0 rgba(0,243,255,.7)); clip-path: inset(0 0 62% 0); }
  60% { transform: translate(2px,-1px) skewX(2deg); filter: drop-shadow(-2px 0 rgba(255,0,255,.6)) drop-shadow(2px 0 rgba(0,243,255,.6)); clip-path: inset(70% 0 4% 0); }
  100% { transform: translate(0,0) skewX(0); filter: none; clip-path: none; }
}
@keyframes gm-static {
  0% { opacity: .95; background-position: 0 0, 0 0; transform: translateY(0); }
  20% { opacity: .85; background-position: 0 -6px, 3px 0; transform: translateY(-4px); }
  40% { opacity: .95; background-position: 0 8px, -4px 0; transform: translateY(3px); }
  60% { opacity: .7; background-position: 0 -10px, 5px 0; transform: translateY(-2px); }
  80% { opacity: .9; background-position: 0 5px, -2px 0; transform: translateY(1px); }
  100% { opacity: 0; background-position: 0 0, 0 0; transform: translateY(0); }
}
@keyframes gm-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes gm-ring1 { from { transform: rotateX(68deg) rotateZ(0); } to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes gm-ring2 { from { transform: rotateX(74deg) rotateZ(360deg); } to { transform: rotateX(74deg) rotateZ(0); } }
@keyframes gm-pulse { 0%,100% { opacity: .25; } 50% { opacity: .6; } }
@keyframes gm-tv-tune {
  0% { transform: translate(0, 0) scale(1); filter: brightness(1) contrast(1); }
  12% { transform: translate(-7px, 1px) scale(1.03) skewX(-2deg); filter: brightness(1.35) contrast(1.25) saturate(1.2); }
  28% { transform: translate(6px, -2px) scale(0.98) skewX(1.5deg); filter: brightness(0.65) contrast(1.4); }
  44% { transform: translate(-4px, 0) scale(1.01); filter: brightness(1.2) contrast(1.1); }
  62% { transform: translate(3px, 1px) scale(0.99); filter: brightness(0.85) contrast(1.3); }
  100% { transform: translate(0, 0) scale(1); filter: brightness(1) contrast(1); }
}

/* ---------- boot overlay ---------- */
.gm-boot {
  position: fixed; inset: 0; z-index: 1000; background: #050505;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .5s ease;
}
.gm-boot-inner { width: min(560px, 88vw); }
.gm-boot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.gm-boot-head img { width: 34px; height: 34px; animation: gm-flicker 2s infinite; }
.gm-boot-head span {
  font-family: var(--font-display, "Space Grotesk", sans-serif); font-weight: 700; font-size: 18px; letter-spacing: .14em;
  background: linear-gradient(90deg, #00f3ff, #ff00ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gm-boot pre {
  margin: 0; font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 13px;
  line-height: 1.9; color: #8fe8ee; min-height: 168px; white-space: pre-wrap;
}
.gm-boot-bar { margin-top: 16px; height: 3px; background: rgba(255,255,255,.08); border-radius: 2px; overflow: hidden; }
.gm-boot-bar > div { height: 100%; width: 0; background: linear-gradient(90deg, #00f3ff, #ff00ff); transition: width .18s ease; }

/* ---------- hero orbital rings (injected by JS) ---------- */
#home > .absolute.inset-0.bg-gradient-to-br { z-index: 0; }
.gm-rings { position: absolute; left: 50%; top: 54%; width: min(72vw, 780px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; }
.gm-rings > div:first-child { position: absolute; inset: 0; border: 1px solid rgba(0,243,255,.22); border-radius: 50%; animation: gm-ring1 16s linear infinite; }
.gm-rings > div:last-child { position: absolute; inset: 7%; border: 1px solid rgba(255,0,255,.18); border-radius: 50%; animation: gm-ring2 22s linear infinite; }
.gm-hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 70%, transparent 100%);
}

/* hero title: mouse-driven 3D parallax (JS drives transform) */
#home { perspective: 1200px; perspective-origin: 50% 42%; }
#home .relative.z-10 { transform-style: preserve-3d; }
.gm-hero-title,
[data-hero-title] {
  display: inline-block;
  transform-style: preserve-3d;
  will-change: transform;
  transform-origin: center center;
}

/* ---------- scroll-reveal initial states (JS drives transitions) ---------- */
.gm-reveal { opacity: 0; }
.gm-title-glitching { animation: gm-titleglitch .55s steps(2) .15s; }

/* ---------- 3D perspective containers ---------- */
#albums { perspective: 1600px; overflow: clip; }
#albums [data-albums-parallax] { transform-style: preserve-3d; will-change: transform; transform-origin: center center; }
#albums [data-albums-parallax] .grid > div { transform-style: preserve-3d; will-change: transform; transform-origin: center center; }
#music .featured-tracks-slide { perspective: 1400px; }
#platforms .grid { perspective: 1200px; }

/* ---------- CRT treatment for featured tracks ---------- */
#featured-tracks-carousel [data-track-card] > div:first-child {
  aspect-ratio: 1 / 1 !important;
  border-radius: 10px 10px 0 0;
}
#featured-tracks-carousel [data-track-card] .aspect-square { aspect-ratio: auto !important; height: 100%; }
/* curved-glass vignette + corner highlight + scanlines */
#featured-tracks-carousel [data-track-card] > div:first-child::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.5) 100%),
    radial-gradient(ellipse at 28% 16%, rgba(255,255,255,.09), transparent 55%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 5px);
}
/* analog static overlay (injected by JS, animated on channel change) */
.gm-static {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0, rgba(0,0,0,.35) 1px, rgba(255,255,255,.25) 2px, rgba(0,0,0,.4) 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0, rgba(0,0,0,.12) 2px);
  background-size: 100% 4px, 7px 100%;
}
.gm-static.gm-burst { animation: gm-static .6s steps(6); }
/* green channel readout */
.gm-ch {
  position: absolute; top: 10px; right: 12px; z-index: 7; pointer-events: none;
  font-family: ui-monospace, "JetBrains Mono", monospace; font-size: 13px; font-weight: 700; letter-spacing: .14em;
  color: #7cff9b; text-shadow: 0 0 8px rgba(124,255,155,.8), 0 1px 3px rgba(0,0,0,.8);
}
/* channel change = hard cut, not a slide */
#featured-tracks-carousel.gm-cut .featured-tracks-track { transition: none !important; }
#featured-tracks-carousel .featured-tracks-track {
  transition: transform 0.3s ease-out;
  will-change: transform;
}
#featured-tracks-carousel .featured-tracks-viewport {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#featured-tracks-carousel .featured-tracks-slide {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  align-items: stretch !important;
  box-sizing: border-box !important;
}
@media (min-width: 768px) {
  #featured-tracks-carousel .featured-tracks-slide {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}
#featured-tracks-carousel .track-catalog-card {
  max-width: none !important;
  width: 100% !important;
  justify-self: stretch !important;
  overflow: hidden !important;
  transform: none !important;
}
#featured-tracks-carousel .track-catalog-card:hover {
  transform: none !important;
}

/* CRT carousel controls */
.featured-carousel-prev,
.featured-carousel-next {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 0.45rem !important;
  border: 1px solid rgba(0, 243, 255, 0.4) !important;
  background: rgba(4, 8, 16, 0.82) !important;
  color: #67e8f9 !important;
  box-shadow:
    0 0 14px rgba(0, 243, 255, 0.12),
    inset 0 0 0 1px rgba(255, 0, 255, 0.15),
    inset 0 -8px 16px rgba(0, 243, 255, 0.06) !important;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s !important;
}
.featured-carousel-prev:hover,
.featured-carousel-next:hover {
  border-color: rgba(255, 0, 255, 0.55) !important;
  background: rgba(8, 4, 18, 0.92) !important;
  color: #f0abfc !important;
  box-shadow:
    0 0 18px rgba(255, 0, 255, 0.2),
    inset 0 0 0 1px rgba(0, 243, 255, 0.25) !important;
}
.featured-carousel-prev svg,
.featured-carousel-next svg { width: 1.1rem !important; height: 1.1rem !important; filter: drop-shadow(0 0 4px rgba(0, 243, 255, 0.45)); }

/* hover play control on track cards — large circle ring + play icon only */
.track-play-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.20);
  backdrop-filter: blur(1.5px);
  position: relative;
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.12);
}
.track-play-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(135deg, rgba(0, 243, 255, 0.75), rgba(255, 0, 255, 0.75));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.track-play-btn svg {
  width: 3rem;
  height: 3rem;
  position: relative;
  z-index: 1;
  opacity: 0.92;
}
.track-play-btn--unavailable::before {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.8), rgba(220, 38, 38, 0.8));
}
.track-play-btn--unavailable svg { opacity: 0.85; }

/* ---------- album covers: CRT scanlines + TV channel tune on hover ---------- */
.album-cover-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.48) 100%),
    radial-gradient(ellipse at 28% 16%, rgba(255, 255, 255, 0.08), transparent 55%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.14) 0 1px, transparent 1px 5px);
}
.album-cover-media .gm-static { z-index: 6; }
.album-cover-media:hover .album-cover-poster,
.album-cover-media.gm-tuning .album-cover-poster { animation: gm-tv-tune 0.55s steps(4); }

/* ---------- platform icon: full spin on hover ---------- */
#platforms a.group > div.rounded-full { transition: transform .7s cubic-bezier(.34,1.3,.5,1); }
#platforms a.group:hover > div.rounded-full { transform: rotate(360deg) scale(1.12); }

/* ---------- timeline ---------- */
.gm-tl-line { position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: linear-gradient(#00f3ff, #ff00ff); opacity: .5; }
.gm-tl-dot {
  position: absolute; left: -33px; top: 22px; width: 15px; height: 15px; border-radius: 3px;
  background: #0a0a0a; animation: gm-spin 7s linear infinite;
}
[data-timeline-item] { will-change: transform, opacity; transform-origin: left center; }

@media (prefers-reduced-motion: reduce) {
  .gm-rings, .gm-static, .gm-ch { display: none; }
  .gm-reveal { opacity: 1 !important; transform: none !important; }
}