/* Kulpi, the Uskulpt guide (js/kulpi.js). Loaded by every page Kulpi stands on.

   1. the character: pivots, faces and the idle loops, from the mockup's
      Design/mascot-kulpi/kulpi.css
   2. where Kulpi stands on each page
   3. the note in the corner (a plan item ticked off)
   4. the card in the middle (welcome, and the report after Discovery)

   Poses are set by kulpi.js as inline transforms; the idle loops are CSS so
   they run without the script's help. Under reduced motion nothing moves and
   the particles hide: the pose carries the meaning. */

/* ================================================================ 1 · the character */
.kulpi{display:block; width:100%; height:100%; overflow:visible}

/* pivots: limbs turn at the shoulder / hip (their local 0,0) */
.kulpi .k-arm, .kulpi .k-arm-in, .kulpi .k-leg{transform-origin:0 0}
.kulpi .k-head{transform-origin:100px 150px}
.kulpi .k-squash, .kulpi .k-breathe{transform-origin:100px 226px}
.kulpi .k-shadow{transform-origin:100px 230px}
.kulpi .k-tuft{transform-origin:97px 50px}
.kulpi .k-bl{transform-box:fill-box; transform-origin:center}
.kulpi .k-act, .kulpi .k-bob{transform-origin:100px 226px}
.kulpi .k-tuft-f{transform-origin:97px 50px}
.kulpi .k-tail{transform-origin:114px 169px}
.kulpi .k-shl{transform-origin:100px 230px}
.kulpi .k-facegrp{transform-origin:100px 112px}
.kulpi .k-eo-l, .kulpi .k-eo-r, .kulpi .k-blush-l, .kulpi .k-blush-r, .kulpi .k-sweat, .kulpi .k-m, .kulpi .k-tears path{transform-box:fill-box; transform-origin:center}
.kulpi .k-arm-l{transform:rotate(22deg)}
.kulpi .k-arm-r{transform:rotate(-22deg)}

/* faces: smile (default) · grin · joy · wow · curious · wink · star · focus.
   None of them is sad, cross or disappointed. */
.kulpi .k-ea, .kulpi .k-es, .kulpi .k-eh, .kulpi .k-est, .kulpi .k-ex, .kulpi .k-m,
.kulpi .k-br, .kulpi .k-bw, .kulpi .k-bd, .kulpi .k-sweat, .kulpi .k-tears{opacity:0}
.kulpi .k-eo, .kulpi .k-ea, .kulpi .k-es, .kulpi .k-eh, .kulpi .k-est, .kulpi .k-ex, .kulpi .k-m,
.kulpi .k-br, .kulpi .k-bw, .kulpi .k-bd, .kulpi .k-sweat, .kulpi .k-tears{transition:opacity .12s}
.kulpi .k-m-s{opacity:1}
/* eyes */
.kulpi:is([data-face=joy],[data-face=calm],[data-face=laugh],[data-face=sleep],[data-face=love],[data-face=star],[data-face=dizzy]) .k-eo{opacity:0}
.kulpi:is([data-face=joy],[data-face=calm],[data-face=laugh]) .k-ea{opacity:1}
.kulpi:is([data-face=wink],[data-face=silly]) .k-eo-r{opacity:0}
.kulpi:is([data-face=wink],[data-face=silly]) .k-ea-r{opacity:1}
.kulpi[data-face=star] .k-est{opacity:1}
/* mouths */
.kulpi:not([data-face=smile]):not([data-face=calm]):not([data-face=shy]) .k-m-s{opacity:0}
.kulpi:is([data-face=grin],[data-face=joy],[data-face=wink],[data-face=love],[data-face=star],[data-face=laugh]) .k-m-o{opacity:1}
.kulpi[data-face=wow] .k-m-w{opacity:1}
.kulpi:is([data-face=curious],[data-face=focus]) .k-m-f{opacity:1}
/* brows */
.kulpi:is([data-face=curious],[data-face=puzzled]) .k-br{opacity:1}
.kulpi[data-face=focus] .k-bd{opacity:1}

