/* Homepage opening: full-bleed real chip-footage stage (option A, "SpaceX-style").
   Spec: scratchpad hero/SPEC_A.md. This file replaces the old mid-page "Seeing is believing"
   .cv-section design entirely -- the video/poster/tag/play-button ids and the "cv-frame--active"
   class are the only things preserved, because chip-video.js's reconcile() state machine already
   knows about them and is reused completely unchanged. Homepage-only: no other page loads this
   file. */

.ch-hero, .ch-hero * { box-sizing: border-box; }

/* .ch-hero itself carries no background: on mobile the eyebrow/H1/CTA sit on the ordinary page
   background (white), and .ch-media/.cv-frame already supply the dark letterbox colour behind
   the video at every breakpoint. */
.ch-hero { display: block; }

/* ---- base / mobile (<1024px): natural stacked flow, no crop, no scrim ---------------------- */
.ch-stage { position: relative; display: flex; flex-direction: column; }

.ch-copy-zone { display: contents; } /* flattens on mobile so ch-copy-top/ch-cta-wrap can be
                                          interleaved with the video via flex `order`, below */
.ch-copy-top { order: 1; padding: 96px 20px 20px; text-align: center; }
.ch-media    { order: 2; position: relative; background: #0B1424; }
/* CEO review (2026-09-19): no dark band, no gradient. The CTA sits on the ordinary page
   background below the video, simply centred. */
.ch-cta-wrap {
  order: 3;
  padding: 28px 20px 56px;
  text-align: center;
}
.ch-cta-wrap .ch-cta { margin: 0 auto; }

.ch-eyebrow {
  margin: 0 0 10px;
  font: 600 12px/18px Roboto, "Noto Sans TC", -apple-system, sans-serif;
  letter-spacing: .08em;
  color: #0084D4;
}
.ch-h1 {
  margin: 0;
  font-family: Poppins, "Noto Sans TC", -apple-system, sans-serif;
  font-weight: 700;
  color: #00000A;
  line-height: 1.15;
  font-size: clamp(28px, 7vw, 36px);
}
.ch-h1:lang(zh-Hant-TW) { font-family: "Noto Sans TC", Poppins, sans-serif; }

.ch-cta { display: inline-flex; }

.cv-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 776;
  overflow: hidden;
  background: #0B1424;
}
.cv-poster, .cv-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}
.cv-poster { z-index: 2; }
.cv-video { z-index: 1; }
.cv-frame--active .cv-poster { opacity: 0; visibility: hidden; }

/* Mobile/portrait crop stage: below this stage aspect ratio the page serves a separately
   cropped/scaled encode (chip-mobile.*, poster-mobile.*) -- the outlet tips plus a couple of
   frames of upstream flow, full height -- instead of a scaled-down copy of the wide desktop
   frame, so the video fills a tall, full-width stage instead of sitting as a thin strip. The
   crop is horizontal-only (same 0..776 vertical extent as the desktop frame). Threshold matches
   chip-video.js's pickSize() and the <picture> art-direction in server.js -- all three must
   agree on which asset is in play. Outlet-tag position is computed in JS against the rendered
   frame, not fixed CSS percentages, so it tracks whichever asset/crop is actually showing. */
@media (max-aspect-ratio: 11 / 10) {
  .cv-frame { aspect-ratio: 720 / 932; }
}

.ch-scrim { display: none; } /* mobile: copy sits on the page background, not over the video */

/* Outlet pill tags: anchored to the video's own box. `top` is set from JS (chip-video.js,
   updateTagPositions()) against the video's actual rendered content box -- the element box plus
   the intrinsic size of whichever asset is loaded and the object-fit/object-position in effect --
   because at a cover crop the content box does not equal the element box, so a fixed CSS
   percentage drifts off the channel it names. Hidden by default so there is no flash at the
   default top:0 before JS runs the first time; JS clears `visibility` once it has a real
   position, or leaves it hidden if that channel isn't in the visible crop. Right-edge anchoring
   stays in plain CSS since the crop is always right-anchored (object-position: right top). */
