/* Celeri-maskot v1 · generert fra maskot-utkastet. Alle farger kan overstyres med --cm-*-variablene. */
:root{
  --cm-color:#beff16; --cm-shade:#9bd603; --cm-ink:#0c4d00; --cm-coin:#ff0087; --cm-drop:#959d9d;
  --cm-shades:#1c1e21; --cm-phone:#1c1e21; --cm-screen:#ffffff; --cm-screen-ink:#1c1e21; --cm-screen-muted:#608500; --cm-bg:#FFFFFF;
  --cm-font:inherit; --cm-ticket:#ff108f; --cm-ticket-ink:#FFFFFF; --cm-paper:#FFFFFF; --cm-paper-ink:#070708; --cm-paper-muted:#dadada; --cm-mono:ui-monospace,Menlo,monospace;
}
celeri-mascot,celeri-crew,celeri-pool{display:inline-block;position:relative;line-height:0;vertical-align:middle}
celeri-mascot{width:1em;height:auto}
celeri-mascot .celeri-mascot{width:100%;height:auto}
celeri-crew{line-height:1}
.cm-coin{position:absolute;width:28px;height:28px;border-radius:50%;background:var(--cm-coin);color:#ffffff;font:700 10px/28px var(--cm-mono);text-align:center;pointer-events:none;z-index:2}
.cm-confetti{position:absolute;width:8px;height:12px;border-radius:2px;pointer-events:none;z-index:2}
.celeri-mascot{display:block;overflow:visible}
.celeri-mascot .body{fill:var(--cm-color)}
.celeri-mascot .hand{fill:var(--cm-shade)}
.celeri-mascot .fx{fill:var(--cm-color)}
.celeri-mascot .zz{fill:var(--cm-ink);font:800 20px var(--cm-font)}
.celeri-mascot .rig,.celeri-mascot .pulse,.celeri-mascot .hop,.celeri-mascot .breathe{transform-box:view-box;transform-origin:100px 190px}
.celeri-mascot .eye{transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.3,.7,.3,1.4)}
.celeri-mascot .eyes{transition:transform .25s cubic-bezier(.3,.7,.3,1)}
.celeri-mascot .leaf{transform-box:view-box;animation:cm-sway 2.8s ease-in-out infinite;transition:transform .4s}
.celeri-mascot .l1{animation-delay:-.4s;animation-duration:3.1s;--d:-26deg;--s:-16deg}
.celeri-mascot .l2{animation-delay:-1.3s;--amp:-1;--d:-12deg;--s:-7deg}
.celeri-mascot .l3{animation-delay:-.2s;animation-duration:2.5s;--d:12deg;--s:7deg}
.celeri-mascot .l4{animation-delay:-1.9s;animation-duration:3.3s;--amp:-1;--d:28deg;--s:16deg}
.celeri-mascot .breathe{animation:cm-breathe 3.6s ease-in-out infinite}
.celeri-mascot .eyes-happy,.celeri-mascot .eyes-sleep,.celeri-mascot .brows,.celeri-mascot .think,.celeri-mascot .zz{display:none}

