/* ═══════════════════════════════════════════════════════════════
   KNIP™ — Atelier voor Digitaal Knipwerk
   Papier-esthetiek naar de logica van de Nederlandse
   silhouet-illustratie: reductie, platte kleur, zwarte lijnen.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --paper:  #F6F1E7;
  --paper2: #FFFDF6;
  --ink:    #161514;
  --ink-70: rgba(22,21,20,.7);
  --red:    #E9422E;
  --blue:   #2B4BDF;
  --yellow: #FFC61A;
  --green:  #35A247;
  --green2: #57B96A;
  --pink:   #F5A3B7;
  --night2: #1E2A52;

  --f-hand:  "Shantell Sans","Segoe Print","Bradley Hand",cursive;
  --f-serif: "Instrument Serif",Georgia,serif;
  --f-mono:  "Space Mono",ui-monospace,"Courier New",monospace;

  --torn: polygon(0% 3%, 4% .8%, 9% 2.6%, 15% .4%, 21% 2.2%, 28% .6%,
                  34% 2.8%, 41% .9%, 48% 2.4%, 55% .5%, 62% 2.7%, 69% 1%,
                  76% 2.5%, 83% .7%, 90% 2.6%, 96% 1.1%, 100% 2.9%,
                  100% 100%, 0% 100%);

  --spring: cubic-bezier(.25,1.7,.45,1);
  --nav-h: 64px;
}

/* ── reset ─────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
html,body{ overscroll-behavior-y:none; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-hand);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.loading{ overflow:hidden; }
img,svg{ display:block; }
a{ color:inherit; }
button{ font-family:inherit; border:none; background:none; }
::selection{ background:var(--red); color:var(--paper); }
:focus{ outline:none; }
:focus-visible{ outline:3px dashed var(--red); outline-offset:4px; border-radius:4px; }

::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--paper); border-left:2px solid var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--ink); border:3px solid var(--paper); border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:var(--red); }

.mono{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.serif{ font-family:var(--f-serif); font-style:italic; font-weight:400; }
.ic{ width:1em; height:1em; }

/* custom cursor only where a fine pointer exists */
@media (pointer:fine){
  *{ cursor:none !important; }
}
@media (pointer:coarse){
  #cursor{ display:none; }
}

/* ── fixed layers ──────────────────────────────────────────── */
#doodles{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
#fx{ position:fixed; inset:0; width:100%; height:100%; z-index:120; pointer-events:none; }
.grain{
  position:fixed; inset:-40px; z-index:90; pointer-events:none;
  opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='0.55'/></svg>");
}

#cursor{
  position:fixed; top:0; left:0; z-index:200;
  width:38px; height:38px; margin:-19px 0 0 -19px;
  color:var(--ink); pointer-events:none; will-change:transform;
  opacity:0; transition:opacity .3s;
}
#cursor.on{ opacity:1; }
#cursor .cur-svg{ width:100%; height:100%; filter:drop-shadow(2px 2px 0 rgba(22,21,20,.18)); }
#cursor.hot{ color:var(--red); }

