/* Doodskrag: a lost band page from about 2003. Black, dried blood, beveled boxes, CRT glitches. */
@font-face {
  font-family: "metallord";
  src: url("../fonts/metallord.otf") format("opentype");
}
@font-face {
  font-family: "blacken";
  src: url("../fonts/blacken.otf") format("opentype");
}

:root {
  --bg: #000000;
  --red: #ff0000;
  --blood: #990000;
  --dried: #330000;
  --grey: #7a7a7a;
  --dark: #111111;
  --ink: #c8c8c8;
  --hi: #4a0000;
  --lo: #0a0000;
  --gap: 8px;
  --old: Verdana, Tahoma, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
  --metal: "metallord", serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 11px/1.5 var(--old);
  cursor: crosshair;
}

a { color: var(--red); text-decoration: none; }
a:hover { color: #fff; background: var(--blood); }

/* tiled pentagram wallpaper, barely there */
.tile {
  position: fixed;
  inset: -50%;
  z-index: 0;
  background: url("../images/pentagram.png") 0 0 / 90px 90px;
  filter: invert(1);
  opacity: .035;
  transform: rotate(-12deg);
  pointer-events: none;
}

/* CRT: scanlines, vignette and a faint roll */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .85) 100%);
  animation: roll 7s linear infinite;
}
.scanlines::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 18%;
  background: linear-gradient(transparent, rgba(255, 0, 0, .05), transparent);
  animation: bar 5s linear infinite;
}

/* glitch: three stacked copies, the top two split red and cyan and tear sideways */
.glitch { position: relative; display: inline-block; }
.glitch h1 { margin: 0; height: 100%; }
.glitch img { display: block; height: 100%; width: auto; filter: invert(1) drop-shadow(0 0 4px var(--red)); }
.glitch > :not(:first-child) { position: absolute; inset: 0; mix-blend-mode: screen; opacity: .8; }
.glitch > :nth-child(2) { filter: invert(1) sepia(1) saturate(9) hue-rotate(-50deg); animation: tearA 2.7s steps(1) infinite; }
.glitch > :nth-child(3) { filter: invert(1) sepia(1) saturate(9) hue-rotate(140deg); animation: tearB 3.1s steps(1) infinite; }

.spin { filter: invert(1) drop-shadow(0 0 5px var(--red)); animation: spin 20s linear infinite; }
.spin.rev { animation-direction: reverse; }
.blink { animation: blink 1s steps(1) infinite; }

/* ---------- ENTER splash ---------- */
#splash {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: #000;
  text-align: center;
}
#splash .big { height: 18vh; }
#splash .spin { width: 22vh; opacity: .8; }
#splash { cursor: pointer; }
#enter {
  font: bold 18px var(--mono);
  letter-spacing: .2em;
  color: var(--red);
  background: #000;
  border: 2px solid var(--blood);
  padding: 8px 18px;
  cursor: pointer;
  animation: throb 1.2s steps(2) infinite;
}
#enter:hover { color: #fff; background: var(--blood); animation: none; }
.warn { margin: 0; color: var(--grey); font: 10px var(--mono); }
#splash.gone { animation: tearOut .45s steps(6) forwards; }

/* ---------- the page ---------- */
#site {
  position: relative;
  z-index: 1;
  height: 100%;
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--dried);
  border-right: 1px solid var(--dried);
  background: rgba(0, 0, 0, .82);
}
body.tear #site { transform: translateX(6px) skewX(-2deg); filter: hue-rotate(-20deg) contrast(1.6); }

header {
  flex: none;
  height: 12vh;
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 6px 8px 0;
  text-align: center;
}
header .glitch { height: 8vh; min-height: 44px; }
header .small { height: 9vh; min-height: 50px; }
.tagline { margin: 2px 0 0; font: italic 12px Georgia, "Times New Roman", serif; color: var(--grey); letter-spacing: .1em; }

.ticker {
  flex: none;
  margin: 6px 8px 0;
  padding: 2px 0;
  border-top: 1px solid var(--blood);
  border-bottom: 1px solid var(--blood);
  background: var(--dried);
  color: var(--red);
  font: bold 11px var(--mono);
  letter-spacing: .15em;
}

main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 300px;
  gap: var(--gap);
  padding: var(--gap);
}

