/*
 * The Confetti theme: a festive storefront built from the teardown of aardvarkbookclub.com/gifting.
 * Plain CSS, no utilities. The first block is the small reset the old app got from Tailwind's preflight;
 * everything the theme relies on is explicit, so the reset is kept at zero specificity (:where) and never
 * beats a theme rule. The shell's shared rules (buttons, ears, typography) are written as `.aa .x` so they
 * sit one class above the page rules, exactly as the old scoped `:deep()` rules did.
 */

/* ——— reset ——— */
*, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
:where(.aa) :is(h1, h2, h3, h4, h5, h6, p, figure, blockquote) { margin: 0; }
:where(.aa) :is(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
:where(.aa) :is(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.aa) :is(img, svg, video, canvas) { display: block; vertical-align: middle; }
:where(.aa) :is(img, video) { max-width: 100%; height: auto; }
:where(.aa) :is(button, input, select, textarea) { font: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; }
:where(.aa) button { background: transparent; background-image: none; cursor: pointer; text-transform: none; -webkit-appearance: button; }
:where(.aa) a { color: inherit; text-decoration: none; }
:where(.aa) [hidden] { display: none !important; }

/* ——— unscoped keyframes: the cards, pop-ups and pages use them too ——— */
@keyframes ear-twitch-left {
    0%, 70%, 100% { rotate: -8deg; }
    72% { rotate: -10deg; } 76% { rotate: -7deg; } 80% { rotate: -8.75deg; }
}
@keyframes ear-twitch-right {
    0%, 60%, 100% { rotate: 10deg; }
    62% { rotate: 18deg; } 66% { rotate: 6deg; } 70% { rotate: 12.5deg; } 74% { rotate: 9deg; }
    88% { rotate: 15deg; } 92% { rotate: 10deg; }
}
@keyframes aa-breathe { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 1.06; rotate: 2deg; } }
@keyframes aa-fade-up { from { opacity: 0; translate: 0 -.75em; } to { opacity: 1; translate: 0 0; } }
@keyframes aa-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* Scrollbar and overscroll off on desktop, as in the original */
html.aa-page { scrollbar-width: none; }
html.aa-page body::-webkit-scrollbar { display: none; }
@media (min-width: 991px) { html.aa-page { overscroll-behavior: none; } }