/* ── section labels ────────────────────────────────────────── */
.sec-label{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.sec-label .dot{ width:10px; height:10px; background:var(--red); border-radius:2px; animation:pulse 2.2s infinite; }

/* ═══════════ PRELOADER ═══════════ */
#preloader{ position:fixed; inset:0; z-index:300; }
.pl-pane{
  position:absolute; left:0; right:0; height:50.5%;
  background:var(--paper); transition:transform 1s cubic-bezier(.7,0,.2,1) .15s;
}
.pl-top{ top:0; border-bottom:2px dashed rgba(22,21,20,.25); }
.pl-bottom{ bottom:0; }
#preloader.done .pl-top{ transform:translateY(-101%); }
#preloader.done .pl-bottom{ transform:translateY(101%); }
.pl-core{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.6rem; z-index:2;
  transition:opacity .3s;
}
#preloader.done .pl-core{ opacity:0; }
.pl-logo{ font-weight:800; font-size:clamp(3rem,10vw,6rem); letter-spacing:-.02em; line-height:1; }
.pl-logo sup{ font-size:.35em; color:var(--red); }
.pl-cut{ width:min(300px,60vw); height:20px; overflow:visible; }
#pl-cutfill{ stroke-dasharray:1; stroke-dashoffset:1; }
.pl-count{ font-family:var(--f-mono); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; opacity:.7; }
#preloader.gone{ display:none; }

/* ═══════════ NAV ═══════════ */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.nav-inner{
  height:var(--nav-h); display:flex; align-items:center; gap:clamp(1rem,3vw,2.6rem);
  padding-inline:clamp(1rem,4vw,3rem);
}
.logo{
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:1.45rem; text-decoration:none; letter-spacing:-.01em;
}
.logo sup{ font-size:.5em; color:var(--red); }
.logo-sc{ width:24px; height:24px; color:var(--red); transition:transform .5s var(--spring); }
.logo:hover .logo-sc{ transform:rotate(-140deg); }
.nav-links{ display:flex; gap:clamp(.9rem,2.4vw,2rem); margin-left:auto; }
.snav{
  position:relative; text-decoration:none; font-weight:600; font-size:.98rem;
  padding-bottom:6px;
}
.snav .scribble{ position:absolute; left:0; bottom:-2px; width:100%; height:8px; overflow:visible; }
.snav .scribble path{
  stroke:var(--red); stroke-width:3.2; fill:none; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .5s ease;
}
.snav:hover .scribble path, .snav:focus-visible .scribble path{ stroke-dashoffset:0; }
.btn-magnet{
  position:relative; background:var(--ink); color:var(--paper);
  padding:.72rem 1.5rem; font-weight:700; font-size:.98rem;
  border-radius:42% 58% 55% 45% / 52% 46% 54% 48%;
  animation:blob 7s ease-in-out infinite;
  transition:background .25s; will-change:transform;
}
.btn-magnet:hover{ background:var(--red); }
.btn-magnet:active .btn-face{ display:inline-block; transform:scale(.92); }
.btn-face{ display:inline-block; transition:transform .15s; }
.nav-cut{
  position:absolute; left:0; right:0; bottom:-11px; height:22px; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 7px, transparent 7px 15px) left center / 100% 2px no-repeat;
}
#cutscissors{
  position:absolute; top:-5px; left:0; width:22px; height:22px;
  color:var(--ink); background:var(--paper); border-radius:50%;
  box-shadow:0 1px 0 var(--ink); will-change:transform;
}

/* ═══════════ HERO ═══════════ */
#hero{ position:relative; min-height:100vh; min-height:100svh; overflow:hidden; }
#gl{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero-inner{
  position:relative; z-index:2; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 3vh) clamp(1.2rem,6vw,7rem) 18vh;
}
.topline{ opacity:.75; margin-bottom:2.2rem; }
#title{
  font-weight:800; font-size:clamp(4.4rem,20.5vw,19rem);
  line-height:.82; letter-spacing:-.035em; user-select:none;
}
.ltr{
  display:inline-block; will-change:transform; opacity:0;
  transition:opacity .01s;
}
body.loaded .ltr{ opacity:1; }
#title .tm{ font-size:.32em; vertical-align:1.55em; color:var(--red); }
.tagline{
  font-style:italic; font-weight:500;
  font-size:clamp(1.35rem,3.2vw,2.5rem); margin-top:1.8rem;
}
.tagline .serif{ font-size:1.12em; color:var(--red); }
.sub{
  margin-top:1.5rem; max-width:36rem; font-size:1.02rem; line-height:1.65;
}
.sub strong{ color:var(--red); }