/* Happy: arc eyes, bouncy wiggle, quick leaves */
.celeri-mascot[data-state="happy"] .eyes{display:none}
.celeri-mascot[data-state="happy"] .eyes-happy{display:inline}
.celeri-mascot[data-state="happy"] .breathe{animation:cm-happy .9s ease-in-out infinite}
.celeri-mascot[data-state="happy"] .leaf{animation-duration:.9s}
/* Wave: rightmost leaf becomes a hand */
.celeri-mascot[data-state="wave"] .l4{animation:cm-wave .55s ease-in-out infinite}
.celeri-mascot[data-state="wave"] .breathe{animation:cm-lean 1.1s ease-in-out infinite}
/* Thinking / loading */
.celeri-mascot[data-state="think"] .eyes{animation:cm-look 3.2s ease-in-out infinite}
.celeri-mascot[data-state="think"] .think{display:inline}
.celeri-mascot[data-state="think"] .think circle{animation:cm-dot 1.2s ease-in-out infinite}
.celeri-mascot[data-state="think"] .think circle:nth-child(2){animation-delay:.2s}
.celeri-mascot[data-state="think"] .think circle:nth-child(3){animation-delay:.4s}
.celeri-mascot[data-state="think"] .leaf{animation-duration:5s}
.celeri-mascot[data-state="think"] .breathe{animation:cm-tilt 3.2s ease-in-out infinite}
/* Surprised */
.celeri-mascot[data-state="surprised"] .eye{transform:scale(1.5,1.25)}
.celeri-mascot[data-state="surprised"] .leaf{animation:cm-spread .22s ease-in-out infinite}
.celeri-mascot[data-state="surprised"] .breathe{animation:cm-startle 2.4s ease-out infinite}
/* Sad / error */
.celeri-mascot[data-state="sad"] .eyes{animation:none;transform:translate(0,6px)}
.celeri-mascot[data-state="sad"] .eye{transform:scale(.85,.8)}
.celeri-mascot[data-state="sad"] .brows{display:inline}
.celeri-mascot[data-state="sad"] .leaf{animation:cm-droop 4s ease-in-out infinite}
.celeri-mascot[data-state="sad"] .breathe{animation:cm-slump 4s ease-in-out infinite}
/* Sleeping / empty */
.celeri-mascot[data-state="sleep"] .eyes{display:none}
.celeri-mascot[data-state="sleep"] .eyes-sleep{display:inline}
.celeri-mascot[data-state="sleep"] .leaf{animation:cm-doze 5s ease-in-out infinite}
.celeri-mascot[data-state="sleep"] .breathe{animation:cm-sleep 5s ease-in-out infinite}
.celeri-mascot[data-state="sleep"] .zz{display:inline}
.celeri-mascot[data-state="sleep"] .zz text{animation:cm-zz 3s ease-out infinite;opacity:0}
.celeri-mascot[data-state="sleep"] .zz text:nth-child(2){animation-delay:1s}
.celeri-mascot[data-state="sleep"] .zz text:nth-child(3){animation-delay:2s}

