:root{
  --bg:#050505;
  --fg:#f2f2f2;
  --dim:rgba(255,255,255,.72);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);overflow-x:hidden}
.center{text-align:center}
.dim{color:var(--dim)}
.mono{font-family:var(--mono)}

/* ===== BACKGROUND: CRT / DIGITAL GLITCH ONLY ===== */
.fx{position:fixed; inset:0; z-index:-10; pointer-events:none; overflow:hidden;}
.fx__bg{
  position:absolute; inset:-2%;
  background:url("assets/bg_glitch.jpg") center/cover no-repeat;
  filter:grayscale(1) contrast(1.45) brightness(.20);
  opacity:1;
  transform:scale(1.06);
  
}
  18%{transform:scale(1.06) translate(-.8%,.25%)}
  19%{transform:scale(1.06) translate(.9%,-.2%)}
  57%{transform:scale(1.06) translate(-.3%,-.7%)}
  58%{transform:scale(1.06) translate(.4%,.8%)}
}
.fx__scanlines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.06) 0px,
    rgba(255,255,255,.02) 1px,
    rgba(0,0,0,0) 3px
  );
  opacity:.22;
  mix-blend-mode:overlay;
}
.fx__noise{
  position:absolute; inset:-10%;
  background:url("assets/noise.jpg") center/cover no-repeat;
  opacity:.10;
  mix-blend-mode:overlay;
  
  filter:contrast(1.35);
}

100%{transform:translateY(60px)}}

100%{transform:translateX(120%) skewX(-18deg)}}


/* floating glitch glyphs (sparse, digital) */
.fx__glyphs{position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay;}
.fx__glyph{
  position:absolute;
  font-family:var(--mono);
  color:rgba(255,255,255,.85);
  font-size:14px;
  line-height:1;
  opacity:0;
  text-shadow:0 0 12px rgba(255,255,255,.25);
  filter:contrast(1.2);
}
.fx__glyph.on{opacity:.9}

/* ===== HEADER ===== */
.top{
  position:sticky; top:0; z-index:10;
  border-bottom:2px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(10px);
}
.top__inner{max-width:980px;margin:0 auto;padding:10px 14px 12px;text-align:center;}
.top__row{display:flex;justify-content:center;gap:18px;align-items:center;flex-wrap:wrap}
.top__brandLine{display:flex;align-items:center;justify-content:center;gap:10px}
.dot{width:9px;height:9px;border-radius:999px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.22);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.7);opacity:.5}}
.top__brand{letter-spacing:.28em;font-weight:900}
.top__genre{font-size:12px;letter-spacing:.18em;text-transform:uppercase;display:flex;gap:10px;justify-content:center;align-items:center}
.genreCycle{display:inline-block; padding:0; border:0; background:transparent;}

/* ===== LAYOUT ===== */
.wrap{max-width:980px;margin:0 auto;padding:16px 14px 44px;text-align:center}
.block--logo{margin:14px auto 18px; position:relative}
.ascii{margin:0;white-space:pre;user-select:none}
.ascii--logo{
  font-size:12px; line-height:1.05;
  display:inline-block;
  padding:18px 16px;
  border:2px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.62);
  overflow:hidden;
  box-shadow:0 30px 120px rgba(0,0,0,.62);
}
.logoImg{
  display:none;
  width:min(520px, 86vw);
  height:auto;
  filter:grayscale(1) contrast(1.25);
  opacity:.96;
  margin:0 auto;
}

/* claim glitch */
.claim{margin-top:12px;font-size:18px;letter-spacing:.12em;opacity:.98;display:block;width:100%;text-align:center;}
.glitchText{position:relative;display:block; width:100%;}
.glitchText::before,.glitchText::after{content:attr(data-text);position:absolute;left:0;top:0;opacity:.6;pointer-events:none}
.glitchText::before{transform:translate(2px,-1px);clip-path:inset(0 0 55% 0)}
.glitchText::after{transform:translate(-2px,1px);clip-path:inset(45% 0 0 0)}
html.g .glitchText::before{animation:g1 140ms steps(2,end) infinite}
html.g .glitchText::after{animation:g2 120ms steps(2,end) infinite}
@keyframes g1{0%{clip-path:inset(0 0 55% 0)}50%{clip-path:inset(22% 0 32% 0)}100%{clip-path:inset(0 0 55% 0)}}
@keyframes g2{0%{clip-path:inset(45% 0 0 0)}50%{clip-path:inset(70% 0 0 0)}100%{clip-path:inset(45% 0 0 0)}}


/* claim band glitches across full width */
.claim::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:22px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,0) 0 22px,
    rgba(255,255,255,.18) 22px 24px,
    rgba(255,255,255,0) 24px 40px
  );
  opacity:.0;
  pointer-events:none;
  mix-blend-mode:overlay;
}
html.g .claim::before{opacity:.55; animation:claimBars 120ms steps(2,end) infinite;}
@keyframes claimBars{0%{transform:translateY(-50%) translateX(-12%)}100%{transform:translateY(-50%) translateX(12%)}}

/* ===== FRAMES: THICKER + HUD ===== */
.frame{
  margin:16px auto;
  border:4px solid rgba(255,255,255,.92);
  background:rgba(0,0,0,.70);
  box-shadow:0 26px 160px rgba(0,0,0,.70);
  position:relative;
  overflow:hidden;
  text-align:left;
}