.stickers{
  position:absolute; right:clamp(1.5rem,7vw,8rem); top:20%;
  display:flex; flex-direction:column; gap:2.6rem; z-index:3;
}
.sticker{
  width:112px; height:112px; border-radius:50%;
  border:2.5px solid var(--ink); background:var(--paper2);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-weight:700; font-size:.82rem; line-height:1.2; padding:1rem;
  box-shadow:4px 5px 0 rgba(22,21,20,.18);
  animation:wobble 5s ease-in-out infinite;
}
.st-1{ transform:rotate(-9deg); animation-delay:.2s; }
.st-2{ transform:rotate(6deg);  background:var(--yellow); animation-delay:1.4s; }
.st-3{ transform:rotate(-4deg); background:var(--pink); animation-delay:2.6s; }

.scroll-hint{
  position:absolute; left:clamp(1.2rem,6vw,7rem); bottom:110px;
  display:flex; align-items:center; gap:.7rem; opacity:.8;
}
.scroll-hint span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.scroll-hint .ic{ width:18px; height:18px; animation:bounce 1.7s ease-in-out infinite; }
body.scrolled .scroll-hint{ opacity:0; transition:opacity .5s; }

.cat-wrap{
  position:absolute; right:clamp(3rem,11vw,13rem); bottom:130px;
  width:clamp(190px,24vw,320px); z-index:3;
}
#cat{ width:100%; height:auto; overflow:visible; }
#cat .eye{ transform-box:fill-box; transform-origin:center; transition:transform .09s ease-in; }
#cat.blink .eye{ transform:scaleY(.08); }
#gTail{ transform-box:view-box; transform-origin:186px 152px; animation:tail 3.4s ease-in-out infinite alternate; }
#cat:hover #gTail, #cat.excited #gTail{ animation-duration:.8s; }
.bubble{
  position:absolute; top:-14px; left:-30px;
  background:var(--paper2); border:2.5px solid var(--ink);
  border-radius:50% 50% 50% 8%; padding:.35rem 1rem;
  font-weight:700; font-size:1rem; opacity:0; transform:scale(.3) rotate(-12deg);
  transition:all .35s var(--spring); pointer-events:none;
}
.bubble.show{ opacity:1; transform:scale(1) rotate(-8deg); }

.marquee{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  background:var(--yellow);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  padding:.65rem 0; overflow:hidden;
}
.mq-inner{ display:flex; width:max-content; animation:mq 26s linear infinite; }
.mq-inner span{
  white-space:nowrap; font-weight:700; font-size:clamp(1rem,2.2vw,1.35rem);
  padding-right:2.2rem; letter-spacing:.02em;
}
.mq-inner i{ font-style:normal; color:var(--red); padding-right:2.2rem; }

/* ═══════════ PIN SYSTEM ═══════════ */
.pin-wrap{ position:relative; }
.pin{ position:sticky; top:0; height:100vh; overflow:hidden; }