/* the words in its props ("Hi!", "Soon!", "?") */
.kulpi text{font-family:"Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight:600}

/* the idle underneath everything. Periods are unrelated (3.6 s / 5.2 s) so it
   never visibly repeats. */
@media (prefers-reduced-motion: no-preference){
  .kulpi .k-breathe{animation:k-breathe 3.6s cubic-bezier(.65,0,.35,1) infinite alternate}
  .kulpi .k-tuft{animation:k-sway 5.2s cubic-bezier(.65,0,.35,1) infinite alternate}
}
@keyframes k-breathe{ from{transform:scale(1,1)} to{transform:scale(1.012,.982)} }
@keyframes k-sway{ from{transform:rotate(-3deg)} to{transform:rotate(5deg)} }
@media (prefers-reduced-motion: reduce){
  .kulpi :is(.p-s1,.p-s2,.p-s3,.p-burst,.p-ring,.p-flash,.p-st,.p-st2,[class^="p-cf"]){opacity:0 !important}
}

/* ================================================================ 2 · where Kulpi stands
   A slot is 300 by 280 units (the viewBox); Kulpi itself fills the middle
   44% of the width, from 28% in, and most of the height. The negative
   margins below line its body up with the text beside it. */
.kulpi-slot{display:block; flex:none; width:var(--ks, 140px); aspect-ratio:300 / 280; pointer-events:none}
.kulpi-slot.is-flip .kulpi{transform:scaleX(-1)}

/* Sign in, Sign up, For parents: above the heading, lined up with it */
.kulpi-slot:is(.kulpi-auth, .kulpi-lead){--ks:156px; margin:-8px 0 2px -44px}
@media (max-width:900px){ .kulpi-slot:is(.kulpi-auth, .kulpi-lead){--ks:124px; margin:-6px 0 0 -35px} }

/* Dashboard before Discovery is done: the chapter's own action, as in
   Discovery. On the journey (variation 2) only the current chapter moves. */
.v1-hero .kulpi-slot.v1-k{--ks:200px; margin:-18px auto -10px}
.v2-stop .kulpi-slot.v2-k{--ks:78px; justify-self:center; margin:-8px -10px}
.v2-stop.cur .kulpi-slot.v2-k{--ks:112px}
.v2-stop:not(.done):not(.cur):not(.v2-end) .kulpi-slot{opacity:.45; filter:saturate(.4)}
@media (max-width:640px){ .v1-hero .kulpi-slot.v1-k{--ks:150px} .v2-stop.cur .kulpi-slot.v2-k{--ks:78px} }

/* Dashboard, next step: bottom right of the blue card, turned to point at
   the words and the button. A soft light behind it so the blue character
   reads on the blue card. Only where the card has room beside its text. */
.pn-next .kulpi-next{position:absolute; right:clamp(8px, 3vw, 44px); bottom:-4px; --ks:clamp(210px, 21vw, 290px); z-index:0}
.pn-next .kulpi-next::before{content:""; position:absolute; left:18%; right:18%; top:14%; bottom:2%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,255,255,.46), rgba(255,255,255,.16) 55%, rgba(255,255,255,0))}
.pn-next .kulpi-next .kulpi{position:relative}
.pn-next > :not(.next-glow):not(.kulpi-next){position:relative; z-index:1}
@media (max-width:1100px){ .pn-next .kulpi-next{--ks:200px; right:0} }
@media (max-width:760px){ .pn-next .kulpi-next{display:none} }

/* Locked pages: in place of the creature, above the heading */
.locked-pg .kulpi-peek{--ks:210px; margin-bottom:-6px; transform:translateX(-18px)}

/* My Space, empty plan: beside the line that says so */
.plan-empty-row{display:flex; align-items:center; gap:4px; padding:10px 0 0}
.plan-empty-row .kulpi-notes{--ks:132px; margin:-10px -26px -12px -36px}
.plan-empty-row .plan-empty{padding:0; max-width:48ch}
@media (max-width:520px){ .plan-empty-row .kulpi-notes{--ks:108px; margin-left:-30px; margin-right:-22px} }

/* Empty invites (Exploration, Shortlist): at the top of the words */
.invite-b .kulpi-slot{--ks:150px; margin:-18px 0 -10px -42px}
@media (max-width:640px){ .invite-b .kulpi-slot{--ks:124px; margin-left:-34px} }

/* Nothing found (a career search, a college search) */
.head-row .kulpi-curious{--ks:170px; margin:-26px -24px -30px 0; align-self:center}
.cs-none .kulpi-curious{--ks:136px; margin:-22px 0 -10px -38px}
@media (max-width:640px){ .head-row .kulpi-curious{display:none} }

/* Discovery, the hand-over to the profile: in place of Ripple, same size */
.kulpi-slot.kulpi-gen{--ks:200px; margin:-18px auto -8px}
@media (max-width:640px){ .kulpi-slot.kulpi-gen{--ks:160px} }

