/* 10 VHS Slasher: a rental tape. Scanlines, chromatic titles, a tracking band, a static flash between pages. */
[data-world="vhs-slasher"] {
  --grain: 0.05;
  --title-case: uppercase;
  --enter: snap 80ms steps(1, end);
}
@keyframes snap { from { opacity: 0; } to { opacity: 1; } }
@keyframes roll { from { top: -16%; } to { top: 112%; } }
@keyframes wobble { 0%, 100% { transform: none; } 33% { transform: translateX(2px) skewX(-1deg); } 66% { transform: translateX(-2px) skewX(1deg); } }

/* scanlines at 6%, under the type */
[data-world="vhs-slasher"] .texture::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 3px);
}
[data-world="vhs-slasher"] .hero-title, [data-world="vhs-slasher"] .block-title { text-shadow: var(--glow); }
[data-world="vhs-slasher"] .btn-primary { box-shadow: none; }
[data-world="vhs-slasher"] .tracking {
  position: absolute; left: 0; right: 0; height: 14%; top: -16%;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 35%, transparent) 0 2px, transparent 2px 9px),
    linear-gradient(transparent, color-mix(in srgb, var(--ink) 22%, transparent), transparent);
  animation: roll 1.2s linear 250ms 1 forwards;
}
/* the on-screen display, top-left like a real deck */
[data-world="vhs-slasher"] .osd {
  position: absolute; left: var(--space-3); top: var(--space-2); font-family: var(--font-label);
  font-size: clamp(1rem, 2.4vw, 1.5rem); color: var(--ink); text-shadow: 0 0 6px var(--ground), 0 0 2px var(--ground);
}
/* rental stickers on tapes */
[data-world="vhs-slasher"] .card.video .card-body { position: relative; padding-right: 7.5em; }
[data-world="vhs-slasher"] .card.video .card-body::after {
  content: "BE KIND REWIND"; content: "BE KIND REWIND" / "";
  position: absolute; right: var(--space-3); top: var(--space-3); transform: rotate(4deg);
  background: var(--fill); color: var(--on-fill); font-family: var(--font-label); font-size: 1rem; line-height: 1.2;
  padding: 0.1em 0.45em; border-radius: var(--radius); max-width: 6.5em; text-align: center;
}
[data-world="vhs-slasher"] .embed:hover .poster, [data-world="vhs-slasher"] .embed:hover .ph { animation: wobble 260ms steps(3, end) infinite; }
[data-world="vhs-slasher"] .eyebrow, [data-world="vhs-slasher"] .meta, [data-world="vhs-slasher"] .fine { font-size: 1.05rem; letter-spacing: 0.04em; }
/* 150 ms of static on page change (vhs-slasher.js) */
[data-world="vhs-slasher"].static .curtain {
  opacity: 1; transition: none; background-color: var(--ground);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}