/* ═══════════ 01 MANIFEST ═══════════ */
#manifest{ z-index:1; }
.manifest-stage{
  height:100%; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding-inline:clamp(1.2rem,6vw,7rem);
}
.bg-word{
  position:absolute; top:4%; left:2%; white-space:nowrap; pointer-events:none;
  font-weight:800; font-size:clamp(8rem,24vw,22rem); line-height:1;
  color:transparent; -webkit-text-stroke:2.5px rgba(22,21,20,.09);
  z-index:0; will-change:transform;
}
.manifest-stage .sec-label{ position:relative; z-index:2; margin-bottom:3.5rem; }
.lines{ position:relative; z-index:2; display:flex; flex-direction:column; gap:clamp(1rem,3.2vh,2.4rem); }
.line{
  font-weight:700; font-size:clamp(1.9rem,6vw,4.9rem); line-height:1.06;
  max-width:20ch; will-change:transform;
}
.line[data-accent="red"]{ --acc:var(--red); }
.line[data-accent="blue"]{ --acc:var(--blue); }
.line[data-accent="yellow"]{ --acc:#E8A800; }
.line[data-accent="green"]{ --acc:var(--green); }
.w{ position:relative; display:inline-block; }
.w i{
  position:absolute; left:0; top:0; font-style:inherit; white-space:pre;
  color:var(--acc); clip-path:inset(-20% calc(100% - var(--f,0%)) -20% 0);
}
.w.big{ font-size:1.32em; }
.scribbles{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.scr{
  position:absolute; font-style:italic; font-weight:700;
  font-size:clamp(1.1rem,2.4vw,1.8rem); color:var(--blue);
  opacity:0; transform:rotate(var(--tr,-10deg)) scale(.3);
  transition:transform .55s var(--spring), opacity .3s;
}
.scr.on{ opacity:1; transform:rotate(var(--tr,-10deg)) scale(1); }
.s1{ top:16%; right:18%; --tr:-12deg; color:var(--red); }
.s2{ top:34%; right:8%;  --tr:7deg;  color:var(--green); }
.s3{ bottom:26%; right:22%; --tr:-6deg; }
.s4{ top:22%; right:34%; --tr:14deg; color:var(--red); font-size:2.2rem; }
.s5{ bottom:14%; right:10%; --tr:4deg; color:var(--ink-70); }

/* ═══════════ 02 WERK ═══════════ */
#werk .pin{ background:var(--ink); color:var(--paper); }
#werk .sec-label{ color:var(--paper); }
.werk-track{
  position:relative; height:100%;
  display:flex; align-items:center; gap:clamp(3rem,6vw,6rem);
  padding-inline:6vw; width:max-content; will-change:transform;
}
.sheet-intro{ width:min(480px,86vw); flex:none; }
.werk-title{
  font-weight:800; font-size:clamp(2.8rem,6.5vw,5.4rem);
  line-height:.95; margin-top:1.4rem;
}
.werk-title .serif{ color:var(--yellow); }
.werk-hint{ opacity:.65; margin-top:1.6rem; }
.big-star{ width:60px; height:60px; color:var(--red); margin-top:2.4rem; animation:spin 16s linear infinite; }

.sheet{ width:min(420px,80vw); flex:none; perspective:1100px; }
.tilt{ will-change:transform; filter:drop-shadow(12px 14px 0 rgba(0,0,0,.5)); }
.flip{
  position:relative; width:100%; height:clamp(520px,64vh,600px);
  transform-style:preserve-3d;
  transition:transform .85s cubic-bezier(.3,1.15,.35,1);
}
.sheet.flipped .flip{ transform:rotateY(180deg); }
.face{
  position:absolute; inset:0; padding:1.7rem 1.6rem;
  display:flex; flex-direction:column;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
}
.paper{ background:var(--paper2); clip-path:var(--torn); color:var(--ink); }
.face.back{ transform:rotateY(180deg); background:#F4EEDD; }
.meta{ display:flex; justify-content:space-between; margin-bottom:1rem; opacity:.85; }
.scene{ flex:1; display:flex; align-items:center; min-height:0; }
.scene svg{ width:100%; height:auto; max-height:100%; }
.face h3{ font-weight:800; font-size:1.55rem; margin-top:1.1rem; letter-spacing:-.01em; }
.tags{ margin-top:.4rem; opacity:.7; letter-spacing:.1em; }
.flip-hint{
  position:absolute; bottom:12px; right:14px; font-size:1.4rem;
  opacity:.35; animation:spin 5s linear infinite;
}
.face.back h3{ color:var(--red); }
.face.back p{ margin-top:1rem; font-size:1rem; line-height:1.6; }
.stat{ margin-top:auto; padding-bottom:3rem; }
.stat strong{ font-weight:800; font-size:2.7rem; color:var(--red); line-height:1; }
.stat .mono{ display:block; margin-top:.35rem; opacity:.6; letter-spacing:.08em; text-transform:none; }
.stamp{
  position:absolute; bottom:16px; right:14px; transform:rotate(-8deg);
  border:2.5px dashed var(--red); color:var(--red); border-radius:6px;
  padding:.3rem .8rem; font-weight:700; font-size:.78rem;
  letter-spacing:.12em; text-transform:uppercase;
}
.tape{
  position:absolute; width:92px; height:26px;
  background:rgba(247,214,130,.85); border:1px solid rgba(22,21,20,.14);
  box-shadow:2px 3px 6px rgba(22,21,20,.13); z-index:5;
}
.t1{ top:-11px; left:10%; transform:rotate(-6deg); }
.t2{ bottom:-9px; right:8%; transform:rotate(5deg); }
.sheet-outro{ width:320px; flex:none; }
.sheet-outro .mono{ opacity:.6; }
.outro-big{ font-weight:700; font-size:2rem; margin-top:.8rem; }
.outro-big .serif{ color:var(--yellow); }

/* ═══════════ 03 SPEELTUIN ═══════════ */
#speeltuin{ position:relative; z-index:1; padding:16vh 0 12vh; }
.wrap{ width:min(1100px,92vw); margin-inline:auto; }
.sec-title{ font-weight:800; font-size:clamp(2.5rem,6.5vw,4.8rem); line-height:.98; margin-top:1.4rem; }
.sec-title .serif{ color:var(--blue); }
.sec-sub{ margin-top:1.4rem; max-width:46rem; font-size:1.05rem; line-height:1.65; }
.sec-sub strong{ color:var(--red); }
.kist-bar{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin-top:2.4rem;
}
.kbtn{
  font-weight:800; font-size:1rem; padding:.72rem 1.5rem;
  background:var(--ink); color:var(--paper); border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--red);
  transition:transform .1s, background .2s, box-shadow .1s;
}
.kbtn:hover{ background:var(--blue); }
.kbtn:active{ transform:translate(4px,4px); box-shadow:1px 1px 0 var(--red); }
.kbtn-red{ box-shadow:5px 5px 0 var(--blue); }
.kbtn-red:active{ box-shadow:1px 1px 0 var(--blue); }
.throwcount{ margin-left:auto; opacity:.8; letter-spacing:.1em; }
.throwcount strong{ color:var(--red); font-size:1rem; }
.kist-frame{ position:relative; margin-top:1.2rem; }
#kist{
  display:block; width:100%; height:min(62vh,560px);
  background:var(--paper2); border:3px solid var(--ink); border-radius:4px;
  touch-action:none;
}
.kist-note{ position:absolute; bottom:10px; right:14px; opacity:.5; letter-spacing:.06em; text-transform:lowercase; }
.kt1{ top:-13px; left:6%; }
.kt2{ top:-13px; right:6%; transform:rotate(6deg); }

/* ═══════════ 04 PROCES ═══════════ */
#proces .pin{ background:var(--yellow); }
.proces-grid{
  height:100%; display:grid; grid-template-columns:minmax(300px,460px) 1fr;
  gap:clamp(2rem,5vw,5rem); align-items:center;
  padding-inline:clamp(1.2rem,5vw,5rem);
}
.proces-left .sec-title .serif{ color:var(--red); }
.steps{ list-style:none; margin-top:2.2rem; }
.steps li{
  display:flex; gap:1.1rem; padding:1rem 0;
  border-bottom:2px dashed rgba(22,21,20,.3);
  opacity:.32; transform:translateX(-14px);
  transition:opacity .5s, transform .5s var(--spring);
}
.steps li.active{ opacity:1; transform:translateX(0); }
.step-n{ color:var(--red); font-weight:700; padding-top:.25rem; }
.steps h3{ font-weight:800; font-size:1.4rem; }
.steps p{ font-size:.95rem; margin-top:.2rem; opacity:.85; }

.theater{
  position:relative; width:100%; max-width:680px; margin-inline:auto;
  aspect-ratio:8/5.4; perspective:1200px; perspective-origin:50% 42%;
}
.stage{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; }
.plane{ position:absolute; inset:0; transform-origin:50% 100%; will-change:transform; }
.plane svg{ width:100%; height:100%; overflow:visible; }
.p-back, .p-mid{ border-radius:10px; overflow:hidden; box-shadow:0 -2px 0 rgba(22,21,20,.25) inset; }
.p-actors{ pointer-events:none; }
.p-actors svg{
  position:absolute; bottom:4%; left:6%; width:36%; height:auto;
  opacity:0; transform:scale(.2); transition:opacity .4s, transform .7s var(--spring);
}
.p-actors.on svg{ opacity:1; transform:scale(1); }
.p-wing{ top:-4%; bottom:-2%; }
.wing-l{ right:auto; width:23%; }
.wing-r{ left:auto; width:23%; }
.p-lip{ top:auto; height:86px; }
.lip-face{
  height:100%; background:var(--ink); border-radius:10px 10px 0 0;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,1.8vw,20px);
  box-shadow:inset 0 5px 0 rgba(0,0,0,.4);
}
.bulb{
  width:11px; height:11px; border-radius:50%; background:var(--yellow);
  box-shadow:0 0 12px 3px rgba(255,198,26,.8);
  animation:bulb 1.9s calc(var(--i)*.16s) ease-in-out infinite;
}
.lip-brand{
  color:var(--paper); font-weight:800; font-size:clamp(.7rem,1.4vw,.95rem);
  letter-spacing:.22em; padding-inline:1rem;
}
.lip-brand sup{ color:var(--yellow); font-size:.6em; }
.stage-shadow{
  position:absolute; left:6%; right:6%; bottom:-30px; height:36px;
  background:radial-gradient(ellipse at center, rgba(22,21,20,.3), transparent 68%);
}

