/* Bots and scenes. Every loop pauses when its [data-scene] is off-screen. */

.js [data-scene]:not(.is-live) *,
.js [data-scene]:not(.is-live) *::before,
.js [data-scene]:not(.is-live) *::after {
  animation-play-state: paused !important;
}

/* ---------- Shared bot parts ---------- */

.eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink var(--blink, 5s) ease-in-out infinite;
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.12); }
}

.bulb {
  animation: bulb 2.4s ease-in-out infinite;
}

@keyframes bulb {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.thruster,
.flame {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: flicker 0.18s ease-in-out infinite alternate;
}

@keyframes flicker {
  from { transform: scale(0.9, 0.78); opacity: 0.8; }
  to { transform: scale(1.06, 1.16); opacity: 1; }
}

.flame-h {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: flicker-h 0.16s ease-in-out infinite alternate;
}

@keyframes flicker-h {
  from { transform: scaleX(0.72); }
  to { transform: scaleX(1.18); }
}

.prop {
  transform-box: fill-box;
  transform-origin: center;
  animation: prop 0.22s linear infinite;
}

@keyframes prop {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.12); }
}

.twinkle-svg {
  transform-box: fill-box;
  transform-origin: center;
  animation: twinkle-svg 1.6s ease-in-out infinite;
}

@keyframes twinkle-svg {
  0%, 100% { transform: scale(0.8) rotate(0deg); }
  50% { transform: scale(1.3) rotate(45deg); }
}

.sc-stars circle {
  fill: #f3f0ff;
  animation: star-tw 3.2s ease-in-out infinite;
}

.sc-stars circle:nth-child(2n) { animation-delay: -1.1s; }
.sc-stars circle:nth-child(3n) { animation-delay: -2.2s; animation-duration: 4.2s; }

@keyframes star-tw {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ---------- Sky bots (fixed layer) ---------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.sky-bot {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

html:not(.js) .sky-bot {
  display: none;
}

.sky-zip { width: 62px; }
.sky-pip { width: 96px; }
.sky-lumen { width: 58px; }

.sky-bot .bot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.zip-wave {
  animation: zip-wave 1.1s ease-in-out infinite alternate;
}

@keyframes zip-wave {
  from { transform: rotate(-22deg); }
  to { transform: rotate(16deg); }
}

.scarf {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  animation: scarf 0.5s ease-in-out infinite alternate;
}

@keyframes scarf {
  from { transform: skewY(-7deg) scaleX(0.94); }
  to { transform: skewY(7deg) scaleX(1.06); }
}

.wing-l {
  animation: flap-l 0.32s ease-in-out infinite alternate;
}

.wing-r {
  animation: flap-r 0.32s ease-in-out infinite alternate;
}

@keyframes flap-l {
  from { transform: rotate(10deg) scaleX(1); }
  to { transform: rotate(-16deg) scaleX(0.72); }
}

@keyframes flap-r {
  from { transform: rotate(-10deg) scaleX(1); }
  to { transform: rotate(16deg) scaleX(0.72); }
}

.lantern-glow,
.orb-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: glow-pulse 2.2s ease-in-out infinite;
}

@media (max-width: 979px) {
  .sky-pip,
  .sky-lumen {
    display: none;
  }

  .sky-zip {
    width: 44px;
  }
}

/* ---------- Hero orrery ---------- */

.orrery {
  --size: min(560px, 43vw, calc(100vh - 220px));
  position: relative;
  width: var(--size);
  aspect-ratio: 1;
  transform-style: preserve-3d;
}

@media (max-width: 979px) {
  .orrery {
    --size: min(460px, 86vw);
  }
}

.orrery-halo {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 60%, rgba(94, 242, 196, 0.2), transparent 40%),
    radial-gradient(circle, rgba(143, 123, 255, 0.5) 0%, rgba(94, 242, 196, 0.1) 44%, transparent 66%);
  transform: translateZ(-60px);
}

.rune-ring {
  position: absolute;
  inset: 3%;
  transform: translateZ(-20px);
}

.rune-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: spin 80s linear infinite;
}

/* No box-shadow here: the orbit planes intersect this plane and Chrome's 3D
   splitting draws a square around shadowed layers. The rim rings live in the
   rune-ring SVG and the glow lives in the halo. */