/* Festival: shades, groove, arms up */
.celeri-mascot .shades,.celeri-mascot .sweat,.celeri-mascot .shine{display:none}
.celeri-mascot .shades{fill:var(--cm-shades)}
.celeri-mascot .sweat{fill:var(--cm-drop)}
.celeri-mascot .sweat path{transform-box:fill-box}
.celeri-mascot .badge{opacity:0;transform-box:fill-box;transform-origin:center}
.celeri-mascot .badge circle{fill:var(--cm-ink)}
.celeri-mascot .badge path{stroke:var(--cm-bg)}
.celeri-mascot[data-state="festival"] .eyes{display:none}
.celeri-mascot[data-state="festival"] .shades{display:inline}
.celeri-mascot[data-state="festival"] .breathe{animation:cm-groove .7s ease-in-out infinite}
.celeri-mascot[data-state="festival"] .l1{animation:cm-armL .35s ease-in-out infinite alternate}
.celeri-mascot[data-state="festival"] .l4{animation:cm-armR .35s ease-in-out infinite alternate}
.celeri-mascot[data-state="festival"] .l2,.celeri-mascot[data-state="festival"] .l3{animation-duration:.7s}
/* Asking for pay: puppy eyes looking up, leaves pressed together like hands */
.celeri-mascot[data-state="ask"] .eyes{transform:translate(0,-5px)}
.celeri-mascot[data-state="ask"] .eye{transform:scale(1.3,1.2)}
.celeri-mascot[data-state="ask"] .shine,.celeri-mascot[data-state="ask"] .brows{display:inline}
.celeri-mascot[data-state="ask"] .brows{transform:translateY(-9px)}
.celeri-mascot[data-state="ask"] .l1{animation:none;transform:rotate(32deg)}
.celeri-mascot[data-state="ask"] .l4{animation:none;transform:rotate(-34deg)}
.celeri-mascot[data-state="ask"] .breathe{animation:cm-plead 1.3s ease-in-out infinite}
/* Working: focused eyes looking down, quick hustle, sweat drop */
.celeri-mascot[data-state="work"] .eyes{transform:translate(4px,5px)}
.celeri-mascot[data-state="work"] .eye{transform:scale(1,.55)}
.celeri-mascot[data-state="work"] .leaf{animation-duration:.5s}
.celeri-mascot[data-state="work"] .breathe{animation:cm-hustle .5s ease-in-out infinite}
.celeri-mascot[data-state="work"] .sweat{display:inline}
.celeri-mascot[data-state="work"] .sweat path{animation:cm-sweat 1.6s ease-in infinite}
@keyframes cm-groove{0%,100%{transform:rotate(-5deg) translateX(-3px)}25%{transform:scale(1.05,.94)}50%{transform:rotate(5deg) translateX(3px)}75%{transform:scale(1.05,.94)}}
@keyframes cm-armL{from{transform:rotate(-8deg)}to{transform:rotate(-36deg)}}
@keyframes cm-armR{from{transform:rotate(8deg)}to{transform:rotate(36deg)}}
@keyframes cm-plead{0%,100%{transform:rotate(0) scale(1,1)}50%{transform:rotate(-2deg) scale(1.02,1.04) translateY(-2px)}}
@keyframes cm-hustle{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg) scale(1,1.02)}}
@keyframes cm-sweat{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}100%{opacity:0;transform:translate(-6px,26px)}}
/* Crew: three mascots leaning in, doing a stadium wave */
.celeri-crew{display:inline-flex;align-items:flex-end;vertical-align:-.13em;margin:0 .08em}
.celeri-crew .celeri-mascot{height:.86em;width:auto;transform-origin:50% 100%}
.celeri-crew .celeri-mascot:nth-child(1){transform:rotate(7deg)}
.celeri-crew .celeri-mascot:nth-child(2){height:1.04em;margin:0 -.22em;position:relative;z-index:1}
.celeri-crew .celeri-mascot:nth-child(3){height:.92em;transform:rotate(-7deg)}
.celeri-crew .celeri-mascot:nth-child(1)[data-state="crew"] .eyes{transform:translate(4px,-1px)}
.celeri-crew .celeri-mascot:nth-child(3)[data-state="crew"] .eyes{transform:translate(-4px,-1px)}
.celeri-crew .celeri-mascot:nth-child(1) .breathe{animation-delay:-.6s}
.celeri-crew .celeri-mascot:nth-child(3) .breathe{animation-delay:-1.4s}
/* On the phone: holds a phone with two little hands, taps it, happy eyes, "+kr" pings pop out */
.celeri-mascot .phone-held{display:none}
.celeri-mascot[data-state="phone"] .phone-held{display:inline}
.celeri-mascot[data-state="phone"] .eyes{display:none}
.celeri-mascot[data-state="phone"] .eyes-happy{display:inline;transform:translate(1px,4px)}
.celeri-mascot[data-state="phone"] .breathe{animation:cm-chill 2.4s ease-in-out infinite}
.celeri-mascot[data-state="phone"] .leaf{animation-duration:1.2s}
.celeri-mascot .ph-tilt{transform-box:fill-box;transform-origin:center;animation:cm-hold 2.4s ease-in-out infinite}
.celeri-mascot .thumb{transform-box:fill-box;transform-origin:center;animation:cm-tap .8s ease-in-out infinite}
.celeri-mascot .ping{transform-box:fill-box;transform-origin:center;opacity:0;animation:cm-ping 2.4s ease-out infinite}
.celeri-mascot .ping text{font:700 8px var(--cm-mono);fill:#ffffff}
@keyframes cm-chill{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-2px) scale(1,1.02)}}
@keyframes cm-hold{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-7deg) translateY(-2px)}}
@keyframes cm-tap{0%,55%,100%{transform:translate(0,0)}25%{transform:translate(-7px,-3px) scale(.9)}}
@keyframes cm-ping{0%,20%{opacity:0;transform:translate(0,8px) scale(.5)}32%{opacity:1;transform:translate(0,0) scale(1.08)}40%{transform:scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(6px,-20px)}}
@keyframes cm-sway{0%,100%{transform:rotate(calc(var(--amp,1)*-5deg))}50%{transform:rotate(calc(var(--amp,1)*6deg))}}
@keyframes cm-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.015,1.03)}}
@keyframes cm-happy{0%,100%{transform:rotate(-3deg) translateY(0)}25%{transform:rotate(0) translateY(-7px) scale(.98,1.04)}50%{transform:rotate(3deg) translateY(0)}75%{transform:rotate(0) translateY(-7px) scale(.98,1.04)}}
@keyframes cm-wave{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(36deg)}}
@keyframes cm-lean{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-1.5deg) scale(1,1.02)}}
@keyframes cm-look{0%,38%{transform:translate(-5px,-5px)}50%,88%{transform:translate(5px,-6px)}100%{transform:translate(-5px,-5px)}}
@keyframes cm-tilt{0%,38%{transform:rotate(-2deg)}50%,88%{transform:rotate(2deg)}100%{transform:rotate(-2deg)}}
@keyframes cm-dot{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes cm-spread{0%,100%{transform:rotate(var(--s))}50%{transform:rotate(calc(var(--s) * 1.25))}}
@keyframes cm-startle{0%{transform:scale(.96,.92)}12%{transform:scale(.97,1.1) translateY(-6px)}24%,100%{transform:scale(1.02,1.06)}}
@keyframes cm-droop{0%,100%{transform:rotate(var(--d))}50%{transform:rotate(calc(var(--d) * .82))}}
@keyframes cm-slump{0%,100%{transform:rotate(-3deg) scale(1.02,.95)}50%{transform:rotate(-3deg) scale(1.03,.94)}}
@keyframes cm-doze{0%,100%{transform:rotate(calc(var(--d) * .45))}50%{transform:rotate(calc(var(--d) * .35))}}
@keyframes cm-sleep{0%,100%{transform:rotate(6deg) scale(1,1)}50%{transform:rotate(6deg) scale(1.03,1.06)}}
@keyframes cm-zz{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate(18px,-34px) scale(1.15)}}
.celeri-mascot .zz text{transform-box:fill-box;transform-origin:center}


