/* CORNINU motion + sticker layer, shared by index and dashboard */
:root{--ink:#111;--paper:#fffdf5;--leaf:#5cc46a;--pink:#ff7aa8;--sky:#6ec8ff}

/* Drifting background stickers */
.drift{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
.drift span{position:absolute;bottom:-60px;font-size:var(--s,28px);opacity:.16;animation:rise var(--d,18s) linear var(--w,0s) infinite;filter:saturate(1.2)}
@keyframes rise{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(var(--x,40px),-55vh) rotate(180deg)}100%{transform:translate(0,-115vh) rotate(360deg)}}

/* Die-cut sticker look */
.sticker{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:14px;background:var(--bgc,var(--yellow));color:var(--ink);font:900 .95rem/1 system-ui,sans-serif;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  border:4px solid var(--paper);box-shadow:0 6px 0 rgba(0,0,0,.25),0 14px 26px rgba(0,0,0,.35);transform:rotate(var(--r,-6deg));user-select:none;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.sticker:hover{transform:rotate(calc(var(--r,-6deg) * -1)) scale(1.12);box-shadow:0 10px 0 rgba(0,0,0,.2),0 20px 34px rgba(0,0,0,.4)}
.sticker.round{border-radius:50%;width:var(--sz,86px);height:var(--sz,86px);justify-content:center;text-align:center;padding:6px;font-size:.78rem;line-height:1.05;white-space:normal}
.sticker.emoji{font-size:2rem;padding:6px 10px;border-radius:50%;background:var(--paper)}
.sticker.drag{cursor:grab;touch-action:none}.sticker.drag:active{cursor:grabbing}
.sticker::after{content:"";position:absolute;right:-4px;top:-4px;width:16px;height:16px;background:linear-gradient(225deg,#0000 50%,#e8e2cf 50%);border-radius:0 10px 0 4px;box-shadow:-2px 2px 3px rgba(0,0,0,.2)}
.sticker{position:relative}

/* Hero art */
.art.stage{position:relative;border:0;background:none;overflow:visible;aspect-ratio:1;display:grid;place-items:center}
.art.stage .mascot{width:86%;filter:drop-shadow(0 22px 30px rgba(0,0,0,.5));animation:bob 4.5s ease-in-out infinite}
.art.stage .mascot:hover{animation-duration:1.2s}
.art.stage .glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,#ffcc2255 0,#ffcc2200 65%);animation:breathe 5s ease-in-out infinite}
.art.stage .rays{position:absolute;inset:-4%;border-radius:50%;background:repeating-conic-gradient(#ffcc2214 0 10deg,#0000 10deg 20deg);animation:spin 60s linear infinite;mask:radial-gradient(circle,#000 30%,#0000 70%)}
.art.stage .sticker{position:absolute;z-index:2;animation:float 6s ease-in-out infinite;animation-delay:var(--fd,0s)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
@keyframes breathe{0%,100%{transform:scale(.95);opacity:.7}50%{transform:scale(1.05);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.mascot .tail{transform-origin:200px 330px;animation:wag .5s ease-in-out infinite alternate}
.mascot .lens{animation:glint 4s ease-in-out infinite}
@keyframes wag{to{transform:rotate(8deg)}}
@keyframes glint{0%,70%,100%{opacity:.15}80%{opacity:.9}}

/* Headline pop */
h1>.pop{color:inherit}h1 .pop{transition:translate .25s,rotate .25s,scale .25s cubic-bezier(.3,1.8,.5,1)}h1 .pop:hover{translate:0 -.12em;rotate:-6deg;scale:1.15}
.pop{display:inline-block;opacity:0;transform:translateY(.4em) scale(.6) rotate(-8deg);animation:pop .55s cubic-bezier(.3,1.7,.5,1) forwards;animation-delay:calc(var(--i) * 45ms + .1s)}
@keyframes pop{to{opacity:1;transform:none}}

/* Buttons */
.btn{position:relative;overflow:hidden;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 10px 24px #ffcc2240}
.btn:active{transform:scale(.96)}
.btn:not(.alt)::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,#fff0,#fffa,#fff0);transform:skewX(-20deg);animation:shine 3.5s ease-in-out infinite}
@keyframes shine{0%,60%{left:-60%}100%{left:130%}}
.brand{display:inline-block;transition:transform .3s}.brand:hover{transform:rotate(-4deg) scale(1.06)}

/* Marquee ticker */
.ticker{overflow:hidden;background:var(--yellow);color:#111;border-block:4px solid var(--paper);transform:rotate(-1.5deg);margin:6px -4vw 46px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.ticker div{display:flex;width:max-content;animation:marquee 26s linear infinite;font:900 1.15rem/1 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.ticker span{padding:14px 22px;white-space:nowrap}
.ticker:hover div{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Scroll reveal */
.reveal{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.3,1.2);transition-delay:var(--rd,0s)}
.reveal.in{opacity:1;transform:none}

/* Cards, tiles, phases */
.card,.stat,.phase,.tile,.panel{transition:transform .3s cubic-bezier(.3,1.5,.5,1),border-color .3s,box-shadow .3s}
.card:hover,.stat:hover,.phase:hover,.tile:hover{transform:translateY(-6px) rotate(-.6deg);border-color:#6b5a1d;box-shadow:0 18px 34px rgba(0,0,0,.35)}
.icon{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--paper);border:3px solid var(--yellow);box-shadow:0 5px 0 rgba(0,0,0,.25);transform:rotate(-8deg);transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.card:hover .icon{transform:rotate(12deg) scale(1.15)}
.phase{position:relative}.phase .badge{position:absolute;top:-16px;right:10px;font-size:1.6rem;transition:transform .4s cubic-bezier(.3,1.8,.5,1)}
.phase:hover .badge{transform:scale(1.3) rotate(15deg)}
section h2{position:relative}
.cta{position:relative;overflow:visible}
.cta .sticker{position:absolute;top:-22px;right:28px}

/* Corn confetti */
.confetti{position:fixed;pointer-events:none;z-index:99;font-size:22px;left:0;top:0;will-change:transform,opacity}

/* Dashboard value flash */
.flash{animation:flash .9s ease}
@keyframes flash{0%{color:var(--yellow);text-shadow:0 0 16px #ffcc2299}100%{}}

/* Corner pup peeking (dashboard) */
.peek{position:fixed;right:18px;bottom:-8px;width:92px;z-index:5;animation:peek 7s ease-in-out infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.5));cursor:pointer}
@keyframes peek{0%,15%,100%{transform:translateY(70%)}25%,60%{transform:translateY(0) rotate(-6deg)}70%{transform:translateY(0) rotate(4deg)}}

@media(max-width:760px){.art.stage .sticker{font-size:.75rem}.ticker div{font-size:.95rem}.peek{width:70px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal,.pop{opacity:1;transform:none}.drift{display:none}}