.portrait {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: #1d1850;
}

/* clip-path, not just border-radius: Chrome leaves square corners on rounded overflow inside preserve-3d */
.portrait-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
}

.portrait-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 42% 42%, transparent 55%, rgba(24, 14, 80, 0.5) 100%),
    linear-gradient(0deg, rgba(10, 8, 32, 0.3), transparent 38%);
  box-shadow: inset 0 0 0 1.5px rgba(94, 242, 196, 0.7);
  pointer-events: none;
}

.portrait picture,
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
}

.portrait img {
  max-width: none;
  object-fit: cover;
  transform: scale(1.12);
  transform-origin: 0 0;
}

.orbit {
  position: absolute;
  top: 10%;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  border: 1.5px solid rgba(94, 242, 196, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(94, 242, 196, 0.28), inset 0 0 16px rgba(94, 242, 196, 0.2);
  transform-style: preserve-3d;
  transform: rotateZ(-10deg) rotateX(72deg);
}

/* Low enough that the front arc crosses the jacket, never the face. */
.orbit-b {
  top: 27%;
  left: 9%;
  width: 82%;
  border: 1.5px dashed rgba(255, 111, 174, 0.7);
  box-shadow: none;
  transform: rotateZ(14deg) rotateX(74deg);
}

.orbit-arm {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: spin 16s linear -6s infinite;
}

.orbit-rider {
  --w: calc(var(--size) * 0.16);
  --h: calc(var(--w) * 0.6545);
  position: absolute;
  top: 50%;
  left: 100%;
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  animation: counter-a 16s linear -6s infinite;
}

.orbit-b .orbit-arm {
  animation: spin 22s linear -3s infinite reverse;
}

.orbit-b .orbit-rider {
  --w: calc(var(--size) * 0.115);
  --h: calc(var(--w) * 1.1556);
  animation: counter-b 22s linear -3s infinite reverse;
}

@keyframes counter-a {
  from { transform: rotateZ(0deg) rotateX(-72deg) rotateZ(10deg); }
  to { transform: rotateZ(-360deg) rotateX(-72deg) rotateZ(10deg); }
}

@keyframes counter-b {
  from { transform: rotateZ(0deg) rotateX(-74deg) rotateZ(-14deg); }
  to { transform: rotateZ(-360deg) rotateX(-74deg) rotateZ(-14deg); }
}

.orbit-rider .bot {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.calm .orbit-a .orbit-arm { transform: rotate(150deg); }
.calm .orbit-a .orbit-rider { transform: rotateZ(-150deg) rotateX(-72deg) rotateZ(10deg); }
.calm .orbit-b .orbit-arm { transform: rotate(20deg); }
.calm .orbit-b .orbit-rider { transform: rotateZ(-20deg) rotateX(-74deg) rotateZ(-14deg); }

.sitter {
  position: absolute;
  top: 2.5%;
  left: 52%;
  width: 18%;
  transform: translateZ(30px) rotate(17deg);
  transform-origin: 50% 70%;
}

.sitter .bot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.leg-swing {
  animation: leg-swing 1.5s ease-in-out infinite alternate;
}

.leg-swing-b {
  animation-delay: -0.75s;
}

@keyframes leg-swing {
  from { transform: rotate(-18deg); }
  to { transform: rotate(14deg); }
}

.tap-hand {
  transform-box: fill-box;
  transform-origin: center;
  animation: tap 0.26s ease-in-out infinite alternate;
}

.tap-hand-b {
  animation-delay: -0.13s;
}

@keyframes tap {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

.screen-glow {
  animation: screen-glow 2.6s ease-in-out infinite;
}

@keyframes screen-glow {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.24; }
}

.lid-logo {
  animation: bulb 3s ease-in-out infinite;
}

.twinkle {
  position: absolute;
  width: 16px;
  aspect-ratio: 1;
  background: #fff1c7;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  transform: translateZ(40px);
  animation: twinkle 2.8s ease-in-out infinite;
}

.twinkle.t1 { top: 16%; left: 9%; }
.twinkle.t2 { top: 8%; left: 84%; width: 12px; animation-delay: -0.7s; }
.twinkle.t3 { top: 76%; left: 5%; width: 10px; animation-delay: -1.4s; }
.twinkle.t4 { top: 84%; left: 88%; animation-delay: -2.1s; }
.twinkle.t5 { top: 95%; left: 44%; width: 11px; animation-delay: -1s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: translateZ(40px) scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: translateZ(40px) scale(1) rotate(45deg); }
}

/* ---------- Scene frame ---------- */

.scene {
  position: relative;
  margin: 0;
  padding: clamp(12px, 2vw, 22px) clamp(12px, 2vw, 22px) clamp(14px, 2vw, 20px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  background:
    radial-gradient(120% 90% at 70% 8%, rgba(143, 123, 255, 0.18), transparent 60%),
    radial-gradient(90% 70% at 10% 100%, rgba(94, 242, 196, 0.09), transparent 60%),
    linear-gradient(180deg, rgba(26, 21, 72, 0.75), rgba(12, 10, 36, 0.75));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 80px -40px rgba(0, 0, 0, 0.65);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(196, 186, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 186, 255, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
  mask-image: radial-gradient(circle at 50% 40%, #000, transparent 75%);
  pointer-events: none;
}

.scene-svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.scene .lab-note {
  position: relative;
  margin: 8px 6px 0;
}

/* ---------- Scene: wizard conjures an agent (8s loop) ---------- */

.ag-rune-glow {
  opacity: 0.6;
  animation: ag-rune 8s ease-in-out infinite;
}

@keyframes ag-rune {
  0%, 100% { opacity: 0.35; }
  22% { opacity: 1; }
  40% { opacity: 0.6; }
}

.ag-rune-dash {
  animation: dash-130 5s linear infinite;
}

@keyframes dash-130 {
  to { stroke-dashoffset: -130; }
}

.ag-beam {
  opacity: 0;
  transform-origin: 390px 372px;
  animation: ag-beam 8s ease-out infinite;
}

@keyframes ag-beam {
  0%, 16% { opacity: 0; transform: scaleY(0.2); }
  24% { opacity: 1; transform: scaleY(1); }
  38%, 100% { opacity: 0; transform: scaleY(1); }
}

.ag-agent {
  transform-origin: 390px 352px;
  animation: ag-agent 8s cubic-bezier(0.3, 0.7, 0.3, 1) infinite;
}

@keyframes ag-agent {
  0%, 19% { opacity: 0; transform: translateY(24px) scale(0.2); }
  27% { opacity: 1; transform: translateY(-8px) scale(1.06); }
  31%, 82% { opacity: 1; transform: translateY(0) scale(1); }
  90%, 100% { opacity: 0; transform: translate(80px, -160px) scale(0.12); }
}

.ag-shadow {
  transform-origin: 390px 362px;
  animation: ag-shadow 8s ease-out infinite;
}

@keyframes ag-shadow {
  0%, 19% { opacity: 0; transform: scale(0.3); }
  30%, 82% { opacity: 0.45; transform: scale(1); }
  88%, 100% { opacity: 0; transform: scale(0.3); }
}

.ag-agent-bob {
  animation: bob 2.6s ease-in-out infinite;
}

.ag-wave {
  animation: ag-wave 0.7s ease-in-out infinite alternate;
}

@keyframes ag-wave {
  from { transform: rotate(-14deg); }
  to { transform: rotate(16deg); }
}

.ag-glyphs text {
  opacity: 0.8;
  animation: ag-glyph 4s ease-in-out infinite;
}

.ag-glyphs .ag-g2 { animation-delay: -1.3s; }
.ag-glyphs .ag-g3 { animation-delay: -2.6s; }

@keyframes ag-glyph {
  0% { opacity: 0; transform: translateY(12px); }
  30%, 70% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-28px); }
}

.ag-bubble {
  transform-origin: 424px 204px;
  animation: ag-bubble 8s var(--ease-spring) infinite;
}

@keyframes ag-bubble {
  0%, 33% { opacity: 0; transform: scale(0.4); }
  38%, 80% { opacity: 1; transform: none; }
  85%, 100% { opacity: 0; transform: scale(0.6); }
}

.ag-dots {
  opacity: 0;
  animation: ag-dots 8s linear infinite;
}

@keyframes ag-dots {
  0%, 37% { opacity: 1; }
  52%, 100% { opacity: 0; }
}

.ag-dots circle {
  transform-box: fill-box;
  transform-origin: center;
  animation: dot-bounce 0.9s ease-in-out infinite;
}

.ag-dots circle:nth-child(2) { animation-delay: 0.15s; }
.ag-dots circle:nth-child(3) { animation-delay: 0.3s; }

@keyframes dot-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
}

.ag-reply {
  animation: ag-reply 8s ease-out infinite;
}

@keyframes ag-reply {
  0%, 52% { opacity: 0; }
  57%, 100% { opacity: 1; }
}

.ag-wand-arm {
  animation: ag-cast 8s cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes ag-cast {
  0% { transform: rotate(6deg); }
  6% { transform: rotate(-22deg); }
  11% { transform: rotate(16deg); }
  16% { transform: rotate(4deg); }
  50% { transform: rotate(0deg); }
  56% { transform: rotate(-6deg); }
  62% { transform: rotate(3deg); }
  100% { transform: rotate(6deg); }
}

.ag-wand-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: glow-pulse 1.4s ease-in-out infinite;
}

.ag-spk {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ag-spark 8s ease-out infinite;
}

@keyframes ag-spark {
  0%, 10% { opacity: 0; transform: translate(0, 0) scale(0.2) rotate(0deg); }
  12% { opacity: 1; transform: translate(calc(var(--tx) * 0.25), calc(var(--ty) * 0.1 - 26px)) scale(1) rotate(60deg); }
  21% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(0.9) rotate(180deg); }
  25%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.1) rotate(240deg); }
}

