/* ============================================================
   BALLSY NEON FRAMES — drop-in, additive.
   1) Link this file in <head>:  <link rel="stylesheet" href="neon-frames.css">
   2) Wrap any video embed:
      <div class="neon-frame neon-gold">
        <span class="neon-tag">ON AIR</span>
        <div class="neon-inner">
          <iframe src="https://www.youtube.com/embed/YOUR-ID?rel=0" allowfullscreen loading="lazy"></iframe>
        </div>
        <p class="neon-caption">PRESS PLAY. YOU KNOW YOU WANT TO.</p>
      </div>
   Colours: neon-gold / neon-purple / neon-pink / neon-cyan / neon-green
   ============================================================ */
.neon-frame{
  --neon:#FFE600;
  position:relative;
  max-width:900px;
  margin:0 auto 72px;
  border-radius:18px;
  background:#000;
  isolation:isolate;
}
.neon-purple{--neon:#9B30FF}
.neon-pink{--neon:#FF2D8F}
.neon-cyan{--neon:#00E5FF}
.neon-green{--neon:#00D97E}

.neon-frame::before,
.neon-frame::after{
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:20px;
  z-index:-1;
  background:var(--neon);
}
.neon-frame::before{
  filter:blur(22px);
  opacity:.55;
  animation:neonBreathe 2.6s ease-in-out infinite;
}
.neon-frame::after{
  filter:blur(4px);
  opacity:.9;
  animation:neonBreathe 2.6s ease-in-out infinite .15s;
}
@keyframes neonBreathe{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:.95;transform:scale(1.012)}
}

.neon-frame .neon-inner{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:2px solid var(--neon);
  background:#000;
}
.neon-frame iframe,
.neon-frame video{
  display:block;width:100%;aspect-ratio:16/9;border:0;
}

.neon-frame:hover::before{animation-duration:1.1s;filter:blur(32px)}
.neon-frame:hover::after{animation-duration:1.1s}
.neon-frame{transition:transform .3s ease}
.neon-frame:hover{transform:scale(1.015)}

.neon-tag{
  position:absolute;
  top:-14px;left:24px;
  z-index:2;
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;font-weight:700;
  letter-spacing:.14em;
  background:#0a0a0a;
  color:var(--neon);
  border:1.5px solid var(--neon);
  border-radius:999px;
  padding:5px 14px 5px 26px;
}
.neon-tag::before{
  content:"";
  position:absolute;
  left:11px;top:50%;
  width:7px;height:7px;
  margin-top:-3.5px;
  border-radius:50%;
  background:var(--neon);
  animation:blinkDot 1.3s steps(2,start) infinite;
}
@keyframes blinkDot{50%{opacity:.15}}

.neon-caption{
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  color:var(--neon);
  text-align:center;
  margin-top:14px;
  letter-spacing:.08em;
  opacity:.85;
}

@media (prefers-reduced-motion:reduce){
  .neon-frame::before,.neon-frame::after,.neon-tag::before{animation:none}
  .neon-frame:hover{transform:none}
}