/* ════════════════════════════════════════════════════════════════════════
   zVideo_demo.css — a ONE-OFF dressed-up player (opt in: zBrush [page, leaf, zVideo_demo]).
   Proof of how far a zVideo reskins purely through your own _zClass on the canonical
   surface — here a full neon cinema marquee. _zClass lands on the inner <video>; the
   animated gradient ring, pulsing glow and marquee caption are reached via
   figure:has(> video.zVideo-marquee) so it touches NOTHING else on the page.
   Bifrost-only — the terminal prints plain metadata.
   ════════════════════════════════════════════════════════════════════════ */

@keyframes zVideo-pulse {
    0%, 100% { box-shadow: 0 0 28px rgba(255, 0, 128, 0.45), 0 0 70px rgba(0, 229, 255, 0.28); }
    50%      { box-shadow: 0 0 44px rgba(0, 229, 255, 0.55), 0 0 90px rgba(255, 0, 128, 0.38); }
}
@keyframes zVideo-hue {
    to { background-position: 300% 0; }
}

/* the frame — a dark synthwave panel that pulses with neon */
figure:has(> video.zVideo-marquee) {
    position:      relative;
    max-width:     620px;
    margin:        1.6rem auto;
    padding:       18px 22px 12px;
    background:    linear-gradient(150deg, #1b0033 0%, #2d0a4e 52%, #050018 100%);
    border-radius: 18px;
    animation:     zVideo-pulse 3.2s ease-in-out infinite;
    transition:    transform 0.25s ease;
}
figure:has(> video.zVideo-marquee):hover { transform: scale(1.02); }

/* the animated gradient ring — a masked border that hue-shifts forever */
figure:has(> video.zVideo-marquee)::before {
    content:       '';
    position:      absolute;
    inset:         0;
    padding:       2px;
    border-radius: 18px;
    background:     linear-gradient(120deg, #ff0080, #ff8a00, #00e5ff, #ff0080);
    background-size: 300% 300%;
    animation:     zVideo-hue 6s linear infinite;
    -webkit-mask:  linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}

/* the player itself — black letterbox set inside the neon frame */
video.zVideo-marquee {
    display:       block;
    width:         100%;
    height:        auto;
    border-radius: 10px;
    background:    #000;
    box-shadow:    0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 0 60px rgba(0, 0, 0, 0.6);
}

/* the marquee caption — glowing neon sign */
figure:has(> video.zVideo-marquee) > figcaption {
    margin:         0;
    padding:        0.95rem 0.4rem 0.25rem;
    text-align:     center;
    font-weight:    800;
    font-size:      1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color:          #00e5ff;
    text-shadow:    0 0 8px #00e5ff, 0 0 20px rgba(255, 0, 128, 0.7);
}
figure:has(> video.zVideo-marquee) > figcaption::before { content: '🎬  '; }