/* ---------- Scene: automation pipeline ---------- */

.pp-gear {
  animation: spin 7s linear infinite;
}

.pp-flow {
  animation: dash-18 1.1s linear infinite;
}

@keyframes dash-18 {
  to { stroke-dashoffset: -18; }
}

.pp-led {
  animation: bulb 1.4s ease-in-out infinite;
}

.pp-scan {
  opacity: 0;
}

.pp-env {
  opacity: 0;
}

.calm .pp-env,
html:not(.js) .pp-env {
  opacity: 1;
  transform: translateY(-18px);
}

.pp-trigger {
  transform-box: fill-box;
  transform-origin: center;
}

.pp-orb.is-done .pp-orb-core {
  fill: #5ef2c4;
}

.pp-orb.is-done .pp-orb-glow {
  fill: url(#g-glow-mint);
}

/* ---------- Scene: website from sparkles (9s loop) ---------- */

.wb-b {
  transform-box: fill-box;
  transform-origin: center;
}

.wb-b1 { animation: wb-b1 9s var(--ease-out) infinite; }
.wb-b2 { animation: wb-b2 9s var(--ease-out) infinite; }
.wb-b3 { animation: wb-b3 9s var(--ease-out) infinite; }
.wb-b4 { animation: wb-b4 9s var(--ease-out) infinite; }
.wb-b5 { animation: wb-b5 9s var(--ease-out) infinite; }
.wb-b6 { animation: wb-b6 9s var(--ease-out) infinite; }

@keyframes wb-b1 {
  0%, 5% { opacity: 0; transform: translateY(10px) scale(0.92); }
  8%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}

@keyframes wb-b2 {
  0%, 15% { opacity: 0; transform: translateY(10px) scale(0.92); }
  18%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}

@keyframes wb-b3 {
  0%, 25% { opacity: 0; transform: translateY(10px) scale(0.92); }
  28%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}

@keyframes wb-b4 {
  0%, 35% { opacity: 0; transform: translateY(10px) scale(0.92); }
  38%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}

@keyframes wb-b5 {
  0%, 45% { opacity: 0; transform: translateY(10px) scale(0.92); }
  48%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}

@keyframes wb-b6 {
  0%, 55% { opacity: 0; transform: translateY(10px) scale(0.92); }
  58%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: none; }
}

