/* ═══════════════════════════════════════════════════════════
   MOUTHBREATHER — styles.css
   ─────────────────────────────────────────────────────────── */

/* ── reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}

/* ── tokens ──────────────────────────────────────────────── */
:root{
  --bg:        #070707;
  --bg-deep:   #030303;
  --ink:       #eaeaea;
  --ink-dim:   #8a8a8a;
  --ink-faint: #4a4a4a;
  --bone:      #f4f1e8;
  --blood:     #ff1111;
  --blood-dim: #b50808;
  --cyan:      #00d8ff;
  --rule:      #1f1f1f;

  --font-display: 'Anton', 'Arial Black', Impact, sans-serif;
  --font-mono:    'VT323', 'Courier New', ui-monospace, monospace;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --w-max: 980px;
  --w-narrow: 720px;

  --pad: clamp(20px, 4vw, 56px);
}

/* ── base ────────────────────────────────────────────────── */
html,body{background:var(--bg);color:var(--ink)}
body{
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse at 50% -10%, #1a0000 0%, transparent 55%),
    radial-gradient(ellipse at 50% 110%, #1a0000 0%, transparent 55%),
    var(--bg);
}

::selection{background:var(--blood);color:#000}

.vh{
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip{
  position:absolute;left:-9999px;top:0;z-index:9999;
  background:var(--blood);color:#000;padding:10px 16px;
  font-family:var(--font-mono);letter-spacing:.16em;
}
.skip:focus{left:8px;top:8px}

/* ── fx layers ───────────────────────────────────────────── */
.fx{position:fixed;pointer-events:none;inset:0;z-index:90}

.fx.scan{
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.04) 0 1px,
    rgba(0,0,0,0)         1px 3px);
  mix-blend-mode:overlay;
}

.fx.track{
  left:0;right:0;height:38px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0)  0%,
    rgba(255,255,255,.08) 30%,
    rgba(255,17,17,.18)   50%,
    rgba(255,255,255,.08) 70%,
    rgba(255,255,255,0) 100%);
  mix-blend-mode:screen;
  filter:blur(.6px);
  animation:track 7s linear infinite;
  inset:auto 0 auto 0;
}
@keyframes track{
  0%   { top:-40px }
  92%  { top:100% }
  100% { top:100% }
}

.fx.grain{
  inset:-50%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.15;
  mix-blend-mode:overlay;
  animation:grain .8s steps(6) infinite;
}
@keyframes grain{
  0%  {transform:translate(0,0)}
  20% {transform:translate(-3%,2%)}
  40% {transform:translate(2%,-3%)}
  60% {transform:translate(-2%,1%)}
  80% {transform:translate(3%,3%)}
  100%{transform:translate(0,0)}
}

.fx.vign{
  background:radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.85) 100%);
}

