/* ============================================================
   GOKUPOKU // UTILITY FLAVOR
   Optional decorative pieces — divider-band ticker, hero-glitch
   effect, etc. Include where you want them.
   ============================================================ */

/* ====== DIVIDER BAND (horizontal ticker between sections) ====== */
.divider-band{
  width:100%;height:30px;background:var(--void);
  display:flex;align-items:center;overflow:hidden;
  border-top:1px solid var(--mag);border-bottom:1px solid var(--mag);
}
.divider-band .t{
  font-family:"Archivo Black",sans-serif;font-size:14px;
  white-space:nowrap;letter-spacing:.2em;color:var(--mag);text-transform:uppercase;
  animation:gp-ticker 30s linear infinite;display:flex;gap:30px;
}
@keyframes gp-ticker{to{transform:translateX(-50%)}}

/* ====== HERO GLITCH ====== */
.hero-glitch{
  position:relative;
}
.hero-glitch::before,.hero-glitch::after{
  content:attr(data-text);position:absolute;inset:0;
  font-family:"Anton",sans-serif;
  pointer-events:none;mix-blend-mode:screen;
  opacity:.0;
}
.hero-glitch.go::before{
  color:var(--mag);transform:translate(6px,-2px);opacity:.7;
  clip-path:inset(20% 0 60% 0);
  animation:gp-gitch1 .4s steps(4);
}
.hero-glitch.go::after{
  color:var(--cyan);transform:translate(-5px,3px);opacity:.7;
  clip-path:inset(60% 0 10% 0);
  animation:gp-gitch2 .4s steps(4);
}
@keyframes gp-gitch1{
  0%{clip-path:inset(10% 0 70% 0);transform:translate(-4px,2px)}
  50%{clip-path:inset(45% 0 30% 0);transform:translate(6px,-3px)}
  100%{clip-path:inset(75% 0 5% 0);transform:translate(-2px,1px)}
}
@keyframes gp-gitch2{
  0%{clip-path:inset(70% 0 10% 0);transform:translate(5px,-2px)}
  50%{clip-path:inset(35% 0 45% 0);transform:translate(-6px,3px)}
  100%{clip-path:inset(5% 0 75% 0);transform:translate(2px,-1px)}
}