.wb-spk {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-spk 9s ease-out infinite;
}

@keyframes wb-spk {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
  1% { opacity: 1; }
  5.5% { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1) rotate(120deg); }
  7%, 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.8) rotate(160deg); }
}

.wb-cursor {
  opacity: 0;
  animation: wb-cursor 9s ease-in-out infinite;
}

@keyframes wb-cursor {
  0%, 60% { opacity: 0; transform: translate(200px, 110px); }
  63% { opacity: 1; transform: translate(200px, 110px); }
  71% { opacity: 1; transform: translate(0, 0) scale(1); }
  73% { transform: translate(0, 0) scale(0.82); }
  75% { transform: translate(0, 0) scale(1); }
  84% { opacity: 1; transform: translate(0, 0); }
  88%, 100% { opacity: 0; transform: translate(0, 0); }
}

.wb-ripple {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-ripple 9s ease-out infinite;
}

@keyframes wb-ripple {
  0%, 72% { opacity: 0; transform: scale(0.6); }
  73% { opacity: 1; transform: scale(0.8); }
  82%, 100% { opacity: 0; transform: scale(3); }
}

.wb-btn {
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-btn 9s ease-out infinite;
}

@keyframes wb-btn {
  0%, 72% { transform: none; }
  73.5% { transform: scale(0.94); }
  76%, 100% { transform: none; }
}

