/* THE KI · the creator's desk (home hero), paper cut-out language. 2-nov-2026.
   Frame: #desk has a fixed height (no layout shift); frames and objects are absolutely positioned inside it.
   Objects are real <a>/<button>; their SVG drawings are placeholders for Flow-painted objects later. */
.desk{position:relative;height:clamp(620px,100svh,920px);overflow:hidden;isolation:isolate;
  background:#E7DCC4 url(desk-objects/desk-kraft.webp) center/cover no-repeat;user-select:none;-webkit-user-select:none}
.desk::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s;
  background:#2a2620 url(desk-objects/desk-night.webp) center/cover no-repeat}
.desk.is-night::before{opacity:1}
.desk::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:900;opacity:0;transition:opacity .35s;
  background:radial-gradient(circle at var(--lx,86%) var(--ly,14%),rgba(255,214,140,.0) 0,rgba(255,214,140,0) 18%,rgba(8,12,14,.62) 52%,rgba(8,12,14,.78) 100%)}
.desk.is-night::after{opacity:1}
.lamp .glow{position:absolute;left:-6%;top:44%;width:60%;height:40%;border-radius:50%;background:radial-gradient(#FFE7A8,rgba(255,231,168,0) 70%);opacity:0;transition:opacity .35s;pointer-events:none}
.desk.is-night .lamp .glow{opacity:.9}

/* header on the desk: stamped logo + one line */
.desk-head{position:absolute;left:clamp(16px,4vw,56px);top:clamp(16px,4vh,40px);z-index:950;max-width:340px;pointer-events:none}
.desk-head a,.desk-head p{pointer-events:auto}
.desk-head .logo-img{width:clamp(130px,12vw,180px)}
.desk-head h1{margin-top:16px;font:700 italic clamp(19px,2vw,25px)/1.3 var(--serif);background:var(--card);display:inline;padding:4px 9px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;border-radius:2px 4px 3px 5px;box-shadow:2px 3px 0 rgba(40,30,15,.16)}
.desk.is-night .desk-head h1{box-shadow:none}
.scroll-cue{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:950;font:700 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);background:var(--card);padding:6px 12px;border-radius:var(--torn);box-shadow:2px 3px 0 rgba(40,30,15,.18)}
.scroll-cue span{display:inline-block;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(3px)}}

/* frames lying on the desk */
.print{position:absolute;left:0;top:0;display:block;text-decoration:none;color:var(--ink);cursor:grab;touch-action:pan-y;
  -webkit-touch-callout:none;transform:rotate(var(--rot,0deg));filter:drop-shadow(1px 2px 1px rgba(40,30,15,.22)) drop-shadow(4px 8px 8px rgba(40,30,15,.18));
  transition:filter .15s,transform .15s}
.print .cut{display:block;padding:6px;background:var(--card);position:relative}
.print img{display:block;width:100%;height:auto;pointer-events:none;-webkit-user-drag:none;transition:opacity .7s}
.print img.incoming{position:absolute;left:6px;top:6px;width:calc(100% - 12px);opacity:0}
.print:hover,.print:focus-visible{transform:rotate(var(--rot,0deg)) translateY(-5px) scale(1.03);filter:drop-shadow(1px 2px 1px rgba(40,30,15,.2)) drop-shadow(8px 16px 14px rgba(40,30,15,.24))}
.print.drag{cursor:grabbing;transform:rotate(calc(var(--rot,0deg) * .4)) scale(1.07);filter:drop-shadow(2px 3px 2px rgba(40,30,15,.2)) drop-shadow(14px 26px 18px rgba(40,30,15,.28));transition:filter .1s,transform .1s}
.print .tape{top:-10px;width:58px;height:20px;left:calc(50% - 29px)}
.print .tape.corner{left:-14px;top:6px;transform:rotate(-38deg)}
.print .cap{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%) rotate(-1.5deg);white-space:nowrap;opacity:0;transition:opacity .12s;pointer-events:none;
  font:700 italic 13px var(--serif);background:var(--ink);color:var(--card);padding:3px 8px;border-radius:2px 3px 1px 3px}
.print:hover .cap,.print:focus-visible .cap,.print.drag .cap{opacity:1}
.desk.anim .print{transition:left .42s cubic-bezier(.2,.8,.2,1),top .42s cubic-bezier(.2,.8,.2,1),transform .42s,opacity .3s}
.desk.is-night .print img{filter:brightness(.92)}

/* desk objects = the menu */
.obj{position:absolute;z-index:800;display:block;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);text-decoration:none;font:inherit;
  -webkit-tap-highlight-color:transparent}
.obj img.paper{display:block;width:100%;height:auto;-webkit-user-drag:none;
  filter:drop-shadow(3px 7px 6px rgba(40,30,15,.32));transition:transform .12s}
.obj svg{display:block;width:100%;height:auto;overflow:visible;
  filter:drop-shadow(2px 0 0 var(--card)) drop-shadow(-2px 0 0 var(--card)) drop-shadow(0 2px 0 var(--card)) drop-shadow(0 -2px 0 var(--card)) drop-shadow(3px 7px 6px rgba(40,30,15,.3));
  transition:transform .12s}