/* ——— jumping letters (JumpLabel) ——— */
.jump { display: inline-block; white-space: nowrap; }
.jump__l { display: inline-block; transform-origin: 50% 100%; }
@media (hover: hover) and (pointer: fine) {
    /* A data-hover parent is hovered as a whole — that is how a card breaks the button inside it */
    :is(a, button, [data-hover]):hover .jump__l {
        animation: jump .725s cubic-bezier(.34, 1.56, .64, 1) both;
        animation-delay: calc(var(--i) * 18ms);
    }
}
@keyframes jump {
    0%   { transform: translateY(0) scaleY(1) rotate(0); }
    20%  { transform: translateY(55%) scaleY(.3) rotate(17deg); }
    100% { transform: translateY(0) scaleY(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    :is(a, button, [data-hover]):hover .jump__l { animation: none; }
}

/* ═══════════════════════════ SHELL ═══════════════════════════ */

/* ——— scale and tokens ——— */
.aa {
    font-size: clamp(9px, 0.8333vw, 19px);

    --pale-pink: #FEB6FA; --soft-pink: #FFDBFD; --bright-pink: #FD48F2; --magenta: #FF008C;
    --pale-blue: #A4F6F8; --soft-blue: #DDFCFC; --soft-wine: #F0E6EA; --violet: #3B308F; --soft-gray: #F2F2F2;
    --confetti-1: #FF00E4; --confetti-2: #FD48F2; --confetti-3: #1CE8ED; --confetti-4: #FFD24A; --confetti-5: #9982DE; --confetti-6: #FFEDED;

    --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body: 'Figtree', system-ui, sans-serif;
    --font-hand: 'Caveat', cursive;

    --ease-smooth: cubic-bezier(.32, .72, 0, 1);
    --ease-bounce: cubic-bezier(.34, 1.57, .64, 1);
    --ease-click: cubic-bezier(.4, 0, .2, 1);
    --ease-energy: cubic-bezier(.32, .72, 0, 1);
    --elastic: cubic-bezier(.34, 1.56, .64, 1);

    --margin: 1.5em;
    --radius-xl: 10em;

    position: relative;
    background: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    color: #000;
    overflow-x: clip;
}

@media (max-width: 991px) {
    .aa { font-size: clamp(11px, 3.98vw, 17px); --margin: 1em; --radius-xl: 2.5em; }
}

/* ——— typography ——— */
.aa :is(.h-l, .h-m) { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; margin: 0; }
.aa .h-l { font-size: 6.5em; line-height: .8; max-width: 18ch; }
.aa .h-m { font-size: 5em; line-height: .8; }
.aa .p-large { font-size: 2em; line-height: 1.2; letter-spacing: -.02em; margin: 0; }
.aa .handwritten { font-family: var(--font-hand); font-weight: 500; font-size: 2em; line-height: 1; letter-spacing: -.02em; color: var(--violet); margin: 0; }
.aa .handwritten--tilt { rotate: 6deg; }
.aa .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ——— content column: 1200px; the decoration outside it lives its own life ——— */
.aa .wrap { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; }

/* ——— reveal on scroll ——— */
.aa .rv { opacity: 0; translate: 0 1.5em; transition: opacity .6s var(--ease-energy), translate .6s var(--ease-energy); }
.aa .rv.is-in, .is-reduced .rv { opacity: 1; translate: 0 0; }

/* ——— buttons: four kinds, grid layers, focus via ::after ——— */
.aa :is(.button, .button-alt, .button-social, .store-btn, .outline-btn, .tab) {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-body); cursor: pointer; user-select: none;
    border: 0; background: none; color: inherit;
}
.aa :is(.button, .button-alt, .button-social, .store-btn, .outline-btn, .tab)::after {
    content: ''; position: absolute; inset: -.3em; border-radius: inherit;
    border: .125em solid var(--magenta); opacity: 0; pointer-events: none;
}
.aa :is(.button, .button-alt, .button-social, .store-btn, .outline-btn, .tab):focus-visible { outline: none; }
.aa :is(.button, .button-alt, .button-social, .store-btn, .outline-btn, .tab):focus-visible::after { opacity: 1; }

.aa .button {
    height: 3.5em; padding: 0 1em; border-radius: 2em;
    background: var(--soft-pink); font-size: 1.5em; font-weight: 600;
    transition: scale .15s var(--ease-click), background .25s var(--ease-smooth);
}
.aa .button:active { scale: .955 .925; }
.aa .button--cart { gap: .4em; font-size: 1.25em; height: 2.8em; }
.aa .button--cart svg { width: 1.2em; height: 1.2em; }

.aa .button-alt { gap: .35em; font-size: 1.25em; font-weight: 700; }
.aa .button-alt__label {
    display: grid; place-items: center; height: 2.8em; padding: 0 1.2em; border-radius: .5em;
    background: var(--magenta); color: #fff; transition: rotate .25s var(--ease-bounce);
}
.aa .button-alt__arrow {
    display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: .5em;
    background: var(--magenta); color: #fff; transition: rotate .25s var(--ease-bounce), translate .25s var(--ease-bounce);
}
.aa .button-alt__arrow svg { width: 1.3em; height: 1.3em; }
.aa .button-alt__arrow--down { rotate: 90deg; }
.aa .button-alt--small { font-size: 1.05em; }
.aa .button-alt--big { font-size: 1.6em; }
.aa .button-alt--white .button-alt__label, .aa .button-alt--white .button-alt__arrow { background: #fff; color: #000; }
/* a product still to come: the button only drawn, a dashed outline with nothing behind it and nowhere to go yet */
.aa .button-alt--soon .button-alt__label { background: transparent; color: var(--magenta); box-shadow: none; border: 2px dashed var(--magenta); }
.aa .button-alt--black .button-alt__label, .aa .button-alt--black .button-alt__arrow { background: #000; color: #fff; }
.aa .button-alt:active .button-alt__label, .aa .button-alt:active .button-alt__arrow { scale: .955 .925; }

.aa .button-social {
    width: 3em; height: 3em; border-radius: 50%; background: #000; color: #fff;
    transition: scale .3s var(--ease-bounce);
}
.aa .button-social svg { width: 1.5em; height: 1.5em; transition: rotate .3s var(--ease-bounce); }
.aa .button-social--big { width: 3.625em; height: 3.625em; }
.aa .button-social--pink { background: var(--pale-pink); color: #000; }
.aa .button-social--bright { background: var(--bright-pink); color: #fff; }

.aa .store-btn {
    height: 5em; padding: 0 1.6em; border-radius: 1em; background: #000; color: #fff;
    font-size: 1em; font-weight: 700; transition: scale .15s var(--ease-click);
}
.aa .store-btn--ghost { background: transparent; color: #000; box-shadow: inset 0 0 0 .125em #000; }
.aa .outline-btn {
    height: 3.25em; padding: 0 1.4em; border-radius: 1em; box-shadow: inset 0 0 0 .125em #fff;
    color: #fff; font-size: 1.1em; font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
    .aa .button:hover { background: var(--pale-pink); animation: spring .4s var(--ease-bounce); }
    .aa .button-alt:hover .button-alt__label { rotate: 4deg; }
    .aa .button-alt:hover .button-alt__arrow { rotate: -18deg; translate: .15em 0; }
    .aa .button-alt:hover .button-alt__arrow--down { rotate: 72deg; }
    .aa .button-social:hover { scale: 1.08; }
    .aa .button-social:hover svg { rotate: -18deg; }
    .aa .outline-btn:hover { background: rgba(255, 255, 255, .12); }
}
@keyframes spring { 0% { scale: 1; } 40% { scale: .955 .925; } 100% { scale: 1.047 1.081; } }

/* ——— ears ——— */
.aa .ear {
    position: absolute; bottom: calc(100% - .6em); background: var(--soft-pink);
    scale: 1 0; transform-origin: bottom center; transition: scale .4s var(--ease-bounce);
}
.aa .ear--l { left: 1.2em; width: 1.4em; height: 1.5em; rotate: -8deg; border-radius: 50% 50% 20% 20% / 65% 65% 35% 35%; }
.aa .ear--r { right: 1.4em; width: 1em; height: 2.4em; rotate: 10deg; border-radius: 50% 50% 25% 25% / 40% 40% 60% 60%; }
.aa .is-active .ear { scale: 1; }
.aa .is-active .ear--l { animation: ear-twitch-left 5.2s infinite; }
.aa .is-active .ear--r { animation: ear-twitch-right 3.2s infinite; }

/* ——— intro veil ——— */
.veil {
    position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
    background: var(--violet); pointer-events: none;
    clip-path: circle(150% at 50% 50%);
}
.veil__mark {
    font-family: var(--font-display); font-weight: 800; font-size: 6em; color: #fff; letter-spacing: -.04em;
    scale: 0; rotate: -64deg; opacity: 0;
}
.is-intro .veil { animation: veil-out 1.25s cubic-bezier(.08, .82, .17, 1) .65s forwards; }
.is-intro .veil__mark { animation: mark-in .65s var(--elastic) .05s forwards, mark-out .6s cubic-bezier(.6, -.5, .8, .5) .5s forwards; }
@keyframes mark-in { to { scale: 1; rotate: 0deg; opacity: 1; } }
@keyframes mark-out { to { scale: 0; rotate: 64deg; opacity: 0; } }
@keyframes veil-out { to { clip-path: circle(0% at 100% 100%); } }
.is-reduced .veil { display: none; }

/* ——— header ——— */
.head {
    position: fixed; inset: 0 0 auto; z-index: 1000;
    height: 6.625em; padding: 0 var(--margin);
    pointer-events: none;
    translate: 0 -100%;
}
.head__in {
    display: grid; grid-template-columns: 3fr 6fr 3fr; align-items: center; gap: 1em;
    height: 100%;
}
.is-intro .head { animation: head-in .5s var(--ease-energy) 1.6s forwards; }
/* Inner pages: no veil, so the header drops in right away */
.aa.no-veil .head { animation: head-in .5s var(--ease-energy) .1s forwards; }
.is-reduced .head { translate: 0 0; animation: none; }
@keyframes head-in { to { translate: 0 0; } }
.head__in > * { pointer-events: auto; }

.head__brand {
    display: flex; align-items: center; gap: .75em; justify-self: start;
    font-family: var(--font-display); font-weight: 800; font-size: 1.75em; letter-spacing: -.01em; line-height: 1;
    transition: translate .45s var(--ease-smooth);
}
.head__brand { min-width: 0; }
.head__brand img { max-height: 2.2em; width: auto; }
/* the name goes on one line; a long one is cut, never stacked word by word beside the logo */
.head__brand span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.head__nav { display: flex; justify-content: center; gap: .5em; }
.head__nav .button { font-size: 1.35em; }
.head__side { display: flex; align-items: center; justify-content: flex-end; gap: .625em; transition: translate .45s var(--ease-smooth); }
.head .head__menu { display: none; justify-self: end; }
.is-scrolled .head__brand, .is-scrolled .head__side { translate: 0 -6.625em; }

/* ——— mobile menu ——— */
.menu { position: fixed; inset: 0; z-index: 1100; pointer-events: none; }
.menu__backdrop { position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity .35s; }
.menu__card {
    position: absolute; inset: .5em; display: flex; flex-direction: column;
    border-radius: 2em; background: var(--bright-pink); color: #000; overflow: hidden;
    clip-path: inset(100% round 4em); scale: .5; translate: 0 7.5em; opacity: 0;
    transition: clip-path .6s var(--ease-smooth), scale .6s var(--ease-smooth), translate .6s var(--ease-smooth), opacity .3s;
}
.menu.is-active { pointer-events: auto; }
.menu.is-active .menu__backdrop { opacity: 1; }
.menu.is-active .menu__card { clip-path: inset(0 round 2em); scale: 1; translate: 0 0; opacity: 1; }
.menu__wave { position: absolute; inset: auto -20% -30%; height: 70%; background: #fff; opacity: .5; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.menu__top { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 1.25em 1.25em 0; }
.menu__brand { font-family: var(--font-display); font-weight: 800; font-size: 1.5em; }
.menu__close { display: grid; place-items: center; width: 3em; height: 3em; border: 0; border-radius: .75em; background: var(--soft-pink); cursor: pointer; }
.menu__close svg { width: 1.3em; height: 1.3em; }
.menu__list { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6em; margin: auto 0; padding: 2em 1.25em; }
.menu__list .button { font-size: 1.6875em; height: 4em; min-width: 9em; }
.menu__bottom { position: relative; display: flex; flex-direction: column; align-items: center; gap: .75em; padding: 0 1.25em 1.5em; }
.menu__social { display: flex; gap: .6em; }
.menu__pill { font-size: 1.1em; }

/* ——— footer ——— */
.foot { position: relative; margin-top: -10em; padding: 10em var(--margin) 0; background: var(--violet); color: #fff; overflow: clip; }
.foot__shade { position: absolute; inset: 0; background: #000; opacity: var(--foot-shade, 0); pointer-events: none; }
.foot__top { position: relative; display: grid; grid-template-columns: 4fr 1fr 5fr; gap: 2em; padding: 7em 0 14em; translate: 0 var(--foot-y, 0); }
.foot__left { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5em; }
.foot__name { font-family: var(--font-display); font-weight: 800; font-size: 5em; line-height: .85; letter-spacing: -.02em; margin: 0; max-width: 18.375em; }
.foot__btns, .foot__social { display: flex; gap: .75em; }
.foot__links { margin: .5em 0 0; font-size: 1.125em; }
.foot__links a { opacity: .5; transition: opacity .2s; }
.foot__links a:hover { opacity: 1; }
.foot__right { grid-column: 3; }
.foot__h { margin: 0 0 .5em; font-family: var(--font-display); font-weight: 800; font-size: 2.5em; line-height: .88; }
.foot__p { margin: 0 0 1em; font-size: 1.25em; line-height: 1.4; opacity: .7; }
.foot__mail { display: inline-block; padding: 1em 1.0625em; border-radius: 1em; background: #fff; color: #000; font-size: 1.25em; }
.foot__shot { position: absolute; left: 50%; bottom: -9em; width: 30em; mix-blend-mode: multiply; translate: calc(-50% + var(--foot-shot-x, 0%)) var(--foot-shot-y, 0); rotate: var(--foot-shot-r, -21deg); scale: var(--foot-shot-s, 1); }
.foot__shot.is-cut { mix-blend-mode: normal; filter: drop-shadow(0 1.5em 2em #00000066); }
.foot__bar { position: relative; z-index: 2; margin: 0 calc(var(--margin) * -1); padding: 1.5em 0; background: #000; text-align: center; font-size: 1.125em; opacity: .5; }

/* ——— shell ≤991 ——— */
@media (max-width: 991px) {
    .head { height: 5em; }
    .head__in { grid-template-columns: 1fr auto; }
    .head__brand { font-size: 1.25em; }
    .head__nav, .head__side { display: none; }
    .head .head__menu { display: inline-flex; font-size: 1.1em; }
    .is-scrolled .head__brand { translate: 0 -5em; }

    .aa .h-l { font-size: 2.5em; }
    .aa .h-m { font-size: 2em; }
    .aa .p-large { font-size: 1.25em; max-width: 27ch; }
    .aa .handwritten { font-size: 1.5em; }
    .aa .store-btn { height: 3.25em; }

    .foot { margin-top: -2.5em; padding-top: 4em; }
    .foot__top { grid-template-columns: 1fr; gap: 2.5em; padding: 2em 0 4em; text-align: center; translate: 0 0; }
    .foot__left { align-items: center; }
    .foot__name { font-size: 3em; }
    .foot__right { grid-column: auto; }
    .foot__shot { display: none; }
}

/* ═══════════════════════════ POP-UP (ConfettiPop) ═══════════════════════════ */
.pop { position: absolute; z-index: 6; }
.pop__btn {
    display: grid;
    place-items: center;
    width: 5em; height: 5em;
    border: 0; border-radius: 50%;
    background: var(--violet);
    color: #fff;
    cursor: pointer;
    transition: scale .15s var(--ease-smooth);
}
.pop__btn:active { scale: .955 .925; }
.pop__mark {
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.6em; letter-spacing: -.04em;
}
/* Invisible zone between the button and the card so the hover does not break */
.pop__bridge {
    position: absolute; top: -3em; width: 8em; height: 10em;
    pointer-events: none;
}
.pop--right .pop__bridge { left: 4em; }
.pop--left  .pop__bridge { right: 4em; }
.pop.is-open .pop__bridge { pointer-events: auto; }
.pop__card {
    position: absolute;
    bottom: 0;
    width: 15em;
    padding: 1.5em 1.25em 1.25em;
    border-radius: 1.25em;
    background: #fff;
    box-shadow: 0 1.5em 3em rgba(0, 0, 0, .14);
    opacity: 0;
    scale: 0;
    rotate: -6deg;
    translate: 0 0;
    transform-origin: bottom left;
    pointer-events: none;
    transition: opacity .3s, scale .55s var(--ease-bounce), rotate .55s var(--ease-bounce), translate .55s var(--ease-bounce);
}
.pop--right .pop__card { left: 6em; }
.pop--left  .pop__card { right: 6em; transform-origin: bottom right; }
.pop__card--pale-pink { background: var(--pale-pink); }
.pop.is-open .pop__card {
    opacity: 1; scale: 1; rotate: 3deg; translate: 0 -2.5em; pointer-events: auto;
}
.pop__title {
    margin: 0 0 .9em;
    font-family: var(--font-display);
    font-weight: 800; font-size: 1.875em; line-height: .88; letter-spacing: -.01em;
}
.pop__ear {
    position: absolute; bottom: calc(100% - 1em);
    background: inherit;
    scale: 1 0; transform-origin: bottom center;
    transition: scale .45s var(--ease-bounce);
}
.pop__ear--l { left: 1.5em; width: 2.6em; height: 2.8em; rotate: -8deg; border-radius: 50% 50% 20% 20% / 65% 65% 35% 35%; transition-delay: .25s; }
.pop__ear--r { right: 2em; width: 1.8em; height: 4.4em; rotate: 10deg; border-radius: 50% 50% 25% 25% / 40% 40% 60% 60%; transition-delay: .3s; }
.pop.is-open .pop__ear { scale: 1; }
.pop.is-open .pop__ear--l { animation: ear-twitch-left 5.2s infinite .8s; }
.pop.is-open .pop__ear--r { animation: ear-twitch-right 3.2s infinite .8s; }
@media (max-width: 991px) { .pop { display: none; } }
@media (prefers-reduced-motion: reduce) { .pop__card, .pop__ear { transition: none; animation: none !important; } }

/* ═══════════════════════════ CARD (ConfettiItem) ═══════════════════════════ */
/* The card tilts and grows ears — a device from the source page */
.card {
    position: relative;
    display: grid;
    width: 22em;
    max-width: 100%;
    transition: rotate .35s var(--ease-bounce), translate .35s var(--ease-bounce);
}
.card > * { grid-area: 1 / 1; }
.card__bg {
    border-radius: 2em;
    background: var(--card-soft);
    transition: background .35s var(--ease-smooth);
}
.card__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5em;
    padding: 2em 1.5em;
}
.card__shot {
    width: 100%;
    margin-bottom: .5em;
    border-radius: 1.25em;
    background: #fff;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
/* object-contain: caps and bags are not square; they must not be cropped */
.card__shot img { width: 100%; height: 100%; object-fit: contain; padding: 1.25em; }
.card__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 2.5em;
    line-height: .88;
    letter-spacing: -.01em;
    color: #000;
}
.card__hit { position: absolute; inset: 0; z-index: 2; }
.card__price {
    margin: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.75em;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: #000;
}
/*
 * Every card is a creature hiding below its top edge: pointed at, it tilts, blushes and something springs up from
 * behind the edge and twitches now and then. Which creature (card--bunny, --cat, --frog, --sprout, --bear,
 * --antenna, --party) and the card's tone (--tone, degrees around the color wheel from the store's own pink) go
 * round with the card's place in the grid, so a row is a family of matching pastels, not one pink. The two spans
 * are the creature; each one takes its look from custom properties: --rest (its angle), --idle (its keyframes),
 * --period and --delay.
 */
.card {
    --card-soft: var(--soft-pink); --card-pale: var(--pale-pink); --card-accent: var(--magenta);
    isolation: isolate;
}
/* turned in OKLCH, which keeps how light and how strong a color looks: a pastel pink turns into a pastel mint, not a neon one */
@supports (color: oklch(from red l c h)) {
    .card {
        --card-soft: oklch(from var(--soft-pink) l calc(c * .8) calc(h + var(--tone, 0)));
        --card-pale: oklch(from var(--pale-pink) l calc(c * .8) calc(h + var(--tone, 0)));
        --card-accent: oklch(from var(--magenta) calc(l * .92) calc(c * .85) calc(h + var(--tone, 0)));
    }
}
.card__bg { position: relative; z-index: 1; }
.card__content { z-index: 2; }
.card__ear {
    position: absolute;
    z-index: 0;
    bottom: calc(100% - 1.5em);
    display: block;
    box-sizing: border-box;
    background: var(--card-pale);
    pointer-events: none;
    transform-origin: bottom center;
    scale: 1 0;
    rotate: var(--rest, 0deg);
}
.card__ear::before, .card__ear::after { position: absolute; box-sizing: border-box; pointer-events: none; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .card__ear { transition: scale .4s var(--ease-bounce), background .35s var(--ease-smooth); }
    .card:hover .card__ear { scale: 1; animation: var(--idle, none) var(--period, 5s) ease-in-out var(--delay, .6s) infinite; }
}
@media (hover: hover) and (pointer: fine) {
    .card:hover { rotate: -2deg; }
    .card:hover .card__bg { background: var(--card-pale); }
    .card:hover .button-alt__label { rotate: 4deg; }
    .card:hover .button-alt__arrow { rotate: -18deg; translate: .15em 0; }
}
@media (prefers-reduced-motion: reduce) {
    .card, .card__bg, .card__ear, .card__ear::before, .card__ear::after { transition: none; animation: none !important; }
    .card__ear { scale: 1 0 !important; }
    .card:hover { rotate: 0deg; }
}

/* the bunny, the first of them: one short floppy ear, one long upright one */
.card--bunny .card__ear--left { left: 2.5em; width: 4.875em; height: 5em; --rest: -8deg; --idle: ear-twitch-left; --period: 5.2s; border-radius: 50% 50% 20% 20% / 65% 65% 35% 35%; }
.card--bunny .card__ear--right { right: 3em; width: 3.25em; height: 9em; --rest: 10deg; --idle: ear-twitch-right; --period: 3.2s; border-radius: 50% 50% 25% 25% / 40% 40% 60% 60%; }

/* the cat: pointed ears with a pink inside; one flicks before the other */
.card--cat .card__ear { width: 5em; height: 6em; clip-path: polygon(50% 0, 100% 100%, 0 100%); --idle: cat-flick; --period: 4.8s; }
.card--cat .card__ear--left { left: 2em; --rest: -12deg; --flick: -22deg; }
.card--cat .card__ear--right { right: 2em; --rest: 12deg; --flick: 20deg; --period: 6.1s; --delay: 1.1s; }
.card--cat .card__ear::before { content: ''; inset: 1.5em 1.2em .5em; background: var(--card-accent); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@keyframes cat-flick { 0%, 72%, 84%, 100% { rotate: var(--rest); } 76% { rotate: var(--flick); } 80% { rotate: 0deg; } }

/* the bear: round ears that wiggle, sleepily */
.card--bear .card__ear { width: 5.5em; height: 5.5em; border-radius: 50%; --idle: bear-wiggle; --period: 6.8s; }
.card--bear .card__ear--left { left: 2em; --rest: -6deg; --wiggle: -13deg; }
.card--bear .card__ear--right { right: 2em; --rest: 6deg; --wiggle: 13deg; --delay: 1.3s; }
.card--bear .card__ear::before { content: ''; inset: 1.25em; border-radius: 50%; background: var(--card-soft); }
@keyframes bear-wiggle { 0%, 75%, 92%, 100% { rotate: var(--rest); } 82% { rotate: var(--wiggle); } 87% { rotate: 0deg; } }

/* the frog: two eyes come up over the edge, watch the buyer and blink */
.card--frog .card__ear { width: 5.5em; height: 5.5em; border-radius: 50%; --idle: frog-nod; --period: 7s; }
.card--frog .card__ear--left { left: 2em; }
.card--frog .card__ear--right { right: 2em; }
.card--frog .card__ear::before { content: ''; inset: .8em 1em 1.1em; background: #fff; border-radius: 50%; }
.card--frog .card__ear::after { content: ''; width: 1.1em; height: 1.1em; top: 2em; background: #000; border-radius: 50%; }
.card--frog .card__ear--left::after { right: 1.2em; }
.card--frog .card__ear--right::after { left: 1.2em; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .card--frog:hover .card__ear::before, .card--frog:hover .card__ear::after { animation: frog-blink 5.6s ease-in-out 1.2s infinite; }
}
@keyframes frog-nod { 0%, 78%, 92%, 100% { translate: 0 0; } 84% { translate: 0 -.3em; } }
@keyframes frog-blink { 0%, 86%, 92%, 100% { scale: 1; } 89% { scale: 1 .06; } }

/* the antennae: a little alien, two stalks of different lengths that wobble on their own */
.card--antenna .card__ear { width: .6em; border-radius: 1em; --idle: antenna-sway; }
.card--antenna .card__ear--left { left: 35%; height: 5em; --rest: -10deg; --sway: -22deg; --period: 3.7s; }
.card--antenna .card__ear--right { right: 35%; height: 6.5em; --rest: 8deg; --sway: 20deg; --period: 4.9s; --delay: .9s; }
.card--antenna .card__ear::before { content: ''; width: 1.8em; height: 1.8em; left: -.6em; top: -.8em; border-radius: 50%; background: var(--card-accent); }
@keyframes antenna-sway { 0%, 65%, 100% { rotate: var(--rest); } 76% { rotate: var(--sway); } 88% { rotate: 0deg; } }

/* the sprout: two leaves on stems, swaying in a breeze */
.card--sprout .card__ear { width: .55em; height: 4.8em; border-radius: 1em; --idle: sprout-sway; --period: 5.4s; }
.card--sprout .card__ear--left { left: calc(50% - .6em); --rest: -20deg; --sway: -29deg; }
.card--sprout .card__ear--right { right: calc(50% - .6em); --rest: 20deg; --sway: 29deg; --period: 6.2s; }
.card--sprout .card__ear::before { content: ''; width: 4.4em; height: 2.8em; top: -.8em; background: var(--card-accent); }
.card--sprout .card__ear--left::before { right: 0; border-radius: 0 100% 0 100%; }
.card--sprout .card__ear--right::before { left: 0; border-radius: 100% 0 100% 0; }
@keyframes sprout-sway { 0%, 100% { rotate: var(--rest); } 50% { rotate: var(--sway); } }

/* the party: two paper hats with pompoms, bobbing out of step */
.card--party .card__ear { width: 4.5em; height: 5.5em; background: transparent; --idle: party-bob; --period: 4.2s; }
.card--party .card__ear--left { left: 2.5em; --rest: -12deg; --cheer: -18deg; }
.card--party .card__ear--right { right: 2.5em; height: 7em; --rest: 10deg; --cheer: 18deg; --period: 5.3s; --delay: 1s; }
.card--party .card__ear::before { content: ''; inset: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: radial-gradient(circle at 50% 60%, var(--card-accent) 0 .55em, transparent .58em), var(--card-pale); }
.card--party .card__ear::after { content: ''; width: 1.3em; height: 1.3em; left: calc(50% - .65em); top: -.5em; border-radius: 50%; background: var(--card-accent); }
@keyframes party-bob { 0%, 70%, 90%, 100% { translate: 0 0; rotate: var(--rest); } 78% { translate: 0 -.45em; rotate: var(--cheer); } 84% { translate: 0 .1em; rotate: var(--rest); } }

/* ═══════════════════════════ FAQ (ConfettiFaq) ═══════════════════════════ */
.faq { position: relative; z-index: 1; padding: 5em var(--margin) 10em; background: #fff; clip-path: inset(-10em 0 0 round 0 0 var(--radius-xl) var(--radius-xl)); }
.faq__wave { position: absolute; inset: 0 0 auto; z-index: -1; height: 40em; background: var(--soft-blue); opacity: .5; border-radius: 0 0 50% 50% / 0 0 12% 12%; animation: aa-breathe 6s ease-in-out infinite; }
.faq__title { text-align: center; max-width: none; }
.faq__list { display: flex; flex-direction: column; gap: .5em; width: min(100%, 62em); margin: 3.5em auto 0; }
.q { border-radius: 1.5em; background: var(--soft-blue); transition: background .25s var(--ease-smooth); }
.q[open], .q:hover { background: var(--pale-blue); }
.q summary { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.8125em 2em; font-size: 2em; line-height: 1.2; letter-spacing: -.02em; cursor: pointer; list-style: none; }
.q summary::-webkit-details-marker { display: none; }
.q__sign { position: relative; flex: none; width: 1.25em; height: 1.25em; }
.q__plus, .q__minus { position: absolute; inset: 0; display: block; transition: scale .4s var(--ease-bounce), rotate .4s var(--ease-bounce); }
.q__plus::before, .q__plus::after, .q__minus::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: .13em; margin-top: -.065em; background: #000; border-radius: .1em; }
.q__plus::after { rotate: 90deg; }
.q__minus { scale: 0; rotate: 40deg; }
.q[open] .q__plus { scale: 0; rotate: -40deg; }
.q[open] .q__minus { scale: 1; rotate: 0deg; }
.q__body { padding: 0 2em 1.8125em; }
.q__body p { margin: 0; font-size: 1.5em; line-height: 1.2; letter-spacing: -.02em; opacity: 0; translate: 0 -.5em; transition: opacity .3s .1s, translate .3s .1s; }
.q[open] .q__body p { opacity: 1; translate: 0 0; }
.faq__more { display: flex; justify-content: center; margin-top: 2.5em; }
.faq__pop { right: 7.75em; bottom: 20em; }
@media (max-width: 991px) {
    .faq { padding: 4em var(--margin) 4em; }
    .faq__list { margin-top: 2em; gap: .375em; }
    .q { border-radius: 1em; }
    .q summary { font-size: 1.25em; padding: 1.4375em 1em; }
    .q__sign { width: .75em; height: .75em; }
    .q__body { padding: 0 1em 1.25em; }
    .q__body p { font-size: 1.125em; }
}

/* ═══════════════════════════ STOREFRONT ═══════════════════════════ */

/* ——— 1. hero ——— */
.hero {
    position: relative;
    padding: 19.4375em var(--margin) 10.75em;
    background: var(--pale-pink);
    clip-path: inset(0 round 0 0 var(--radius-xl) var(--radius-xl));
}
.hero__bg { position: absolute; inset: 0; overflow: hidden; }
.is-intro .hero__bg { animation: bg-pour 1.1s cubic-bezier(.08, .82, .17, 1) 1.3s both; }
@keyframes bg-pour { from { clip-path: ellipse(20% 0% at 100% 100%); } to { clip-path: ellipse(150% 130% at 100% 100%); } }
.hero__blob { position: absolute; border-radius: 50% 42% 58% 45% / 48% 55% 45% 52%; animation: aa-breathe 6s ease-in-out infinite; }
.hero__blob--big { left: -14%; top: -10%; width: 54em; height: 40em; background: var(--soft-pink); }
.hero__blob--small { right: -4%; top: 30%; width: 34em; height: 28em; background: var(--bright-pink); opacity: .3; animation-delay: -3s; }

.hero__confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.hero__confetti span { position: absolute; border-radius: .15em; rotate: var(--rot); }
.is-intro .hero__confetti span { animation: confetti-in .95s var(--elastic) calc(1.6s + var(--d)) both; }
@keyframes confetti-in { from { scale: 0; translate: 0 -100%; rotate: calc(var(--rot) - 40deg); } to { scale: 1; translate: 0 0; rotate: var(--rot); } }
@media (max-width: 991px) { .hero__confetti .is-desktop-only { display: none; } .hero__confetti { top: -4.5em; } }

.hero__inner { position: relative; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2.5em; text-align: center; }
.is-intro .hero__inner { animation: hero-in .4s var(--ease-energy) 1.2s both; }
@keyframes hero-in { from { translate: 0 -5em; opacity: 0; } to { translate: 0 0; opacity: 1; } }

.hero__title { max-width: 13ch; font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; margin: 0; font-size: 10em; line-height: .8; text-wrap: balance; }
.hero__word { display: inline-block; margin-right: .22em; transform-origin: top left; }
.is-intro .hero__word { animation: word-in .875s var(--elastic) calc(1.35s + var(--i) * 48ms) both; }
@keyframes word-in {
    0% { translate: 40% -10%; scale: .85 .1; rotate: 8deg; opacity: 0; }
    10% { opacity: 1; }
    100% { translate: 0 0; scale: 1 1; rotate: 0deg; opacity: 1; }
}

.hero__intro { max-width: 34ch; margin: -1em 0 0; font-size: 2em; line-height: 1.2; letter-spacing: -.02em; }
.is-intro .hero__cta { animation: aa-fade-up .35s var(--ease-energy) 1.625s both; }

.hero__addon { position: absolute; left: 0; bottom: -5em; display: flex; flex-direction: column; gap: .9em; text-align: left; }
/* As wide as its words and turned about its left end: turned about the middle of the full row, the first
   letters dropped onto the facts below. */
.hero__hand { align-self: flex-start; transform-origin: 0 100%; rotate: -11deg; opacity: .75; translate: -1em 0; }
.hero__letter { display: inline-block; }
.is-intro .hero__letter { animation: letter-in .75s var(--elastic) calc(1.55s + var(--i) * 16ms) both; }
@keyframes letter-in { from { opacity: 0; rotate: 22deg; translate: -.25em .5em; } to { opacity: 1; rotate: 0deg; translate: 0 0; } }
.hero__facts { display: flex; gap: .8125em; list-style: none; margin: 0; padding: 0; }
.is-intro .hero__facts { animation: aa-fade-in .35s var(--ease-energy) 1.575s both; }
.hero__facts li { display: grid; place-items: center; width: 6.5em; height: 6.5em; padding: .6em; border-radius: 1.625em; background: var(--soft-gray); font-size: 1em; font-weight: 700; line-height: 1.15; text-align: center; }

.hero__shot { position: absolute; right: 3em; bottom: -8em; z-index: 3; width: 39em; max-width: 48vw; rotate: -21deg; mix-blend-mode: multiply; }
.hero__shot.is-cut { mix-blend-mode: normal; filter: drop-shadow(0 1.5em 2em #3b308f40); }
.is-intro .hero__shot { animation: shot-in .75s var(--elastic) 1.6s both; }
@keyframes shot-in { from { opacity: 0; translate: 0 10em; rotate: -43deg; } to { opacity: 1; translate: 0 0; rotate: -21deg; } }

.hero__pop { right: 2em; bottom: 10.75em; }
.is-intro .hero__pop { animation: aa-fade-in .35s var(--ease-energy) 1.55s both; }

/* Wide screens: the text and the product shot get their own columns, so the title never lies on the
   picture (black text vanished on a dark first product). The title is sized by its column. */
@media (min-width: 992px) {
    .hero__wrap { display: grid; grid-template-columns: minmax(0, 1fr) min(39em, 40%); align-items: center; column-gap: 4em; }
    .hero__inner { container-type: inline-size; align-items: flex-start; text-align: left; }
    .hero__title { max-width: none; font-size: min(10em, 14.5cqi); }
    .hero__intro { margin-top: -.5em; }
    .hero__addon { position: static; margin-top: 1.5em; }
    .hero__shot { position: relative; right: auto; bottom: auto; width: 100%; max-width: none; align-self: end; margin-bottom: -8em; }
}

/* ——— 2. products and tabs ——— */
.shop { position: relative; padding: 13.75em var(--margin) 17.0625em; }
.shop__wave { position: absolute; inset: 1em 0 auto; z-index: -1; height: 48em; background: var(--soft-wine); opacity: .5; border-radius: 0 0 50% 50% / 0 0 14% 14%; animation: aa-breathe 6s ease-in-out infinite; }

/* a store can have many categories: the tabs wrap onto more rows instead of running off both edges */
.tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .75em; margin-top: 3em; }
.tab {
    height: 2.75em; padding: 0 1.25em; border-radius: 1.375em;
    box-shadow: inset 0 0 0 .15em var(--magenta); color: #000; background: #fff;
    font-size: 1.75em; font-weight: 600; transition: background .25s var(--ease-smooth), color .25s var(--ease-smooth);
}
.tab.is-active { background: var(--magenta); color: #fff; }

.shop__search { position: relative; margin: 2.5em auto 0; width: 24em; max-width: 100%; font-size: 2em; }
.shop__search input { width: 100%; height: 2.6em; padding: 0 3em 0 1.2em; border: 0; border-radius: 1.3em; box-shadow: inset 0 0 0 .14em var(--magenta); background: #fff; font-weight: 600; }
.shop__search input::placeholder { color: #999; }
.shop__search button { position: absolute; right: .3em; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--magenta); color: #fff; font-weight: 600; }

.shop .h-l { margin-inline: auto; text-align: center; }
/* as many columns as fit, stretched to the full width: no empty strip on the right */
.shop__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(20em, 100%), 1fr)); gap: 2em; margin-top: 6.875em; }
.shop__grid > .card { width: auto; }
.shop__grid > * { animation: card-in .5s var(--ease-bounce) calc(var(--i) * 45ms) both; }
@keyframes card-in { from { scale: 0; rotate: var(--card-rot, -30deg); translate: -3.5em 0; opacity: 0; } to { scale: 1; rotate: 0deg; translate: 0 0; opacity: 1; } }
/* The pane transition of the tabs (Vue's pane-right / pane-left, mode out-in), driven by confetti.js */
.shop__grid.is-entering { transition: translate .5s var(--ease-smooth), opacity .25s; }
.shop__grid.is-enter-from { translate: 0 12em; opacity: 0; transition: none; }
.shop__grid.is-leaving { transition: translate .35s var(--ease-smooth), opacity .25s; translate: 0 -8em; opacity: 0; }
.shop__grid.pane-left > * { --card-rot: 30deg; }
.shop__empty { grid-column: 1 / -1; font-size: 2em; margin: 0; }
.shop__pages { margin-top: 5em; }
.pages { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5em; list-style: none; margin: 0; padding: 0; }
.pages .button { min-width: 2.333em; }
.pages .is-current { background: var(--magenta); color: #fff; cursor: default; }
.pages__dots { padding: 0 .5em; font-size: 1.5em; opacity: .5; }

/* ——— 3. curve ——— */
.curve { padding: 5em 0 0; overflow-x: clip; }
.curve svg { display: block; width: 100%; height: auto; translate: 0 10%; scale: 1.1; }
.curve__text { font-family: var(--font-display); font-weight: 800; font-size: 150px; letter-spacing: -.01em; fill: #000; dominant-baseline: middle; }

/* ——— 4. features ——— */
.features { display: flex; flex-direction: column; gap: 4.8125em; padding: 4em var(--margin) 12.5em; }
.feature { display: grid; grid-template-columns: 4fr 6fr; align-items: center; gap: 4.875em; }
.feature__text { display: flex; flex-direction: column; gap: 2em; }
.feature__social { display: flex; gap: .75em; }
.feature__shot { box-sizing: border-box; aspect-ratio: 574 / 601; border-radius: 5em; background: #fff; border: 2px solid var(--bright-pink); overflow: hidden; transition: border-color .4s; }
.feature + .feature { margin-top: 2rem; }
.feature__shot img { box-sizing: border-box; display: block; width: 100%; height: 100%; object-fit: contain; padding: 1.5em; mix-blend-mode: multiply; }

/* ——— 5. turquoise card ——— */
.box { min-height: 100svh; padding: 1.5em; display: flex; }
.box__card {
    position: relative; flex: 1; display: grid; place-items: center;
    border-radius: var(--radius-xl); background: var(--pale-blue); overflow: hidden;
}
.box__shot { position: absolute; width: 60%; max-width: 48em; mix-blend-mode: multiply; opacity: .35; transition: scale .1s linear; }
.box__shot.is-cut { mix-blend-mode: normal; opacity: .45; }
.box__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5em; width: 62.5em; max-width: 100%; text-align: center; }
.box__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; margin: 0; font-size: 7.5em; line-height: .85; opacity: 0; translate: 0 1em; transition: opacity .5s var(--ease-energy), translate .5s var(--ease-energy); }
.box__letter { display: inline-block; opacity: 0; rotate: 22deg; translate: -.25em .5em; transition: opacity .5s var(--elastic) calc(.25s + var(--i) * 16ms), rotate .5s var(--elastic) calc(.25s + var(--i) * 16ms), translate .5s var(--elastic) calc(.25s + var(--i) * 16ms); }
.box__row { display: flex; flex-wrap: wrap; gap: 3em; justify-content: center; margin-top: 10em; }
.box__row .store-btn { scale: 0; rotate: var(--r); transition: scale .5s var(--elastic) calc(.45s + var(--i) * 26ms), rotate .5s var(--elastic) calc(.45s + var(--i) * 26ms); }
.box.is-active .box__title, .is-reduced .box__title { opacity: 1; translate: 0 0; }
.box.is-active .box__letter, .is-reduced .box__letter { opacity: 1; rotate: 0deg; translate: 0 0; }
.box.is-active .box__row .store-btn, .is-reduced .box__row .store-btn { scale: 1; rotate: 0deg; }
.box__pop { right: 2em; bottom: 2em; }

/* ——— storefront ≤991 ——— */
@media (max-width: 991px) {
    .hero { padding: 8.4375em var(--margin) 0; }
    .hero__inner { gap: .5em; }
    .hero__title { font-size: 3.25em; max-width: 10ch; }
    .hero__intro { font-size: 1.25em; margin-top: .5em; }
    .hero__cta { margin-top: 1em; }
    .hero__addon { display: none; }
    .hero__shot { position: static; width: 100%; max-width: none; margin-top: 1.5em; rotate: 0deg; }
    .is-intro .hero__shot { animation: aa-fade-up .45s var(--ease-energy) 1.525s both; }

    .shop { padding: 4em var(--margin) 5em; }
    .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-top: 1.5em; }
    .tab { height: 3em; font-size: 1.25em; box-shadow: inset 0 0 0 .15625em var(--magenta); }
    .shop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75em; margin-top: 2em; }
    .shop__grid > * { width: 100%; }

    .curve svg { scale: 1; }
    .curve__text { font-size: 110px; }

    .features { gap: 3em; padding: 2em var(--margin) 5em; }
    .feature { grid-template-columns: 1fr; gap: 2em; }
    .feature__shot { order: -1; border-radius: 2.5em; }

    .box { min-height: auto; padding: 1em; }
    .box__card { padding: 4em 1.5em 6.25em; }
    .box__title { font-size: 3em; }
    .box__row { gap: .5em; margin-top: 2em; }
}

/* ═══════════════════════════ PRODUCT PAGE ═══════════════════════════ */

/* ——— 1. stage ——— */
.stage {
    position: relative;
    padding: 9.5em var(--margin) 9em;
    background: var(--pale-pink);
    clip-path: inset(0 round 0 0 var(--radius-xl) var(--radius-xl));
}
.stage__bg { position: absolute; inset: 0; overflow: hidden; }
.stage__blob { position: absolute; border-radius: 50% 42% 58% 45% / 48% 55% 45% 52%; animation: aa-breathe 6s ease-in-out infinite; }
.stage__blob--big { left: -12%; top: -20%; width: 50em; height: 38em; background: var(--soft-pink); }
.stage__blob--small { right: -6%; bottom: -10%; width: 30em; height: 26em; background: var(--bright-pink); opacity: .25; animation-delay: -3s; }

.stage__confetti { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.stage__confetti span { position: absolute; border-radius: .15em; rotate: var(--rot); }
.is-intro .stage__confetti span { animation: confetti-in .95s var(--elastic) calc(.3s + var(--d)) both; }

.stage__wrap { z-index: 4; }
.is-intro .stage__wrap { animation: stage-in .5s var(--ease-energy) .1s both; }
@keyframes stage-in { from { translate: 0 -3em; opacity: 0; } to { translate: 0 0; opacity: 1; } }

.crumbs { display: flex; align-items: center; gap: 1.25em; margin-bottom: 2.5em; }
.crumbs__back { gap: .5em; font-size: 1.25em; height: 2.8em; background: #fff; }
.crumbs__back svg { width: 1.1em; height: 1.1em; }
.crumbs__cat { font-family: var(--font-hand); font-size: 2em; line-height: 1; color: var(--violet); rotate: -4deg; }

.stage__grid { display: grid; grid-template-columns: 6fr 5fr; gap: 3em; align-items: start; }

/* gallery */
.gallery { display: flex; flex-direction: column; gap: 1em; }
.gallery__main { position: relative; border-radius: 2.5em; background: #fff; overflow: hidden; }
.gallery__slide { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / 1; padding: 2em; }
.gallery__slide img, .gallery__slide canvas { width: 100%; height: 100%; object-fit: contain; }

.gallery__thumbs { display: flex; flex-wrap: wrap; gap: .75em; }
.thumb {
    width: 6.5em; height: 6.5em; padding: .5em; border: 0; border-radius: 1.25em; background: #fff; cursor: pointer;
    box-shadow: inset 0 0 0 0 var(--magenta); transition: box-shadow .25s var(--ease-smooth), scale .25s var(--ease-bounce);
}
.thumb.thumb-on { box-shadow: inset 0 0 0 .25em var(--magenta); }
.thumb img { width: 100%; height: 100%; object-fit: contain; }

/* buying panel: a card that grows ears, like the ones in the shop */
.panel { position: relative; display: grid; }
.panel > * { grid-area: 1 / 1; }
.panel__bg { border-radius: 2.5em; background: var(--soft-pink); transition: background .35s var(--ease-smooth); }
.panel__in { position: relative; display: flex; flex-direction: column; gap: 1.5em; padding: 2.5em; }
.panel__ear {
    position: absolute; z-index: 0; bottom: calc(100% - 1.5em); background: var(--soft-pink);
    scale: 1 0; transform-origin: bottom center; transition: scale .4s var(--ease-bounce), background .35s var(--ease-smooth);
}
.panel__ear--l { left: 3em; width: 4.875em; height: 5em; rotate: -8deg; border-radius: 50% 50% 20% 20% / 65% 65% 35% 35%; }
.panel__ear--r { right: 3.5em; width: 3.25em; height: 9em; rotate: 10deg; border-radius: 50% 50% 25% 25% / 40% 40% 60% 60%; }
.is-intro .panel__ear { scale: 1; transition-delay: .6s; }
.is-intro .panel__ear--l { animation: ear-twitch-left 5.2s infinite 1s; }
.is-intro .panel__ear--r { animation: ear-twitch-right 3.2s infinite 1s; }

.panel__hand { rotate: -3deg; translate: -.25em 0; opacity: .85; }
.panel__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 5em; line-height: .85; letter-spacing: -.01em; text-wrap: balance; }
.panel__price { display: flex; align-items: baseline; gap: .75em; flex-wrap: wrap; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 3em; line-height: 1; }
.panel__blank { font-family: var(--font-body); font-weight: 600; font-size: .45em; opacity: .6; }
.panel__text { font-size: 1.4em; line-height: 1.3; letter-spacing: -.01em; }
.panel__text p { margin: 0 0 .6em; }
.panel__text a { text-decoration: underline; text-decoration-color: var(--magenta); }
.panel__error { margin: 0; font-size: 1.1em; color: #b3003f; }

.opt { display: flex; flex-direction: column; gap: .75em; }
.opt__label { display: flex; align-items: baseline; gap: .6em; margin: 0; font-size: 1.1em; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.opt__label span { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .6; }
.opt__guide { margin-left: auto; font-weight: 600; text-transform: none; letter-spacing: 0; text-decoration: underline; text-decoration-color: var(--magenta); }
.opt__row { display: flex; flex-wrap: wrap; gap: .6em; }
.opt__row--tight { gap: .5em; }

/* chips (the island renders .chip / .chip-on / .chip-icon / .chip-color) */
.chip {
    display: inline-flex; align-items: center; justify-content: center; min-width: 3.5em; height: 3.5em; padding: 0 1.1em;
    border: 0; border-radius: 1.2em; background: #fff; color: #000; cursor: pointer;
    font-family: var(--font-body); font-size: 1.25em; font-weight: 700; text-transform: uppercase;
    box-shadow: inset 0 0 0 0 var(--magenta); transition: box-shadow .2s var(--ease-smooth), background .2s var(--ease-smooth), color .2s var(--ease-smooth), scale .15s var(--ease-click);
}
.chip:active { scale: .955 .925; }
.chip.chip-on { background: var(--magenta); color: #fff; }
.chip-icon { width: 4.5em; height: 4.5em; padding: .8em; }
.chip-icon svg { width: 100%; height: 100%; }
.chip-icon svg:not(.aa-icon) { fill: currentColor; }

/* a color swatch: the old .swatch, drawn as a .chip-color with the circle in ::before */
.chip.chip-color {
    position: relative; display: grid; place-items: center; width: 3.25em; height: 3.25em; min-width: 0; padding: 0;
    border: 0; border-radius: 50%; background: transparent; box-shadow: none; cursor: pointer; font-size: 1em; text-transform: none;
}
.chip.chip-color::before {
    content: ''; display: block; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--swatch);
    box-shadow: inset 0 0 0 .08em rgba(0, 0, 0, .12); transition: scale .25s var(--ease-bounce);
}
.chip.chip-color::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: .2em solid var(--magenta); scale: 0; opacity: 1; transition: scale .3s var(--ease-bounce); }
.chip.chip-color.chip-on { background: transparent; color: #000; }
.chip.chip-color.chip-on::after { scale: 1; }
.chip.chip-color.chip-on::before { scale: .85; }

.panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1em; margin-top: .5em; }
.panel__buy:disabled { cursor: progress; }
.panel__buy .button-alt__label { min-width: 7em; }
.panel__cart { gap: .5em; background: #fff; }
.panel__cart svg { width: 1.2em; height: 1.2em; }

.facts { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; margin: .5em 0 0; padding: 0; }
.facts li { padding: .55em .9em; border-radius: 1em; background: #fff; font-size: 1em; font-weight: 700; line-height: 1; }

.stage__pop { right: -1em; bottom: -4em; }

/* ——— 2. about ——— */
.about { padding: 8em var(--margin) 2em; }
.about__in { display: grid; grid-template-columns: 4fr 6fr; gap: 4em; align-items: start; }
.about__text { font-size: 1.75em; line-height: 1.3; letter-spacing: -.02em; }
.about__text p { margin: 0 0 .8em; }
.about__text a { text-decoration: underline; text-decoration-color: var(--magenta); }

/* ——— 3. steps ——— */
.steps { position: relative; padding: 9em var(--margin) 10em; }
.steps__wave { position: absolute; inset: 2em 0 auto; z-index: -1; height: 36em; background: var(--soft-wine); opacity: .5; border-radius: 0 0 50% 50% / 0 0 14% 14%; animation: aa-breathe 6s ease-in-out infinite; }
.steps__title { text-align: center; max-width: none; }
.steps__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5em; margin-top: 4em; }
.step { position: relative; display: flex; flex-direction: column; gap: 1em; min-height: 22em; padding: 2.5em 2.25em; border-radius: 2.5em; transition-delay: calc(var(--i) * 90ms); }
.step--pink { background: var(--soft-pink); }
.step--blue { background: var(--soft-blue); }
.step--gray { background: var(--soft-gray); }
.step__n { display: grid; place-items: center; width: 3.5em; height: 3.5em; border-radius: 50%; background: #000; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 1.5em; }
.step__title { margin: auto 0 0; font-family: var(--font-display); font-weight: 800; font-size: 2.75em; line-height: .88; letter-spacing: -.01em; }
.step__text { margin: 0; font-size: 1.4em; line-height: 1.25; letter-spacing: -.01em; }

/* ——— 4. turquoise card ——— */
.more { padding: 0 1.5em 12em; }
.more__card { position: relative; display: grid; place-items: center; min-height: 48em; border-radius: var(--radius-xl); background: var(--pale-blue); overflow: hidden; }
.more__shot { position: absolute; width: 55%; max-width: 44em; mix-blend-mode: multiply; opacity: .3; rotate: -12deg; }
.more__shot.is-cut { mix-blend-mode: normal; opacity: .45; }
.more__content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.5em; width: 60em; max-width: 100%; padding: 4em 1.5em; text-align: center; }
.more__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 7.5em; line-height: .85; letter-spacing: -.01em; }
.more__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2em; margin-top: 4em; }

@media (hover: hover) and (pointer: fine) {
    .chip:hover { box-shadow: inset 0 0 0 .2em var(--magenta); }
    .chip.chip-on:hover { box-shadow: none; }
    .chip.chip-color:hover { box-shadow: none; }
    .chip.chip-color:hover::before { scale: .9; }
    .thumb:hover { scale: 1.05; }
}

/* ——— product ≤991 ——— */
@media (max-width: 991px) {
    .stage { padding: 6.5em var(--margin) 4em; }
    .stage__confetti .is-desktop-only { display: none; }
    .crumbs { gap: .75em; margin-bottom: 1.25em; }
    .crumbs__back { font-size: 1em; }
    .crumbs__cat { font-size: 1.5em; }
    .stage__grid { grid-template-columns: 1fr; gap: 1.5em; }
    .gallery__main { border-radius: 1.5em; }
    .gallery__slide { padding: 1em; }
    .gallery__thumbs { flex-wrap: nowrap; overflow-x: auto; gap: .5em; scrollbar-width: none; }
    .gallery__thumbs .thumb { flex: none; width: 4.5em; height: 4.5em; border-radius: 1em; }
    .panel__bg { border-radius: 1.5em; }
    .panel__in { padding: 1.5em 1.25em; gap: 1.1em; }
    .panel__ear { display: none; }
    .panel__title { font-size: 2.75em; }
    .panel__price { font-size: 2em; }
    .panel__text { font-size: 1.1em; }
    .chip { font-size: 1em; height: 3em; min-width: 3em; border-radius: 1em; }
    .chip-icon { width: 3.75em; height: 3.75em; }
    .panel__buy { font-size: 1.2em; }
    .stage__pop { display: none; }

    .about { padding: 3.5em var(--margin) 1em; }
    .about__in { grid-template-columns: 1fr; gap: 1em; }
    .about__text { font-size: 1.15em; }

    .steps { padding: 4em var(--margin) 4em; }
    .steps__row { grid-template-columns: 1fr; gap: .75em; margin-top: 1.5em; }
    .step { min-height: 0; padding: 1.5em 1.25em; border-radius: 1.5em; }
    .step__title { font-size: 1.75em; }
    .step__text { font-size: 1.1em; }

    .more { padding: 0 1em 5em; }
    .more__card { min-height: 0; }
    .more__content { padding: 3em 1em; }
    .more__title { font-size: 3em; }
    .more__row { gap: .5em; margin-top: 1.5em; }
}

/* ——— reduced motion: everything in its final state at once ——— */
@media (prefers-reduced-motion: reduce) {
    .aa *, .aa *::before, .aa *::after { animation: none !important; transition: none !important; }
    .head { translate: 0 0; }
    .shop__grid > * { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; }
}