.wb-live {
  transform-box: fill-box;
  transform-origin: center;
  animation: wb-live 9s var(--ease-spring) infinite;
}

@keyframes wb-live {
  0%, 74% { opacity: 0; transform: scale(0.6); }
  77%, 92% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; }
}

.wb-bot {
  animation: bob 3s ease-in-out infinite;
}

.wb-shadow {
  transform-origin: 92px 392px;
  animation: wb-shadow 3s ease-in-out infinite;
}

@keyframes wb-shadow {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(0.78); opacity: 0.28; }
}

.wb-arm {
  animation: wb-arm 0.9s ease-in-out infinite alternate;
}

@keyframes wb-arm {
  from { transform: rotate(-10deg); }
  to { transform: rotate(8deg); }
}

.wb-tip-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: glow-pulse 0.9s ease-in-out infinite;
}

/* ---------- Scene: cauldron (process) ---------- */

@property --potion {
  syntax: "<color>";
  inherits: true;
  initial-value: #8f7bff;
}

@property --potion-hi {
  syntax: "<color>";
  inherits: true;
  initial-value: #d4ccff;
}

.sc-brew {
  --potion: #8f7bff;
  --potion-hi: #d4ccff;
  transition: --potion 0.9s ease, --potion-hi 0.9s ease;
}

