/* ---------------- header ---------------- */
.head-right{display:flex;align-items:center;gap:12px;pointer-events:auto}
header{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:flex-start;padding:22px 26px;pointer-events:none}
.brand{pointer-events:auto;font-family:'Fredoka',sans-serif;font-weight:500;font-size:24px;letter-spacing:.01em;color:#fff;
  background:linear-gradient(100deg,var(--purple) 0%,#7884FF 50%,var(--purple) 100%);
  padding:2px 10px;border-radius:4px;transform:rotate(-.5deg)}
.avatar{pointer-events:auto;width:42px;height:42px;border-radius:50%;border:2px solid #fff;
  background:linear-gradient(140deg,#6D5BA8,#D96E48);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:14px;box-shadow:0 1px 2px rgba(33,31,28,.07),0 10px 26px rgba(33,31,28,.12)}

/* ---------------- left tool strip ---------------- */
.tools{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:55;
  background:#fff;border-radius:14px;padding:16px 11px;display:flex;flex-direction:column;gap:18px;border:1px solid rgba(33,31,28,.12)}
.tool{position:relative;width:26px;height:26px;display:flex;align-items:center;justify-content:center;cursor:default;
  color:#211F1C;transition:transform .22s ease,color .22s ease}
.tool:hover{transform:scale(1.18);color:#000}
a.tool{cursor:pointer}
.tool svg{display:block;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tool .tip{position:absolute;left:46px;top:50%;transform:translateY(-50%) scale(.9);opacity:0;pointer-events:none;
  background:#211F1C;color:#fff;font-size:11px;font-weight:500;padding:5px 10px;border-radius:7px;white-space:nowrap;transition:.18s ease}
.tool:hover .tip{opacity:1;transform:translateY(-50%) scale(1)}

/* ---------------- board ---------------- */
.board{
  position:relative;
  width:1540px;
  height:960px;
  max-width:none;
  margin:0;
  transform-origin:0 0;
}
.item{position:absolute;left:var(--cx);top:var(--cy);transform:translate(-50%,-50%) rotate(var(--rot,0deg));
  opacity:0;animation:pop .55s cubic-bezier(.25,.9,.35,1.25) forwards;animation-delay:var(--d,0s);
  cursor:grab;touch-action:none}
.item.dragging{z-index:95;animation:none;opacity:1;cursor:grabbing!important}
.item.dragging *{cursor:grabbing!important;pointer-events:none}
.item.dragging .deck .card{transform:none}
@keyframes pop{
  from{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.82)}
  to{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}
}
@media (prefers-reduced-motion:reduce){.item{animation:none;opacity:1}}

/* ---------------- hero ---------------- */
.hero{text-align:center;width:700px;max-width:92vw;z-index:5}
.hero h1{font-weight:500;font-size:clamp(38px,4.6vw,62px);letter-spacing:-.035em;line-height:1.02;white-space:nowrap}
.hero h1 .hl{font-style:italic;padding:0 .12em;border-radius:.12em;color:#fff;
  background:linear-gradient(100deg,var(--purple) 0%,#7884FF 50%,var(--purple) 100%)}
.hero p{margin-top:22px;font-size:16px;letter-spacing:.3em;font-weight:500;color:var(--grey);text-transform:uppercase}

/* ---------------- project decks ---------------- */
.deckwrap{text-align:center;z-index:6}
.deck{position:relative;display:block;width:218px;cursor:none}
.deck .layer{position:absolute;inset:0;background:#fff;border:1px solid rgba(33,31,28,.1);border-radius:14px;
  transform-origin:85% 95%;transform:rotate(var(--lr));transition:transform .45s cubic-bezier(.3,.9,.3,1);
  padding:10px 10px 0;overflow:hidden}
.deck .layer-shot{display:block;height:168px;border-radius:9px;overflow:hidden;background:var(--surface-muted)}
.deck .layer-shot img{width:100%;height:100%;object-fit:cover;display:block}
.deck:hover .l1{transform:rotate(calc(var(--lr)*1.9))}
.deck:hover .l2{transform:rotate(calc(var(--lr)*1.9))}
.deck:hover .l3{transform:rotate(calc(var(--lr)*1.9))}
.deck .card{position:relative;display:block;background:#fff;border:1px solid rgba(33,31,28,.1);border-radius:14px;padding:10px 10px 14px;
  transition:transform .35s ease;text-align:left}
.deck:hover .card{transform:translateY(-5px)}
.shot{display:block;height:168px;border-radius:9px;overflow:hidden;position:relative;background:var(--surface-muted)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot img[src*="assets/"],.deck .layer-shot img[src*="assets/"]{object-fit:contain;object-position:center 85%;padding:10px;background:#F4F2EC}
.dots{display:flex;gap:5px;margin:11px 2px 6px}
.dots i{width:8px;height:8px;border-radius:50%}
.deck b{display:block;font-size:14px;font-weight:600;margin:12px 2px}
.deck small{display:block;font-size:11px;line-height:1.45;color:var(--grey);margin:3px 2px 0}
.cat{font-family:'Fredoka',sans-serif;font-weight:500;font-size:22px;margin-top:18px;color:#33312C}
.tags{display:flex;justify-content:center;gap:6px;margin-top:8px;flex-wrap:wrap}
.tags span{font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#6B675A;
  background:#EFEDE4;border:var(--border-soft);padding:4px 10px;border-radius:var(--radius-pill)}

/* ---------------- stickers ---------------- */
.sticker{filter:drop-shadow(0 4px 7px rgba(33,31,28,.16));z-index:4}
/* draggable stickers use the big "Drag" cursor on desktop (default cursor hidden) */
.item.sticker,.item.sticker *{cursor:none}
.sticker svg,.sticker img{display:block}
.sticker img{height:auto;-webkit-user-drag:none}
/* hanging spidey — attached to the top of the window */
.spidey-top{position:fixed;top:-6px;left:79%;z-index:56;
  filter:drop-shadow(0 4px 7px rgba(33,31,28,.16));
  opacity:0;animation:fadein .5s ease forwards .9s}
@keyframes fadein{to{opacity:1}}
.sway img{transform-origin:50% 0;animation:sway 3.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){
  .sway img,.spidey-top{animation:none!important}
  #intro img{transition:none!important}
}

/* ---------------- callout cards ---------------- */
.callout{border-radius:18px;padding:18px;transition:transform .3s ease;z-index:7}
.callout:hover{transform:translate(-50%,-50%) rotate(0deg) translateY(-5px)!important}
.callout.green{width:235px;background:var(--green);cursor:none}
.callout.green h2{font-family:'Fredoka',sans-serif;font-weight:500;font-size:20px;color:#14401F;margin-bottom:10px}
.callout.green .photo{display:block;border-radius:10px;overflow:hidden;background:#BFE8C3}
.callout.green .cta{display:block;margin-top:12px;font-size:12px;font-weight:600;color:#14401F}
.callout.pink{width:215px;min-height:215px;background:var(--pink);color:#fff;cursor:none;display:flex;flex-direction:column}
.callout.pink h2{font-family:'Fredoka',sans-serif;font-weight:500;font-size:24px;margin-bottom:6px}
.callout.pink p{font-size:11px;line-height:1.5;color:rgba(255,255,255,.85)}
.callout.pink .mail{margin-top:auto;padding-top:26px;font-size:12.5px;font-weight:600;text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.callout.pink .cta{margin-top:8px;font-size:11px;font-weight:500;color:rgba(255,255,255,.9)}

/* ---------------- socials + badge ---------------- */
.socials{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:58;
  display:flex;gap:20px;background:#fff;padding:13px 22px;border-radius:14px;border:1px solid rgba(33,31,28,.12);
  opacity:0;animation:pop2 .5s ease forwards 1.2s}
@keyframes pop2{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.socials a{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:#211F1C;transition:transform .25s ease}
.socials a:hover{transform:translateY(-3px) scale(1.12)}
.socials a svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- intro loader ---------------- */
#intro{position:fixed;inset:0;z-index:200;background-color:var(--bg);
  transition:opacity .65s ease}
#intro.out{opacity:0;pointer-events:none}
#intro img{position:absolute;height:var(--h);width:auto;
  transform:translate(-50%,-50%) rotate(var(--r)) scale(.4);opacity:0;
  filter:drop-shadow(0 5px 9px rgba(33,31,28,.18));
  transition:opacity .22s ease,transform .4s cubic-bezier(.2,.9,.3,1.35)}
#intro img.on{opacity:1;transform:translate(-50%,-50%) rotate(var(--r)) scale(1)}
#intro .num{position:absolute;right:36px;bottom:-30px;font-weight:600;
  font-size:clamp(120px,16vw,230px);letter-spacing:-.05em;line-height:1;
  color:rgba(33,31,28,.07);font-variant-numeric:tabular-nums}
/* board waits for intro */
body.hold .item{animation-play-state:paused}

/* ---------------- EXPLORE / VIEW cursor ---------------- */
#xcursor{position:fixed;left:0;top:0;width:88px;height:88px;border:1.5px solid #211F1C;border-radius:50%;z-index:99;
  display:flex;align-items:center;justify-content:center;gap:4px;pointer-events:none;
  background:rgba(255,255,255,.55);backdrop-filter:blur(2px);
  font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translate(-50%,-50%) scale(.6);transition:opacity .2s ease,transform .2s ease}
#xcursor.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
#xcursor::after{content:"";width:4px;height:4px;border-radius:50%;background:#211F1C}