/* Glitches & Stitches' skin: the glitch terminal on its pages, header and footer (each scoped to .skin-glitches-and-stitches). */
/* Its pages sit under a thin AutoStacc strip. Colours, buttons and tiles: look.css (loaded first). Look: docs/brand.md. */


.skin-glitches-and-stitches {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  color-scheme: dark;
}
.skin-glitches-and-stitches ::selection { background: var(--accent); color: var(--bg); }

/* CRT screen over the project's window: scanlines plus darkened edges, and a faint band rolling down */
.skin-glitches-and-stitches::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55) 100%);
  z-index: 100;
}
.skin-glitches-and-stitches::before {
  content: "";
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 30vh;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(51,255,102,.04), transparent);
  transform: translateY(-100%);
  animation: gs-roll 9s linear var(--clock, 0s) infinite;
  z-index: 99;
}
@keyframes gs-roll { to { transform: translateY(100vh); } }

/* blinking block cursor, e.g. after the hero tagline */
.skin-glitches-and-stitches .cursor::after { content: "\2588"; margin-left: .15em; animation: blink 1s steps(1) infinite; }

/* ---------- glitch title: twitches in short bursts ---------- */
.skin-glitches-and-stitches .glitch { font-weight: 400; line-height: 1; animation: glitch-skew 4.2s .8s steps(1) infinite; }
@keyframes power-on {
  0% { scale: 1.15 .02; opacity: 0; }
  40% { scale: 1.05 .06; opacity: 1; }
  70% { scale: .98 1.04; }
  100% { scale: 1 1; opacity: 1; }
}
@keyframes glitch-skew {
  0%, 89%, 100% { transform: none; }
  90% { transform: skewX(-8deg) translateX(2px); }
  92% { transform: skewX(5deg) translateX(-3px); }
  94% { transform: none; }
  96% { transform: translateX(4px); }
}
.skin-glitches-and-stitches .glitch::before,
.skin-glitches-and-stitches .glitch::after {
  content: attr(data-text);
  /* decorative copies: empty alt text keeps screen readers from reading the title three times */
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.skin-glitches-and-stitches .glitch::before {
  color: var(--accent-2);
  transform: translate(-3px, 0);
  clip-path: inset(0 0 55% 0);
  animation: glitch-a 4.2s .8s infinite steps(1);
  mix-blend-mode: screen;
}
.skin-glitches-and-stitches .glitch::after {
  color: var(--accent);
  transform: translate(3px, 0);
  clip-path: inset(55% 0 0 0);
  animation: glitch-b 4.2s .8s infinite steps(1);
  mix-blend-mode: screen;
}
@keyframes glitch-a {
  0%, 89%, 100% { transform: translate(-3px, 0); clip-path: inset(0 0 55% 0); }
  90% { transform: translate(-10px, -2px); clip-path: inset(20% 0 40% 0); }
  92% { transform: translate(6px, 1px); clip-path: inset(60% 0 10% 0); }
  94% { transform: translate(-4px, 0); clip-path: inset(5% 0 80% 0); }
  96% { transform: translate(8px, 0); clip-path: inset(70% 0 5% 0); }
}
@keyframes glitch-b {
  0%, 89%, 100% { transform: translate(3px, 0); clip-path: inset(55% 0 0 0); }
  90% { transform: translate(10px, 2px); clip-path: inset(10% 0 70% 0); }
  93% { transform: translate(-7px, 0); clip-path: inset(40% 0 30% 0); }
  95% { transform: translate(5px, -1px); clip-path: inset(80% 0 2% 0); }
}
/* js/motion.js "zaps" a random visible title now and then (the jitter keyframes are in look.css) */
.skin-glitches-and-stitches .zap { animation: jitter .35s steps(1); }

/* section titles flicker on like a terminal line */
.motion .skin-glitches-and-stitches .section-head.reveal.in { animation-name: flicker; animation-duration: .5s; }
@keyframes flicker {
  0% { opacity: 0; }
  15% { opacity: .9; }
  25% { opacity: .15; }
  45% { opacity: 1; }
  55% { opacity: .5; }
  100% { opacity: 1; }
}

/* Pieces fitted together: alternate panels have a small step in their top and bottom edges. No seam lines. */
.skin-glitches-and-stitches .alt {
  clip-path: polygon(0 10px, 37% 10px, 37% 0, 100% 0, 100% calc(100% - 10px), 68% calc(100% - 10px), 68% 100%, 0 100%);
}

/* ---------- page changes inside the project: the old page slices out, the next one skews in ---------- */
html:has(.skin-glitches-and-stitches):active-view-transition-type(page)::view-transition-old(root) { animation: page-out .16s steps(3) both; }
html:has(.skin-glitches-and-stitches):active-view-transition-type(page)::view-transition-new(root) { animation: page-in .3s var(--snap) both; }
@keyframes page-out {
  0% { opacity: 1; clip-path: inset(0); transform: none; }
  34% { clip-path: inset(0 0 42% 0); transform: translateX(-8px); }
  67% { clip-path: inset(36% 0 8% 0); transform: translateX(10px); }
  100% { opacity: 0; clip-path: inset(48% 0 48% 0); transform: translateX(-4px); }
}
@keyframes page-in {
  0% { opacity: 0; clip-path: inset(46% 0 46% 0); transform: translateX(-12px) skewX(-5deg); }
  45% { opacity: 1; clip-path: inset(0); transform: translateX(4px) skewX(2deg); }
  100% { opacity: 1; clip-path: inset(0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skin-glitches-and-stitches::before { display: none; }
  .skin-glitches-and-stitches .glitch, .skin-glitches-and-stitches .glitch::before, .skin-glitches-and-stitches .glitch::after,
  .skin-glitches-and-stitches .cursor::after, .skin-glitches-and-stitches .zap, .skin-glitches-and-stitches .ph-logo:hover .ph-mark { animation: none; }
}

/* ---------- its own header (js/project-frame.js): the glitch-terminal header it had before AutoStacc ---------- */
.skin-glitches-and-stitches.project-header { background: rgba(0, 0, 0, .88); backdrop-filter: blur(8px); }
.skin-glitches-and-stitches .ph-logo { font-family: var(--display); font-size: 1.6rem; letter-spacing: .04em; color: var(--accent); text-shadow: var(--glow); }
.skin-glitches-and-stitches .ph-amp { color: var(--accent-2); text-shadow: var(--glow-2); }
.skin-glitches-and-stitches .ph-mark { box-shadow: 0 0 10px rgba(51,255,102,.25); }
.skin-glitches-and-stitches .ph-logo:hover .ph-mark { animation: jitter .35s steps(1); }
.skin-glitches-and-stitches .ph-nav a {
  color: var(--accent-dim);
  font-weight: 500;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .2s var(--snap), color .12s;
}
.skin-glitches-and-stitches .ph-nav a:hover { background-size: 100% 1px; }
.skin-glitches-and-stitches .ph-nav a:hover, .skin-glitches-and-stitches .ph-nav a[aria-current] { color: var(--accent); text-shadow: var(--glow); }
.skin-glitches-and-stitches .ph-nav a[aria-current]::before { content: "> "; color: var(--accent-2); }
/* sound switch: a terminal flag, not a pill */
.skin-glitches-and-stitches .snd { min-height: 36px; padding: 6px 4px; border: 0; border-radius: 0; background: none; color: var(--accent-dim); font-family: var(--font); font-size: .85rem; }
.skin-glitches-and-stitches .snd[aria-pressed="true"], .skin-glitches-and-stitches .snd:hover { color: var(--accent); text-shadow: var(--glow); }
.skin-glitches-and-stitches .ph-toggle { border-radius: 0; color: var(--accent); }
.skin-glitches-and-stitches .ph-toggle-icon::before { content: "[\2261]"; }
.skin-glitches-and-stitches .ph-toggle[aria-expanded="true"] .ph-toggle-icon::before { content: "[\00d7]"; }
@media (max-width: 900px) {
  .skin-glitches-and-stitches .ph-logo { font-size: 1.45rem; }
  .skin-glitches-and-stitches .ph-nav a {
    font-family: var(--display);
    font-size: 2rem;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--accent);
    text-shadow: var(--glow);
  }
  .skin-glitches-and-stitches .ph-nav a::before { content: "> "; color: var(--accent-2); text-shadow: var(--glow-2); }
  .skin-glitches-and-stitches .ph-nav a:hover { background-size: 0 1px; color: var(--text); }
  .skin-glitches-and-stitches .ph-nav a[aria-current] { color: var(--text); }
  .skin-glitches-and-stitches .snd::after { content: " sound effects"; color: var(--accent-dim); text-shadow: none; }
}
@media (max-width: 350px) {
  .skin-glitches-and-stitches .ph-logo { font-size: 1.22rem; letter-spacing: .02em; }
}

/* ---------- its own footer ---------- */
.skin-glitches-and-stitches.project-footer { border-top-color: var(--line); color: var(--accent-dim); }
.skin-glitches-and-stitches.project-footer .footer-project > span { color: var(--accent); font-family: var(--display); font-size: 1.3rem; text-shadow: var(--glow); }