/* More tea party everywhere (only built with LCS_CUTE2=1): bunting, floating treats, cup badges, heading icons,
   a strawberry that scrolls with the page, a shelf of treats on the footer. Motion lives in tea.js (cute2). */

/* party bunting across the top of colorful sections */
.cute .bunting{position:absolute;left:0;right:0;top:0;width:100%;height:64px;z-index:2;pointer-events:none;overflow:visible}
.cute .page-hero .bunting{top:6px}
.cute .page-hero{padding-top:70px}
.cute .levels .bunting,.cute .tea-intro .bunting{top:18px}
.cute .levels{padding-top:104px}
.cute .tea-intro{position:relative;padding-top:86px}

/* little treats floating along the edges */
.cute .floaters{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cute .fl{position:absolute;filter:drop-shadow(0 4px 4px rgba(91,67,72,.18))}
.cute .page-hero,.cute .levels,.cute .tv,.cute .cup-detail{position:relative;overflow:hidden}
.cute .page-hero > .wrap,.cute .levels > .wrap,.cute .tv > .wrap,.cute .tea-intro > .wrap,.cute .cup-detail > .wrap{position:relative;z-index:1}
@media (max-width:700px){.cute .fl{width:24px!important;height:24px!important}.cute .floaters .fl:nth-child(n+6){display:none}}

/* the levels: a little latte cup instead of a round badge */
.cute .badge.cupbadge{background:none!important;width:76px;height:76px;box-shadow:none;display:block;filter:drop-shadow(0 6px 6px rgba(91,67,72,.22))}
.cute .badge.cupbadge svg{width:100%;height:100%;display:block;overflow:visible}
.cute .cup-detail .badge.cupbadge{width:84px;height:84px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* an icon by every section heading */
.cute .h-ico{display:inline-block;width:1.15em;height:1.15em;vertical-align:-.18em;margin-right:.35em;overflow:visible;filter:drop-shadow(0 3px 3px rgba(91,67,72,.18))}
.cute .center h2 .h-ico,.cute .tea-intro h2 .h-ico{margin-right:.25em}

/* a lace doily turning behind each page's treat; balloons on the birthday page */
.cute .page-hero .hero-art{position:relative}
.cute .hero-doily{position:absolute;left:50%;top:50%;width:122%;height:122%;transform:translate(-50%,-50%);z-index:-1;opacity:.95;filter:drop-shadow(0 6px 10px rgba(91,67,72,.15))}
.cute .balloons{position:absolute;right:max(10px,calc(50% - 600px));top:40px;width:clamp(90px,14vw,160px);z-index:2;pointer-events:none;overflow:visible}
.cute .balloons .balloon{transform-box:fill-box;transform-origin:50% 100%}

/* the strawberry that rolls along a dotted line as you scroll */
.sprog{position:absolute;left:0;right:0;bottom:-12px;height:24px;pointer-events:none}
.sprog-line{position:absolute;left:0;right:0;top:11px;border-top:2px dotted rgba(232,135,155,.0)}
.sprog-berry{position:absolute;left:0;top:0;width:24px;height:24px;filter:drop-shadow(0 2px 2px rgba(91,67,72,.25));will-change:transform}

/* a shelf of treats sitting on the footer */
.cute .shelf{display:flex;justify-content:center;align-items:flex-end;gap:clamp(8px,3vw,40px);margin:-64px auto 0;padding:0 16px;max-width:900px;position:relative;z-index:2;pointer-events:none}
.cute .shelf .sh{flex:0 1 auto;filter:drop-shadow(0 8px 8px rgba(91,67,72,.22))}
.cute .shelf svg{display:block;width:100%;height:auto;overflow:visible}
.cute .sh-teapot{width:clamp(70px,13vw,130px)}
.cute .sh-cake{width:clamp(70px,13vw,130px)}
.cute .sh-cupcake{width:clamp(44px,8vw,80px)}
.cute .sh-cookies{width:clamp(56px,10vw,100px)}
.cute .sh-cup{width:clamp(56px,10vw,100px)}
.cute footer.site{margin-top:120px}

/* sparkles from the pointer / a tap */
.pop{position:fixed;left:0;top:0;width:18px;height:18px;pointer-events:none;z-index:80}

@media (prefers-reduced-motion:reduce){.cute .floaters{display:none}}

/* music button, bottom left (sound.js) */
.snd{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:30;width:46px;height:46px;border-radius:50%;border:0;padding:9px;cursor:pointer;
  background:linear-gradient(145deg,#f3a6b6,#e8879b);box-shadow:0 10px 24px -10px rgba(0,0,0,.45),inset 0 0 0 2px rgba(255,255,255,.5)}
.snd svg{display:block;width:100%;height:100%;overflow:visible}
.snd.is-on .snd-x{display:none}
.snd:not(.is-on){background:linear-gradient(145deg,#cbbfc2,#a99a9e)}
@media (prefers-reduced-motion:no-preference){.snd.is-on svg{animation:snd-dance 1.25s ease-in-out infinite}
  @keyframes snd-dance{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-2px)}}}
/* music is on by default; until the first tap the button gently pulses (2026-10-09) */
@media (prefers-reduced-motion:no-preference){.snd.is-waiting{animation:snd-wait 1.6s ease-in-out infinite}
  @keyframes snd-wait{0%,100%{box-shadow:0 10px 24px -10px rgba(0,0,0,.45),0 0 0 0 rgba(232,135,155,.55)}50%{box-shadow:0 10px 24px -10px rgba(0,0,0,.45),0 0 0 10px rgba(232,135,155,0)}}}
/* "tap for sound" note next to the music button, only while the browser is still holding sound back */
.snd .snd-tip{position:absolute;left:54px;top:50%;transform:translateY(-50%);white-space:nowrap;background:#fff;color:var(--ink);font-family:var(--display);font-weight:600;font-size:13px;
  padding:6px 10px;border-radius:12px;border:2px solid var(--ink);box-shadow:0 6px 12px -8px rgba(91,67,72,.6);pointer-events:none;opacity:0;transition:opacity .3s}
.snd .snd-tip::before{content:"";position:absolute;left:-7px;top:50%;width:10px;height:10px;margin-top:-5px;background:#fff;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg)}
.snd.is-waiting .snd-tip{opacity:1}