/* ============================================================
   HEYMES · home « Projecteur » (2026-11-12)
   A dark room: the shows are listed in thin type, their photo only
   appears inside a beam of light that follows the pointer.
   Tools / Shop use room.css. The beam lives in a half-res canvas, the
   loop pauses off screen; no backdrop-filter.
   ============================================================ */

:root{
  --bg:#000; --text:#ededed; --dim:#3b3b3b; --mid:#7a7a7a; --line:#ffffff14;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --g:clamp(16px, 3vw, 40px);
}
*{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{ background:var(--bg); color:var(--text); font:300 15px/1.5 var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button, input{ font:inherit; color:inherit; background:none; border:0 }
button{ cursor:pointer }
:focus-visible{ outline:1px solid var(--text); outline-offset:4px }
.hidden{ display:none }
/* photos can't be dragged out (the drag ghost showed the full, unlit photo) */
img{ -webkit-user-drag:none; user-select:none; -webkit-user-select:none }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.small{ font:400 11px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mid) }

/* ---------- THE ROOM ----------
   The room is tall (one « step » per show); the stage inside is sticky.
   Scrolling turns the list like slides on a drum: home.js places each
   name on a cylinder (rotateX + translateZ), the centre one is live. */
.room{ --step:26svh; position:relative; height:calc((var(--n, 1) - 1) * var(--step) + 100svh); min-height:100svh }
.snap{ position:absolute; left:0; width:1px; height:1px; pointer-events:none }
.stage{ position:sticky; top:0; height:100svh; min-height:520px; overflow:hidden }
.show{ cursor:pointer }


.ghost{ position:absolute; inset:0; opacity:.07 }
.ghost img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .6s ease }
.stage img.fade{ opacity:0 }

/* the beam is drawn in a canvas (home.js): photo inside a soft circle, with
   video feedback (trails), a slight analog displace and grain in the light */
.fx{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none }

/* chrome */
.top, .bottom{ position:absolute; z-index:5; left:var(--g); right:var(--g); display:flex; justify-content:space-between; align-items:center; gap:20px }
.top{ top:calc(22px + env(safe-area-inset-top)) }
.bottom{ bottom:calc(22px + env(safe-area-inset-bottom)) }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); letter-spacing:.3em }
.brand img{ width:18px; height:18px; object-fit:contain }
.top nav{ display:flex; gap:22px }
.top a:hover, .bottom a:hover{ color:var(--text) }
.hint{ position:absolute; z-index:5; right:var(--g); top:50%; transform:translateY(-50%); writing-mode:vertical-rl; transition:opacity .6s }
.hint.gone{ opacity:0 }

/* the shows, on the drum */
.shows{ position:absolute; z-index:4; inset:0; list-style:none; pointer-events:none; perspective:1100px; perspective-origin:20% 50% }
.show{
  position:absolute; left:var(--g); top:50%; display:flex; align-items:baseline; gap:18px;
  width:max-content; max-width:calc(100% - 2 * var(--g)); pointer-events:auto; cursor:pointer;
  transform-origin:0 50%; will-change:transform, opacity; backface-visibility:hidden;
}
.show__n{ font:400 11px var(--mono); color:var(--dim); width:22px; flex:none; transition:color .4s }
.show__name{
  font-weight:200; font-size:clamp(34px, min(6.4vw, 10svh), 104px); line-height:1.05; letter-spacing:-.035em; text-align:left;
  color:#4a4a4a; transition:color .45s, letter-spacing .6s cubic-bezier(.2,.7,.2,1); white-space:nowrap;
}
.show:hover .show__name{ color:#9a9a9a }
.show__role{ font:400 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mid); white-space:nowrap; opacity:0; transform:translateX(-8px); transition:opacity .4s, transform .5s }
.show.on .show__n{ color:var(--text) }
.show.on .show__name{ color:var(--text); letter-spacing:-.025em }
.show.on .show__role{ opacity:1; transform:none }
.show__open{ color:var(--text) }
/* the beam is big: a soft shadow keeps the type readable over bright photos */
.show__name, .show__role, .show__n, .top, .bottom{ text-shadow:0 0 14px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6) }
.now{ display:none }