.frame::before{
  content:"";
  position:absolute; inset:-4px;
  pointer-events:none;
  background:
    /* top broken line */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.95) 0 18px,
      rgba(255,255,255,.95) 18px 20px,
      rgba(255,255,255,0) 20px 26px
    ) top left / 100% 4px no-repeat,
    /* bottom broken line */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.95) 0 22px,
      rgba(255,255,255,0) 22px 28px,
      rgba(255,255,255,.95) 28px 30px
    ) bottom left / 100% 4px no-repeat,
    /* left broken line */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.95) 0 14px,
      rgba(255,255,255,0) 14px 18px
    ) top left / 4px 100% no-repeat,
    /* right broken line */
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.95) 0 16px,
      rgba(255,255,255,0) 16px 21px
    ) top right / 4px 100% no-repeat;
  opacity:.35;
  mix-blend-mode:overlay;
}
.frame .corner{position:absolute;width:18px;height:18px;border:4px solid rgba(255,255,255,.85);opacity:.55}
.frame .c1{top:8px;left:8px;border-right:0;border-bottom:0}
.frame .c2{top:8px;right:8px;border-left:0;border-bottom:0}
.frame .c3{bottom:8px;left:8px;border-right:0;border-top:0}
.frame .c4{bottom:8px;right:8px;border-left:0;border-top:0}

.frame__head{
  padding:16px 14px 14px;
  border-bottom:4px solid rgba(255,255,255,.92);
  background:transparent;
  text-align:center;
}
.hudTitle{
  margin:0;
  font-size:22px;
  letter-spacing:.62em;
  text-transform:uppercase;
  font-weight:900;
  display:inline-block;
  font-family:var(--mono);
  padding:8px 14px 10px;
  border:3px solid rgba(255,255,255,.92);
  background:rgba(0,0,0,.75);
  box-shadow:0 0 0 3px rgba(0,0,0,.65) inset;
}
.frame__body{padding:16px}
.frame__body p{margin:0 0 10px;font-size:13px;line-height:1.55}
.frame__body--photo{
  min-height:380px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.86)),
    url("assets/photo_dark.jpg") center/cover no-repeat;
  background-position:center 18%;
  filter:grayscale(1) contrast(1.15);
}
.bioText{max-width:78ch; padding-top:0}

/* ===== BUTTONS: ABRUPT GLITCH, NO JITTER ===== */
.iconRow{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.iconBtn{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border:3px solid rgba(255,255,255,.65);
  background:rgba(0,0,0,.35);
  text-decoration:none;color:var(--fg);
  letter-spacing:.12em;text-transform:uppercase;font-size:12px;
  position:relative;overflow:hidden;
}
.iconBtn img{width:34px;height:34px;display:block}
.iconBtn::before{
  content:""; position:absolute; inset:-3px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 10px, rgba(255,255,255,.20) 11px, rgba(255,255,255,0) 14px);
  opacity:0;
}
.iconBtn:hover::before{opacity:1; animation:bars 160ms steps(2,end) infinite;}
.iconBtn:hover{background:rgba(255,255,255,.10); box-shadow:0 0 0 2px rgba(255,255,255,.32), 0 0 18px rgba(255,255,255,.14); filter:invert(1);}
@keyframes bars{0%{transform:translateX(-22%)}100%{transform:translateX(22%)}}


.iconBtn::after{
  content:attr(aria-label);
  position:absolute;
  left:10px; top:10px;
  opacity:0;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#fff;
  mix-blend-mode:difference;
  pointer-events:none;
  clip-path:inset(0 0 60% 0);
}
.iconBtn:hover::after{
  opacity:.9;
  animation:btnSlice 150ms steps(2,end) infinite;
}
@keyframes btnSlice{
  0%{transform:translate(0,0); clip-path:inset(0 0 60% 0)}
  50%{transform:translate(8px,-2px); clip-path:inset(40% 0 20% 0)}
  100%{transform:translate(-6px,2px); clip-path:inset(10% 0 55% 0)}
}

.bigBtn{
  display:inline-flex;align-items:center;gap:12px;
  padding:12px 16px;
  border:3px solid rgba(255,255,255,.82);
  background:rgba(0,0,0,.35);
  color:var(--fg); text-decoration:none;
  letter-spacing:.18em; text-transform:uppercase; font-size:12px;
  position:relative; overflow:hidden;
}
.bigBtn img{width:28px;height:28px}
.bigBtn::after{
  content:""; position:absolute; inset:-3px;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 45%, transparent 72%);
  transform:translateX(-120%) skewX(-18deg);
  opacity:0;
}
.bigBtn:hover::after{opacity:1; animation:sweep 200ms steps(2,end) infinite;}
.bigBtn:hover{background:rgba(255,255,255,.10); box-shadow:0 0 0 2px rgba(255,255,255,.32), 0 0 18px rgba(255,255,255,.14); filter:invert(1);}

.foot{margin-top:18px;display:flex;justify-content:center;gap:10px;opacity:.7}
.sep{opacity:.35}

/* global flashes */

/* ===== RESPONSIVE ===== */
@media (max-width:640px){
  .top__genre{font-size:11px;letter-spacing:.12em}
  .ascii--logo{display:none}
  .logoImg{display:block}
  .claim{margin-top:12px;font-size:18px;letter-spacing:.12em;opacity:.98;display:block;width:100%;text-align:center;}
  .hudTitle{
  margin:0;
  font-size:22px;
  letter-spacing:.62em;
  text-transform:uppercase;
  font-weight:900;
  display:inline-block;
  font-family:var(--mono);
  padding:8px 14px 10px;
  border:3px solid rgba(255,255,255,.92);
  background:rgba(0,0,0,.75);
  box-shadow:0 0 0 3px rgba(0,0,0,.65) inset;
}
  .frame__body--photo{min-height:340px;background-position:center 20%}
  .iconBtn span{display:none}
  .iconBtn{padding:12px 12px}
}
@media (max-width:420px){
  .top__row{gap:10px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;}
}