/* ============================================================
   scenes.css — per-scene composition on top of the engine.
   The engine writes --scene-* on containers and --child-* on
   [data-stagger]/[data-drift] children. Motion uses opacity +
   the `translate` property (compositor-friendly), deliberately
   leaving `transform` owned by hover/focus transitions.
   ============================================================ */

.story-scene {
  opacity: var(--scene-visibility, 0);
  transform: translate3d(0, var(--scene-rise, 40px), 0) scale(var(--scene-scale, 0.985));
}

/* Active scene content gets a strong readability scrim behind text.
   Applied via ::before so it never blocks interaction. */
.story-scene.is-active::before {
  content: "";
  position: absolute;
  inset: -44px -52px;
  z-index: -1;
  background:
    radial-gradient(closest-side, rgba(4, 7, 14, 0.9) 0%, rgba(4, 7, 14, 0.72) 55%, rgba(4, 7, 14, 0) 100%);
  pointer-events: none;
}

/* Readability over real video footage: white text needs a dark halo
   because video luminance is unknown/uncontrolled. */
.story-scene h1,
.story-scene h2,
.story-scene h3,
.story-scene p,
.story-scene li,
.story-scene span,
.story-scene a,
.story-scene button,
.story-scene label,
.story-scene blockquote,
.story-scene figcaption,
.story-scene dt,
.story-scene dd,
.story-scene textarea {
  text-shadow: 0 1px 10px rgba(2, 4, 10, 0.92), 0 0 3px rgba(2, 4, 10, 0.85);
}

/* Panels sit on their own opaque-ish backdrop so their text stays
   legible even when the video frame behind them is bright. */
.story-scene .card,
.story-scene .accordion-item,
.story-scene .pill-list li,
.story-scene .value-list li,
.story-scene .contact-form {
  background-color: rgba(8, 14, 26, 0.9);
}

/* Engine-driven children: cascade-in + exit parallax.
   `translate` is independent of `transform`, so hover lifts
   (transform) compose with scroll motion instead of fighting it. */
.story-scene [data-stagger],
.story-scene [data-drift] {
  opacity: var(--child-vis, 1);
  translate: 0 var(--child-y, 0px);
}

.story-scene.is-active [data-stagger],
.story-scene.is-active [data-drift] {
  will-change: opacity, translate;
}

/* Cards keep engine motion on the `translate` property, so `transform`
   is free for the hover lift defined in components.css. */
.story-scene .card:hover,
.story-scene .card:focus-visible {
  box-shadow: 0 12px 40px rgba(94, 234, 212, 0.14);
}

/* Reduced motion: previews are disabled in JS too, but keep the
   transitions instant in case a hover lands first. */
@media (prefers-reduced-motion: reduce) {
  .card-video, .card::after { transition: none; }
  .story-scene .card:hover, .story-scene .card:focus-visible { transform: none; }
}

/* Hero: slightly larger, top-weighted */
.scene-hero { max-width: 700px; }

/* Features: 3-column grid on wide screens so 6 cards fit in 2 rows */
@media (min-width: 900px) {
  .scene-features .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .scene-features .card { padding: 14px; }
  .scene-features .card p { font-size: 0.85rem; margin-bottom: 6px; }
  .scene-features .card h3 { font-size: 1rem; }
}

/* Tracking: constrain dashboard image height so it fits */
.scene-tracking .scene-media {
  max-height: 38vh;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  scale: 1.02;
}

/* Contact scene: single email capture laid out as one row on wide
   screens, stacked on mobile. */
.scene-contact .contact-form {
  max-width: 520px;
  padding: 14px;
  gap: 8px;
}
.form-inline {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.form-inline .field {
  flex: 1 1 auto;
  min-width: 0;
}
.form-inline .btn {
  flex: 0 0 auto;
  padding: 10px 20px;
  font-size: 0.9rem;
}

/* Wide screens: alternate alignment for cinematic rhythm */
@media (min-width: 900px) {
  .scene-tracking, .scene-integrations { margin-left: auto; }
}