/* AI video funnel additions on top of /styles.css, /v2/v2.css and /v3/v3.css */

/* Videos behave like the images they replace */
.hero video, .tile video, .pcard video.pa, .collage video, .ba-pair video, .result-lock video, .mosaic video, .ea-art video {
  display: block; width: 100%; height: 100%; object-fit: cover; }
.hero .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .8s ease; }
.collage video { border-radius: 10px; aspect-ratio: 4/5; }
.ba-pair video.lowq { filter: blur(2.5px) saturate(.2) contrast(.8) brightness(.95); }
.result-lock video { filter: blur(16px) brightness(.75); transform: scale(1.15); }
.ea-art video { position: absolute; inset: 0; }
.ea-art video.ea-before { filter: blur(3px) saturate(.2) contrast(.85) brightness(.9); }
.hero.video-result { aspect-ratio: auto; }
.hero.video-result > video, .hero.video-result > img { position: static; max-height: 70vh; }

/* "Motion preview": a still that slowly moves until the real video arrives */
img.kb { animation: kb-move 7s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes kb-move { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -1.5%); } }
.result-lock img.kb { animation: none; }

/* Play/REC chips */
.play-chip { position: absolute; top: 28px; right: 14px; z-index: 2; font-size: 11px; font-weight: 800; padding: 5px 9px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); }
.tile-play { position: absolute; left: 7px; top: 7px; font-style: normal; font-size: 9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); z-index: 1; }
.mosaic .rec { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.5); z-index: 2; }
.mosaic .rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
/* film-strip edges on the generation frame */
.mosaic.film::before, .mosaic.film::after { content: ''; position: absolute; top: 0; bottom: 0; width: 10px; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.65) 0 8px, transparent 8px 12px); opacity: .7; }
.mosaic.film::before { left: 0; } .mosaic.film::after { right: 0; }
.mosaic.film.done::before, .mosaic.film.done::after { display: none; }

/* Background render progress: the chip fills up like a progress bar, with equalizer bars pulsing */
.render-chip { position: relative; overflow: hidden; white-space: nowrap; display: flex; align-items: center; gap: 9px; justify-content: center; margin: 10px auto 0; width: fit-content;
  font-size: 12px; font-weight: 600; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; isolation: isolate; }
.render-chip::before { content: ''; position: absolute; inset: 0; width: var(--p, 4%); z-index: -1; transition: width .8s ease;
  background: linear-gradient(90deg, rgba(139,92,255,.35), rgba(255,95,162,.35)); }
.render-chip::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
  background-size: 220% 100%; animation: sweep 1.8s linear infinite; }
.render-chip .eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.render-chip .eq i { width: 3px; height: 3px; border-radius: 2px; background: var(--grad); animation: eq 1s ease-in-out infinite both; }
.render-chip .eq i:nth-child(2) { animation-delay: .2s; } .render-chip .eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.render-chip b { color: var(--text); font-variant-numeric: tabular-nums; }

/* Portrait clips: keep faces in frame when cropped to the hero/card shape */
.hero .slide, .pcard video.pa, .tile video { object-position: center 22%; }

/* A little breathing room between the render chip and the heading below it */
.render-chip + h2, .render-chip + .ea-in { margin-top: 14px; }