/* Special "new badge" popup animations — badge admin → Popup animation
   (tgv_fun_badge_popup_styles()). hoh.js adds .is-popup-{style} to
   #hoh-badge-won-dialog; only loaded on a page that switched a style on
   (tgv_hoh_enable_badge_popup_styles(), view.php). */

/* TV GLITCH — the badge is pulled off a cursed tape: the dialog switches on
   like an old CRT, static + "TRACKING…" clears, the badge jumps out of the
   screen and keeps glitching (same 5.3s burst as CLAUDE.md "Shaking + Glitch"). */
.hoh-dialog.hoh-badge-detail.is-popup-tv-glitch{overflow:hidden;border:1px solid #a4804e99;border-radius:0;background:radial-gradient(ellipse at center,#1d2a2b 0%,#0a0f10 70%,#050708 100%);box-shadow:inset 0 0 0 6px #080c0d,inset 0 0 70px #000,0 30px 80px #000c;color:#efe6d1}
.hoh-dialog.hoh-badge-detail.is-popup-tv-glitch h2{color:#f4ead3;text-shadow:2px 0 0 #ff001399,-2px 0 0 #49dfef99}
.hoh-dialog.hoh-badge-detail.is-popup-tv-glitch .hoh-kicker{color:#ff4b4b;letter-spacing:.18em}
.hoh-dialog.hoh-badge-detail.is-popup-tv-glitch .hoh-badge-name{color:#f4ead3}
.hoh-dialog.hoh-badge-detail.is-popup-tv-glitch .hoh-close{color:#efe6d1}
/* Scanlines stay on top of everything for the whole popup. */
.hoh-dialog.hoh-badge-detail.is-popup-tv-glitch::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#0000 0 2px,#00000055 2px 4px);z-index:3}
/* Static overlay — hoh.js adds it, the animation below clears it. */
.hoh-popup-fx{position:absolute;inset:0;z-index:4;display:none;place-items:center;pointer-events:none;background:#111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px}
.is-popup-tv-glitch .hoh-popup-fx{display:grid;opacity:0;visibility:hidden}
.hoh-popup-fx-text{padding:4px 12px;background:#000c;color:#f4ead3;font:700 18px/1.2 Poppins,Arial,sans-serif;letter-spacing:.3em}

@media (prefers-reduced-motion: no-preference){
  .is-popup-tv-glitch.hoh-dialog[open]{animation:hoh-tv-on .6s cubic-bezier(.2,.8,.2,1) both}
  .is-popup-tv-glitch .hoh-popup-fx{visibility:visible;animation:hoh-tv-static 1.5s steps(1,end) .15s both,hoh-tv-noise .25s steps(4) infinite}
  .is-popup-tv-glitch .hoh-popup-fx-text{animation:hoh-tv-blink .3s steps(1,end) infinite}
  .is-popup-tv-glitch h2{animation:hoh-tv-title 5.3s steps(1,end) 1.6s infinite}
  /* Wrapper jumps out of the screen; the <img> inside glitches — two
     elements so the two transforms never fight (CLAUDE.md rule). */
  .is-popup-tv-glitch .hoh-badge-won-grid .hoh-badge{animation:hoh-tv-jump .8s cubic-bezier(.2,1.6,.4,1) 1.3s both}
  .is-popup-tv-glitch .hoh-badge-won-grid .hoh-badge:nth-child(2){animation-delay:1.45s}
  .is-popup-tv-glitch .hoh-badge-won-grid .hoh-badge:nth-child(n+3){animation-delay:1.6s}
  .is-popup-tv-glitch .hoh-badge-won-grid :is(.hoh-badge-art,.hoh-badge-fallback){animation:hoh-tv-glitch 5.3s steps(1,end) 2.1s infinite}
}

/* CRT power-on: a bright line opens into the full picture. */
@keyframes hoh-tv-on{
  0%{transform:scale(.6,.004);filter:brightness(6)}
  35%{transform:scale(1,.004);filter:brightness(5)}
  65%{transform:scale(1,1.04);filter:brightness(1.8)}
  100%{transform:none;filter:none}
}
/* Static holds, flickers off and back once, then clears. */
@keyframes hoh-tv-static{
  0%{opacity:1;visibility:visible}
  55%{opacity:.85}
  62%{opacity:0}
  68%{opacity:.9}
  80%{opacity:.35}
  90%,100%{opacity:0;visibility:hidden}
}
@keyframes hoh-tv-noise{
  0%{background-position:0 0}
  25%{background-position:-40px 60px}
  50%{background-position:70px -30px}
  75%{background-position:-80px -70px}
}
@keyframes hoh-tv-blink{0%{opacity:1}50%{opacity:.2}}
/* Badge jumps out of the screen at the viewer, then settles. */
@keyframes hoh-tv-jump{
  0%{opacity:0;transform:scale(.3);filter:blur(6px) brightness(3)}
  45%{opacity:1;transform:scale(1.35);filter:blur(0) brightness(1.6)}
  100%{opacity:1;transform:none;filter:none}
}
/* Title: short RGB-split jolts on the same 5.3s rhythm as the badge. */
@keyframes hoh-tv-title{
  0%{transform:translate(-3px,0);text-shadow:4px 0 0 #ff0013,-4px 0 0 #49dfef}
  1.13%{transform:translate(3px,1px);text-shadow:-4px 0 0 #ff0013,4px 0 0 #49dfef}
  2.26%{transform:translate(-2px,-1px)}
  3.40%,100%{transform:none;text-shadow:2px 0 0 #ff001399,-2px 0 0 #49dfef99}
}
/* Same burst as CLAUDE.md "Shaking + Glitch Icon Animation" — kept verbatim. */
@keyframes hoh-tv-glitch{
  0%{filter:drop-shadow(3px 0 0 #ff0013) drop-shadow(-3px 0 0 #49dfef);clip-path:inset(8% 0 55% 0);transform:translate(-6px,3px)}
  1.13%{filter:drop-shadow(-3px 0 0 #ff0013) drop-shadow(3px 0 0 #49dfef);clip-path:inset(45% 0 15% 0);transform:translate(5px,-4px)}
  2.26%{filter:drop-shadow(2px 0 0 #ff0013) drop-shadow(-2px 0 0 #49dfef);clip-path:inset(0 0 70% 0);transform:translate(-4px,-3px)}
  3.40%{filter:drop-shadow(-2px 0 0 #ff0013) drop-shadow(2px 0 0 #49dfef);clip-path:inset(60% 0 5% 0);transform:translate(6px,4px)}
  4.53%{filter:drop-shadow(3px 0 0 #ff0013) drop-shadow(-3px 0 0 #49dfef);clip-path:inset(20% 0 40% 0);transform:translate(-5px,2px)}
  5.66%,100%{filter:none;clip-path:none;transform:translate(0,0)}
}