.obj:hover img.paper,.obj:focus-visible img.paper,.obj:hover svg,.obj:focus-visible svg{animation:wobble .5s ease-in-out;transform:translateY(-3px)}
.obj:focus-visible{outline:3px dashed var(--blue);outline-offset:6px}
.obj.bounce img.paper,.obj.bounce svg{animation:bounce .18s ease-out}
@keyframes wobble{25%{transform:translateY(-3px) rotate(-2.5deg)}75%{transform:translateY(-3px) rotate(2deg)}}
@keyframes bounce{40%{transform:scale(.92)}100%{transform:scale(1)}}
/* game-style item label */
.obj::after{content:attr(data-label);position:absolute;left:50%;top:-12px;transform:translate(-50%,-100%) rotate(-1.5deg);white-space:nowrap;pointer-events:none;
  font:800 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#FFE58A;padding:7px 9px;border-radius:2px 4px 2px 3px;
  box-shadow:0 0 0 2px var(--card),3px 4px 0 rgba(40,30,15,.25);opacity:0;transition:opacity .1s}
.obj:hover::after,.obj:focus-visible::after{opacity:1}
.obj.label-below::after{top:auto;bottom:-12px;transform:translate(-50%,100%) rotate(1deg)}

/* desktop placement (percent of the desk) */
.o-lamp{right:3%;top:2%;width:clamp(120px,10.5vw,160px)}
.o-calendar{left:60%;top:4%;width:clamp(78px,6.6vw,96px)}
.o-flipbook{left:30%;top:5%;width:clamp(92px,7.6vw,112px)}
.o-board{right:3%;top:34%;width:clamp(180px,16vw,235px)}
.o-reel{left:2.5%;top:38%;width:clamp(112px,9.6vw,140px)}
.o-box{left:3%;bottom:7%;width:clamp(124px,11vw,158px)}
.o-pen{left:26%;bottom:5%;width:clamp(100px,8.6vw,124px)}
.o-deck{left:42%;bottom:6%;width:clamp(104px,8.8vw,126px)}
.o-camera{left:57%;bottom:6%;width:clamp(104px,9vw,128px)}
.o-brush{left:72%;bottom:7%;width:clamp(96px,8.2vw,118px)}
.o-radio{right:3%;bottom:6%;width:clamp(100px,8.6vw,124px)}
.o-ghost{left:calc(3% + clamp(124px,11vw,158px) * .32);bottom:calc(7% + clamp(60px,5.6vw,80px));width:clamp(58px,4.8vw,70px);z-index:790;transform:translateY(70%);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.o-ghost.peek{transform:translateY(-6%)}
.o-ghost img.paper{filter:drop-shadow(2px 4px 4px rgba(40,30,15,.28))}
.o-ghost::after{top:-8px}
.radio .notes{position:absolute;left:30%;top:-14%;font:700 22px/1 var(--serif);color:var(--ink);opacity:0;transition:opacity .2s;pointer-events:none}
.o-radio[aria-pressed=true] .notes{opacity:1;animation:float 1.6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-4px)}}
.o-flipbook:hover img.paper{animation:flip .45s steps(2) infinite}
@keyframes flip{50%{transform:translate(-2px,-3px) rotate(-6deg)}}

.cal-date{position:absolute;left:14%;right:12%;top:30%;bottom:16%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  font:700 clamp(26px,2.4vw,36px)/1 var(--serif);color:var(--ink);transform:rotate(-1.5deg);pointer-events:none}
.cal-date b{font:800 10px/1 var(--sans);letter-spacing:.14em;color:#B13A2D;margin-bottom:4px}
.cal-date small{font:800 10px/1 var(--sans);letter-spacing:.14em;margin-top:4px}

/* small paper notes opened by the pen and the calendar */
.desk-pop{position:absolute;z-index:960;width:min(280px,82vw);background:var(--card);color:var(--ink);padding:18px 18px 16px;border-radius:2px 6px 3px 5px;
  box-shadow:0 1px 1px rgba(40,30,15,.15),6px 12px 18px rgba(40,30,15,.3);transform:rotate(-1.2deg);font:400 15px/1.45 var(--serif)}
.desk-pop[hidden]{display:none}
.desk-pop h2{font:700 italic 21px/1.2 var(--serif);margin-bottom:6px}
.desk-pop .btn{margin-top:12px}
.desk-pop .x{position:absolute;right:8px;top:6px;background:none;border:0;font:700 18px var(--sans);cursor:pointer;color:var(--mute)}
.desk-pop::before{content:"";position:absolute;top:-10px;left:24px;width:60px;height:20px;background:rgba(232,220,178,.8);transform:rotate(-4deg)}
#pop-contact{left:24%;bottom:24%}
#pop-next{left:52%;top:20%}

/* mobile: a smaller desk, fewer frames, the key objects */
@media(max-width:700px){
  .desk{height:clamp(560px,86svh,700px)}
  .desk-head{left:16px;top:16px;max-width:62%}
  .desk-head h1{font-size:17px}
  .o-lamp,.o-calendar,.o-flipbook,.o-brush,.o-radio{display:none}
  .o-board{right:12px;top:14px;width:120px}
  .o-reel{left:10px;top:44%;width:74px}
  .o-deck{right:14px;left:auto;top:47%;bottom:auto;width:60px}
  .o-box{left:10px;bottom:46px;width:100px}
  .o-pen{left:36%;bottom:40px;width:80px}
  .o-camera{right:12px;left:auto;bottom:46px;width:76px}
  .o-ghost{left:40px;bottom:96px;width:46px}
  #pop-contact,#pop-next{left:8%;bottom:auto;top:30%}
  .print .cap{font-size:12px}
}
@media (prefers-reduced-motion:reduce){.desk.anim .print{transition:none}.o-ghost{transition:none}.scroll-cue span{animation:none}}