/*
Theme Name: AI Videos v6.7 (Parent)
Version: 6.7
Theme URI: https://aivideos.eu/
Author: AI Videos
Description: v6.7 — Built off the v5.8 base with the same thin header and hero rails.  This release keeps the working v6.5 hero and top bar untouched while refining the mobile menu overlay, centring and reducing the intro headline, adding animated rails to the Film‑Strip Features section, adjusting the prompt generator title size, anchoring the footer on internal pages, and adding a Hire Us section with a Fiverr link.  Additional polish includes per‑breakpoint rail speed/spacing, subtle section fades, card hover effects on desktop, a second intro tagline, lazy‑loading of images and iframes, and a dark header on inner pages.
\g<1>4.8.5
Text Domain: aivideos
*/
:root{ --aiv-yellow:#FFD200; --ring: rgba(255,210,0,.32); }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:#000; color:#fff; overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%; height:auto; display:block}
.container{width:min(1200px,92vw); margin:0 auto}
.section{padding:88px 0}
.alt-black{background:#000;color:#fff}
.alt-white{background:#fff;color:#000}
.alt-yellow{background:var(--aiv-yellow);color:#000}
.badge{display:inline-block;padding:6px 10px;border:1px solid rgba(255,255,255,.24);border-radius:999px;font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.6px}
.grid{display:grid;gap:18px}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:16px}
.card .title{font-weight:900;font-size:22px;margin:12px 0}
.card p{opacity:.9}
.btn{display:inline-block;padding:14px 22px;border-radius:999px;font-weight:900;background:var(--aiv-yellow);color:#000;border:2px solid var(--aiv-yellow);cursor:pointer;box-shadow:0 8px 28px rgba(255,210,0,.20);transition:transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s}
.btn:hover{transform:translateY(-1px) scale(1.02); box-shadow:0 14px 40px var(--ring); border-color:#fff}
.btn.secondary{background:#0b0b0f;color:#fff;border-color:rgba(255,255,255,.22);box-shadow:0 8px 28px rgba(0,0,0,.35)}
.btn.secondary:hover{background:var(--aiv-yellow);color:#000;border-color:#fff;box-shadow:0 14px 40px rgba(255,255,255,.18)}
.alt-yellow .btn.secondary:hover{background:#0b0b0f;color:var(--aiv-yellow);border-color:rgba(0,0,0,.35)}
/* Header */
header.site-header{position:fixed;top:0;left:0;right:0;z-index:70;background:rgba(0,0,0,.62);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06);opacity:0;transform:translateY(-16px);pointer-events:none;transition:opacity .28s,transform .28s}
.site-header.visible{opacity:1;transform:translateY(0);pointer-events:auto}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;max-width:1200px;margin:0 auto}
.brand img{height:96px;width:auto;display:block}
.menu .menu-items{list-style:none;margin:0;padding:0;display:flex;gap:8px;align-items:center}
.menu .menu-items li a{display:block;padding:12px 16px;border-radius:12px;font-weight:900;letter-spacing:.4px;font-size:16px;color:#fff}
.menu .menu-items li a:hover{color:#FFD200}
@media (max-width:900px){ .menu{display:none} }
/* Hamburger + Drawer */
.hamburger{display:none;width:46px;height:40px;align-items:center;justify-content:center;border:2px solid rgba(255,210,0,1);border-radius:12px;background:var(--aiv-yellow)}
.hamburger span{width:22px;height:2px;background:#000;position:relative;display:block}
.hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:#000}
.hamburger span::before{top:-6px}.hamburger span::after{top:6px}
@media (max-width:900px){ .hamburger{display:flex} }
.mobile-drawer{position:fixed;inset:0;display:none;z-index:90}
.mobile-drawer.open{display:block}
.mobile-drawer .overlay{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.mobile-drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(88vw,360px);background:var(--aiv-yellow);color:#000;display:flex;flex-direction:column;gap:8px;box-shadow:-16px 0 60px rgba(0,0,0,.55)}
.mobile-drawer .panel .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:2px solid #000}
.mobile-drawer .panel .drawer-head img{height:52px}
.mobile-drawer .panel .close{width:40px;height:40px;border-radius:10px;border:2px solid #000;background:#000;color:var(--aiv-yellow);font-weight:900;font-size:20px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.mobile-drawer .menu-items{list-style:none;margin:0;padding:10px 16px}
.mobile-drawer .menu-items a{display:block;color:#000;text-decoration:none;font-weight:900;font-size:20px;padding:14px 8px;border-bottom:1px solid rgba(0,0,0,.25)}
.mobile-drawer .menu-items a:active,.mobile-drawer .menu-items a:hover{color:#000;background:rgba(0,0,0,.06)}
/* Hero */
.hero{position:relative;height:100vh;background:#000;display:block;margin-top:0}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Big Section Headline */
.section-title{font-family:'Anton',Impact,Haettenschweiler,'Arial Narrow',sans-serif;font-size:clamp(44px,9vw,132px);line-height:.92;letter-spacing:.5px;margin:0 0 12px;text-transform:uppercase}
@media (min-width:1024px){ .section-title{white-space:nowrap;font-size:clamp(56px,8.2vw,168px);letter-spacing:.3px} }
.section-sub{color:#cfcfcf;font-size:clamp(15px,1.9vw,22px);max-width:1100px}
/* Video embed (borderless full width) */
.video-embed-fw{position:relative;width:100%;padding-top:56.25%;margin:0}
.video-embed-fw iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* Filmstrip */
.filmstrip-edge{position:relative;overflow:hidden}
.filmstrip-edge::before,.filmstrip-edge::after{content:"";position:absolute;left:0;right:0;height:46px;background:linear-gradient(currentColor,currentColor) padding-box, radial-gradient(circle at 45px 23px, transparent 10px, rgba(0,0,0,.9) 10.5px) 0 0/90px 46px repeat-x;color:#0b0d12;opacity:.98;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(0,0,0,.7);animation:filmDrift 22s linear infinite}
.filmstrip-edge::before{top:-1px}.filmstrip-edge::after{bottom:-1px;transform:rotate(180deg)}
.alt-yellow.filmstrip-edge::before,.alt-yellow.filmstrip-edge::after{color:#f2c800;border-top:1px solid rgba(0,0,0,.25);border-bottom:1px solid rgba(0,0,0,.35)}
.alt-white.filmstrip-edge::before,.alt-white.filmstrip-edge::after{color:#fff;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.25)}
@keyframes filmDrift{from{background-position:0 0,0 0}to{background-position:0 0,90px 0}}
/* Parallax */
.parallax{will-change:transform}



/* === v4.8.5 – AI Videos: Code-only Film Strip (no images/JS) === */
:root{
  --film-gap: clamp(56px, 22vh, 180px);
  --film-rail: clamp(12px, 3.4vh, 28px);
  --film-hole: clamp(8px, 1.4vh, 16px);
  --film-step: clamp(28px, 6.5vw, 64px);
  --film-speed: 22s;
  --film-color: rgba(255,255,255,0.08);
  --film-edge: rgba(255,255,255,0.20);
}
.hero{ position: relative; overflow: hidden; }
.hero::before,
.hero::after{
  content: ""; position: absolute; left: -50%; width: 300%;
  height: var(--film-rail); pointer-events: none; z-index: 1;
  background: var(--film-color);
  box-shadow: inset 0 1px 0 var(--film-edge), inset 0 -1px 0 rgba(0,0,0,0.35);
  -webkit-mask-image: radial-gradient(circle, transparent calc(var(--film-hole)/2), black calc(var(--film-hole)/2 + 1px));
  -webkit-mask-size: var(--film-step) 100%; -webkit-mask-repeat: repeat;
  mask-image: radial-gradient(circle, transparent calc(var(--film-hole)/2), black calc(var(--film-hole)/2 + 1px));
  mask-size: var(--film-step) 100%; mask-repeat: repeat;
  animation: film-holes var(--film-speed) linear infinite;
}
.hero::before{ top: calc(50% - var(--film-gap)/2 - var(--film-rail)); }
.hero::after { top: calc(50% + var(--film-gap)/2); }
#aivideos-hero{ position: relative; z-index: 2; }
@keyframes film-holes{
  from{ -webkit-mask-position: 0 50%; mask-position: 0 50%; }
  to  { -webkit-mask-position: -1000px 50%; mask-position: -1000px 50%; }
}
 }
@media (max-width: 767px){
  :root{
    --film-gap: clamp(64px, 28vh, 220px);
    --film-rail: clamp(12px, 3.4vh, 28px);
    --film-hole: clamp(8px, 1.4vh, 16px);
    --film-step: clamp(26px, 8vw, 60px);
    --film-speed: 26s;
  }
  #aivideos-hero{ transform: translateY(-2vh); }
}



/* =========================
   v9.2 — hero rails (white holes), auto-placement, and section tweaks
   ========================= */

/* Global dials */
:root{
  --rail-pad: clamp(18px, 2.2vh, 26px);      /* gap from canvas to each rail */
  --film-rail: clamp(12px, 3.4vh, 28px);     /* strip thickness */
  --film-hole: clamp(8px, 1.4vh, 16px);     /* hole diameter */
  --film-step: clamp(80px, 10vw, 120px);     /* horizontal hole spacing */
  --film-speed: 7.5s;                          /* smaller = faster */
  --film-color: rgba(255,255,255,0.08);      /* strip tint on black */
  --film-edge:  rgba(255,255,255,0.22);      /* bevel highlight */
}

/* Hero must be positioning context */
.hero{ position: relative; overflow: hidden; }

/* Nuke any previous mask-based strip so no “black dots” linger */
.hero::before, .hero::after{ -webkit-mask:none !important; mask:none !important; }

/* Two rails with white holes + motion */
.hero::before,
.hero::after{
  content: "";
  position: absolute;
  left: -50%;
  width: 300%;
  height: var(--film-rail);
  pointer-events: none;
  z-index: 1; /* canvas above */
  /* background 1: white holes (radial circles) ; background 2: dark strip */
  background-image:
    radial-gradient(circle at center, #fff 0 calc(var(--film-hole)/2), transparent calc(var(--film-hole)/2 + 1px)),
    linear-gradient(var(--film-color), var(--film-color));
  background-size: var(--film-step) 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 50%, 0 0;
  box-shadow: inset 0 1px 0 var(--film-edge), inset 0 -1px 0 rgba(0,0,0,0.35);
  animation: aiv-film-move var(--film-speed) linear infinite;
}

/* Fallback positions if JS hasn't set offsets yet */
.hero::before{ top: 12vh; }
.hero::after { bottom: 12vh; }

/* When JS runs, it adds .rails-ready and sets these: */
.rails-ready.hero::before{ top: var(--rail-top) !important; }
.rails-ready.hero::after { bottom: var(--rail-bottom) !important; }

/* Keep the dots above the rails */
#aivideos-hero{ position: relative; z-index: 2; }

@keyframes aiv-film-move{
  from { background-position: 0 50%, 0 0; }
  to   { background-position: -1000px 50%, 0 0; } /* right → left */
}

/* Reduced motion */

}

/* Mobile refinements */
@media (max-width: 767px){
  :root{
    --film-rail: clamp(12px, 3.4vh, 28px);
    --film-hole: clamp(8px, 1.4vh, 16px);
    --film-step: clamp(72px, 12vw, 110px);
    --film-speed: 7.5s;
  }
  /* slight upward nudge to keep both rails visible on very small screens */
  #aivideos-hero{ transform: translateY(-1.2vh); }
}

/* =========================
   Intro section tweaks
   ========================= */

.section-intro,
.section-intro .intro-content{ text-align:center; }

.section-intro .intro-actions{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
}

/* Hide the prompts button */
.section-intro .btn-prompts{ display:none !important; }

/* If the blog button has nested markup, ensure we still show the new label */
.section-intro .btn-blog::after{ content: attr(data-label); }
.section-intro .btn-blog > * { display:none; }
.section-intro .btn-blog{
  position:relative; padding:14px 22px; border-radius:9999px;
}

/* Desktop-only spacing: move WATCH closer to the video (more air above video) */
@media (min-width: 1024px){
  .watch-heading{ margin-bottom: 18px !important; }
  .watch-wrapper iframe, .watch-wrapper video{ margin-top: 6px; }
}

/* =========================
   Moving film motif inside sections
   ========================= */

.motif-film{
  position:relative; overflow:hidden; isolation:isolate;
}

/* Top rail inside the section */
.motif-film::before{
  content:""; position:absolute; left:-50%; width:300%;
  height: clamp(18px, 5vh, 46px);
  top: clamp(8px, 3.5vh, 28px);
  z-index:0; opacity:0.6;
  background-image:
    radial-gradient(circle at center, #fff 0 calc( min(12px, 1.6vh) / 2 ), transparent calc( min(12px,1.6vh) / 2 + 1px)),
    linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
  background-size: clamp(60px, 10vw, 110px) 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 50%, 0 0;
  animation: aiv-film-move var(--film-speed, 10s) linear infinite;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.15)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4));
}

/* Bottom rail inside the section */
.motif-film::after{
  content:""; position:absolute; left:-50%; width:300%;
  height: clamp(18px, 5vh, 46px);
  bottom: clamp(8px, 3.5vh, 28px);
  z-index:0; opacity:0.6;
  background-image:
    radial-gradient(circle at center, #fff 0 calc( min(12px, 1.6vh) / 2 ), transparent calc( min(12px,1.6vh) / 2 + 1px)),
    linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
  background-size: clamp(60px, 10vw, 110px) 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 50%, 0 0;
  animation: aiv-film-move var(--film-speed, 10s) linear infinite;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.15)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4));
}

/* keep content above motif */
.motif-film > *{ position:relative; z-index: 1; }

/* Map motif to your two sections (their wrappers may differ; adjust selectors if needed) */
.section-features.motif-film{ background:#151515; }
.section-blogfeed.motif-film{ background:#0f0f0f; }

/* Minor tidy */
.section-intro .intro-eyebrow{ margin-bottom: 10px; }




/* === v9.3 additions === */
:root{
  --hero-rail-offset-top: clamp(40px, 22vh, 180px);
  --hero-rail-offset-bottom: clamp(40px, 22vh, 200px);
  --film-rail: clamp(12px, 3.4vh, 28px);
  --film-hole: clamp(8px, 1.4vh, 16px);
  --film-step: clamp(80px, 10vw, 120px);
  --film-speed: 7.5s;
  --film-color: rgba(255,255,255,0.08);
  --film-edge:  rgba(255,255,255,0.22);
}
.hero{ position:relative; overflow:hidden; }
.hero::before,
.hero::after{
  content:""; position:absolute; left:-50%; width:300%;
  height: var(--film-rail);
  pointer-events:none;
  z-index: 0;
  background-image:
    radial-gradient(circle at center, #fff 0 calc(var(--film-hole)/2), transparent calc(var(--film-hole)/2 + 1px)),
    linear-gradient(var(--film-color), var(--film-color));
  background-size: var(--film-step) 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 50%, 0 0;
  box-shadow: inset 0 1px 0 var(--film-edge), inset 0 -1px 0 rgba(0,0,0,0.35);
  animation: aiv-film-move var(--film-speed) linear infinite;
}
.hero::before{ top: var(--hero-rail-offset-top); }
.hero::after { bottom: var(--hero-rail-offset-bottom); }
#aivideos-hero{ position:relative; z-index: 1; }
@keyframes aiv-film-move{
  from { background-position: 0 50%, 0 0; }
  to   { background-position: -1000px 50%, 0 0; }
}
.section-intro,
.section-intro .intro-content{ text-align:center; }
.section-intro .intro-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.section-intro .btn-prompts{ display:none !important; }
.section-intro .btn-blog::after{ content: attr(data-label); }
.section-intro .btn-blog > * { display:none; }
.section-intro .btn-blog{ position:relative; padding:14px 22px; border-radius:9999px; }
@media (min-width:1024px){
  .watch-heading{ margin-bottom:18px !important; }
  .watch-wrapper iframe, .watch-wrapper video{ margin-top:6px; }
}
.motif-film{ position:relative; overflow:hidden; isolation:isolate; }
.motif-film::before,
.motif-film::after{
  content:""; position:absolute; left:-50%; width:300%;
  height: clamp(18px, 5vh, 46px);
  z-index:0; opacity:0.65;
  background-image:
    radial-gradient(circle at center, #fff 0 calc( min(12px, 1.6vh) / 2 ), transparent calc( min(12px,1.6vh) / 2 + 1px)),
    linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
  background-size: clamp(60px, 10vw, 110px) 100%, 100% 100%;
  background-repeat: repeat-x, no-repeat;
  background-position: 0 50%, 0 0;
  animation: aiv-film-move var(--film-speed, 10s) linear infinite;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.15)) drop-shadow(0 -1px 0 rgba(0,0,0,0.4));
}
.motif-film::before{ top: clamp(8px, 3.5vh, 28px); }
.motif-film::after { bottom: clamp(8px, 3.5vh, 28px); }
.motif-film > *{ position:relative; z-index: 1; }
.section-features.motif-film{ background:#151515; }
.section-blogfeed.motif-film{ background:#0f0f0f; }

}



/* === V5.1 – HERO film-strip (locked final placement) === */
:root {
  --rail-top-y: calc(11svh - var(--film-rail));
  --rail-bottom-y: calc(88svh + (2 * var(--film-rail)));
  --film-rail: clamp(12px, 3.4vh, 28px);
  --film-hole: clamp(8px, 1.4vh, 16px);
  --film-speed: 7.5s;
}

.hero,
.hero-section {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.hero::before,
.hero::after {
  left: -50%;
  width: 300%;
  height: var(--film-rail);
  z-index: 1;
  pointer-events: none;
  position: absolute !important;
}

.hero::before {
  top: var(--rail-top-y) !important;
}

.hero::after {
  top: var(--rail-bottom-y) !important;
  bottom: auto !important;
}

#aivideos-hero,
#aivideos-hero canvas,
#aivideos-hero > * {
  position: relative;
  z-index: 2;
}
/* === /V5.1 film-strip === */