/* beveled 2000s box with a title bar */
.box {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--dark);
  border: 2px solid;
  border-color: var(--hi) var(--lo) var(--lo) var(--hi);
  outline: 1px solid #000;
}
.bar {
  flex: none;
  display: flex;
  justify-content: space-between;
  padding: 2px 6px;
  background: linear-gradient(90deg, var(--blood), var(--dried));
  color: #fff;
  font: bold 10px var(--old);
  letter-spacing: .12em;
  text-transform: uppercase;
}

nav { overflow-y: auto; }
nav ul { list-style: none; margin: 4px 0 8px; padding: 0 8px; }
nav li { padding: 2px 0; border-bottom: 1px dotted var(--dried); }
nav .thumbs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; padding: 6px; }
nav .thumbs img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.6) brightness(.7);
  border: 1px solid var(--blood);
}
nav .thumbs img:hover { filter: grayscale(0) sepia(.6) hue-rotate(-30deg) saturate(3); }
.counter {
  margin: 6px auto;
  padding: 1px 6px;
  background: #000;
  border: 2px inset var(--grey);
  color: var(--red);
  font: bold 16px var(--mono);
  letter-spacing: .25em;
  text-shadow: 0 0 6px var(--red);
}
.tiny { margin: 6px 8px 8px; color: #555; font-size: 9px; text-align: center; }

.stage .screen { flex: 1; min-height: 0; background: #000; border: 2px inset #222; margin: 4px; }
.stage iframe { display: block; width: 100%; height: 100%; border: 0; filter: contrast(1.15) saturate(.8); }

aside { min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.sc { flex: 1; min-height: 166px; }
.sc iframe { flex: 1; display: block; width: 100%; border: 0; filter: grayscale(.5) contrast(1.1); }

.creed { flex: none; max-height: 55%; }
.creed .text {
  overflow-y: auto;
  padding: 6px 10px;
  font: clamp(10px, 1.5vh, 13px)/1.45 Georgia, "Times New Roman", serif;
  color: #b0b0b0;
}
.creed p { margin: 0 0 .6em; }
.creed ul { list-style: none; margin: 0 0 .6em; padding: 0; }
.creed li::before { content: "⛧ "; color: var(--red); }

/* chunky dark scrollbars */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: var(--dried); border: 2px outset var(--blood); }

/* Cursed Entertainment footer, dressed down to match */
footer {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 22px;
  padding: 6px 8px 8px;
  border-top: 1px solid var(--blood);
  color: #666;
  font-size: 10px;
}
footer .logos { display: flex; align-items: center; gap: 14px; }
footer .logos img { display: block; height: 24px; width: auto; filter: grayscale(1) brightness(.8); }
footer .logos a:hover { background: none; }
footer .logos a:hover img { filter: none; }

/* ---------- motion ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { visibility: hidden; } }
@keyframes throb { 50% { color: #550000; border-color: #330000; } }
@keyframes roll { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }
@keyframes bar { from { top: -20%; } to { top: 110%; } }
@keyframes tearA {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  88% { clip-path: inset(20% 0 55% 0); transform: translateX(-7px); }
  92% { clip-path: inset(60% 0 15% 0); transform: translateX(5px); }
  96% { clip-path: inset(40% 0 40% 0); transform: translateX(-3px); }
}
@keyframes tearB {
  0%, 80%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  83% { clip-path: inset(70% 0 5% 0); transform: translateX(6px); }
  89% { clip-path: inset(10% 0 70% 0); transform: translateX(-6px); }
  95% { clip-path: inset(45% 0 30% 0); transform: translateX(3px); }
}
@keyframes tearOut {
  0% { clip-path: inset(0); transform: none; }
  30% { clip-path: inset(10% 0 40% 0); transform: translateX(-20px); filter: hue-rotate(90deg); }
  60% { clip-path: inset(50% 0 20% 0); transform: translateX(30px); }
  100% { clip-path: inset(50% 0 50% 0); transform: none; visibility: hidden; }
}

/* phones and narrow windows: stack and scroll */
@media (max-width: 900px) {
  body { height: auto; overflow: auto; }
  #site { height: auto; }
  header { height: auto; gap: 12px; }
  header .glitch { height: 48px; }
  main { display: flex; flex-direction: column; }
  .stage .screen { flex: none; aspect-ratio: 16 / 9; }
  .sc { flex: none; height: 300px; }
  .creed { max-height: none; }
  .creed .text { font-size: 14px; }
  nav .thumbs img { aspect-ratio: 1; }
  footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation: none !important; }
  body.tear #site { transform: none; filter: none; }
}