/* ============================================================
   MEDIATRIX — SELECTED PROJECTS (CRT showcase)

   From projects_reference.mov: a rounded CRT screen holds one project in
   grainy greyscale; a stack ticker runs across its middle, the project mark
   sits centred in difference blend (so anything yellow under it reads blue),
   and changing project drops a band of yellow character cells down the
   screen that wipes the next project in behind it.
   ============================================================ */

.prj{
  --prj-hot:var(--yellow);
  --prj-cell:#141004;
  position:relative;
  /* one screen, plus a stretch of scroll per extra project */
  height:calc(100svh + (var(--n) - 1) * 72svh);
  background:#000;
}
.prj__pin{
  position:sticky;top:0;
  height:100svh;
  padding:clamp(10px,2.4vh,26px) clamp(10px,2.2vw,40px);
}

/* ---------- The CRT screen ---------- */
.prj__crt{
  position:relative;height:100%;
  overflow:hidden;isolation:isolate;
  contain:layout paint;
  /* big elliptical corners give the tube its pillowed silhouette */
  border-radius:5.2% / 10.5%;
  background:#1a1a1a;
  cursor:pointer;
}

.prj__slides,.prj__slide,.prj__cells,.prj__grain,.prj__vignette{position:absolute;inset:0}
.prj__slides{z-index:1}
.prj__slide{visibility:hidden;contain:strict}
/* The greyscale grade sits on the slide's content, not the slide: the slide
   carries the moving clip, so the graded content stays one cached layer and
   the clip is just cropping it instead of re-running the filter every frame. */
.prj__slide > *{filter:grayscale(1) contrast(1.08) brightness(var(--tone,.9))}
.prj__slide.is-current > *,.prj__slide.is-next > *{will-change:transform}
.prj__slide.is-current{visibility:visible;z-index:1}
/* the incoming project, uncovered by the cell band as it travels */
.prj__slide.is-next{visibility:visible;z-index:2;clip-path:inset(var(--clip-t,0%) 0 var(--clip-b,100%) 0)}
.prj__shot{width:100%;height:100%;object-fit:cover}

