/* Cute drinks layered into the Sipnomy theme.
   Layers in each section: bubbles (0), drinks (1), content (2). */

main > section > .wrap, main > section > .narrow { z-index: 2; }

:root { --cute-shadow: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 16px rgba(201, 242, 93, 0.12)); }
.theme-light { --cute-shadow: drop-shadow(0 10px 12px rgba(14, 19, 32, 0.16)); }

/* ---------- floating characters ---------- */
.cute-float { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cute-float .cute { position: absolute; width: var(--s, 64px); }
.cute svg { width: 100%; height: auto; overflow: visible; filter: var(--cute-shadow); transform-origin: 50% 90%; }
.cute-float .cute svg { animation: cute-float var(--dur, 6.5s) ease-in-out var(--delay, 0s) infinite; }
@keyframes cute-float {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 5deg)); }
}

/* hero: a cluster top right, more in the side margins on wide screens */
.cute.f1 { right: 3%; top: 58px; --s: 96px; --r: 8deg; }
.cute.f2 { right: 12.5%; top: 196px; --s: 58px; --r: -10deg; --dur: 5.6s; }
.cute.f3 { left: 1.4%; top: 57%; --s: 68px; --r: 10deg; --dur: 7s; }
.cute.f4 { right: 1.4%; top: 64%; --s: 60px; --r: -8deg; --dur: 6s; }
.cute.f5 { left: 2%; top: 84%; --s: 52px; --r: 6deg; --dur: 7.4s; }
/* how it works: two characters beside the heading */
.cute.h1 { right: 5%; top: 84px; --s: 74px; --r: 9deg; }
.cute.h2 { right: 13.5%; top: 178px; --s: 50px; --r: -7deg; --dur: 5.4s; }
/* closing call to action: characters either side of the centred text */
.cute.c1 { left: 8%; top: 18%; --s: 78px; --r: -12deg; }
.cute.c2 { left: 16%; top: 56%; --s: 56px; --r: 10deg; --dur: 5.8s; }
.cute.c3 { right: 8%; top: 16%; --s: 86px; --r: 8deg; --dur: 7.2s; }
.cute.c4 { right: 16%; top: 58%; --s: 54px; --r: -8deg; --dur: 6.2s; }

/* page heroes (About): characters on the right of the heading */
.cute.s1 { right: 4%; top: 58px; --s: 84px; --r: 8deg; }
.cute.s2 { right: 13%; top: 150px; --s: 54px; --r: -10deg; --dur: 5.6s; }
.cute.s3 { right: 2.5%; top: 62%; --s: 50px; --r: 6deg; --dur: 7s; }

@media (max-width: 1319px) { .cute.f3, .cute.f4, .cute.f5 { display: none; } }
@media (max-width: 1099px) { .cute-float[data-cute="side"] { display: none; } }
@media (max-width: 1179px) { .cute-float[data-cute="cta"] { display: none; } }
@media (max-width: 1099px) { .cute-float[data-cute="hero"], .cute-float[data-cute="how"] { display: none; } }

/* ---------- characters perched on cards (hero cards, page-hero summary cards) ---------- */
.facts, .demo-banner { position: relative; }
/* the summary card styles every div inside it as a row; the perched drinks are not rows */
.facts .perch { padding: 0; border: 0; gap: 5px; justify-content: flex-end; }
.facts .perch div { padding: 0; border: 0; display: block; }
.facts .perch + div { border-top: 0; }
.perch.perch-single .cute { width: 54px; }
@media (min-width: 901px) { .perch-space { padding-top: 34px; } }
@media (max-width: 900px) { .perch-space { row-gap: 92px; } }
.hero .lede { margin-bottom: 100px; }
@media (max-width: 900px) { .paths { row-gap: 96px; } .hero .lede { margin-bottom: 92px; } }
.perch { position: absolute; bottom: calc(100% - 3px); right: 26px; display: flex; align-items: flex-end; gap: 5px; z-index: 3; }
.perch .cute { position: relative; width: 38px; cursor: default; }
.perch .cute:nth-child(2) { width: 34px; }
.perch .cute:nth-child(4) { width: 44px; }
.perch .cute svg { animation: cute-hop 3.2s ease-in-out var(--delay, 0s) infinite; }
@keyframes cute-hop {
  0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
  78% { transform: translateY(-9px) rotate(-4deg); }
  86% { transform: translateY(0) rotate(3deg); }
}
.perch .cute:hover svg { animation: cute-wiggle 0.5s ease-in-out; }
@keyframes cute-wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

.perch-one .cute.mascot { width: 52px; }
.perch-one .cute.mascot svg { animation: none; }
.mascot.boing svg { animation: cute-boing 0.5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cute-boing {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.14, 0.86); }
  60% { transform: scale(0.93, 1.09); }
  100% { transform: scale(1, 1); }
}
.mascot-note { font: 500 0.72rem var(--mono); color: var(--on-night-3); white-space: nowrap; margin: 0 8px 26px 0; }
@media (max-width: 520px) { .mascot-note { display: none; } }

/* ---------- a shelf of drinks above the footer ---------- */
.cute-shelf { display: flex; justify-content: center; align-items: flex-end; gap: clamp(10px, 2.6vw, 30px); padding-top: 4px; border-bottom: 2px solid var(--night-line-2); margin-bottom: 44px; }
.cute-shelf .cute { position: relative; width: clamp(28px, 4.6vw, 46px); transition: transform 0.2s ease; }
.cute-shelf .cute svg { animation: cute-hop 4.4s ease-in-out var(--delay, 0s) infinite; }
.cute-shelf .cute:hover { transform: translateY(-8px) rotate(-6deg); }

/* ---------- the design-demo switcher (only used by the pages in demos/) ---------- */
.demo-switch { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(14, 19, 32, 0.92); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6); font: 600 0.82rem var(--font); }
.demo-switch span { color: #8790a3; padding: 0 8px 0 10px; font: 500 0.72rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.demo-switch a { color: #eef1f7; text-decoration: none; padding: 7px 13px; border-radius: 999px; }
.demo-switch a[aria-current="page"] { background: #c9f25d; color: #090c13; }
@media (max-width: 520px) { .demo-switch span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .cute svg, .mascot.boing svg { animation: none !important; }
}