/* [R84] Shared in-page reel viewer styling — Home and Work.
   Moved out of index.css when work.html needed the same component (AGENTS.md: one DOM,
   no parallel forks). work.html does not load index.css, so this is its own file linked
   by both pages. Depends only on the :root void/phosphor tokens each page already defines. */

    /* ── [R77] IN-PAGE REEL VIEWER ─────────────────────────────────────────────
       Clicking a film opens the original Instagram reel WITHOUT leaving the site.
       Chrome is BTN-owned (void scale + --font-mono/--font-ui per DESIGN.md §2–§3);
       only the player rectangle belongs to Instagram. z:9500 sits above the nav (100)
       and the everywhere overlay (9000) but below the CRT cursor (99999), so the
       site's own pointer still reads on top. */
    .reel-viewer {
      position:fixed;
      inset:0;
      z-index:9500;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:clamp(16px,4vw,48px);
    }
    .reel-viewer[hidden] { display:none; }
    .reel-viewer-backdrop {
      position:absolute;
      inset:0;
      background:color-mix(in srgb, var(--void) 88%, transparent);
      /* Static frost. No animated blur — §5 keeps backdrop-filter a budget item. */
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
    }
    .reel-viewer-panel {
      position:relative;
      z-index:1;
      display:flex;
      flex-direction:column;
      gap:10px;
      width:min(420px,100%);
      max-height:100%;
    }
    .reel-viewer-bar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .reel-viewer-title {
      color:var(--fog);
      font-family:var(--font-ui);
      font-size:9px;
      letter-spacing:2.2px;
      text-transform:uppercase;
    }
    .reel-viewer-close {
      display:flex;
      align-items:center;
      justify-content:center;
      /* 32px keeps the touch target honest per §10 without a chunky button read. */
      width:32px;
      height:32px;
      padding:0;
      color:var(--dust);
      background:color-mix(in srgb, var(--bunker) 92%, transparent);
      border:1px solid var(--ash);
      border-radius:50%;
      font-family:var(--font-mono);
      font-size:12px;
      line-height:1;
      cursor:pointer;
      transition:color .2s ease,border-color .2s ease;
    }
    .reel-viewer-frame {
      position:relative;
      flex:1 1 auto;
      min-height:0;
      overflow:hidden;
      background:var(--void);
      border:1px solid var(--ash);
      border-radius:14px;
    }
    /* Instagram's /embed/ view is a fixed-ratio card, not a bare video. Give it a tall
       box and let it letterbox inside rather than guessing its exact chrome height. */
    .reel-viewer-frame::before { content:''; display:block; padding-top:177.78%; }
    .reel-viewer-frame iframe {
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }

    /* [R81] Blocked embed. iOS Safari's Prevent Cross-Site Tracking (default ON) and
       Instagram's own embed rate-limiting both leave the iframe as a dead blank
       rectangle. When the load timer expires, say so plainly and promote the escape
       hatch to the primary action rather than leaving a silent empty box. */
    .reel-viewer.reel-blocked .reel-viewer-frame { display:none; }
    .reel-viewer.reel-blocked .reel-viewer-panel::before {
      content:'This reel could not load here — your browser is blocking the embed. It will open on Instagram.';
      display:block;
      padding:22px 20px;
      color:var(--fog);
      background:color-mix(in srgb, var(--bunker) 92%, transparent);
      border:1px solid var(--ash);
      border-radius:14px;
      font-family:var(--font-mono);
      font-size:12px;
      line-height:1.55;
    }
    .reel-viewer.reel-blocked .reel-viewer-out {
      align-self:stretch;
      padding:13px 16px;
      text-align:center;
      color:var(--void);
      background:var(--green);
      border-radius:10px;
    }
    .reel-viewer-out {
      align-self:flex-start;
      color:var(--green);
      font-family:var(--font-mono);
      font-size:8px;
      letter-spacing:2px;
      text-transform:uppercase;
      text-decoration:none;
      transition:color .2s ease;
    }
    @media (hover:hover) {
      .reel-viewer-close:hover { color:var(--chalk); border-color:var(--cinder); }
      .reel-viewer-out:hover { color:var(--green-soft); }
    }
    .reel-viewer-close:focus-visible,
    .reel-viewer-out:focus-visible {
      outline:2px solid var(--green);
      outline-offset:3px;
    }
    /* Lock the page behind the modal. Lenis keeps its own scroll value, so the class
       only has to stop the native overflow. */
    html.reel-viewer-open, html.reel-viewer-open body { overflow:hidden; }