/* ═══════════ 05 CONTACT ═══════════ */
#contact{ position:relative; z-index:1; background:var(--red); padding:14vh 0 5vh; overflow:hidden; }
.contact-inner{ width:min(1200px,92vw); margin-inline:auto; }
.zeg{
  font-weight:800; font-size:clamp(4rem,16vw,14rem); line-height:.88;
  letter-spacing:-.02em; margin-top:1.2rem;
}
.zeg .serif{ color:var(--paper); }
.mail{
  display:inline-block; margin-top:2rem;
  font-weight:800; font-size:clamp(1.5rem,5.5vw,3.9rem);
  letter-spacing:-.01em; text-decoration:none;
  border-bottom:5px solid var(--ink); padding-bottom:.15rem;
}
.m-ltr{
  display:inline-block; transition:transform .4s var(--spring), color .2s;
}
.m-ltr:hover{ transform:translateY(-16px) rotate(-9deg) scale(1.15); color:var(--paper); }
.contact-sub{ margin-top:1.8rem; font-size:1.1rem; }
.stamps{ display:flex; gap:1.4rem; flex-wrap:wrap; margin-top:3.2rem; }
.stamp2{
  display:inline-block; text-decoration:none;
  border:2.5px dashed var(--ink); background:var(--paper2);
  padding:.85rem 1.7rem; font-weight:800; font-size:.95rem; letter-spacing:.2em;
  transition:transform .35s var(--spring), background .2s, color .2s;
}
.stamp2:hover{ background:var(--ink); color:var(--paper); transform:rotate(0deg) scale(1.08) !important; }
.s-a{ transform:rotate(-4deg); } .s-b{ transform:rotate(3deg); }
.s-c{ transform:rotate(-2deg); } .s-d{ transform:rotate(5deg); }

