/* ============================================================
   CONCEPTO P — INSTRUMENTS
   A dark bench under one light. The light is painted from four
   variables the room writes on its stage: --lx --ly (where), --lr (how
   wide), --li (how much). The ground, the weave and every stamped name
   read the same four, so the name is lit exactly where the bench is.
   Nothing here is a button. One curve: var(--ease).
   ============================================================ */

.ins{
  position:relative; background:#0b0a09; color:#ECE8DE;
  --ins-paper:236,232,222;
}
.ins-track{ position:relative; height:calc(var(--ins-n, 3) * var(--ins-step, 105vh) + 100vh); }
.ins-stage{
  position:sticky; top:0; height:100vh; overflow:hidden;
  perspective:1800px; perspective-origin:50% 40%;
  --lx:50vw; --ly:46vh; --lr:60vmax; --li:0;
  background:#0b0a09;
}
.ins-stage::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background:radial-gradient(130% 110% at 50% 46%, rgba(11,10,9,0) 52%, rgba(6,5,5,.72) 100%);
}

/* the light, on the bench */
.ins-pool{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle var(--lr) at var(--lx) var(--ly),
    rgba(78,71,61,calc(var(--li) * .96)) 0%,
    rgba(44,40,35,calc(var(--li) * .82)) 34%,
    rgba(22,20,18,calc(var(--li) * .55)) 64%,
    rgba(11,10,9,0) 100%);
}
.ins-felt{
  position:absolute; inset:0; pointer-events:none; opacity:.07; background-size:256px 256px;
  -webkit-mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly), rgba(0,0,0,var(--li)) 0%, rgba(0,0,0,0) 78%);
          mask-image:radial-gradient(circle var(--lr) at var(--lx) var(--ly), rgba(0,0,0,var(--li)) 0%, rgba(0,0,0,0) 78%);
}

/* ---------- a blind stamp: no ink, an edge and a face ---------- */
.ins-stamp{
  position:relative; isolation:isolate; margin:0;
  font-family:var(--display); font-weight:400; font-style:normal;
  line-height:.9; letter-spacing:-.012em;
  --nx:50%; --ny:-40%; --sx:0; --sy:1; --catch:.2;
}
.ins-stamp-edge, .ins-stamp-face{ display:block; }
.ins-stamp-edge{
  position:absolute; left:0; top:0; width:100%; z-index:-1; pointer-events:none;
  color:transparent;
  text-shadow:
    calc(var(--sx) * -1px) calc(var(--sy) * -1px) 0 rgba(255,244,226,var(--catch)),
    calc(var(--sx) * 1.6px) calc(var(--sy) * 1.6px) 1.2px rgba(0,0,0,.94);
}
.ins-stamp-face{
  color:transparent;
  background:radial-gradient(circle var(--lr) at var(--nx) var(--ny),
    rgb(calc(13 + 104 * var(--li)), calc(12 + 95 * var(--li)), calc(11 + 82 * var(--li))) 0%,
    rgb(calc(13 + 50 * var(--li)), calc(12 + 45 * var(--li)), calc(11 + 39 * var(--li))) 36%,
    rgb(calc(13 + 16 * var(--li)), calc(12 + 14 * var(--li)), calc(11 + 12 * var(--li))) 66%,
    rgb(13,12,11) 100%);
  -webkit-background-clip:text; background-clip:text;
}

/* ---------- the stamp of the room ---------- */
.ins-open{
  position:absolute; inset:0; z-index:3; display:grid; place-content:center; justify-items:center;
  text-align:center; pointer-events:none; visibility:hidden; opacity:0;
}
.ins-title{ font-size:clamp(76px, 15.5vw, 280px); }
.ins-kicker{
  margin:3.4em 0 0; font-size:9.5px; letter-spacing:.42em; padding-left:.42em;
  color:rgba(var(--ins-paper),.46);
}

/* words that arrive */
.ins-w{ display:inline-block; opacity:0; will-change:opacity, filter, transform; }

/* ---------- one object ---------- */
.ins-obj{
  position:absolute; left:50%; top:43%; z-index:2;
  width:min(58vw, 80vh, 1000px); aspect-ratio:1 / .62;
  transform:translate(-50%, -50%);
  visibility:hidden; opacity:0; pointer-events:none; outline:none;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  --ins-seat:0;
}
.ins-obj.is-current{ pointer-events:auto; }
.ins-lift{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform, filter; }
.ins-lift > canvas, .ins-lift > img{ display:block; width:100%; height:100%; object-fit:contain; }
.ins-contact{
  position:absolute; left:14%; right:14%; bottom:6%; height:16%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.8), rgba(0,0,0,0) 72%);
  opacity:calc(.22 + .5 * var(--ins-seat));
  filter:blur(calc((1 - var(--ins-seat)) * 20px + 8px));
  transform:scale(calc(1.3 - .3 * var(--ins-seat)));
}

/* ---------- its name, its line, its use ---------- */
.ins-text{
  position:absolute; left:var(--margin); right:var(--margin); bottom:11vh; z-index:3;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(240px, 30ch);
  column-gap:5vw; align-items:end; visibility:hidden; pointer-events:none;
}
.ins-name{ font-size:clamp(54px, 8.2vw, 150px); grid-row:1 / span 2; align-self:end; opacity:0; }
.ins-mat{
  grid-column:2; margin:0 0 1.5em; font-size:9.5px; line-height:1.9; letter-spacing:.24em;
  color:rgba(var(--ins-paper),.46);
}
.ins-use{
  grid-column:2; margin:0; max-width:30ch;
  font-size:clamp(15px, 1.12vw, 18px); line-height:1.58; color:rgba(var(--ins-paper),.8);
}

