/**
 * PR1MELAB hero brand — PlayVerse-style neon
 * CRT scanlines + glitch slices (no shine sweep, no animated hero scan blur).
 */

:root {
  --hero-neon-glitch-cycle: 2s;
  --hero-neon-scanline-opacity: 1;
  --hero-neon-glitch-shift: 10px;
  --hero-neon-glitch-color-a: rgba(6, 182, 212, 0.95);
  --hero-neon-glitch-color-b: rgba(255, 168, 118, 0.95);
}

@keyframes hero-neon-glitch-layer-a {
  0%,
  15.5%,
  100% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate3d(0, 0, 0);
  }
  0.01% {
    opacity: 1;
    transform: translate3d(calc(var(--hero-neon-glitch-shift, 10px) * -1), 2px, 0);
    clip-path: inset(5% 0 85% 0);
  }
  3.1% {
    opacity: 1;
    transform: translate3d(var(--hero-neon-glitch-shift, 10px), -3px, 0);
    clip-path: inset(35% 0 45% 0);
  }
  6.2% {
    opacity: 1;
    transform: translate3d(calc(var(--hero-neon-glitch-shift, 10px) * -0.8), 4px, 0);
    clip-path: inset(60% 0 25% 0);
  }
  9.3% {
    opacity: 1;
    transform: translate3d(calc(var(--hero-neon-glitch-shift, 10px) * 1.2), -2px, 0);
    clip-path: inset(15% 0 70% 0);
  }
  12.4% {
    opacity: 1;
    transform: translate3d(calc(var(--hero-neon-glitch-shift, 10px) * -0.6), 1px, 0);
    clip-path: inset(80% 0 5% 0);
  }
}

@keyframes hero-neon-glitch-layer-b {
  0%,
  15.5%,
  100% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translate3d(0, 0, 0);
  }
  0.01% {
    opacity: 1;
    transform: translate3d(var(--hero-neon-glitch-shift, 10px), -2px, 0);
    clip-path: inset(55% 0 30% 0);
  }
  3.1% {
    opacity: 1;
    transform: translate3d(calc(var(--hero-neon-glitch-shift, 10px) * -1.2), 3px, 0);
    clip-path: inset(15% 0 75% 0);
  }
  6.2% {
    opacity: 1;
    transform: translate3d(calc(var(--hero-neon-glitch-shift, 10px) * 0.8), -4px, 0);
    clip-path: inset(70% 0 15% 0);
  }
  9.3% {
    opacity: 1;
    transform: translate3d(calc(var(--hero-neon-glitch-shift, 10px) * -1), 2px, 0);
    clip-path: inset(40% 0 50% 0);
  }
  12.4% {
    opacity: 1;
    transform: translate3d(calc(var(--hero-neon-glitch-shift, 10px) * 0.6), -1px, 0);
    clip-path: inset(90% 0 2% 0);
  }
}

html body:not(.dashboard-app-body) .hero-section.hero-section--neon .hero-neon-brand-wrap,
html body.preview-editor-mode .hero-neon-brand-wrap {
  max-width: 100%;
  overflow: visible;
}

html body:not(.dashboard-app-body) .hero-neon-brand-inner,
html body.preview-editor-mode .hero-neon-brand-inner {
  position: relative;
  display: inline-block;
  isolation: isolate;
}

html body:not(.dashboard-app-body) .hero-section.hero-section--neon .hero-neon-brand-title,
html body.preview-editor-mode .hero-neon-brand-title {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin: 0;
}

html body:not(.dashboard-app-body) .hero-section.hero-section--neon .hero-neon-brand-title .hero-neon-part,
html body.preview-editor-mode .hero-neon-brand-title .hero-neon-part {
  position: relative;
  display: inline-block;
  z-index: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* CRT scanlines through the letter fill */
html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-part::after,
html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-part::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: var(--hero-neon-scanline-opacity, 1);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.22) 2px,
    rgba(0, 0, 0, 0.22) 3px
  );
  mix-blend-mode: multiply;
}

/* Glitch duplicate layers — clip slices only, no filter blur on main text */
html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::after,
html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::after {
  content: attr(data-brand-text);
  font-family: var(--font-orbitron, var(--font-neon)), Arial Narrow, sans-serif;
  font-weight: 900;
  font-size: var(--pv-hero-brand-size, var(--hero-neon-brand-size, 46px));
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
  -webkit-font-smoothing: antialiased;
}

html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::before {
  color: var(--hero-neon-glitch-color-a, rgba(6, 182, 212, 0.95));
  mix-blend-mode: screen;
}

html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::after,
html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::after {
  color: var(--hero-neon-glitch-color-b, rgba(255, 168, 118, 0.95));
  mix-blend-mode: screen;
}

@media (prefers-reduced-motion: no-preference) {
  html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
  html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::before {
    animation: hero-neon-glitch-layer-a var(--hero-neon-glitch-cycle, 3s) steps(5, end) infinite;
  }

  html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::after,
  html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::after {
    animation: hero-neon-glitch-layer-b var(--hero-neon-glitch-cycle, 3s) steps(5, end) infinite;
  }
}

@media (max-width: 760px) {
  :root {
    --hero-neon-glitch-shift: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
  html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::after,
  html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-part::after,
  html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
  html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::after,
  html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-part::after {
    animation: none !important;
  }

  html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
  html body:not(.dashboard-app-body) .hero-neon-brand-wrap--live .hero-neon-brand-inner::after,
  html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
  html body.preview-editor-mode .hero-neon-brand-wrap--live .hero-neon-brand-inner::after {
    opacity: 0 !important;
  }
}

html body:not(.dashboard-app-body) .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
html body:not(.dashboard-app-body) .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-brand-inner::after,
html body:not(.dashboard-app-body) .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-part::after,
html body.preview-editor-mode .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
html body.preview-editor-mode .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-brand-inner::after,
html body.preview-editor-mode .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-part::after {
  animation: none !important;
}

html body:not(.dashboard-app-body) .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
html body:not(.dashboard-app-body) .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-brand-inner::after,
html body.preview-editor-mode .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-brand-inner::before,
html body.preview-editor-mode .hero-section.hero-section--neon[data-hero-neon-anim="0"] .hero-neon-brand-wrap--live .hero-neon-brand-inner::after {
  opacity: 0 !important;
}