.catwalk{
  margin-top:4.5rem; height:150px; position:relative; overflow:hidden;
  border-top:3px solid var(--ink);
  background:repeating-linear-gradient(90deg, transparent 0 34px, rgba(22,21,20,.05) 34px 36px);
}
#walkcat{
  position:absolute; bottom:4px; left:0; width:132px; height:auto;
  will-change:transform; transform-origin:bottom center;
}
#walkcat .leg{ transform-box:fill-box; transform-origin:50% 8%; }
#walkcat.walking .leg{ animation:legswing .44s ease-in-out infinite alternate; }
#walkcat.walking .l2{ animation-delay:-.22s; }
#walkcat.walking .l3{ animation-delay:-.11s; }
#walkcat.walking .l4{ animation-delay:-.33s; }

.colophon{
  margin-top:3rem; border-top:2.5px dashed rgba(22,21,20,.45);
  padding-top:1.8rem; display:grid; gap:.55rem; font-size:.85rem;
}
.colophon .mono{ opacity:.8; letter-spacing:.08em; text-transform:none; font-size:.68rem; }
.egg-hint strong{ color:var(--ink); background:var(--yellow); padding:0 .4rem; }

/* ═══════════ TOAST ═══════════ */
#toast{
  position:fixed; left:50%; bottom:30px; z-index:150;
  transform:translate(-50%,250%);
  background:var(--ink); color:var(--paper);
  border:2.5px solid var(--paper); box-shadow:6px 6px 0 var(--yellow);
  padding:.85rem 1.5rem; font-weight:700; font-size:1rem;
  transition:transform .55s var(--spring);
}
#toast.show{ transform:translate(-50%,0); }