.sc-brew[data-step="2"] { --potion: #62c8ff; --potion-hi: #cdefff; }
.sc-brew[data-step="3"] { --potion: #ff6fae; --potion-hi: #ffc6de; }
.sc-brew[data-step="4"] { --potion: #5ef2c4; --potion-hi: #c9fff0; }
.sc-brew[data-step="5"] { --potion: #ffb547; --potion-hi: #ffe4b5; }
.sc-brew[data-step="6"] { --potion: #ffd84f; --potion-hi: #fff4c2; }

.potion-stop { stop-color: var(--potion); }
.potion-stop-hi { stop-color: var(--potion-hi); }

.br-liquid {
  fill: url(#g-liquid);
}

.br-flask {
  fill: var(--potion);
}

.br-plate-bg {
  stroke: var(--potion);
  stroke-width: 1.5;
}

.br-plate-text {
  fill: var(--potion-hi);
}

.br-flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: br-flame 0.5s ease-in-out infinite alternate;
}

.br-flame-b { animation-duration: 0.42s; animation-delay: -0.2s; }
.br-flame-c { animation-duration: 0.56s; animation-delay: -0.35s; }
.br-flame-d { animation-duration: 0.36s; }

@keyframes br-flame {
  from { transform: scale(0.92, 0.82); }
  to { transform: scale(1.06, 1.14); }
}

.br-spoon {
  transform-origin: 320px 198px;
  animation: br-stir 2.4s ease-in-out infinite;
}

@keyframes br-stir {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg); }
}

.br-swirl {
  animation: dash-140 2.4s linear infinite;
}

@keyframes dash-140 {
  to { stroke-dashoffset: -140; }
}

.br-bubbles circle {
  fill: var(--potion-hi);
  stroke: #fff;
  stroke-opacity: 0.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: br-bubble 2.4s ease-in infinite;
}

.br-bubbles circle:nth-child(2) { animation-delay: -0.5s; }
.br-bubbles circle:nth-child(3) { animation-delay: -1.1s; }
.br-bubbles circle:nth-child(4) { animation-delay: -1.6s; }
.br-bubbles circle:nth-child(5) { animation-delay: -2s; }

@keyframes br-bubble {
  0% { opacity: 0; transform: translateY(4px) scale(0.3); }
  25% { opacity: 1; }
  70% { opacity: 1; transform: translateY(-14px) scale(1); }
  85%, 100% { opacity: 0; transform: translateY(-18px) scale(1.5); }
}

.br-vapor {
  opacity: 0.35;
  transform-origin: 260px 236px;
  animation: br-vapor 5s ease-in-out infinite;
}

@keyframes br-vapor {
  0%, 100% { opacity: 0.28; transform: scale(0.96); }
  50% { opacity: 0.46; transform: scale(1.04); }
}

.br-glyphs text {
  fill: var(--potion-hi);
  opacity: 0;
  animation: br-glyph 5s ease-out infinite;
}

.br-glyphs text:nth-child(2) { animation-delay: -1s; }
.br-glyphs text:nth-child(3) { animation-delay: -2s; }
.br-glyphs text:nth-child(4) { animation-delay: -3s; }
.br-glyphs text:nth-child(5) { animation-delay: -4s; }

@keyframes br-glyph {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 0.95; }
  80% { opacity: 0.45; }
  100% { opacity: 0; transform: translateY(-170px); }
}

.br-ing {
  opacity: 0;
}

.br-ing.is-drop {
  animation: br-drop 1.25s both;
}

@keyframes br-drop {
  0% {
    opacity: 0;
    transform: translateY(-40px) scale(0.5) rotate(-12deg);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  22% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
  }
  100% {
    opacity: 0;
    transform: translateY(200px) scale(0.45) rotate(35deg);
  }
}

.br-rocket.is-drop {
  animation: br-launch 1.7s both;
}

@keyframes br-launch {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.6);
    animation-timing-function: ease-out;
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.4);
  }
  100% {
    opacity: 0;
    transform: translateY(-300px) scale(0.9);
  }
}

.br-splash {
  stroke: var(--potion-hi);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.br-splash.is-on {
  animation: br-splash 0.8s ease-out both;
}

@keyframes br-splash {
  from { opacity: 1; transform: scale(0.3); }
  to { opacity: 0; transform: scale(2.6); }
}

/* ---------- Service icons ---------- */

.ic-lock {
  transform-origin: 4px -12px;
  animation: lock-swing 2.4s ease-in-out infinite;
}

@keyframes lock-swing {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

.ic-wave {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  animation: ic-wave 1.6s ease-out infinite;
}

.ic-wave-b {
  animation-delay: 0.3s;
}

@keyframes ic-wave {
  0% { opacity: 0; transform: scale(0.6); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.2); }
}

.ic-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ic-bar 2.4s ease-in-out infinite;
}

.ic-bar-b { animation-delay: 0.2s; }
.ic-bar-c { animation-delay: 0.4s; }

@keyframes ic-bar {
  0%, 100% { transform: scaleY(0.45); }
  50% { transform: scaleY(1); }
}

.ic-ball-glow {
  transform-box: fill-box;
  transform-origin: center;
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ---------- Testimonials projector ---------- */

.lens {
  animation: bulb 1.8s ease-in-out infinite;
}

/* ---------- Contact mailbot ---------- */

.mailbot {
  animation: bob 2.6s ease-in-out infinite;
}

.mailbot.is-sending {
  animation: mail-fly 1.1s cubic-bezier(0.5, 0, 0.8, 0.4) forwards;
}

@keyframes mail-fly {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-10px, 10px) rotate(-6deg); }
  100% { transform: translate(260px, -320px) rotate(18deg); opacity: 0; }
}

.mailbot.is-back {
  animation: mail-back 0.7s var(--ease-out) both;
}

@keyframes mail-back {
  from { opacity: 0; transform: translateY(-30px) scale(0.8); }
  to { opacity: 1; transform: none; }
}