/* ------------------------------------------------------------------
   Indie / grunge zine aesthetic
   - gritty near-black paper with noise
   - bold condensed display type + typewriter body
   - taped, slightly-crooked photocopied cards
------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&family=Oswald:wght@500;700&family=Special+Elite&display=swap');

/* Splatink — inky splattered handwriting (personal-use licence) */
@font-face {
  font-family: 'Splatink';
  src: url('fonts/Splatink.otf') format('opentype');
  font-display: swap;
}

:root {
  --ink: #ececdf;            /* off-white newsprint text */
  --ink-dim: #8f8c80;
  --paper: #14130f;          /* near-black grungy paper */
  --paper-2: #1b1a15;
  --card: #100f0c;
  --accent: #e63329;         /* bleached punk red */
  --accent-2: #f2c31c;       /* acid yellow highlighter */
  --tape: rgba(236, 236, 223, 0.14);
  --edge: #2b2a24;
  --display: 'Anton', 'Oswald', Impact, sans-serif;
  --body: 'Special Elite', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background-color: var(--paper);
  /* layered grit: fine noise + faded halftone dots + vignette */
  background-image:
    radial-gradient(circle at 50% 0%, rgba(242, 195, 28, 0.06), transparent 55%),
    radial-gradient(rgba(236,236,223,0.05) 1px, transparent 1.4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: auto, 6px 6px, 140px 140px;
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* animated flickering film-grain layer over everything */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(4) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-6%, 4%); }
  50%  { transform: translate(5%, -5%); }
  75%  { transform: translate(-4%, -3%); }
  100% { transform: translate(4%, 5%); }
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 22px;
}

/* -------------------- Header -------------------- */
.site-header {
  position: relative;
  padding: 46px 0 40px;
  border-bottom: 3px solid var(--ink);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 22px,
      rgba(230, 51, 41, 0.05) 22px 24px
    );
  overflow: hidden;
}

/* torn bottom edge */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 12px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12'%3E%3Cpath d='M0 12 L0 5 L8 9 L16 3 L24 8 L32 2 L40 7 L48 3 L56 9 L64 4 L72 8 L80 2 L88 7 L96 3 L104 9 L112 4 L120 8 L120 12 Z' fill='%2314130f'/%3E%3C/svg%3E") repeat-x;
}

.brand {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Social Crash logo — pasted up like a sticker on the dark wall */
.logo-sticker {
  margin-left: auto;
  position: relative;
  display: block;
  background: #f4f1e6;
  padding: 10px;
  transform: rotate(3deg);
  box-shadow: 5px 7px 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease;
}

.logo-sticker::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 74px;
  height: 22px;
  transform: translateX(-50%) rotate(-4deg);
  background: var(--tape);
  border-left: 1px dashed rgba(0,0,0,0.25);
  border-right: 1px dashed rgba(0,0,0,0.25);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.logo-sticker:hover { transform: rotate(0deg) scale(1.04); }

.logo-sticker img {
  display: block;
  width: clamp(90px, 12vw, 150px);
  height: auto;
}

.brand-mark {
  font-size: 46px;
  line-height: 1;
  transform: rotate(-8deg);
  filter: grayscale(0.2) drop-shadow(2px 3px 0 rgba(0,0,0,0.6));
  transform-origin: 50% 80%;
  animation: wobble 2.6s ease-in-out infinite;
}

@keyframes wobble {
  0%, 100% { transform: rotate(-8deg); }
  50%      { transform: rotate(4deg) translateY(-2px); }
}

/* banner-style title: heavy slanted block letters with a cold glow */
.site-header h1 {
  margin: 0;
  font-family: 'Archivo Black', var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 6.5vw, 4.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #ffffff;
  display: inline-block;
  transform: skewX(-8deg);
  text-shadow:
    0 0 14px rgba(170, 195, 255, 0.55),
    0 0 40px rgba(140, 170, 255, 0.30),
    3px 3px 0 rgba(0, 0, 0, 0.65);
  animation: flickerIn 1.1s steps(2) 1 both;
}

/* band name — inky stamp under the title */
.band-name {
  margin: 6px 0 0;
  font-family: 'Splatink', var(--display);
  font-size: clamp(1.3rem, 3.4vw, 2rem);
  color: var(--accent);
  transform: rotate(-1.5deg);
  transform-origin: left center;
  display: inline-block;
}

.band-name .of {
  font-family: var(--body);
  font-size: 0.55em;
  color: var(--ink-dim);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-right: 8px;
}

/* punky neon-sign flicker as the title arrives */
@keyframes flickerIn {
  0%   { opacity: 0; }
  10%  { opacity: 1; text-shadow: 3px 3px 0 var(--accent); }
  15%  { opacity: 0.2; }
  22%  { opacity: 1; }
  28%  { opacity: 0.4; text-shadow: 3px 3px 0 var(--accent-2); }
  35%  { opacity: 1; text-shadow: 3px 3px 0 var(--accent); }
  50%  { opacity: 0.7; }
  55%  { opacity: 1; }
  100% { opacity: 1; }
}

.tagline {
  margin: 10px 0 0;
  color: var(--accent-2);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* -------------------- Hero poster -------------------- */
.hero {
  padding-top: 46px;
  display: flex;
  justify-content: center;
}

.hero-poster {
  position: relative;
  max-width: 780px;
  background: #0c0b09;
  padding: 12px 12px 14px;
  border: 1px solid var(--edge);
  transform: rotate(-1.2deg);
  box-shadow: 8px 10px 0 rgba(0, 0, 0, 0.55);
}

/* tape on both top corners */
.hero-poster::before,
.hero-poster::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 84px;
  height: 24px;
  background: var(--tape);
  border-left: 1px dashed rgba(0,0,0,0.25);
  border-right: 1px dashed rgba(0,0,0,0.25);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.hero-poster::before { left: 18px; transform: rotate(-6deg); }
.hero-poster::after  { right: 18px; transform: rotate(5deg); }

.hero-poster img,
.hero-poster video {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.06) saturate(0.9);
}

/* -------------------- Gallery -------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 40px 34px;
  padding: 56px 0 30px;
}

.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--edge);
  padding: 10px 10px 0;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, 0.55);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

/* alternate crooked hang, set per-card in JS via --tilt.
   Cards start dropped + flat, then settle into their tilt when scrolled in. */
.card {
  transform: translateY(34px) rotate(0deg);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3),
              opacity 0.5s ease,
              box-shadow 0.16s ease;
}