.nojs{ background:var(--yellow); text-align:center; padding:1rem; font-weight:700; }

/* ═══════════ KEYFRAMES ═══════════ */
@keyframes mq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes wobble{
  0%,100%{ transform:rotate(var(--wr,-6deg)); }
  50%{ transform:rotate(calc(var(--wr,-6deg) * -1)) translateY(-4px); }
}
.st-1{ --wr:-9deg; } .st-2{ --wr:6deg; } .st-3{ --wr:-4deg; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.35); } }
@keyframes tail{ from{ transform:rotate(-7deg); } to{ transform:rotate(11deg); } }
@keyframes blob{
  0%,100%{ border-radius:42% 58% 55% 45% / 52% 46% 54% 48%; }
  33%{ border-radius:58% 42% 46% 54% / 46% 55% 45% 54%; }
  66%{ border-radius:48% 52% 60% 40% / 55% 42% 58% 45%; }
}
@keyframes bulb{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
@keyframes legswing{ from{ transform:rotate(-17deg); } to{ transform:rotate(17deg); } }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:960px){
  .proces-grid{ grid-template-columns:1fr; align-content:center; gap:1.5rem; }
  .steps{ display:grid; grid-template-columns:1fr 1fr; gap:0 2rem; margin-top:1.2rem; }
  .theater{ max-width:520px; }
}
@media (max-width:720px){
  :root{ --nav-h:56px; }
  .nav-links{ display:none; }
  .btn-magnet{ margin-left:auto; padding:.55rem 1.1rem; font-size:.85rem; }
  .stickers{ display:none; }
  .cat-wrap{ position:static; width:190px; margin-top:2.6rem; }
  .hero-inner{ padding-bottom:24vh; }
  .scroll-hint{ bottom:130px; }
  .steps{ grid-template-columns:1fr; }
  #kist{ height:54vh; }
  .throwcount{ margin-left:0; width:100%; }
  .face h3{ font-size:1.3rem; }
  .stat strong{ font-size:2.1rem; }
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  .mq-inner, .sticker, .bulb, .big-star, .flip-hint, #gTail, .scroll-hint .ic,
  .btn-magnet, .sec-label .dot{ animation:none !important; }
  .flip, .m-ltr, .scr, .p-actors svg{ transition:none !important; }
  html{ scroll-behavior:auto; }
}