/* Uncanny Knick Knacks: theme toggle, botanicals, sparkles, butterflies, ornaments. Shared by the storefront and the shop admin. */

/* A night sky that only shows in dark mode. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--stars-opacity); transition: opacity .8s ease;
  background-image:
    radial-gradient(1.2px 1.2px at 23px 31px, #fff6dc, transparent),
    radial-gradient(1px 1px at 97px 143px, #e9e2ff, transparent),
    radial-gradient(1.4px 1.4px at 151px 67px, #fff, transparent),
    radial-gradient(1px 1px at 59px 211px, #fdf0cf, transparent),
    radial-gradient(1px 1px at 201px 181px, #dfe9ff, transparent);
  background-size: 223px 239px, 197px 263px, 281px 211px, 241px 307px, 317px 251px;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Smooth colour change while the theme switches (class added briefly by site.js). */
html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, fill .6s ease, stop-color .6s ease, opacity .6s ease !important;
}

/* ----- Theme toggle: a butterfly, sunlit by day, starry by night ---------- */
.theme-toggle {
  width: 48px; height: 44px; padding: 4px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--chip-bg); cursor: pointer; display: grid; place-items: center;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.theme-toggle:hover { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(216, 192, 138, .15); }
.theme-toggle svg { width: 36px; height: 28px; overflow: visible; }
.tg-up { fill: url(#tg-day-up); }
.tg-lo { fill: url(#tg-day-lo); }
.tg-night { opacity: 0; transition: opacity .3s; }
.tg-day { transition: opacity .3s; }
:root[data-theme="dark"] .tg-up { fill: url(#tg-night-up); }
:root[data-theme="dark"] .tg-lo { fill: url(#tg-night-lo); }
:root[data-theme="dark"] .tg-night { opacity: 1; }
:root[data-theme="dark"] .tg-day { opacity: 0; }
.theme-toggle .wing { animation: flap-rest 7s ease-in-out infinite; animation-delay: -3s; }
.theme-toggle.flapping .wing { animation: toggle-flap .7s ease-in-out; }
.theme-toggle.flapping svg { animation: toggle-hop .7s ease-in-out; }
@keyframes toggle-flap { 0% { transform: scaleX(1); } 35%, 55% { transform: scaleX(.06); } 100% { transform: scaleX(1); } }
@keyframes toggle-hop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -5px; } }

/* ===== Botanicals ======================================================== */
.vine { overflow: visible; }
.vine .stem { fill: none; stroke: var(--stem); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--grow)); }
.vine .lf, .vine .bud, .vine .berry {
  --s: clamp(0, calc((var(--grow) - var(--at)) * 14), 1);
  transform: scale(var(--s)); transform-box: fill-box;
}
.vine .lf, .vine .bud { transform-origin: 0% 50%; }
.vine .berry { transform-origin: 50% 50%; }
.vine .rib { fill: none; stroke: var(--rib); stroke-width: .7; stroke-linecap: round; }
.vine .t1 .blade { fill: url(#lg1); } .vine .t2 .blade { fill: url(#lg2); }
.vine .t3 .blade { fill: url(#lg3); } .vine .t4 .blade { fill: url(#lg4); }
.l1a { stop-color: var(--l1a); } .l1b { stop-color: var(--l1b); }
.l2a { stop-color: var(--l2a); } .l2b { stop-color: var(--l2b); }
.l3a { stop-color: var(--l3a); } .l3b { stop-color: var(--l3b); }
.l4a { stop-color: var(--l4a); } .l4b { stop-color: var(--l4b); }
.vine .tendril { fill: none; stroke: var(--stem); stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - clamp(0, calc((var(--grow) - var(--at)) * 8), 1)); }
.vine .bud ellipse { fill: var(--bud); opacity: .85; }
.vine .bud .twig { stroke: var(--stem); stroke-width: 1; }
.vine .b1 { fill: var(--berry-1); } .vine .b2 { fill: var(--berry-2); }

/* Corner vines frame the top of the page and unfurl once on load. */
.top-decor { position: absolute; inset: 0 0 auto; height: 0; z-index: 0; pointer-events: none; }
.corner-vine { position: absolute; top: 0; width: clamp(90px, 24vw, 340px); height: auto; opacity: var(--vine-opacity);
  animation: grow-in 2.8s cubic-bezier(.3, .6, .3, 1) both, sway 11s ease-in-out 2.8s infinite; transform-origin: 0 0; }
.corner-l { left: 0; }
.corner-r { right: 0; scale: -1 1; animation-delay: .4s, 3.2s; }
@keyframes grow-in { from { --grow: 0; } to { --grow: 1; } }
@keyframes sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.4deg; } }

/* Side vines (wide screens): fixed to the viewport edges, growing as you scroll. */
.side-vines { position: fixed; inset: 0; z-index: 0; pointer-events: none; display: none; }
.side-vine { position: absolute; top: 0; width: clamp(80px, calc((100vw - 1120px) / 2), 150px); height: auto; max-height: 100vh; opacity: var(--side-vine-opacity); }
.side-vine.left { left: -8px; }
.side-vine.right { right: -8px; scale: -1 1; }
@media (min-width: 1400px) and (prefers-reduced-motion: no-preference) { .side-vines { display: block; } }

/* ===== Sparkles, pollen & butterflies ==================================== */
.decor { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sp, .pollen, .bfly {
  position: absolute;
  /* pointer parallax (--px/--py from site.js) plus a gentle scroll drift (--sy) */
  translate: calc(var(--px, 0) * var(--d, 1) * 14px) calc(var(--py, 0) * var(--d, 1) * 10px + var(--sy, 0) * var(--d, 1) * -.06px);
  transition: translate .7s cubic-bezier(.2, .7, .2, 1);
}
.sp { width: var(--s); height: var(--s); color: var(--c); }
.sp svg { width: 100%; height: 100%; display: block; fill: currentColor;
  animation: twinkle var(--dur, 4s) ease-in-out var(--t, 0s) infinite; }
.pollen { width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); opacity: .55;
  animation: drift 14s ease-in-out var(--t, 0s) infinite; }
@keyframes twinkle {
  0%, 100% { opacity: .25; transform: scale(.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(25deg); }
}
@keyframes drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(6px, -10px); } 66% { transform: translate(-5px, -4px); } }
:root[data-theme="dark"] .sp svg { filter: drop-shadow(0 0 4px var(--c)); }
@media (max-width: 700px) { .sp.w, .pollen.w { display: none; } }

.bfly { width: var(--size); height: calc(var(--size) * .72); pointer-events: auto; rotate: var(--tilt, 0deg); }
.bfly-body { display: block; width: 100%; height: 100%; transition: translate 2.4s cubic-bezier(.3, .7, .3, 1); }
.bfly svg { width: 100%; height: 100%; overflow: visible; display: block; }
.bf-vein { fill: none; stroke: #e0c88f; stroke-width: .6; opacity: .75; }
.bf-dots { fill: #fbf1d4; opacity: .9; }
.bf-b { fill: #232038; }
.bf-ant { fill: none; stroke: #232038; stroke-width: .9; stroke-linecap: round; }
:root[data-theme="dark"] .bf-b { fill: #e8dcc0; }
:root[data-theme="dark"] .bf-ant { stroke: #e8dcc0; }
:root[data-theme="dark"] .bfly svg { filter: drop-shadow(0 0 6px rgba(216, 192, 138, .35)); }
.wing { transform-box: fill-box; }
.wl { transform-origin: 100% 50%; }
.wr { transform-origin: 0% 50%; }
.bfly.rest .wing { animation: flap-rest 6s ease-in-out var(--t, 0s) infinite; }
.bfly.fly .wing { animation: flap .55s ease-in-out infinite; }
.bfly.fly { animation: wander 26s ease-in-out var(--t, 0s) infinite; }
@keyframes flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.22); } }
@keyframes flap-rest {
  0%, 70%, 100% { transform: scaleX(1); }
  75% { transform: scaleX(.28); } 80% { transform: scaleX(1); }
  85% { transform: scaleX(.32); } 90% { transform: scaleX(1); }
}
@keyframes wander {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  20% { transform: translate(9vw, -3vh) rotate(10deg); }
  40% { transform: translate(15vw, 5vh) rotate(-4deg); }
  60% { transform: translate(7vw, 12vh) rotate(14deg); }
  80% { transform: translate(-2vw, 6vh) rotate(-10deg); }
}
/* Startled by the pointer (site.js sets --fx/--fy): dart away, flap hard, drift back. */
.bfly.startled .bfly-body { translate: var(--fx, 40px) var(--fy, -40px); transition-duration: .9s; }
.bfly.startled .wing { animation: flap .16s linear infinite; }

/* ===== Ornaments ========================================================= */
.ornament { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--gold); margin: 1.2rem auto; }
.ornament .star { width: 15px; height: 15px; flex: none; fill: currentColor; }
.ornament .sprig { width: clamp(84px, 22vw, 132px); height: auto; }
.ornament .sprig-r { scale: -1 1; }
.ornament .sprig .lf, .ornament .sprig .bud, .ornament .sprig .berry, .ornament .sprig .stem {
  transition: transform .7s cubic-bezier(.3, 1.5, .5, 1) calc(var(--at, 0) * .6s), stroke-dashoffset .9s ease;
}
html.js .ornament:not(.is-in) { --grow: 0; }

/* Reduced motion: decorations hold still. */
@media (prefers-reduced-motion: reduce) {
  .sp svg, .pollen, .bfly, .bfly .wing, .corner-vine, .theme-toggle .wing, .theme-toggle svg { animation: none !important; }
  .sp svg { opacity: .8; }
  html.js .ornament:not(.is-in) { --grow: 1; }
}