/* Popcorn Notes — website loaders · generated by brand/src/build_loaders.py
   Pure SVG + CSS: no JavaScript, no images, no libraries. Size with --pn-size.
   Optional label font: Caveat (Google Fonts) — falls back to a system script face. */
.pn-loader {
  --pn-butter: #FFC93C; --pn-red: #E63946; --pn-cream: #FFF6E0; --pn-ink: #1E1B2E; --pn-shade: #F0A92B;
  --pn-size: 160px;
  display: inline-flex; flex-direction: column; align-items: center; gap: .55em;
  width: var(--pn-size); max-width: 100%;
}
.pn-loader svg { display: block; width: 100%; height: auto; overflow: visible; }
.pn-loader .a { transform-box: fill-box; transform-origin: 50% 50%; }
.pn-loader__label {
  margin: 0; white-space: nowrap; color: var(--pn-label, var(--pn-red));
  font: 700 calc(var(--pn-size) * .15)/1 Caveat, "Segoe Print", "Bradley Hand", cursive;
}
.pn-loader__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pnl-f-butter { fill: var(--pn-butter); } .pnl-f-red { fill: var(--pn-red); } .pnl-f-cream { fill: var(--pn-cream); }
.pnl-f-ink { fill: var(--pn-ink); } .pnl-f-shade { fill: var(--pn-shade); }
.pnl-s-ink { stroke: var(--pn-ink); } .pnl-s-cream { stroke: var(--pn-cream); fill: none; } .pnl-s-shade { stroke: var(--pn-shade); fill: none; }

/* shared moves */
.pnl-bucket { transform-origin: 50% 100% !important; }
.pnl-burst, .pnl-py, .pnl-dy, .pnl-rise, .pnl-spark, .pnl-kp { opacity: 0; }
@keyframes pnl-bump { 0% { transform: scale(1, 1); } 12% { transform: scale(1.05, .92); } 32% { transform: scale(.98, 1.03); } 55%, 100% { transform: scale(1, 1); } }
@keyframes pnl-jig { 0% { transform: translateY(0) scale(1); } 15% { transform: translateY(-3px) scale(1.05); } 45%, 100% { transform: translateY(0) scale(1); } }
@keyframes pnl-burst { 0% { transform: scale(.3); opacity: 0; } 8% { opacity: 1; } 45%, 100% { transform: scale(1.1); opacity: 0; } }

