/* ============================================================
   campaign-overview.css — the frame the campaign overview travels in.

   This file styles the FRAME ONLY. The design inside it is a separate
   document (flow/campaign-page.html) that carries its own CSS, so nothing
   here can leak into the product screen or vice versa.

   Structure built by campaign-overview.js:

     .co-frame            the visible panel: border, radius, shadow
       .co-view           the clipping viewport (overflow hidden)
         .co-fit          scales the design down to the frame's width
           .co-track      what GSAP translates — the slow top->bottom travel
             .co-doc      the iframe, sized to the design's natural box

   Frame chrome is deliberately minimal — the site's own card language
   (1px neutral border, soft shadow, white ground) and nothing invented.
   No gradient border, no tinted ground (R-01/R-02).
   ============================================================ */

.co-frame {
  position: relative;
  width: 100%;
  max-width: var(--co-frame-max-w, 1100px);   /* config: overview.frameMaxWidthPx */
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line, #ececec);
  border-radius: 20px;
  box-shadow: 0 40px 90px -34px rgba(15, 15, 30, 0.42);
  overflow: hidden;           /* the radius clips the travelling document */
  opacity: 0;                 /* campaign-overview.js fades it in */
}

/* the clipping viewport. Height is the frame's "window" onto the design —
   tall enough to read a product screen, capped so it never outgrows the
   hero's canvas. */
.co-view {
  position: relative;
  height: var(--co-view-h, clamp(520px, 74vh, 760px));
  overflow: hidden;
  background: #fff;
}

/* scale-to-fit wrapper. campaign-overview.js writes the transform; the
   origin has to be the top-left corner so the design's own top-left pins
   to the frame's. */
.co-fit {
  transform-origin: 0 0;
  will-change: transform;
}

/* the travelling layer — the only thing that moves. Composited. */
.co-track {
  will-change: transform;
}

.co-doc {
  display: block;
  border: 0;
  background: #fff;
}

/* screen-reader summary — the frame itself is decorative demo content */
.co-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- reduced motion (R-06): nothing travels by itself. The viewport
   becomes a normal scroll region the visitor drives, so the same content
   is still reachable — and the film advances to the sign-up gate at once. ---- */
.co-view.is-scrollable {
  overflow-y: auto;
  overscroll-behavior: contain;   /* never hand the scroll back to the page */
  -webkit-overflow-scrolling: touch;
}
.co-view.is-scrollable .co-track { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .co-frame { opacity: 1; }
  .co-fit, .co-track { will-change: auto; }
}

/* ---- narrow widths: a shorter window, so the frame doesn't swallow the
   viewport on a phone ---- */
@media (max-width: 720px) {
  .co-view { height: var(--co-view-h, clamp(360px, 58vh, 500px)); }
  .co-frame { border-radius: 16px; }
}
@media (max-width: 480px) {
  .co-view { height: var(--co-view-h, clamp(320px, 55vh, 440px)); }
  .co-frame { border-radius: 12px; }
}