.cv-tag {
  position: absolute;
  right: 1.5%;
  top: 0;
  visibility: hidden;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 20, 50, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font: 500 13px/17px Roboto, "Noto Sans TC", -apple-system, sans-serif;
  z-index: 3;
  pointer-events: none;
}
.cv-tag__dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.cv-tag__dot--1 { background: #6DB6FF; }
.cv-tag__dot--2 { background: #3DFF8A; }

@media (max-width: 480px) {
  .cv-tag { font-size: 10px; line-height: 14px; letter-spacing: 0; padding: 3px 8px; }
  .cv-tag__dot { width: 5px; height: 5px; }
}

/* Play/pause control: round translucent button, same visual language as before. On mobile it
   lives in ch-media's own corner (bottom-right of the video box); on desktop (below) ch-media
   is repositioned to cover the whole stage, so the same rule reads as "bottom-right of the
   stage" without needing separate CSS. */
.cv-playbtn {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.cv-playbtn::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(0, 20, 50, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: -1;
}
.cv-playbtn:hover::before { background: rgba(0, 20, 50, .7); }
.cv-playbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cv-playicon { position: relative; }

.cv-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Desktop (>=1024px): full-bleed stage, nav overlays it, copy sits over a bottom scrim --- */
@media (min-width: 1024px) {
  .ch-stage {
    /* The site nav is position:fixed and ~88px tall. Full-bleed under it hid the top of the
       frame -- the top wall and the outlet-1 channel. Start the stage below it instead. */
    --ch-nav-h: 88px;
    margin-top: var(--ch-nav-h);
    height: calc(100svh - var(--ch-nav-h));
    min-height: 520px;
    max-height: 860px;
    overflow: hidden;
    container-type: size;
    container-name: ch-stage;
  }

  .ch-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* The stage always shows the footage edge-to-edge at every desktop width -- no letterbox
     fallback. The frame fills the stage exactly (CEO review, 2026-09-19: a narrow-but-not-phone
     window, e.g. ~1060px wide with a short stage, used to fall outside a 1.5-1.8 aspect window
     and drop into an object-fit:contain letterbox). object-position: right top always crops
     from the LEFT, so the outlet channels near the frame's right edge are never cropped away.
     The outlet tags are positioned in JS (chip-video.js, updateTagPositions()) against this same
     cover/right-center content box, so they track the crop instead of drifting. */
  .cv-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .cv-poster, .cv-video { object-fit: cover; object-position: right top; }

  .ch-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0, 20, 50, .78) 0%, rgba(0, 20, 50, .45) 28%, transparent 55%);
  }

  .cv-playbtn { z-index: 2; }

  .ch-copy-zone {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding-bottom: 56px;
  }
  .ch-copy-top { padding: 0 0 18px; order: initial; }
  .ch-cta-wrap { padding: 0; order: initial; background: none; text-align: left; }
  .ch-copy-top { text-align: left; }

  .ch-eyebrow { color: #fff; font-size: 13px; }
  .ch-h1 {
    color: #fff;
    line-height: 1.05;
    font-size: clamp(40px, 5vw, 72px);
    max-width: 18ch;
  }
  .ch-h1:lang(zh-Hant-TW) { font-size: clamp(36px, 4.6vw, 64px); }
}

/* ---- >=1920px: cap the stage to the footage's native 1164px height so it doesn't grow taller
   than the content just because the viewport is tall -- a fixed max-height:860px stage pushed
   the headline off-screen on a 1080p display otherwise. Still edge-to-edge cover + right-center,
   same as the general desktop rule above (no letterbox fallback at any desktop width). ---- */
@media (min-width: 1920px) {
  .ch-stage { height: min(calc(100svh - var(--ch-nav-h)), 1164px); min-height: 0; max-height: none; }
}