/* Ticket: happy, holds a festival ticket up high and waggles it */
.celeri-mascot .ticket-held{display:none}
.celeri-mascot[data-state="ticket"] .ticket-held{display:inline}
.celeri-mascot[data-state="ticket"] .eyes{display:none}
.celeri-mascot[data-state="ticket"] .eyes-happy{display:inline;transform:translate(3px,-1px)}
.celeri-mascot[data-state="ticket"] .breathe{animation:cm-proud 1.4s ease-in-out infinite}
.celeri-mascot[data-state="ticket"] .l4{animation:none;transform:rotate(-14deg)}
.celeri-mascot[data-state="ticket"] .leaf:not(.l4){animation-duration:1.4s}
.celeri-mascot .tk-paper{fill:var(--cm-ticket)}
.celeri-mascot .tk-ink{fill:var(--cm-ticket-ink)}
.celeri-mascot .tk-perf{stroke:var(--cm-ticket-ink);opacity:.7}
.celeri-mascot .tk-wave{transform-box:view-box;transform-origin:136px 112px;animation:cm-waggle .7s ease-in-out infinite alternate}
.celeri-mascot .tk-spark{fill:var(--cm-coin)}
.celeri-mascot .tk-spark path{transform-box:fill-box;transform-origin:center;animation:cm-twinkle 1.4s ease-in-out infinite}
.celeri-mascot .tk-spark path:nth-child(2){animation-delay:.7s}
@keyframes cm-proud{0%,100%{transform:rotate(-3deg) scale(1,1)}50%{transform:rotate(-1deg) scale(1.02,1.04) translateY(-3px)}}
@keyframes cm-waggle{from{transform:rotate(-6deg)}to{transform:rotate(10deg) translateY(-3px)}}
@keyframes cm-twinkle{0%,100%{transform:scale(.3) rotate(0);opacity:0}50%{transform:scale(1) rotate(45deg);opacity:1}}
/* Apply: holds up a CV, hopeful bright eyes */
.celeri-mascot .apply-held,.celeri-mascot .plane-held,.celeri-mascot .tag{display:none}
.celeri-mascot[data-state="apply"] .apply-held{display:inline}
.celeri-mascot[data-state="apply"] .eyes{transform:translate(4px,-6px)}
.celeri-mascot[data-state="apply"] .l4{animation:none;transform:rotate(-14deg)}
.celeri-mascot[data-state="apply"] .eye{transform:scale(1.15,1.1)}
.celeri-mascot[data-state="apply"] .shine{display:inline}
.celeri-mascot[data-state="apply"] .breathe{animation:cm-proud 1.6s ease-in-out infinite}
.celeri-mascot .apply-bob{transform-box:view-box;transform-origin:136px 118px;animation:cm-present 1.6s ease-in-out infinite}
@keyframes cm-present{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-5px) rotate(6deg)}}
/* Plane: throws a paper plane up and to the right, again and again */
.celeri-mascot[data-state="plane"] .plane-held{display:inline}
.celeri-mascot[data-state="plane"] .eyes{animation:cm-follow 2.6s ease-in-out infinite}
.celeri-mascot[data-state="plane"] .l4{animation:none;transform:rotate(-12deg)}
.celeri-mascot[data-state="plane"] .breathe{animation:cm-throw 2.6s ease-in-out infinite}
.celeri-mascot .pl-arm{transform-box:view-box;transform-origin:128px 120px;animation:cm-arm 2.6s ease-in-out infinite}
.celeri-mascot .pl-fly{transform-box:view-box;transform-origin:142px 102px;animation:cm-fly 2.6s infinite}
.celeri-mascot .pl-trail{opacity:0;animation:cm-trail 2.6s infinite}
@keyframes cm-arm{0%,8%{transform:rotate(0)}30%{transform:rotate(28deg) translate(4px,6px)}40%{transform:rotate(-20deg) translate(0,-6px)}60%,100%{transform:rotate(0)}}
@keyframes cm-throw{0%,8%{transform:rotate(0)}30%{transform:rotate(4deg) scale(1.02,.96)}42%{transform:rotate(-5deg) scale(.98,1.05)}62%,100%{transform:rotate(0)}}
@keyframes cm-fly{0%{transform:translate(0,0);opacity:0;animation-timing-function:ease-out}8%{opacity:1;transform:translate(0,0)}30%{transform:rotate(18deg) translate(4px,8px);animation-timing-function:cubic-bezier(.3,.1,.4,1)}75%{transform:translate(70px,-90px) rotate(-8deg) scale(.7);opacity:1}86%,100%{transform:translate(90px,-120px) scale(.5);opacity:0}}
@keyframes cm-trail{0%,38%{opacity:0}50%{opacity:.7}80%,100%{opacity:0}}
@keyframes cm-follow{0%,30%{transform:translate(0,0)}50%,80%{transform:translate(5px,-6px)}100%{transform:translate(0,0)}}
/* Hello: name tag on the chest and a wave, "here I am" */
.celeri-mascot[data-state="hello"] .tag{display:inline}
.celeri-mascot[data-state="hello"] .shine{display:inline}
.celeri-mascot[data-state="hello"] .eyes{transform:translate(0,-6px)}
.celeri-mascot[data-state="hello"] .l4{animation:cm-wave .55s ease-in-out infinite}
.celeri-mascot[data-state="hello"] .breathe{animation:cm-lean 1.1s ease-in-out infinite}
.celeri-mascot .tag text{font:800 11px var(--cm-mono);letter-spacing:.04em}
/* Pool: three overlapping rows, back rows smaller and a touch darker for depth */
celeri-pool{line-height:1}
.celeri-pool{display:inline-flex;flex-direction:column;align-items:center;padding-top:.15em}
.celeri-pool .cp-row{display:flex;justify-content:center;position:relative;margin-top:var(--y)}
.celeri-pool .cp-m{display:block;margin:0 var(--gap);transform:rotate(var(--tilt));transform-origin:50% 100%;filter:brightness(var(--dim));transition:transform .35s cubic-bezier(.3,.7,.3,1.4)}
.celeri-pool .cp-m .celeri-mascot{height:var(--h);width:auto;display:block}
.celeri-pool .cp-m .breathe{animation-delay:var(--d)}
.celeri-pool .cp-m .leaf{animation-delay:var(--d)}
.celeri-pool .cp-up{transform:translateY(-.12em) rotate(0);z-index:5}
@media (prefers-reduced-motion:reduce){.celeri-mascot *{animation:none!important}.cm-coin,.cm-confetti{display:none}}
.celeri-mascot.cm-paused *{animation-play-state:paused!important}
/* CV: holder opp en CV (jobbportalen), stolt og glad. Bygget på «ticket». */
.celeri-mascot .cv-held{display:none}
.celeri-mascot[data-state="cv"] .cv-held{display:inline}
.celeri-mascot[data-state="cv"] .eyes{display:none}
.celeri-mascot[data-state="cv"] .eyes-happy{display:inline;transform:translate(3px,-1px)}
.celeri-mascot[data-state="cv"] .breathe{animation:cm-proud 1.4s ease-in-out infinite}
.celeri-mascot[data-state="cv"] .l4{animation:none;transform:rotate(-14deg)}
.celeri-mascot[data-state="cv"] .leaf:not(.l4){animation-duration:1.4s}
.celeri-mascot .cv-paper{fill:var(--cm-cv,#FFFFFF);stroke:#1c1e21;stroke-opacity:.12;stroke-width:1}
.celeri-mascot .cv-photo{fill:var(--cm-ticket,#ff108f)}
.celeri-mascot .cv-ink{fill:var(--cm-cv-ink,#1c1e21)}
.celeri-mascot .cv-soft{opacity:.28}