/* ================================================================ 3 · the note in the corner */
.k-toast{position:fixed; z-index:150; right:clamp(12px, 3vw, 28px); bottom:calc(clamp(12px, 3vw, 28px) + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:2px; max-width:min(380px, calc(100vw - 24px)); padding:6px 18px 6px 0; border-radius:20px;
  background:#fff; border:1px solid rgba(16,34,64,.1); box-shadow:0 14px 34px -18px rgba(16,34,64,.4);
  opacity:0; transform:translateY(16px) scale(.96); pointer-events:none;
  transition:opacity .3s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.34,1.56,.64,1)}
.k-toast.is-on{opacity:1; transform:none}
.k-toast.is-off{transition-duration:.25s}
.k-toast-fig{display:block; flex:none; width:96px; aspect-ratio:300 / 280; margin:-14px -14px -6px -12px}
.k-toast-t{margin:0; font:500 .92rem/1.35 "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color:#102240; min-width:0}
.k-toast-t b{display:block; font-weight:600}
.k-toast-t span{display:block; color:rgba(16,34,64,.62); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* above the phone tab bar in the app */
@media (max-width:860px){ .shell ~ .k-toast, body:has(.tabbar) .k-toast{bottom:calc(84px + env(safe-area-inset-bottom))} }
@media (prefers-reduced-motion: reduce){ .k-toast{transition-duration:.01s} }

/* ================================================================ 4 · the card in the middle
   Was welcome-pop.css (2026-09-27), where the five creatures floated round
   the card. Kulpi now stands on the card instead. */
.wp-lock, .wp-lock body{overflow:hidden}
.wp{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:20px}
.wp-scrim{position:absolute; inset:0; background:rgba(15,23,42,.38); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); opacity:0; transition:opacity .45s ease}
.wp.is-on .wp-scrim{opacity:1}
.wp-card{position:relative; z-index:2; width:min(460px, 100%); margin-top:96px; text-align:center; background:#fff; border-radius:28px; padding:98px 34px 28px;
  box-shadow:0 40px 90px -30px rgba(15,23,42,.55); opacity:0; transform:translateY(24px) scale(.94);
  transition:opacity .45s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.34,1.56,.64,1)}
.wp.is-on .wp-card{opacity:1; transform:none}
.wp.is-off .wp-card{opacity:0; transform:translateY(12px) scale(.97); transition-duration:.3s}
/* Kulpi stands on the card's top edge, its feet just inside */
.wp-kulpi{position:absolute; left:50%; top:0; width:250px; transform:translate(-50%, -58%); pointer-events:none}
.wp-kulpi .kulpi-slot{--ks:250px}
.wp-words{transition:opacity .45s cubic-bezier(.22,1,.36,1) var(--wa, 0ms), transform .5s cubic-bezier(.22,1,.36,1) var(--wa, 0ms)}
.wp:not(.is-on) .wp-words{opacity:0; transform:translateY(10px)}
.wp.is-off .wp-words{transition-delay:0s}
.wp-k{margin:0; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600; color:#3070B6}
.wp-h{margin:10px 0 0; font-size:clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); font-weight:600; letter-spacing:-.03em; line-height:1.1; color:#102240}
.wp-p{margin:14px auto 0; max-width:36ch; color:rgba(16,34,64,.74); font-size:1rem; line-height:1.55}
.wp-cta{display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:26px; padding:16px 24px; border:0; border-radius:999px;
  background:#3070B6; color:#fff; font:inherit; font-weight:600; font-size:1.02rem; text-decoration:none; cursor:pointer; transition:transform .25s, background .25s}
.wp-cta:hover{transform:translateY(-2px); background:#102240}
.wp-cta:focus-visible{outline:3px solid #9DCAE3; outline-offset:3px}
.wp-alt{margin-top:12px; background:none; border:0; padding:8px 12px; font:inherit; font-weight:500; font-size:.92rem; color:rgba(16,34,64,.6); cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.wp-alt:hover{color:#102240}
.wp :is(.wp-card, .wp-cta, .wp-alt){font-family:"Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}
@media (max-width:640px){
  .wp-card{margin-top:78px; padding:78px 22px 22px}
  .wp-kulpi{width:200px}
  .wp-kulpi .kulpi-slot{--ks:200px}
}
@media (max-height:640px){
  .wp-card{margin-top:64px; padding-top:66px}
  .wp-kulpi{width:180px}
  .wp-kulpi .kulpi-slot{--ks:180px}
}
@media (prefers-reduced-motion: reduce){ .wp-card, .wp-scrim, .wp-words{transition-duration:.01s; transition-delay:0s} }

@media print{ .kulpi-slot, .k-toast, .wp{display:none !important} }