/* Friends, loader and carousel (only built with LCS_CUTE3=1). Motion in tea.js (cute3) and loader.js. */

/* ---------- loading screen (home page, first visit of the session) ---------- */
.lcs-loader{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:radial-gradient(rgba(232,135,155,.16) 1.4px,transparent 2px) 0 0/22px 22px,#fff7f4;transition:opacity .6s ease,transform .6s ease}
.lcs-loader.is-out{opacity:0;transform:scale(1.04);pointer-events:none}
.ld-oven{width:min(56vw,230px);filter:drop-shadow(0 14px 18px rgba(91,67,72,.22))}
.ld-oven svg{display:block;width:100%;height:auto;overflow:visible}
.ld-txt{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);margin-top:8px}
.ld-pct{font-family:var(--display);font-weight:600;font-size:15px;color:var(--rose-deep);font-variant-numeric:tabular-nums}
.lcs-loader .ov-knob{transform-box:fill-box;transform-origin:center;animation:ld-knob 1.4s linear infinite}
.lcs-loader .ov-knob + .ov-knob{animation-duration:2.1s;animation-direction:reverse}
@keyframes ld-knob{to{transform:rotate(360deg)}}
.lcs-loader .ld-oven{animation:ld-bob 1.6s ease-in-out infinite}
@keyframes ld-bob{50%{transform:translateY(-6px) rotate(-1.5deg)}}
.lcs-loader.is-done .ov-steam{opacity:1;transition:opacity .3s}
.lcs-loader.is-done .ld-oven{animation:ld-pop .42s cubic-bezier(.34,1.56,.64,1)}
@keyframes ld-pop{50%{transform:scale(1.08)}}
html.lcs-loading{overflow:hidden}

/* ---------- friends: little chef + puppy (home intro) ---------- */
.friends{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,3vw,28px);margin:0 auto 18px}
.friends button{background:none;border:0;padding:0;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.friends svg{display:block;width:100%;height:auto;overflow:visible}
.chef-btn{width:clamp(118px,15vw,150px)}
.pup-btn{width:clamp(84px,11vw,110px)}
.friends .bubble{position:absolute;left:62%;top:-6px;transform:translate(0,-100%) scale(.6);transform-origin:0 100%;opacity:0;pointer-events:none;
  white-space:nowrap;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:7px 12px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);
  box-shadow:0 8px 16px -10px rgba(91,67,72,.5)}