/* 1 · popper — a pop every 0.36 s; five puffs share one 1.8 s loop */
.pn-loader--popper .pnl-bucket { animation: pnl-bump .36s cubic-bezier(.3, .7, .4, 1) infinite; }
.pn-loader--popper .pnl-jig { animation: pnl-jig .36s ease-out infinite; animation-delay: var(--d, 0s); }
.pn-loader--popper .pnl-burst { animation: pnl-burst .36s ease-out infinite; }
.pn-loader--popper .pnl-px { animation: pnl-px 1.8s linear infinite; animation-delay: var(--d); }
.pn-loader--popper .pnl-py { animation: pnl-py 1.8s infinite; animation-delay: var(--d); }
@keyframes pnl-px { 0%, 6% { transform: translateX(0); animation-timing-function: cubic-bezier(.25, .6, .5, 1); } 78%, 100% { transform: translateX(var(--dx)); } }
@keyframes pnl-py {
  0% { transform: translateY(10px) scale(.3); opacity: 0; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  6% { transform: translateY(0) scale(1.15, .85); opacity: 1; animation-timing-function: cubic-bezier(.2, .75, .35, 1); }
  40% { transform: translateY(var(--peak)) scale(1) rotate(calc(var(--rot) * .5)); opacity: 1; animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  78% { transform: translateY(var(--land)) scale(1) rotate(var(--rot)); opacity: 1; }
  88%, 100% { transform: translateY(var(--land)) scale(1) rotate(var(--rot)); opacity: 0; }
}

/* 2 · drop — three pieces, one landing every 0.4 s */
.pn-loader--drop .pnl-dy { transform-origin: 50% 100%; animation: pnl-dy 1.2s infinite; animation-delay: var(--d); }
.pn-loader--drop .pnl-bucket { animation: pnl-bump .4s cubic-bezier(.3, .7, .4, 1) -.168s infinite; }
.pn-loader--drop .pnl-jig { animation: pnl-jig .4s ease-out -.168s infinite; }
.pn-loader--drop .pnl-burst { animation: pnl-burst .4s ease-out -.14s infinite; }
@keyframes pnl-dy {
  0% { transform: translateY(-6px) scale(0) rotate(-20deg); opacity: 0; animation-timing-function: cubic-bezier(.3, 1.6, .5, 1); }
  12% { transform: translateY(0) scale(1) rotate(-20deg); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .95, .45); }
  55% { transform: translateY(69px) scale(1) rotate(var(--rot)); opacity: 1; animation-timing-function: ease-out; }
  59% { transform: translateY(72px) scale(1.28, .72) rotate(var(--rot)); }
  66% { transform: translateY(63px) scale(.92, 1.1) rotate(var(--rot)); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  76% { transform: translateY(98px) scale(1) rotate(var(--rot)); opacity: 1; }
  80%, 100% { transform: translateY(98px) scale(1); opacity: 0; }
}

/* 3 · notes — 2.4 s: bob ×2, lines write, corner flicks, sparkle, puffs pop off the top */
.pn-loader--notes .pnl-bob { transform-origin: 50% 100%; animation: pnl-bob 1.2s infinite; }
.pn-loader--notes .pnl-shadow { animation: pnl-shadow 1.2s infinite; }
.pn-loader--notes .pnl-w1, .pn-loader--notes .pnl-w2 { stroke-dasharray: 1; stroke-dashoffset: 1; }
.pn-loader--notes .pnl-w1 { animation: pnl-w1 2.4s infinite; }
.pn-loader--notes .pnl-w2 { animation: pnl-w2 2.4s infinite; }
.pn-loader--notes .pnl-flap { transform-origin: 50% 100%; animation: pnl-flick 2.4s infinite; }
.pn-loader--notes .pnl-rise { animation: pnl-rise 2.4s infinite; animation-delay: var(--d); }
.pn-loader--notes .pnl-spark { animation: pnl-spark 2.4s infinite; }
@keyframes pnl-bob {
  0% { transform: translateY(0) scale(1.05, .95); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  35% { transform: translateY(-10px) scale(.98, 1.02); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  70% { transform: translateY(0) scale(1.05, .95); }
  85% { transform: translateY(0) scale(.99, 1.01); }
  100% { transform: translateY(0) scale(1.05, .95); }
}
@keyframes pnl-shadow { 0%, 70%, 100% { transform: scale(1); opacity: .14; } 35% { transform: scale(.8); opacity: .08; } }
@keyframes pnl-w1 { 0%, 8% { stroke-dashoffset: 1; opacity: 1; } 30% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pnl-w2 { 0%, 30% { stroke-dashoffset: 1; opacity: 1; } 50% { stroke-dashoffset: 0; } 86% { stroke-dashoffset: 0; opacity: 1; } 95%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes pnl-flick { 0%, 56% { transform: scaleY(1); } 61% { transform: scaleY(-1); } 66% { transform: scaleY(-1); } 73% { transform: scaleY(1.12); } 78%, 100% { transform: scaleY(1); } }
@keyframes pnl-rise {
  0% { transform: translate(0, 6px) scale(0); opacity: 0; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }
  6% { transform: translate(0, 0) scale(1.1); opacity: 1; animation-timing-function: cubic-bezier(.25, .6, .4, 1); }
  30% { transform: translate(var(--mx), -34px) scale(1) rotate(40deg); opacity: 1; }
  40%, 100% { transform: translate(var(--mx), -42px) scale(.9) rotate(60deg); opacity: 0; }
}
@keyframes pnl-spark { 0%, 72% { transform: scale(0) rotate(-45deg); opacity: 0; } 78% { transform: scale(1.1) rotate(0); opacity: 1; } 86% { transform: scale(1) rotate(20deg); opacity: 1; } 92%, 100% { transform: scale(0) rotate(45deg); opacity: 0; } }

/* 4 · dots — kernels pop in turn, 1.2 s loop */
.pn-loader--dots { --pn-size: 56px; vertical-align: middle; }
.pn-loader--dots .pnl-k { animation: pnl-k 1.2s infinite; animation-delay: var(--d); }
.pn-loader--dots .pnl-kp { animation: pnl-kp 1.2s infinite; animation-delay: var(--d); }
@keyframes pnl-k { 0% { transform: scale(1); opacity: 1; } 10% { transform: scale(1.3, .75); opacity: 1; } 16% { transform: scale(.4); opacity: 0; } 70% { transform: scale(0); opacity: 0; } 86% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pnl-kp {
  0%, 14% { transform: translateY(0) scale(0); opacity: 0; }
  16% { transform: translateY(0) scale(.6); opacity: 1; animation-timing-function: cubic-bezier(.2, .9, .3, 1.4); }
  30% { transform: translateY(-7px) scale(1.12) rotate(-8deg); opacity: 1; }
  44% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
  62% { transform: translateY(0) scale(1); opacity: 1; }
  72%, 100% { transform: translateY(0) scale(0); opacity: 0; }
}

/* reduced motion: no movement, just a soft breathing fade */
@media (prefers-reduced-motion: reduce) {
  .pn-loader .a, .pn-loader .pnl-w1, .pn-loader .pnl-w2 { animation: none !important; }
  .pn-loader .pnl-w1, .pn-loader .pnl-w2 { stroke-dashoffset: 0; }
  .pn-loader svg { animation: pnl-breathe 1.6s ease-in-out infinite; }
}
@keyframes pnl-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* full-page overlay: add .is-done (e.g. on window load) to fade it away */
.pn-loader-overlay {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: var(--pn-overlay-bg, #FFF6E0);
  transition: opacity .35s ease, visibility .35s ease;
}
.pn-loader-overlay.is-done { opacity: 0; visibility: hidden; }