/* ---------- PROJECT VIEW ---------- */
.proj{ position:fixed; inset:0; z-index:40; background:var(--bg); display:grid; grid-template-columns:minmax(300px, 34%) 1fr; animation:projIn .45s cubic-bezier(.2,.7,.2,1) both }
.proj[hidden]{ display:none }
@keyframes projIn{ from{ opacity:.4 } to{ opacity:1 } }
.proj__info{ display:flex; flex-direction:column; gap:26px; padding:calc(22px + env(safe-area-inset-top)) var(--g) 28px; border-right:1px solid var(--line); overflow-y:auto }
.proj__nav{ display:flex; justify-content:space-between; gap:16px }
.proj__nav button, .proj__steps button{ font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--mid); min-height:32px }
.proj__nav button:hover, .proj__steps button:hover{ color:var(--text) }
.proj__name{ margin-top:auto; font-weight:200; font-size:clamp(38px, 4.4vw, 76px); line-height:1.02; letter-spacing:-.035em }
.proj__cap{ color:var(--text); border-top:1px solid var(--line); padding-top:18px; line-height:1.8 }
.proj__desc{ color:#bdbdbd; max-width:44ch }
.proj__desc:empty{ display:none }
.proj__steps{ display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:16px; margin-top:auto }
.proj__photos{ overflow-y:auto; overscroll-behavior:contain; padding:clamp(12px, 2vw, 24px); display:flex; flex-direction:column; gap:clamp(12px, 2vw, 24px) }
.proj__photos img{ width:100%; height:auto; background:#0b0b0b; opacity:0; transition:opacity .6s }
.proj__photos img.is-loaded{ opacity:1 }
body.has-proj{ overflow:hidden }

/* ---------- CONTACT ---------- */
.contact{ padding:clamp(80px, 12vw, 160px) var(--g) 36px; border-top:1px solid var(--line) }
.contact__label{ margin-bottom:28px }
.contact__mail{
  display:inline-block; font-weight:200; font-size:clamp(24px, 3.4vw, 50px); line-height:1.1; letter-spacing:-.03em;
  border-bottom:1px solid #ffffff30; padding-bottom:8px; transition:border-color .3s; word-break:break-word;
}
.contact__mail:hover{ border-color:var(--text) }
.contact form{ display:grid; grid-template-columns:1fr 1fr 2fr auto; gap:14px; margin-top:56px; max-width:1100px }
.contact input{ border-bottom:1px solid #ffffff2a; padding:12px 2px; font-size:16px; outline:none; border-radius:0 }
.contact input:focus{ border-color:var(--text) }
.contact input::placeholder{ color:#555 }
.contact button[type=submit]{ font:400 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; border:1px solid #ffffff55; padding:0 24px; min-height:46px; transition:background .2s, color .2s }
.contact button[type=submit]:hover{ background:var(--text); color:#000 }
.form__ok{ margin-top:18px; color:var(--text) }
.foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 24px; margin-top:clamp(70px, 10vw, 130px) }
.foot__links{ display:flex; flex-wrap:wrap; gap:22px }
.foot a:hover{ color:var(--text) }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px){
  .top nav{ gap:16px }
  .show__role{ display:none }
  .now{ display:flex; gap:14px; width:100%; text-align:left; font:inherit; letter-spacing:inherit; text-transform:inherit; color:var(--mid); min-height:32px; align-items:center }
  .now__cap{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .now__go{ flex:none; color:var(--text) }
  .bottom .hide-m{ display:none }
  .bottom{ justify-content:flex-start }
  .contact form{ grid-template-columns:1fr }
  .room{ --step:20svh }
  .show__name{ font-size:clamp(30px, 10vw, 46px); white-space:normal }
  .show{ gap:10px }
  .hint{ display:none }
  .proj{ display:block; overflow-y:auto; overscroll-behavior:contain }
  .proj__info{ border-right:0; gap:18px; padding-bottom:8px; overflow:visible }
  .proj__name{ margin-top:18px }
  .proj__steps{ display:none }
  .proj__photos{ overflow:visible; padding:16px var(--g) 40px }
}

/* no motion: no beam, the photo is simply shown dimmed */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  .fx{ display:none }
  .ghost{ opacity:.35 }
  .show__name, .show__role{ transition:none }
}