/* ============================================================
   JCH Soft — vfx.html add-on styles (load AFTER style.css)
   Only new classes — zero overrides of the base stylesheet.
   ============================================================ */

/* Hero background override for this page only */
.vfx-hero-scene {
  background: var(--bg) url("../images/vfx/vfx_hero.jpg") center 30% / cover no-repeat;
}

/* Side-by-side demo figures (sheet vs. playing flipbook) */
.demo-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px;
  align-items: start;
}
@media (max-width: 800px) { .demo-duo { grid-template-columns: 1fr; } }

/* GIF frame with autoplay/corner label */
.gif-frame { position: relative; display: block; background: #000; }
.gif-frame img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.corner-note {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  color: var(--accent-2); background: rgba(7, 17, 32, .78);
  border: 1px solid var(--border); border-radius: 4px; padding: 3px 8px;
}

/* In-card image + action row */
.card-img {
  display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border); margin: 18px 0;
  background: #000;
}
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Centered button row in the CTA section.
   style.css gives .cta .btn auto side margins to center it solo; inside a
   flex row those auto margins spread the buttons apart, so zero them here.
   (Loads after style.css -> equal-specificity tie -> this file wins.) */
.cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.cta-actions .btn { margin-left: 0; margin-right: 0; }