/* the one word under the object */
.ins-word{
  position:absolute; left:50%; z-index:3; margin:0; pointer-events:none;
  top:calc(43% + min(17.98vw, 24.8vh, 310px) + 2.4vh);
  transform:translateX(-50%);
  font-size:9.5px; letter-spacing:.44em; padding-left:.44em;
  color:rgba(var(--ins-paper),0);
  transition:color .9s var(--ease), letter-spacing 1.4s var(--ease);
}
.ins-word.is-on{ color:rgba(var(--ins-paper),.6); letter-spacing:.5em; }
.ins-word.is-chosen.is-on{ color:rgba(var(--ins-paper),.4); }

/* the order, once there is something in it */
.ins-order{
  position:absolute; right:var(--margin); bottom:3.6vh; z-index:7;
  display:flex; gap:1.6em; align-items:baseline;
  font-size:9.5px; letter-spacing:.32em; color:rgba(var(--ins-paper),.5);
  opacity:0; pointer-events:none; text-decoration:none;
  transition:opacity 1.4s var(--ease), color .7s var(--ease);
}
.ins-order i{ font-style:normal; }
.ins-order.is-on{ opacity:1; pointer-events:auto; }
.ins-order:hover, .ins-order:focus-visible{ color:rgba(var(--ins-paper),.92); outline:none; }

/* ---------- the bench: everything together ---------- */
.ins-bench{
  position:absolute; left:50%; top:50%; z-index:3;
  width:min(84vw, 1080px, 128vh); transform:translate(-50%, -50%);
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:3.2vh 4.4vw;
  visibility:hidden; pointer-events:none;
}
.ins-bench.is-open{ pointer-events:auto; }
.ins-bi{ position:relative; display:block; aspect-ratio:1 / .62; opacity:0; outline:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ins-bi .ins-contact{ opacity:.5; filter:blur(10px); transform:none; }
.ins-bi-lift{ position:absolute; inset:0; filter:brightness(.42) saturate(.8); transition:filter 1.2s var(--ease); }
.ins-bi-lift > canvas, .ins-bi-lift > img{ display:block; width:100%; height:100%; object-fit:contain; }
.ins-bi.is-chosen .ins-bi-lift{ filter:brightness(1); }
.ins-bi:hover .ins-bi-lift, .ins-bi:focus-visible .ins-bi-lift{ filter:brightness(.86) saturate(1); }

/* ---------- the loupe: the house's own gear ---------- */
.ins-loupe{
  position:fixed; inset:0; z-index:80; background:#0b0a09; color:#ECE8DE; cursor:zoom-out;
  opacity:0; transition:opacity .6s var(--ease);
  --ins-paper:236,232,222; --lr:70vmax; --li:.92;
}
.ins-loupe.is-on{ opacity:1; }
.ins-loupe-pool{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle 70vmax at 50% 38%, rgba(78,71,61,.88) 0%, rgba(44,40,35,.72) 34%, rgba(22,20,18,.4) 64%, rgba(11,10,9,0) 100%);
}
.ins-loupe-obj{
  position:absolute; left:50%; top:42%; width:min(58vw, 78vh, 980px); aspect-ratio:1 / .62;
  transform:translate(-50%, -48%); filter:brightness(.25) blur(9px);
  transition:transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.ins-loupe.is-on .ins-loupe-obj{ transform:translate(-50%, -50%); filter:none; }
.ins-loupe-obj > canvas, .ins-loupe-obj > img{ display:block; width:100%; height:100%; object-fit:contain; }
.ins-loupe-text{
  position:absolute; left:var(--margin); right:var(--margin); bottom:11vh;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(240px, 30ch); column-gap:5vw; align-items:end;
  opacity:0; transition:opacity 1.6s var(--ease) .3s;
}
.ins-loupe.is-on .ins-loupe-text{ opacity:1; }
.ins-loupe-name{ font-size:clamp(48px, 7vw, 130px); grid-row:1 / span 2; --nx:50%; --ny:-60vh; --sx:.1; --sy:.99; --catch:.46; }
.ins-loupe-text .ins-mat, .ins-loupe-text .ins-use{ grid-column:2; }

/* ---------- narrow ---------- */
@media (max-width:759px){
  .ins-obj{ top:35%; width:90vw; }
  .ins-word{ top:calc(35% + 27.9vw + 2vh); }
  .ins-text, .ins-loupe-text{ grid-template-columns:1fr; bottom:8vh; row-gap:0; }
  .ins-name, .ins-loupe-name{ grid-row:auto; font-size:clamp(40px, 12.5vw, 76px); margin-bottom:.34em; }
  .ins-mat, .ins-use, .ins-loupe-text .ins-mat, .ins-loupe-text .ins-use{ grid-column:1; }
  .ins-mat{ margin-bottom:1em; }
  .ins-bench{ width:92vw; gap:2.4vh 3vw; }
  .ins-loupe-obj{ top:34%; width:90vw; }
}

@media (prefers-reduced-motion:reduce){
  .ins-word, .ins-order, .ins-bi-lift, .ins-loupe, .ins-loupe-obj, .ins-loupe-text{ transition:none; }
}