.card.in { transform: rotate(var(--tilt, -1deg)); opacity: 1; }

.card.in:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 6px 12px 0 var(--accent);
}

/* strip of masking tape across the top corner — peels up on hover */
.card::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 92px;
  height: 26px;
  transform: translateX(-50%) rotate(var(--tape-tilt, -3deg));
  transform-origin: top center;
  background: var(--tape);
  border-left: 1px dashed rgba(0,0,0,0.25);
  border-right: 1px dashed rgba(0,0,0,0.25);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transition: transform 0.22s ease;
}

.card.in:hover::before {
  transform: translateX(-50%) rotate(var(--tape-tilt, -3deg)) translateY(-6px) scaleY(0.82);
}

.card video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: cover;
  filter: contrast(1.05) saturate(0.92);
}

/* portrait (phone-filmed) videos: show the whole frame, letterboxed */
.card video.portrait {
  object-fit: contain;
}

.card-body {
  padding: 14px 12px 20px;
}

.card-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--ink-dim);
  font-size: 0.82rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-meta .date {
  color: var(--paper);
  background: var(--accent-2);
  padding: 1px 7px;
  font-weight: 700;
  transform: rotate(-1.5deg);
  display: inline-block;
}

.card-meta .venue::before { content: "◆ "; color: var(--accent); }

.card-desc {
  margin: 0;
  color: var(--ink);
  font-size: 0.92rem;
  opacity: 0.88;
}

/* -------------------- Empty state -------------------- */
.empty-state {
  text-align: center;
  padding: 90px 20px;
  color: var(--ink-dim);
}

.empty-icon { font-size: 58px; margin-bottom: 12px; transform: rotate(-6deg); display: inline-block; }

.empty-state h2 {
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--ink);
  font-size: 2rem;
}

.empty-state code {
  background: var(--accent);
  color: #fff;
  padding: 2px 7px;
  font-size: 0.85em;
}

/* -------------------- Footer -------------------- */
.site-footer {
  border-top: 3px solid var(--ink);
  padding: 26px 0 40px;
  margin-top: 30px;
  color: var(--ink-dim);
  font-size: 0.8rem;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.site-footer p { margin: 0; }

@media (max-width: 520px) {
  .gallery { gap: 34px 20px; padding-top: 42px; }
  .card.in { transform: rotate(0deg); }
}

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .brand-mark, .site-header h1 { animation: none; }
  .card {
    transition: none;
    transform: rotate(var(--tilt, -1deg));
    opacity: 1;
  }
}