/* ===================================================================
   launch.css — "watch the launch" section (inline YouTube embed)
   Used on the About page. The YouTube iframe is injected only on click
   (launch.js) and plays inline, in place, inside the same frame — so
   nothing third-party touches first paint. Self-contained: the framed
   "media-window" chrome below was originally inherited from hero.css,
   but is inlined here so the section works on any page.
   =================================================================== */

/* --- section ------------------------------------------------------ */
.launch{position:relative;max-width:1080px;margin:0 auto;padding:var(--section-gap) 44px;border-top:1px dotted rgba(0,0,0,.28)}
.launch-intro{display:flex;align-items:end;justify-content:space-between;gap:40px;margin:0 0 24px}
.launch-intro h2{font-family:var(--disp);font-size:clamp(30px,4vw,48px);font-weight:500;line-height:1;letter-spacing:-.035em;margin-top:8px}
.launch-intro p{max-width:390px;color:var(--muted);font-size:16px;line-height:1.55;text-wrap:pretty}

/* --- framed window chrome (self-contained) ------------------------ */
.launch-frame{overflow:hidden;border:1px solid #111;border-radius:11px;background:var(--chrome);box-shadow:var(--shadow)}
.launch .window-bar{height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 12px;border-bottom:1px solid rgba(0,0,0,.17);background:linear-gradient(90deg,#d6d5d7,#f0f0f0 50%,#d6d5d7);font-size:11px;color:var(--muted)}
.launch .window-title{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.launch .window-meta{flex:none;font-size:10px;letter-spacing:.06em}

/* --- framed poster + play affordance ------------------------------ */
.launch-trigger{position:relative;display:block;width:100%;aspect-ratio:16/9;background:#d9d9d9;cursor:pointer;overflow:hidden}
.launch-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.launch-trigger .video-wash{position:absolute;z-index:1;inset:0;background:linear-gradient(transparent 65%,rgba(0,0,0,.25));pointer-events:none}
/* Restrained blue-glass control (matches --blue system control, not the
   REC red, which stays reserved for live/detection states). */
.launch-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1px solid #221997;background:linear-gradient(#edf4ff 0%,#d6e7ff 18%,#a2c7ff 52%,#99cbf8 82%,#a7d2f8 100%);box-shadow:0 12px 30px rgba(44,77,145,.28),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .18s var(--ease),filter .18s ease}
.launch-play i{width:0;height:0;margin-left:4px;border-top:11px solid transparent;border-bottom:11px solid transparent;border-left:18px solid var(--ink)}
.launch-trigger:hover .launch-play{transform:translate(-50%,-50%) scale(1.06);filter:saturate(1.06)}
.launch-trigger:active .launch-play{transform:translate(-50%,-50%) scale(.97)}

/* --- inline player (swapped in on click, fills the same 16/9 frame) -- */
/* Covers both the mount div and the iframe the IFrame API replaces it with. */
.launch-embed,.launch-frame iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;background:#0b0b0d}

/* --- responsive --------------------------------------------------- */
@media(max-width:900px){
  .launch{padding:var(--section-gap) 20px}
  .launch-intro{display:block;text-align:left}
  .launch-intro p{margin:12px 0 0}
}
@media(max-width:600px){
  .launch-intro h2{font-size:34px}
  .launch-play{width:60px;height:60px}
  .launch-play i{border-top-width:9px;border-bottom-width:9px;border-left-width:15px}
}
@media(prefers-reduced-motion:reduce){
  .launch-play{transition:none}
}