/* ── boot overlay ────────────────────────────────────────── */
.boot{
  position:fixed;inset:0;z-index:1000;
  background:#000;
  display:flex;align-items:center;justify-content:center;
  padding:30px;
  animation:bootFade .5s .55s forwards;
}
.boot::before{
  content:"";
  position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
  pointer-events:none;
}
.boot-inner{
  position:relative;
  display:flex;flex-direction:column;gap:6px;
  text-align:left;
  max-width:min(900px, 92vw);
  font-family:var(--font-mono);
  animation:bootShake .12s steps(2) infinite;
}
@keyframes bootShake{
  0%,100% { transform:translate(0,0) }
  25%     { transform:translate(1px,-1px) }
  50%     { transform:translate(-1px,1px) }
  75%     { transform:translate(1px,1px) }
}
.boot-line{
  font-size:clamp(15px, 2.4vw, 22px);
  line-height:1.25;
  color:var(--bone);
  text-shadow:0 0 5px rgba(255,255,255,.4);
  white-space:pre-wrap;
  word-break:break-all;
  opacity:0;
  animation:bootLine .04s steps(1) forwards;
}
.boot-line:nth-child(1){ animation-delay:.02s }
.boot-line:nth-child(2){ animation-delay:.08s; color:#ff5555; padding-left:8vw }
.boot-line:nth-child(3){ animation-delay:.16s; font-size:clamp(20px,3vw,30px) }
.boot-line:nth-child(4){
  animation-delay:.24s;
  color:var(--blood);
  font-size:clamp(22px,3.6vw,38px);
  letter-spacing:.04em;
  text-shadow:0 0 14px rgba(255,17,17,.7), 2px 0 0 rgba(255,255,255,.4), -2px 0 0 rgba(0,200,255,.4);
  padding:6px 0;
}
@keyframes bootLine{ to{opacity:1} }
@keyframes bootFade{
  0%   { opacity:1; visibility:visible }
  88%  { opacity:1 }
  99%  { opacity:0; visibility:visible }
  100% { opacity:0; visibility:hidden }
}
.boot.skipped{ animation:none; opacity:0; visibility:hidden; pointer-events:none }

/* ── top chrome ──────────────────────────────────────────── */
.chrome{
  position:fixed;top:0;left:0;right:0;z-index:80;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;
  font-family:var(--font-mono);
  font-size:16px;letter-spacing:.18em;
  color:var(--bone);
  text-shadow:0 0 6px rgba(255,255,255,.4);
  pointer-events:none;
}
.chrome-cell{display:flex;align-items:center;gap:8px}
.chrome-cell.tr{margin-left:auto}
.rec{
  width:11px;height:11px;border-radius:50%;
  background:var(--blood);
  box-shadow:0 0 10px var(--blood);
  animation:blink 1.1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ── sections ────────────────────────────────────────────── */
.section{
  position:relative;z-index:1;
  padding:var(--pad);
  max-width:var(--w-max);
  margin:0 auto;
}
.section-head{
  display:grid;grid-template-columns:auto auto 1fr;gap:14px;
  align-items:center;
  margin:0 0 28px;
}
.ch{
  font-family:var(--font-mono);
  font-size:15px;letter-spacing:.32em;
  color:var(--blood);
}
.section-title{
  font-family:var(--font-display);
  font-size:clamp(28px, 5vw, 44px);
  letter-spacing:.04em;
  color:var(--bone);
  text-transform:uppercase;
  line-height:1;
}
.rule{
  display:block;height:1px;
  background:repeating-linear-gradient(to right, #2a2a2a 0 6px, transparent 6px 10px);
}

/* ── hero ────────────────────────────────────────────────── */
.hero{
  min-height:100dvh;
  padding-top:max(72px, 9vh);
  padding-bottom:60px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.hero-inner{
  width:100%;
  display:flex;flex-direction:column;align-items:center;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:clamp(13px, 2vw, 17px);
  letter-spacing:.42em;
  color:var(--blood);
  margin-bottom:8px;
  text-shadow:0 0 8px rgba(255,17,17,.6);
}

.logo{
  font-family:var(--font-display);
  font-size:clamp(56px, 14vw, 168px);
  line-height:.82;
  letter-spacing:-.01em;
  color:var(--bone);
  text-transform:uppercase;
  margin:6px 0 10px;
  position:relative;
  text-shadow:
    2px 0 0 rgba(255,17,17,.85),
    -2px 0 0 rgba(0,200,255,.7);
}
.logo::before, .logo::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  pointer-events:none;
  mix-blend-mode:screen;
}
.logo::before{
  color:var(--blood);
  transform:translate(2px,0);
  clip-path:polygon(0 0,100% 0,100% 38%,0 38%);
}
.logo::after{
  color:var(--cyan);
  transform:translate(-2px,0);
  clip-path:polygon(0 62%,100% 62%,100% 100%,0 100%);
}
.logo.glitch{ animation:logoJitter .55s steps(6) }
.logo.glitch::before{ animation:slice1 .55s steps(1) }
.logo.glitch::after { animation:slice2 .55s steps(1) }
@keyframes logoJitter{
  0%  {transform:translate(0,0)}
  20% {transform:translate(-3px,1px) skewX(-2deg)}
  40% {transform:translate(4px,-1px) skewX(3deg)}
  60% {transform:translate(-2px,2px)}
  80% {transform:translate(3px,0)}
  100%{transform:translate(0,0)}
}
@keyframes slice1{
  0%   {clip-path:polygon(0 0,100% 0,100% 38%,0 38%)}
  20%  {clip-path:polygon(0 12%,100% 12%,100% 22%,0 22%)}
  40%  {clip-path:polygon(0 70%,100% 70%,100% 78%,0 78%)}
  60%  {clip-path:polygon(0 30%,100% 30%,100% 55%,0 55%)}
  80%  {clip-path:polygon(0 5%,100% 5%,100% 18%,0 18%)}
  100% {clip-path:polygon(0 0,100% 0,100% 38%,0 38%)}
}
@keyframes slice2{
  0%   {clip-path:polygon(0 62%,100% 62%,100% 100%,0 100%)}
  20%  {clip-path:polygon(0 40%,100% 40%,100% 60%,0 60%)}
  40%  {clip-path:polygon(0 5%,100% 5%,100% 18%,0 18%)}
  60%  {clip-path:polygon(0 80%,100% 80%,100% 95%,0 95%)}
  100% {clip-path:polygon(0 62%,100% 62%,100% 100%,0 100%)}
}

.subline{
  font-family:var(--font-mono);
  font-size:14px;letter-spacing:.32em;
  color:var(--ink-dim);
  text-transform:uppercase;
  margin-bottom:32px;
}

/* reel */
.reel-wrap{
  position:relative;display:inline-block;
  padding:14px 14px 22px;
  background:rgba(0,0,0,.6);
  border:1px solid #2a2a2a;
  box-shadow:
    0 0 0 1px rgba(255,17,17,.15),
    0 30px 80px rgba(0,0,0,.7);
  margin:6px auto 18px;
}
.reel{
  width:min(300px, 72vw);
  aspect-ratio:9/16;
  object-fit:cover;
  background:#000;
  filter:contrast(1.05) saturate(1.05);
}
.reel-tag{
  position:absolute;
  background:var(--bg);
  padding:0 8px;
  font-family:var(--font-mono);
  font-size:14px;letter-spacing:.32em;
  color:var(--blood);
}
.tag-tl{top:-9px;left:14px}
.tag-br{bottom:-9px;right:14px;color:var(--ink-dim)}

.reel-mute{
  position:absolute;bottom:32px;right:24px;
  padding:6px 10px;
  background:rgba(0,0,0,.7);
  border:1px solid var(--blood);
  font-family:var(--font-mono);
  font-size:14px;letter-spacing:.18em;
  color:var(--bone);
  transition:background .12s, color .12s;
}
.reel-mute:hover{background:var(--blood);color:#000}
.reel-mute-icon{display:none}
.reel-mute[aria-pressed="true"]  .reel-mute-icon[data-state="muted"]{display:inline}
.reel-mute[aria-pressed="false"] .reel-mute-icon[data-state="on"]{display:inline}

/* drop block */
.drop{
  margin:18px auto 28px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.drop-eyebrow{
  font-family:var(--font-mono);
  font-size:14px;letter-spacing:.42em;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.drop-title{
  font-family:var(--font-display);
  font-size:clamp(28px, 6vw, 56px);
  letter-spacing:.02em;
  color:var(--bone);
  text-transform:uppercase;
  text-shadow:0 0 16px rgba(255,17,17,.35);
  line-height:1;
}
.pulse{color:var(--blood);animation:blink 1.4s steps(2) infinite}

.cta{
  display:inline-block;
  margin-top:14px;
  padding:16px 32px;
  background:var(--blood);
  color:#000;
  font-family:var(--font-display);
  font-size:18px;letter-spacing:.22em;
  text-transform:uppercase;
  border:1px solid var(--blood);
  box-shadow:5px 5px 0 #000;
  transition:transform .08s linear, box-shadow .08s linear;
}
.cta:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 #000 }
.cta:active{ transform:translate(0,0); box-shadow:3px 3px 0 #000 }

.scroll-cue{
  margin-top:30px;
  display:inline-flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--font-mono);
  font-size:13px;letter-spacing:.32em;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.cue-arrow{animation:cue 2s ease-in-out infinite}
@keyframes cue{
  0%,100% { transform:translateY(0); opacity:.4 }
  50%     { transform:translateY(6px); opacity:1 }
}

/* ── grids / cards ───────────────────────────────────────── */
.grid{ display:grid; gap:12px }
.grid-listen{ grid-template-columns:1.4fr 1fr }
.grid-follow{ grid-template-columns:repeat(3, 1fr) }
.grid-live{   grid-template-columns:repeat(3, 1fr) }

.card{
  position:relative;
  display:flex;flex-direction:column;
  background:rgba(10,10,10,.7);
  border:1px solid var(--rule);
  padding:20px;
  text-decoration:none;
  color:var(--bone);
  transition:transform .1s, background .15s, border-color .15s, color .15s;
}
.card::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--blood);
  transform:scaleY(0);transform-origin:top;
  transition:transform .15s;
}
.card:hover{
  background:rgba(255,17,17,.06);
  border-color:var(--blood);
  transform:translate(-2px,-2px);
  box-shadow:4px 4px 0 #000;
}
.card:hover::before{ transform:scaleY(1) }

/* feature card (Self-Tape) */
.card-feature{
  padding:28px 28px 32px;
  gap:6px;
  background:
    linear-gradient(180deg, rgba(255,17,17,.08), rgba(0,0,0,0) 60%),
    rgba(10,10,10,.85);
}
.card-meta{
  font-family:var(--font-mono);
  font-size:13px;letter-spacing:.32em;
  color:var(--blood);
  text-transform:uppercase;
}
.card-title{
  font-family:var(--font-display);
  font-size:clamp(34px,5vw,56px);
  line-height:.92;
  letter-spacing:.02em;
  color:var(--bone);
  text-transform:uppercase;
  margin:6px 0 4px;
}
.card-sub{
  font-family:var(--font-mono);
  font-size:13px;letter-spacing:.22em;
  color:var(--ink-dim);
  text-transform:uppercase;
  margin-bottom:14px;
}
.card-body{
  font-size:14px;line-height:1.6;color:#bbb;
  max-width:48ch;margin-bottom:18px;
}
.card-cta{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:14px;letter-spacing:.28em;
  color:var(--blood);
  text-transform:uppercase;
}

/* link cards */
.stream-stack{ display:flex;flex-direction:column;gap:12px }
.card-link{
  flex-direction:row;align-items:center;justify-content:space-between;
  padding:18px 22px;
  font-family:var(--font-display);
  font-size:18px;letter-spacing:.18em;
  text-transform:uppercase;
}
.card-link .arr{
  font-family:var(--font-mono);
  font-size:22px;color:var(--ink-dim);
  transition:color .15s, transform .15s;
}
.card-link:hover .arr{ color:var(--blood); transform:translateX(4px) }

/* wide cards (live & merch) */
.card-wide{
  gap:4px;align-items:flex-start;
  padding:24px;
  min-height:140px;
}
.wide-eyebrow{
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.32em;
  color:var(--blood);
  text-transform:uppercase;
}
.wide-title{
  font-family:var(--font-display);
  font-size:28px;letter-spacing:.04em;
  color:var(--bone);
  text-transform:uppercase;
  margin:2px 0 14px;
}
.wide-cta{
  margin-top:auto;
  font-family:var(--font-mono);
  font-size:13px;letter-spacing:.28em;
  color:var(--ink-dim);
  text-transform:uppercase;
  transition:color .15s;
}
.card-wide:hover .wide-cta{ color:var(--blood) }

/* archive line */
.archive{
  margin:36px auto 0;
  text-align:center;
  font-family:var(--font-mono);
  font-size:14px;letter-spacing:.24em;
  color:var(--ink-faint);
  text-transform:uppercase;
}
.archive-lbl{display:block;color:var(--ink-dim);margin-bottom:6px;font-size:12px;letter-spacing:.32em}
.archive i{ color:var(--ink-faint);margin:0 6px;font-style:normal }

/* ── footer ──────────────────────────────────────────────── */
.footer{
  position:relative;z-index:1;
  max-width:var(--w-max);
  margin:60px auto 0;
  padding:30px var(--pad) 60px;
  font-family:var(--font-mono);
  color:var(--ink-faint);
  font-size:13px;letter-spacing:.28em;
  text-transform:uppercase;
}
.footer a{color:var(--ink-dim);transition:color .15s}
.footer a:hover{color:var(--blood)}
.footer-row{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px;
}
.footer-row.small{font-size:11px;letter-spacing:.22em;color:#3a3a3a}
.footer-rule{
  height:1px;margin:14px 0;
  background:repeating-linear-gradient(to right, #2a2a2a 0 6px, transparent 6px 10px);
}
.barcode{
  display:block;width:200px;height:34px;
  margin:24px auto 0;
  background:repeating-linear-gradient(to right,
    #ddd 0 1px, transparent 1px 3px,
    #ddd 3px 5px, transparent 5px 6px,
    #ddd 6px 9px, transparent 9px 11px,
    #ddd 11px 12px, transparent 12px 16px);
  opacity:.45;filter:contrast(2);
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:780px){
  .grid-listen{ grid-template-columns:1fr }
  .grid-follow{ grid-template-columns:1fr 1fr }
  .grid-live{   grid-template-columns:1fr }
}
@media (max-width:520px){
  .chrome{ font-size:13px; padding:10px 14px }
  .chrome-cell:nth-child(2){ display:none }
  .reel{ width:min(280px, 80vw) }
  .grid-follow{ grid-template-columns:1fr }
  .section-head{ grid-template-columns:auto 1fr; gap:10px }
  .section-head .rule{ display:none }
  .card-feature{ padding:22px }
  .card-link{ font-size:16px;padding:16px 18px }
}

/* ── motion / a11y ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .boot{display:none}
  .fx.grain,.fx.track{display:none}
}