/* KK Chips — global fun FX layer (cursor, reveal, floats, marquee) */
:root{
  --kk-gold:#F5B301; --kk-leaf:#1E7A34; --kk-leaf-dark:#16423C;
  --kk-brown:#2A1B14; --kk-cream:#FFFBEE; --kk-chili:#C05C33;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* ---------- custom cursor ---------- */
.kk-cursor-dot,.kk-cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;border-radius:50%;transform:translate(-50%,-50%)}
.kk-cursor-dot{width:10px;height:10px;background:#F5B301;box-shadow:0 0 0 2px #2A1B14}
.kk-cursor-ring{width:42px;height:42px;border:2px solid rgba(30,122,52,.65);background:rgba(245,179,1,.12);transition:width .25s,height .25s,background .25s,border .25s;display:flex;align-items:center;justify-content:center}
.kk-cursor-ring.is-hover{width:68px;height:68px;background:rgba(245,179,1,.28);border-color:#2A1B14}
.kk-cursor-ring .kk-cursor-label{font:800 10px/1 Outfit,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#2A1B14;opacity:0}
.kk-cursor-ring.is-hover .kk-cursor-label{opacity:1}
@media (pointer:coarse){.kk-cursor-dot,.kk-cursor-ring{display:none}}
@media (pointer:fine){body.kk-has-cursor, body.kk-has-cursor a, body.kk-has-cursor button{cursor:none}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal-left{transform:translateX(-44px)}
.reveal-right{transform:translateX(44px)}
.reveal-zoom{transform:scale(.86)}
.reveal.in.reveal-left,.reveal.in.reveal-right,.reveal.in.reveal-zoom{transform:none}
.reveal-d1{transition-delay:.08s}.reveal-d2{transition-delay:.16s}.reveal-d3{transition-delay:.24s}.reveal-d4{transition-delay:.32s}

/* ---------- floats & wiggles ---------- */
@keyframes kk-float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes kk-float-x{0%,100%{transform:translate(0,0) rotate(var(--r,0deg))}50%{transform:translate(10px,-12px) rotate(calc(var(--r,0deg) + 4deg))}}
@keyframes kk-spin-slow{to{transform:rotate(360deg)}}
@keyframes kk-wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes kk-pop-in{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes kk-marquee{to{transform:translateX(-50%)}}
@keyframes kk-shine{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
@keyframes kk-blob{0%,100%{border-radius:58% 42% 55% 45%/48% 55% 45% 52%}50%{border-radius:45% 55% 42% 58%/55% 42% 58% 45%}}
.kk-float{animation:kk-float 5s ease-in-out infinite}
.kk-float-x{animation:kk-float-x 7s ease-in-out infinite}
.kk-wiggle{animation:kk-wiggle 3.2s ease-in-out infinite}
.kk-spin-slow{animation:kk-spin-slow 22s linear infinite}

/* ---------- marquee ribbon ---------- */
.kk-marquee{overflow:hidden;white-space:nowrap}
.kk-marquee-track{display:inline-flex;gap:0;animation:kk-marquee 22s linear infinite;will-change:transform}
.kk-marquee:hover .kk-marquee-track{animation-play-state:paused}

/* ---------- brush-stroke CTA (like reference yellow paint) ---------- */
.kk-brush{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.7rem;font-weight:900;letter-spacing:.04em;color:#2A1B14;padding:1rem 2.2rem;transition:transform .25s}
.kk-brush::before{content:"";position:absolute;inset:0;z-index:-1;background:#FFC21A;
  border-radius:2% 96% 3% 95%/95% 4% 96% 5%;transform:rotate(-1.5deg);
  box-shadow:4px 4px 0 #2A1B14;transition:transform .25s,box-shadow .25s;
  /* rough paint edge */
  clip-path:polygon(1% 12%,7% 4%,22% 2%,41% 0%,63% 3%,82% 1%,96% 6%,99% 22%,98% 45%,99% 68%,95% 90%,83% 97%,62% 99%,40% 98%,20% 99%,6% 95%,0% 82%,2% 60%,0% 38%)}
.kk-brush::after{content:"";position:absolute;top:0;bottom:0;width:38%;z-index:1;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);transform:translateX(-120%) skewX(-18deg);animation:kk-shine 3.4s ease-in-out infinite}
.kk-brush:hover{transform:translateY(-3px) rotate(-1deg)}
.kk-brush:hover::before{transform:rotate(.5deg) scale(1.03);box-shadow:6px 7px 0 #2A1B14}
.kk-brush:active{transform:translateY(1px)}

/* ---------- paint splash badge ---------- */
.kk-splash{position:relative;display:grid;place-items:center;text-align:center;color:#2A1B14;filter:drop-shadow(3px 4px 0 rgba(42,27,20,.9))}
.kk-splash svg{position:absolute;inset:0;width:100%;height:100%}
.kk-splash span{position:relative;font-weight:900;line-height:1.05}

/* ---------- sticker / stamp ---------- */
.kk-sticker{box-shadow:4px 4px 0 #2A1B14;border:2px solid #2A1B14}

/* ---------- leaf blobs behind hero ---------- */
.kk-blob{position:absolute;filter:saturate(1.15);animation:kk-blob 12s ease-in-out infinite;pointer-events:none}

/* ---------- tilt cards ---------- */
[data-tilt]{transform-style:preserve-3d;will-change:transform;transition:box-shadow .3s}
[data-tilt] img,[data-tilt] .kk-lift{transform:translateZ(24px)}

/* ---------- magnetic buttons ---------- */
[data-magnetic]{transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s;will-change:transform}

/* ---------- underline sketch ---------- */
.kk-sketch{position:relative}
.kk-sketch>svg{position:absolute;left:0;right:0;bottom:-.45em;width:100%;height:.6em}

/* ---------- chip particles ---------- */
.kk-chip-bit{position:fixed;z-index:9998;pointer-events:none;font-size:18px;will-change:transform,opacity}

/* ---------- image frame doodles ---------- */
.kk-doodle-ring{position:absolute;border:3px dashed rgba(245,179,1,.9);border-radius:9999px;animation:kk-spin-slow 26s linear infinite;pointer-events:none}
.kk-hand{font-family:"Caveat",cursive}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .kk-float,.kk-float-x,.kk-wiggle,.kk-spin-slow,.kk-marquee-track,.kk-brush::after{animation:none!important}
  .reveal{opacity:1;transform:none;transition:none}
  .kk-cursor-dot,.kk-cursor-ring{display:none}
}