/* Home page only: hero, shows, about, the loop, newsletter. */

/* ---------- hero ---------- */
.hero {
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 0;
  background:
    radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent-2) 20%, transparent), transparent 45%),
    radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 45%);
}
/* the hero's column fills the width, so the logo sizes against it (not the screen) and never overflows */
.hero > .wrap { width: 100%; }
/* latest-release line above the title */
.kicker {
  display: inline-block;
  margin-bottom: 22px;
  padding: 6px 12px;
  border: 1px solid var(--accent-2);
  color: var(--accent);
  text-shadow: var(--glow);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .85rem;
  box-shadow: 3px -2px 0 color-mix(in srgb, var(--accent-2) 35%, transparent);
  transition: box-shadow .15s var(--snap), border-color .15s;
}
.kicker span { color: var(--accent-2); text-shadow: var(--glow-2); }
.kicker:hover { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 30%, transparent); }
/* the logo (img/projects/glitches-and-stitches/logo.png, from docs/assets/gs-logo): powers on, then twitches in short
   bursts; two offset copies slice through it like the old glitch title */
.hero-logo {
  position: relative;
  width: min(760px, 100%);
  margin: 0 auto 18px;
  /* the slices shift sideways during a burst; keep them inside the logo's box (it has its own margin) */
  overflow: clip;
  animation: power-on .5s var(--snap) both, glitch-skew 4.2s .8s steps(1) infinite;
}
.hero-logo img { display: block; width: 100%; height: auto; }
.hero-logo::before, .hero-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/img/projects/glitches-and-stitches/logo.png") center / 100% auto no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}
.hero-logo::before, .hero-logo::after { opacity: 0; }
.hero-logo::before { filter: hue-rotate(150deg); animation: logo-tear-a 4.2s .8s infinite steps(1); }
.hero-logo::after { animation: logo-tear-b 4.2s .8s infinite steps(1); }
/* the copies show only during the burst (90-96% of each cycle), as torn slices */
@keyframes logo-tear-a {
  0%, 89%, 97%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  90% { opacity: 1; transform: translate(-12px, -2px); clip-path: inset(18% 0 58% 0); }
  92% { opacity: 1; transform: translate(8px, 1px); clip-path: inset(62% 0 14% 0); }
  94% { opacity: 1; transform: translate(-6px, 0); clip-path: inset(6% 0 80% 0); }
  96% { opacity: 1; transform: translate(10px, 0); clip-path: inset(72% 0 6% 0); }
}
@keyframes logo-tear-b {
  0%, 89%, 97%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  90% { opacity: 1; transform: translate(12px, 2px); clip-path: inset(40% 0 38% 0); }
  93% { opacity: 1; transform: translate(-9px, 0); clip-path: inset(10% 0 70% 0); }
  95% { opacity: 1; transform: translate(6px, -1px); clip-path: inset(84% 0 2% 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logo, .hero-logo::before, .hero-logo::after { animation: none; }
  .hero-logo::before, .hero-logo::after { display: none; }
}
.hero p {
  color: var(--accent);
  /* small enough on phones that the five-word chant stays on one line */
  font-size: clamp(.8rem, 3.6vw, 1.15rem);
  margin: 0 0 36px;
}
.hero .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.motion .hero .actions { animation: rise .45s var(--snap) .9s both; }
/* keep the line's height while the tagline types itself out */
.hero p[data-type] { min-height: 1.6em; }

/* ---------- shows ---------- */
.shows { border-top: 1px solid var(--line); }
.show {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.shows-empty { padding: 18px 0; }
.show time { color: var(--accent-2); font-weight: 700; text-shadow: var(--glow-2); }
.show .where strong { display: block; font-size: 1.1rem; }
.show .where span { color: var(--muted); }
@media (max-width: 600px) {
  .show { grid-template-columns: 1fr; gap: 6px; }
  .show .btn { justify-self: start; }
}

/* ---------- about ---------- */
.about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.about .art {
  position: relative;
  aspect-ratio: 1;
  border: 1px solid var(--accent-2);
  border-radius: var(--radius);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 8%, transparent) 0 1px, transparent 1px 6px),
    var(--bg);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(5rem, 13vw, 9rem);
  text-shadow: 3px 0 var(--accent-2), -3px 0 var(--accent);
}
/* the monogram is torn in half and put back together slightly misaligned */
.about .art span { position: relative; color: transparent; text-shadow: none; }
.about .art span::before,
.about .art span::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--accent);
  text-shadow: 3px 0 var(--accent-2), var(--glow);
}
.about .art span::before { clip-path: inset(0 0 52% 0); transform: translateX(-7px); }
.about .art span::after { clip-path: inset(48% 0 0 0); transform: translateX(7px); }
@media (max-width: 800px) {
  .about { grid-template-columns: 1fr; }
}

/* ---------- the loop: a terminal log of the process ---------- */
.loop-intro { color: var(--muted); margin: 0 0 28px; }
.loop {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  max-width: 760px;
}
.loop li {
  counter-increment: step;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 16px;
  padding: 10px 0;
}
.loop strong {
  min-width: 12ch;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.loop strong::before { content: "[" counter(step, decimal-leading-zero) "] "; color: var(--accent-2); text-shadow: var(--glow-2); }
.loop span { color: var(--muted); }
/* the last step points back to the first */
.loop li:last-child span::after { content: "  \21bb 01"; color: var(--accent-2); text-shadow: var(--glow-2); }

/* ---------- newsletter ---------- */
.newsletter { text-align: center; }
.newsletter .section-head { justify-content: center; }
.newsletter p { color: var(--muted); max-width: 520px; margin: 0 auto 24px; }
.newsletter form {
  display: flex;
  gap: 10px;
  max-width: 480px;
  margin: 0 auto;
}
.newsletter input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.newsletter input::placeholder { color: var(--accent-dim); }
.newsletter input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.form-msg { color: var(--accent-2); text-shadow: var(--glow-2); margin-top: 14px; min-height: 1.5em; }
@media (max-width: 480px) {
  .newsletter form { flex-direction: column; }
}

/* ---------- phones ---------- */
@media (max-width: 600px) {
  /* phones: the hero is as tall as what it holds, so the page starts sooner (owner, 2026-10-22) */
  .hero { min-height: 0; padding: 56px 0 48px; }
  .hero .actions { flex-direction: column; align-items: stretch; max-width: 280px; margin: 0 auto; }
  .kicker { font-size: .72rem; letter-spacing: .05em; }
  .show .btn { justify-self: stretch; }
  .about { gap: 20px; }
  /* phones: the G&S emblem is a small badge beside the text instead of a square of its own (shorter page, 2026-10-22) */
  .about .art { width: 96px; max-width: 96px; margin: 0; font-size: 2.4rem; }
  .loop strong { min-width: 0; }
}