/* AI Videos v7 overrides */
:root{ --film-speed: 6.6667s; }
@media (max-width: 1024px){ :root{ --film-speed: 5.3333s; } }
@media (max-width: 640px){  :root{ --film-speed: 4s; } }

#aivideos-hero{ position: relative; }
#aivideos-hero::before,#aivideos-hero::after{
  content:""; position:absolute; left:0; width:100%;
  background:#000; z-index:4; pointer-events:none;
}
#aivideos-hero::before{ top:0; height: var(--rail-top-y); }
#aivideos-hero::after{
  top: calc(var(--rail-bottom-y) + var(--film-rail));
  height: calc(100svh - (var(--rail-bottom-y) + var(--film-rail)));
}

.hero::before,.hero::after,.filmstrip-edge::before,.filmstrip-edge::after{ z-index:5 !important; }
#aivideos-hero, #aivideos-hero canvas, #aivideos-hero > *{ z-index:2; position:relative; }

@media (min-width:1025px){
  :root{ --rail-top-y: calc(8svh - var(--film-rail)); }
}
@media (max-width:640px){
  :root{ --rail-bottom-y: calc(84svh + (2 * var(--film-rail))); }
}

/* blog title class ready if needed */
.section-title.blog-title{ letter-spacing:0.01em; }

#watch .section-title{ margin-bottom: clamp(16px, 2.4vh, 28px); }

/* v7.2: Intro reversed to black on yellow */
#intro, .intro { background:#ffd200 !important; color:#000 !important; }
#intro .section-title, .intro .section-title { color:#000 !important; }
#intro .section-sub, .intro .section-sub { color:#111 !important; opacity:.95; }
#intro .btn, .intro .btn { background:#000 !important; color:#ffd200 !important; border-color:#000 !important; }
#intro .btn:hover, .intro .btn:hover { background:#111 !important; color:#ffd200 !important; }