@font-face{font-family:"Archivo";src:url(../assets/fonts/archivo-latin-standard-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --ground:#E9E1DA;      /* the product photos' own ground, so the flat lays sit on the wall */
  --ghost:#E0D7CE;       /* the giant wordmark behind the rail, one step darker than the wall */
  --ink:#121212;
  --ink-soft:#5B5650;
  --marsh:#4E5634;
  --bone:#EFEBE3;
  --blaze:#E8541E;
  --rail-y:clamp(96px,14vh,132px);
  --pad:clamp(18px,3.2vw,48px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--ground);color:var(--ink);font-family:Inter,system-ui,sans-serif;overflow:hidden;
  -webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none}
::selection{background:var(--blaze);color:var(--bone)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button[hidden]{display:none}
:focus-visible{outline:2px solid var(--blaze);outline-offset:4px;border-radius:2px}

.top{position:fixed;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;
  padding:calc(var(--pad) * .8) var(--pad);z-index:20;pointer-events:none}
.top>*{pointer-events:auto}
.mark{display:flex;align-items:flex-end;gap:clamp(8px,.8vw,12px);color:var(--ink);height:clamp(18px,2.1vw,26px);opacity:0;transform:translateY(-8px)}
.mark .duck{height:132%;display:block;margin-bottom:-1%}
.mark .wm{height:100%;display:block}
.mark svg{height:100%;width:auto;display:block}
.drop{font:500 clamp(11px,.9vw,13px)/1 "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  display:flex;align-items:center;gap:.7em;opacity:0;transform:translateY(-8px)}
.drop .sep{opacity:.4}
.eye{width:.8em;height:1.05em;border-radius:50%;background:var(--blaze);position:relative;display:inline-block}
.eye::before,.eye::after{content:"";position:absolute;left:50%;top:50%;width:.62em;height:.14em;background:var(--ground);transform:translate(-50%,-50%) rotate(45deg)}
.eye::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* the giant wordmark on the wall, drifting slower than the rail */
.ghost{position:fixed;left:-4vw;right:-30vw;top:calc(var(--rail-y) + 6vh);z-index:1;color:var(--ghost);pointer-events:none;
  opacity:0;transition:opacity 1.6s var(--ease) .1s}
.ghost svg{width:128vw;height:auto;display:block}
.ready .ghost{opacity:1}

.room{position:fixed;inset:0;z-index:5;cursor:none}
.rail{position:absolute;left:0;right:0;top:var(--rail-y);height:9px;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,#3a3a38 0,#1a1a19 35%,#0d0d0c 70%,#262624 100%);
  box-shadow:0 6px 10px -4px rgba(30,20,10,.3)}
.track{position:absolute;inset:0;z-index:2}

.g{position:absolute;top:var(--rail-y);left:0;transform-origin:50% 0;will-change:transform,opacity;perspective:1800px}
.g .hook{position:absolute;left:50%;top:-14px;width:34px;margin-left:-17px;overflow:visible;z-index:-1}
.g.light .hook{z-index:1}
.g .hook path{fill:none;stroke:#2b2a28;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.g .hook rect{fill:#1d1c1b}
.g .flip{position:relative;transform-style:preserve-3d;transition:transform 1.1s var(--ease)}
.g.turned .flip{transform:rotateY(180deg)}
.g .face{position:absolute;left:calc(-1 * var(--px));top:calc(-1 * var(--pt));width:calc(100% + 2 * var(--px));height:auto;max-width:none;display:block;
  backface-visibility:hidden;-webkit-backface-visibility:hidden}   /* the soft wall shadow is baked into each image */
.g .face.b{transform:rotateY(180deg)}
.g button.hit{position:absolute;left:8%;right:8%;top:calc(var(--hook,60px) + 6%);bottom:6%;border-radius:12px;cursor:none}

/* close-ups beside the piece you opened */
.details{position:absolute;z-index:4;right:var(--pad);top:calc(var(--rail-y) + 40px);display:flex;flex-direction:column;gap:12px;pointer-events:none}
.details figure{width:clamp(120px,11vw,176px);aspect-ratio:1;overflow:hidden;border-radius:3px;
  box-shadow:0 18px 30px -18px rgba(40,26,12,.45);opacity:0;transform:translateX(24px)}
.details figure img{width:100%;height:100%;object-fit:cover;display:block}
.details.has figure{opacity:1;transform:none;transition:opacity .7s var(--ease) calc(.18s + var(--k) * .09s),transform .9s var(--ease) calc(.18s + var(--k) * .09s)}

/* label */
.label{position:fixed;left:0;right:0;bottom:0;z-index:15;padding:0 var(--pad) calc(var(--pad) * .9);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 32px;pointer-events:none;opacity:0}
.label .btns,.label .btns *{pointer-events:auto}
.name-wrap{overflow:hidden;grid-column:1/2;padding-top:.06em}
.name{font-family:Archivo,sans-serif;font-weight:800;font-stretch:75%;text-transform:uppercase;
  font-size:clamp(44px,6.5vw,112px);line-height:.86;letter-spacing:-.012em;white-space:nowrap}
.spec{grid-column:1/2;font:400 clamp(11px,.95vw,14px)/1.4 "IBM Plex Mono",monospace;letter-spacing:.04em;color:var(--ink-soft);text-transform:uppercase}
.actions{grid-column:2/3;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-end;gap:18px;padding-bottom:.2em}
.btns{display:flex;gap:10px;align-items:center}
.turn,.close{display:inline-flex;align-items:center;gap:12px;height:48px;padding:0 20px 0 22px;border-radius:999px;
  font:700 15px/1 Archivo,sans-serif;font-stretch:87%;letter-spacing:.01em;transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.turn{background:var(--ink);color:var(--bone)}
.turn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .8s var(--ease)}
.turn:hover{background:var(--marsh)}
.turn.on svg{transform:rotate(180deg)}
.close{box-shadow:inset 0 0 0 1.5px var(--ink);padding:0 22px}
.close:hover{background:var(--ink);color:var(--bone)}
.turn:active,.close:active{transform:scale(.97)}
.hint{display:flex;align-items:center;gap:10px;font:500 11px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);transition:opacity .4s}
.hint svg{width:34px;height:12px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.focused .hint{opacity:0}

.name.out{animation:nameOut .3s var(--ease) forwards}
.name.in{animation:nameIn .6s var(--ease) both}
@keyframes nameOut{to{transform:translateY(-104%)}}
@keyframes nameIn{from{transform:translateY(104%)}to{transform:none}}

.ready .mark,.ready .drop{opacity:1;transform:none;transition:opacity .9s var(--ease) .2s,transform .9s var(--ease) .2s}
.ready .label{opacity:1;transition:opacity .9s var(--ease) .35s}

/* cursor: a blaze hit marker */
.cursor{position:fixed;left:0;top:0;z-index:30;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .25s}
.cursor svg{position:absolute;left:-11px;top:-11px;width:22px;height:22px;overflow:visible;transition:transform .35s var(--ease)}
.cursor path{fill:none;stroke:var(--blaze);stroke-width:2.6;stroke-linecap:square}
/* its own layer so it can blend with the page: dark over light pieces, light over dark ones */
.cursor-label{position:fixed;left:16px;top:12px;z-index:31;pointer-events:none;font:500 10px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;mix-blend-mode:difference;white-space:nowrap;opacity:0;transition:opacity .25s}
.cursor.show+.cursor-label{opacity:1}
.cursor.hide+.cursor-label{opacity:0}
.cursor.show{opacity:1}
.cursor.hide{opacity:0}
.cursor.on-g svg{transform:scale(1.25)}
.cursor.down svg{transform:scale(.8) rotate(45deg)}
@media (hover:none){.cursor,.cursor-label{display:none}.room,.g button.hit{cursor:auto}}

@media (max-width:760px){
  :root{--rail-y:max(92px,14vh)}
  .label{grid-template-columns:1fr;gap:10px}
  .actions{grid-column:1;grid-row:auto;flex-direction:row-reverse;justify-content:space-between;align-items:center}
  .name{font-size:clamp(40px,12.5vw,64px);white-space:normal}
  .turn,.close{height:44px}
  .close{padding:0 16px}
  .details{display:none}
  .ghost svg{width:180vw}
}
@media (prefers-reduced-motion:reduce){
  .g .flip{transition:none}
  .name.out,.name.in{animation:none}
}

/* the × in the wordmark O in blaze */
.mark{--wm-x:#E8541E}

/* when a piece is open: its turn button sits right under it, where the eye already is */
.turn-near{position:absolute;left:0;top:0;z-index:6;display:inline-flex;align-items:center;gap:10px;height:42px;padding:0 18px 0 14px;border-radius:999px;
  background:var(--ink);color:var(--bone);font:700 14px/1 Archivo,sans-serif;font-stretch:87%;cursor:pointer;translate:-50% 0;
  opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .6s var(--ease),background .3s}
.turn-near svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .8s var(--ease)}
.turn-near.on svg{transform:rotate(180deg)}
.turn-near.show{opacity:1;transform:none}
.turn-near:hover{background:var(--blaze)}