@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:"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;--ink:#121212;--soft:#5B5650;--bone:#EFEBE3;--blaze:#E8541E;--pad:clamp(18px,3.2vw,48px);--ease:cubic-bezier(.16,1,.3,1);
  --x:-400px;--y:-400px;--r:0px;
  --lens:radial-gradient(circle var(--r) at var(--x) var(--y),#000 calc(100% - 1.5px),transparent 100%);
  --unlens:radial-gradient(circle var(--r) at var(--x) var(--y),transparent calc(100% - 1.5px),#000 100%)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#2C3122}
body{color:var(--bone);-webkit-font-smoothing:antialiased;cursor:none}
::selection{background:var(--blaze);color:var(--bone)}
:focus-visible{outline:2px solid var(--blaze);outline-offset:4px}

.field{position:fixed;inset:0}
.world{position:absolute;inset:0}
/* one camo for the ground and for the pieces, pinned to the window, so the pieces vanish into it (no transforms or
   filters on them: those break the pinning) */
.camo{background:url(camo.webp) center/cover fixed}
.piece{position:absolute}
.camo .piece{background:url(camo.webp) center/cover fixed;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.camo .shade{position:absolute;background:#000;opacity:.22;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;filter:blur(3px)}
.real{background:var(--ground);-webkit-mask:var(--lens);mask:var(--lens)}
.real .piece{perspective:1600px}
.real .turn{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.65,0,.35,1)}   /* an unhurried turn */
.real .turn img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  filter:drop-shadow(0 18px 22px rgba(52,36,20,.16))}
.real .turn img.b{transform:rotateY(180deg)}
.open .real .piece{cursor:pointer}
.real .piece.turned .turn{transform:rotateY(180deg)}
.real .piece span{position:absolute;left:50%;top:100%;translate:-50% 10px;white-space:nowrap;font:500 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft)}
.real .piece.star span{color:var(--ink)}
.ring{position:fixed;left:0;top:0;width:calc(var(--r) * 2);height:calc(var(--r) * 2);margin:calc(var(--r) * -1) 0 0 calc(var(--r) * -1);border-radius:50%;
  box-shadow:0 0 0 2px var(--blaze),0 10px 40px rgba(0,0,0,.25);transform:translate3d(var(--x),var(--y),0);pointer-events:none;z-index:5}
.ring::before,.ring::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--blaze);translate:-50% -50%;rotate:45deg}
.ring::after{rotate:-45deg}
.open .ring{opacity:0;transition:opacity .3s}

/* the words, twice: Bone on the camo, ink inside the lens */
.ui{position:fixed;inset:0;pointer-events:none;z-index:8}
.ui a{pointer-events:auto}
.ui-camo{-webkit-mask:var(--unlens);mask:var(--unlens);color:var(--bone)}
.ui-real{-webkit-mask:var(--lens);mask:var(--lens);color:var(--ink)}
.top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--pad) * .8) var(--pad)}
.mark{display:flex;align-items:flex-end;gap:clamp(8px,.8vw,12px);height:clamp(18px,2.1vw,26px);color:inherit;cursor:pointer}
.mark span{display:block;height:100%}.mark .duck{height:132%;margin-bottom:-1%}.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}
.ui-camo .drop{text-shadow:0 1px 10px rgba(0,0,0,.35)}
.drop .sep{opacity:.5}
.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(--bone);transform:translate(-50%,-50%) rotate(45deg)}
.eye::after{transform:translate(-50%,-50%) rotate(-45deg)}
.ui-real .eye::before,.ui-real .eye::after{background:var(--ground)}

.say{position:absolute;left:var(--pad);bottom:calc(var(--pad) * .9);pointer-events:none;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.say h1{font:800 clamp(56px,8vw,140px)/.84 Archivo,sans-serif;font-stretch:75%;text-transform:uppercase;letter-spacing:-.012em}
.say p{margin-top:12px;font:500 clamp(11px,.95vw,14px)/1.4 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.ui-camo .blend{text-shadow:0 2px 30px rgba(0,0,0,.3)}
.stand{z-index:9;color:var(--ink);opacity:0;transform:translateY(16px)}
.open .blend{opacity:0;transform:translateY(16px)}
.open .stand{opacity:1;transform:none}
.open body,.open{cursor:auto}

/* the actions stay together where your hand already is: Stand out, then See Drop 001 right beside it */
.actions{position:absolute;right:var(--pad);bottom:calc(var(--pad) * .9);z-index:10;display:flex;flex-direction:row-reverse;align-items:center;gap:10px}
.flip{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 24px 0 18px;border:0;border-radius:999px;background:var(--bone);color:var(--ink);
  font:700 16px/1 Archivo,sans-serif;font-stretch:87%;cursor:pointer;transition:background .3s,color .3s}
.flip .dot{width:14px;height:14px;border-radius:50%;background:var(--blaze);box-shadow:0 0 0 4px rgba(232,84,30,.25)}
.flip:hover{background:var(--blaze);color:var(--bone)}
.flip:hover .dot{background:var(--bone)}
.open .flip{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.open .flip:hover{background:var(--ink);color:var(--bone)}
.actions .cta{opacity:0;transform:translateX(14px);visibility:hidden;transition:opacity .5s var(--ease) .15s,transform .7s var(--ease) .15s,visibility 0s .7s}
.open .actions .cta{opacity:1;transform:none;visibility:visible;transition:opacity .5s var(--ease) .25s,transform .7s var(--ease) .25s,visibility 0s}

@media (hover:none){body{cursor:auto}}
@media (max-width:760px){
  .say h1{font-size:clamp(48px,14vw,72px)}
  .actions{left:var(--pad);right:var(--pad);bottom:auto;top:calc(var(--pad) * .8 + 46px);justify-content:flex-start}
  .real .piece span{display:none}
}

/* on dark grounds: blaze × in the wordmark O and in the duck eye */
.mark{--wm-x:#E8541E;--duck-x:#E8541E}