.friends .bubble::after{content:"";position:absolute;left:14px;bottom:-9px;width:14px;height:14px;background:#fff;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}


/* ---------- the kitten on the footer shelf ---------- */
.cute .sh-cat{width:clamp(90px,15vw,150px);cursor:pointer;pointer-events:auto}

/* ---------- carousel of treats: a music-box merry-go-round (tea.js turns it) ---------- */
.carousel-sec .center{text-align:center}
.mgr{position:relative;width:100%;max-width:860px;aspect-ratio:1000/800;margin:22px auto 0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.mgr.is-drag{cursor:grabbing}
.mgr-roof{position:absolute;left:0;top:0;width:100%;height:auto;z-index:300;overflow:visible;pointer-events:none;filter:drop-shadow(0 10px 10px rgba(91,67,72,.18))}
.mgr-base{position:absolute;left:0;bottom:0;width:100%;height:auto;z-index:1;overflow:visible;pointer-events:none;filter:drop-shadow(0 14px 14px rgba(91,67,72,.18))}
.mgr-drum{position:absolute;left:43%;width:14%;top:34%;height:52%;z-index:150;pointer-events:none;border:3px solid var(--ink);border-radius:14px;
  background:linear-gradient(90deg,rgba(91,67,72,.12),transparent 30%,transparent 70%,rgba(91,67,72,.14)),repeating-linear-gradient(90deg,#f7cdd6 0 12%,#fffaf2 12% 24%);
  display:flex;align-items:center;justify-content:center}
.mgr-plaque{display:block;width:150%;flex:none;background:#fffaf2;border:3px solid var(--ink);border-radius:999px;padding:8% 10%;box-shadow:0 0 0 5px #e5b25a,0 0 0 8px var(--ink)}
.mgr-plaque img{display:block;width:100%;height:auto}
.mgr-ring{position:absolute;inset:0}
.mgr-item{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.mgr-pole{position:absolute;left:-4px;width:8px;border-radius:4px;border:2px solid var(--ink);background:repeating-linear-gradient(160deg,#fde7a6 0 8px,#e5b25a 8px 16px)}
.mgr-photo{position:absolute;margin:0;border-radius:50%;background:#fffaf2;border:3px solid var(--ink);box-shadow:inset 0 0 0 5px #fffaf2,inset 0 0 0 8px #e8879b,0 12px 18px -10px rgba(91,67,72,.6);padding:10px}
.mgr-photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;pointer-events:none}
.mgr-photo::after{content:"";position:absolute;left:50%;top:-14px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#e8879b;border:3px solid var(--ink)}
.mgr .bulb,.mgr-bulbs circle{animation:mgr-bulb 1.4s ease-in-out infinite}
.mgr .bulb:nth-child(odd),.mgr-bulbs circle:nth-child(odd){animation-delay:-.7s}
@keyframes mgr-bulb{50%{fill:#fffaf2}}
.cz-hint{text-align:center;color:var(--ink-soft);font-weight:700;font-size:14px;margin-top:10px}
@media (prefers-reduced-motion:reduce){.mgr .bulb,.mgr-bulbs circle{animation:none}}

/* ---------- Chef Chloe in her arched window (her AI character) ---------- */
.chef-btn.chloe{width:clamp(150px,19vw,200px);perspective:700px}
.chloe .arch{display:block;position:relative;aspect-ratio:.86;border-radius:999px 999px 20px 20px;padding:7px;background:#fffdf8;
  box-shadow:0 0 0 2px var(--ink),0 16px 26px -16px rgba(91,67,72,.6);transform-style:preserve-3d;will-change:transform}
.chloe .arch-in{display:block;position:relative;height:100%;border-radius:999px 999px 14px 14px;overflow:hidden;outline:2px dashed rgba(232,135,155,.55);outline-offset:-6px;
  background:linear-gradient(90deg,rgba(246,195,207,.55) 50%,transparent 50%) 0 0/22px 22px,linear-gradient(rgba(246,195,207,.55) 50%,transparent 50%) 0 0/22px 22px,#fdf0f3}
.chloe .arch-in img{position:absolute;left:-4%;bottom:-2%;width:108%;height:auto;will-change:transform}
.chloe .sill{position:relative;z-index:2;display:flex;justify-content:center;gap:10px;margin:-14px -10px 0;padding:6px 0 4px;border-radius:10px;
  background:#f7cdd6;box-shadow:0 0 0 2px var(--ink),0 8px 14px -10px rgba(91,67,72,.6)}
.chloe .sill-d{width:22px;height:22px;display:block;overflow:visible}
.chloe .bubble{left:70%;top:4px}

/* ---------- her LCS chef cat peeking over the footer table ---------- */
.cute .sh-cat{width:clamp(76px,11vw,130px)}
.cute .sh-cat .cat-img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(91,67,72,.2))}
.burst{position:fixed;left:0;top:0;pointer-events:none;z-index:90}

/* her chef cat next to Chloe's window, peeking over a little pink table */
.friends .cat-btn{width:clamp(96px,12vw,130px);position:relative;padding-bottom:16px}
.friends .cat-btn .cat-img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 8px rgba(91,67,72,.2))}
.friends .cat-table{position:absolute;left:-14px;right:-14px;bottom:0;height:22px;border-radius:10px;background:#f7cdd6;
  box-shadow:0 0 0 2px var(--ink),0 8px 14px -10px rgba(91,67,72,.6)}
@media (max-width:560px){.mgr{aspect-ratio:1000/900}.mgr-photo{padding:6px;border-width:2px}.mgr-photo::after{width:13px;height:13px;margin-left:-6.5px;top:-10px;border-width:2px}.mgr-pole{width:6px;left:-3px}}
/* cat things on the cat's little table: paws, a fish, a ball of yarn */
.friends .cat-table{display:flex;justify-content:center;align-items:center;gap:6px;height:28px}
.friends .ct-d{width:22px;height:22px;display:block;overflow:visible}
.mgr-photo{cursor:pointer;display:block}

/* the loading screen ends with a "Let's bake!" button: that one tap lets the site play sound */
.lcs-loader .ld-go{margin-top:14px;font-family:var(--display);font-weight:600;font-size:20px;color:#fff;background:var(--rose-deep);border:0;border-radius:99px;
  padding:14px 30px;cursor:pointer;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink),0 14px 22px -12px rgba(91,67,72,.7);opacity:0;transform:scale(.6);pointer-events:none;
  transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.lcs-loader.is-ready .ld-go{opacity:1;transform:scale(1);pointer-events:auto}
.lcs-loader.is-ready .ld-pct{display:none}
.lcs-loader.is-ready{cursor:pointer}
@media (prefers-reduced-motion:no-preference){.lcs-loader.is-ready .ld-go{animation:ld-go 1.4s ease-in-out .5s infinite}
  @keyframes ld-go{50%{transform:scale(1.06)}}}
.lcs-loader .ld-go:focus-visible{outline:3px dashed var(--rose-deep);outline-offset:6px}

/* until the site may make sound, the kitten asks to be tapped */
.cat-btn .tap-me{position:absolute;right:-6px;top:4px;z-index:3;white-space:nowrap;background:#fff;border:2px solid var(--ink);border-radius:14px;padding:4px 9px;
  font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink);box-shadow:0 6px 12px -8px rgba(91,67,72,.6);opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s;pointer-events:none}
html.snd-locked .cat-btn .tap-me{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:no-preference){html.snd-locked .cat-btn .tap-me{animation:tap-me 1.2s ease-in-out infinite}@keyframes tap-me{50%{transform:scale(1.08) rotate(-3deg)}}}