/* ═══ SECTION 5 — MAKE IT REAL (scroll-driven) ═══ */
/* 1. the section before this one (first child of .cover-wrap) stays pinned while this one
      slides up over it. JS sets its sticky `top` so it pins the moment its bottom meets the
      bottom of the screen, and fades it darker through --cover. */
.cover-wrap > :first-child{position:sticky;z-index:0}
.cover-wrap > :first-child::after{content:"";position:absolute;inset:0;background:#000;
  opacity:var(--cover,0);pointer-events:none;z-index:5}

/* 2. this section is tall; its stage pins to the screen while you scroll through it.
      JS drives three values: --x (1 → 0) headline halves close in,
      --s (.2 → 1) video grows */
.real{position:relative;z-index:1;height:300vh;background:#070707;
  border-top:1px solid var(--border);box-shadow:0 -40px 80px rgba(0,0,0,.55)}
@media(max-width:760px){.real{height:260vh}}
.real-stage{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;padding-top:var(--nav-h)}
.real-inner{width:100%;display:flex;flex-direction:column;align-items:center;
  --mw:clamp(240px,32vw,600px); --mh:min(calc(var(--mw) * 1.45), calc(100svh - var(--nav-h) - 48px))}

.real-row{position:relative;width:100%;min-height:var(--mh);display:grid;align-items:center}
.real-media{position:absolute;left:50%;top:50%;width:var(--mw);height:var(--mh);
  margin:calc(var(--mh) / -2) 0 0 calc(var(--mw) / -2);overflow:hidden;background:var(--surface-alt);
  transform:scale(var(--s,.2));will-change:transform;z-index:0}
.real-media img,.real-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* black overlay to dim the video a little (raise/lower --media-dim, 0–1) */
.real-media{--media-dim:.35}
.real-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(10,10,10,var(--media-dim))}
.real-media .ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;
  background:repeating-linear-gradient(36.5deg,#151515 0 12px,#111 12px 24px)}
.real-media .ph span{font-size:10.5px;letter-spacing:.16em;font-weight:600;color:var(--dim);line-height:1.7}

/* middle column is the gap the video sits in — half its width, so the video tucks under both words */
.real-line{position:relative;z-index:1;display:grid;grid-template-columns:1fr calc(var(--mw) * .5) 1fr;
  align-items:center;font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(1.7rem,6.2vw,7.2rem);line-height:.9;letter-spacing:-.035em;white-space:nowrap}
.real-l{justify-self:end;transform:translateX(calc(var(--x,1) * -36vw));will-change:transform}
.real-r{justify-self:start;transform:translateX(calc(var(--x,1) * 36vw));will-change:transform}
.real-line .dot{color:var(--cut)}

@media(prefers-reduced-motion:reduce){
  .cover-wrap > :first-child{position:relative}
  .cover-wrap > :first-child::after{display:none}
  .real{height:auto}
  .real-stage{position:static;height:auto;padding:clamp(90px,15vh,160px) 0}
  .real-l,.real-r,.real-media{transform:none}
}