/* ==========================================================================
   CHANNEL — 2026-10. Broadcast-style motion in the Magic of V palette.
   Rule: nothing is hidden by CSS before JS runs, and photos never animate.
   ========================================================================== */

/* ---------- 1. Static burst (channel change between sections) --------- */
#ch-static {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  width: 100%; height: 100%; opacity: 0; mix-blend-mode: screen;
  transition: opacity 120ms linear;
}
#ch-static.on { opacity: 0.55; }
#ch-roll {
  position: fixed; left: 0; right: 0; height: 18vh; z-index: 901; pointer-events: none;
  top: -20vh; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(212,175,55,0.10) 40%, rgba(255,255,255,0.10) 50%, rgba(212,175,55,0.10) 60%, transparent);
}
#ch-roll.go { animation: ch-roll 420ms linear 1; }
@keyframes ch-roll { 0% { top: -20vh; opacity: 1; } 100% { top: 100vh; opacity: 0; } }

/* Faint permanent scanlines over the whole room */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 899; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.12) 2px 3px);
  mix-blend-mode: multiply; opacity: 0.5;
}

/* ---------- 2. Channel labels on kickers ------------------------------ */
.ch-no {
  display: inline-block; margin-right: 0.7em; padding: 0.12em 0.5em;
  border: 1px solid rgba(212,175,55,0.55); color: var(--gold);
  font-size: 0.92em; letter-spacing: 0.14em;
}
.ch-caret::after {
  content: '\2588'; margin-left: 0.2em; color: var(--gold);
  animation: ch-blink 0.9s steps(1) infinite; font-size: 0.8em;
}
@keyframes ch-blink { 50% { opacity: 0; } }

/* ---------- 3. Decode headlines: ghost letters while resolving -------- */
.dc-ghost { opacity: 0.22; color: var(--gold-hi); }
.dc-suit { color: var(--gold); opacity: 0.85; }

/* ---------- 4. Diagonal section cuts ----------------------------------- */
@media (min-width: 700px) {
  #events, #show, #craft, #faq {
    clip-path: polygon(0 3.2vw, 62% 0, 100% 2.2vw, 100% 100%, 0 100%);
    padding-top: calc(5.5rem + 3vw);
  }
  #reviews, #portraits {
    clip-path: polygon(0 0, 38% 2.6vw, 100% 0.4vw, 100% 100%, 0 100%);
    padding-top: calc(5.5rem + 2.6vw);
  }
}

/* ---------- 5. Gold tape marquee bands ---------------------------------- */
.tape {
  position: relative; z-index: 3; overflow: hidden; white-space: nowrap;
  margin: -1.6rem -2vw; padding: 0.95rem 0;
  transform: rotate(-2.2deg);
  background: linear-gradient(180deg, #1a0f24, #120a19);
  border-top: 1px solid var(--gold); border-bottom: 1px solid var(--gold);
  box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 3px 0 #120a19, inset 0 4px 0 rgba(212,175,55,0.25), inset 0 -3px 0 #120a19, inset 0 -4px 0 rgba(212,175,55,0.25);
}
.tape.flip { transform: rotate(1.8deg); }
.tape-run { display: inline-flex; animation: tape-roll 38s linear infinite; }
.tape.flip .tape-run { animation-direction: reverse; animation-duration: 44s; }
.tape span {
  font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 700;
  font-size: clamp(1.3rem, 3.2vw, 2.4rem); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); padding: 0 1.1rem; text-shadow: 0 0 22px rgba(212,175,55,0.35);
}
.tape span i { font-style: normal; color: var(--text); opacity: 0.85; font-size: 0.6em; vertical-align: middle; padding: 0 0.6rem; }
@keyframes tape-roll { to { transform: translateX(-50%); } }

/* ---------- 6. Giant ghost words behind sections ---------------------- */
.ghost-word {
  position: absolute; left: 0; bottom: 0.4rem; z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(3.4rem, 11vw, 9.5rem); line-height: 0.85; letter-spacing: 0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(212,175,55,0.16);
  will-change: transform;
}
section > .wrap { position: relative; z-index: 1; }

/* ---------- 7. Show clock (fixed corner timecode) --------------------- */
#show-clock {
  position: fixed; right: 14px; bottom: 12px; z-index: 950; pointer-events: none;
  font-family: 'Courier New', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); opacity: 0.8; text-shadow: 0 0 8px rgba(212,175,55,0.45);
  background: rgba(18,10,25,0.6); padding: 4px 8px; border: 1px solid rgba(212,175,55,0.25);
}
#show-clock b { color: #e0455a; font-weight: 400; animation: ch-blink 1.2s steps(1) infinite; }

/* ---------- 8. Cards lift and tilt toward the cursor (not photos) ----- */
.event-card, .review-card { transform-style: preserve-3d; will-change: transform; }
.tilt-on { transition: transform 120ms linear !important; }
.tilt-off { transition: transform 600ms cubic-bezier(.2,.7,.3,1) !important; }

/* ---------- 9. Hero: flicker-on title + typed sub-line ---------------- */
.hero h1.on-air { animation: on-air 1.1s steps(1) 1; }
@keyframes on-air {
  0% { opacity: 0.1; } 8% { opacity: 1; } 12% { opacity: 0.2; } 20% { opacity: 1; }
  26% { opacity: 0.5; } 30%, 100% { opacity: 1; }
}

/* ---------- 10. Magnetic buttons -------------------------------------- */
.btn { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  #ch-static, #ch-roll, .ghost-word { display: none !important; }
  .tape-run { animation: none; }
  .ch-caret::after { animation: none; }
}
@media (max-width: 699px) {
  #show-clock { font-size: 9px; bottom: 8px; right: 8px; }
  .tape { margin: -1rem -4vw; }
}
main { overflow-x: clip; }
main > section { overflow-x: clip; }