/* Placeholder plate: a lit laptop screen under slatted window light. */
.prj__plate{
  position:absolute;inset:0;overflow:hidden;
  background:
    radial-gradient(120% 90% at 60% 30%,#e6e6e6 0%,#a9a9a9 45%,#4a4a4a 100%);
}
.prj__screen{
  position:absolute;left:18%;top:10%;width:60%;height:66%;
  transform:perspective(1400px) rotateY(var(--tilt)) rotateX(8deg) rotate(calc(var(--tilt) * -.25));
  background:linear-gradient(170deg,#f4f4f4,#d4d4d4);
  border:clamp(8px,1.1vw,18px) solid #232323;
  border-radius:14px;
  box-shadow:0 40px 60px rgba(0,0,0,.45);
  display:flex;flex-direction:column;gap:6%;padding:3% 4%;
}
.prj__screen-bar{display:flex;gap:6px}
.prj__screen-bar i{width:9px;height:9px;border-radius:50%;background:#9a9a9a}
.prj__screen-name{
  font-family:var(--font-display);font-weight:var(--display-weight);font-stretch:var(--display-stretch);
  font-size:clamp(1.6rem,4.4vw,4.6rem);line-height:.9;color:#2a2a2a;
  letter-spacing:var(--display-ls);
}
.prj__screen-lines{display:grid;gap:10px;margin-top:auto}
.prj__screen-lines i{height:10px;background:#b8b8b8;border-radius:5px}
.prj__screen-lines i:nth-child(2){width:78%}
.prj__screen-lines i:nth-child(3){width:54%;background:#8d8d8d}
.prj__screen-lines i:nth-child(4){width:32%;height:28px;border-radius:14px;background:#5e5e5e}
.prj__blinds{
  position:absolute;inset:-20%;
  /* soft-edged slats drawn by the gradient itself — no blur filter to re-run */
  background:repeating-linear-gradient(var(--sun),
    transparent 0,rgba(0,0,0,.34) 1.1vw,rgba(0,0,0,.34) 2.4vw,transparent 3.5vw,transparent 6.4vw);
}

/* ---------- Film grain ---------- */
.prj__grain{
  z-index:2;inset:-50%;pointer-events:none;opacity:.34;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  will-change:transform;
  animation:prjGrain .5s steps(5) infinite paused;
}
.prj.is-live .prj__grain{animation-play-state:running}
@keyframes prjGrain{
  0%{transform:translate(0,0)}20%{transform:translate(-7%,4%)}40%{transform:translate(5%,-6%)}
  60%{transform:translate(-3%,-8%)}80%{transform:translate(8%,3%)}100%{transform:translate(0,0)}
}

/* ---------- Transition cells (canvas) ---------- */
.prj__cells{z-index:3;width:100%;height:100%;pointer-events:none}

/* ---------- Stack ticker ---------- */
.prj__ticker{
  position:absolute;z-index:4;left:0;right:0;top:49.6%;translate:0 -50%;
  height:clamp(22px,1.62vw,32px);
  background:#0b0b0b;
  overflow:hidden;pointer-events:none;
}
.prj__track{
  display:flex;align-items:center;height:100%;width:max-content;
  font-size:clamp(.6rem,.78vw,.875rem);letter-spacing:0;
  color:#d6d6d6;white-space:nowrap;
  will-change:transform;
}
.prj__grp{display:flex;height:100%;align-items:center}
.prj__track span{padding-inline:clamp(10px,1.1vw,20px);line-height:1}
.prj__track .n{color:#6d6d6d}
.prj__track .p{
  align-self:stretch;display:flex;align-items:center;
  background:var(--prj-hot);color:#141004;
}

/* ---------- Project mark — difference blend over everything below ---------- */
.prj__glyphs{
  position:absolute;z-index:5;left:50%;top:49.6%;
  width:clamp(110px,11.6vw,230px);height:31.5%;
  translate:-50% -50%;
  mix-blend-mode:difference;pointer-events:none;
}
.prj__glyph{position:absolute;inset:0;width:100%;height:100%;fill:#E2E2E2;visibility:hidden}
.prj__glyph.is-current{visibility:visible}

/* ---------- HUD ---------- */
.prj__hud{
  position:absolute;inset:0;z-index:6;pointer-events:none;
  font-size:clamp(.6rem,.72vw,.8125rem);line-height:1.3;letter-spacing:0;color:#161616;
}
.prj__hud p{position:absolute;top:5.4%}
.prj__hud-a{left:27.4%}
.prj__hud-b{left:52.4%}
.prj__hud-c{left:72.4%}
.prj__hud-c b{font-weight:500;color:var(--prj-hot)}
.prj__hud-d{
  right:2.1%;padding:2px 5px;
  background:var(--prj-hot);color:#141004;
}
.prj__hud .prj__hud-e{
  top:auto;bottom:7%;right:4.5%;display:flex;align-items:center;gap:10px;color:#1c1c1c;
}
.prj__bar{display:block;width:clamp(60px,6vw,110px);height:3px;background:rgba(0,0,0,.25)}
.prj__bar i{display:block;height:100%;width:100%;background:var(--prj-hot);transform-origin:left;transform:scaleX(0)}

/* ---------- Tube vignette ---------- */
.prj__vignette{
  z-index:7;pointer-events:none;border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.6),
    inset 0 0 3.2vw 1.2vw rgba(0,0,0,.62),
    inset 0 0 12vw rgba(0,0,0,.36);
  background:radial-gradient(130% 120% at 50% 50%,transparent 58%,rgba(0,0,0,.35) 100%);
}

/* ---------- Cursor: flickering cell cluster + label ---------- */
.prj__cursor{
  position:absolute;z-index:8;left:0;top:0;
  pointer-events:none;opacity:0;
  transition:opacity .25s;
  will-change:transform;
}
.prj__crt.is-hover .prj__cursor{opacity:1}
.prj__cursor-label{
  position:absolute;left:0;top:0;translate:-50% -50%;
  font-size:clamp(.6rem,.72vw,.8125rem);letter-spacing:0;white-space:nowrap;
  color:var(--prj-hot);
}
.prj__cursor-cells{
  position:absolute;left:0;top:0;translate:-50% -50%;
  display:grid;grid-template-columns:repeat(5,var(--pc,18px));grid-auto-rows:var(--pc,18px);
}
.prj__cursor-cells i{
  display:grid;place-items:center;
  font-style:normal;font-size:.625rem;font-weight:600;line-height:1;
  color:var(--prj-cell);background:var(--prj-hot);
  visibility:hidden;
}
.prj__cursor-cells i.on{visibility:visible}

/* ---------- Small screens ---------- */
@media (max-width:900px){
  .prj{height:calc(100svh + (var(--n) - 1) * 60svh)}
  .prj__crt{border-radius:9% / 6%}
  .prj__hud-a{display:none}
  .prj__hud-b{left:7%}
  .prj__hud-c{left:44%}
  .prj__screen{left:8%;width:84%;top:14%;height:56%}
  .prj__glyphs{height:24%}
}
@media (hover:none){.prj__cursor{display:none}}
@media (prefers-reduced-motion:reduce){.prj__grain{animation:none}}