/* ═══════════════════════════════════════════════════
   VoiceAI paper-cut art: scenes, characters, ambient loops

   Every loop here is CSS so it runs without GSAP. motion.js
   adds .is-paused to any [data-scene] that is off screen, and
   reduced motion stops the loops outright (bottom of file).

   SVG parts animate with transform-box: fill-box so their
   origins are their own bounding boxes, not the viewport.
═══════════════════════════════════════════════════ */

[data-scene].is-paused *,
[data-scene].is-paused { animation-play-state: paused !important; }

/* ── HERO SCENE ───────────────────────────────────── */
.scene { width: 100%; height: auto; overflow: visible; }
.scene-hero {
  max-width: 640px;
  margin-inline: auto;
  /* box-shadow, not filter: the loops inside would re-run a filter every frame */
  border-radius: 4.67% / 5.19%;
  box-shadow: 0 6px 0 rgba(3,8,16,0.5), 0 24px 40px rgba(3,8,16,0.45);
}

.sign-247 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  fill: var(--green);
  letter-spacing: 1px;
  animation: sign-flicker 7s steps(1) infinite;
}
@keyframes sign-flicker {
  0%, 91%, 94%, 100% { opacity: 1; }
  92%, 95% { opacity: 0.35; }
}

.zzz text { font-family: var(--font-display); font-weight: 800; }
.zzz .z {
  animation: zzz 3.6s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}
.zzz .z:nth-child(2) { animation-delay: 0.6s; }
.zzz .z:nth-child(3) { animation-delay: 1.2s; }
@keyframes zzz {
  0%   { opacity: 0; transform: translate(-4px, 6px) scale(0.7); }
  25%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(4px, -6px) scale(1); }
  100% { opacity: 0; transform: translate(8px, -12px) scale(1.05); }
}

.hang {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: sway 5.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

.call-line { animation: call-flow 1.1s linear infinite; }
@keyframes call-flow { to { stroke-dashoffset: -22; } }

.caller-phone {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: phone-buzz 2.4s ease-in-out infinite;
}
@keyframes phone-buzz {
  0%, 70%, 100% { transform: rotate(0); }
  74% { transform: rotate(-6deg); }
  78% { transform: rotate(6deg); }
  82% { transform: rotate(-5deg); }
  86% { transform: rotate(4deg); }
}

/* taped notes over the scene */
.note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 12px;
  background: var(--paper-2) var(--grain);
  border-radius: 3px;
  box-shadow: 0 3px 0 rgba(6,14,26,0.35), 0 12px 22px rgba(6,14,26,0.35);
  transform: rotate(var(--r));
  animation: note-bob 6s ease-in-out infinite;
  z-index: 2;
}
.note .tape { width: 58px; margin-left: -29px; height: 18px; top: -9px; }
.note-icon { width: 28px; height: 28px; flex-shrink: 0; }
.note .fc-text strong { display: block; font-size: 0.8125rem; font-weight: 800; color: var(--dark); line-height: 1.25; }
.note .fc-text span { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.note-1 { right: 0; bottom: 3%; --r: 2deg; }
.note-2 { left: 0; top: 6%; --r: -3deg; animation-delay: -3s; }
@keyframes note-bob {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50%      { transform: rotate(var(--r)) translateY(-6px); }
}

/* ── MASCOT PARTS ─────────────────────────────────── */
.mascot { overflow: visible; }
.m-eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 5.2s infinite;
}
@keyframes blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
.is-talking .m-mouth {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: talk 0.34s ease-in-out infinite alternate;
}
@keyframes talk {
  from { transform: scaleY(0.35); }
  to   { transform: scaleY(1.1); }
}
.m-wave {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: wave 1.8s ease-in-out infinite;
}
@keyframes wave {
  0%, 100% { transform: rotate(-10deg); }
  50%      { transform: rotate(16deg); }
}
.m-hold {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  animation: hold 3s ease-in-out infinite;
}
@keyframes hold {
  0%, 100% { transform: rotate(4deg); }
  50%      { transform: rotate(-6deg); }
}
.q-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 56px;
  fill: var(--sun);
  stroke: #0A1628;
  stroke-width: 2.5px;
  paint-order: stroke;
}

.wave-strips rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: strip 0.9s ease-in-out infinite alternate;
}
.wave-strips rect:nth-child(2) { animation-delay: -0.3s; }
.wave-strips rect:nth-child(3) { animation-delay: -0.6s; }
.wave-strips rect:nth-child(4) { animation-delay: -0.15s; }
.wave-strips rect:nth-child(5) { animation-delay: -0.45s; }
@keyframes strip {
  from { transform: scaleY(0.35); }
  to   { transform: scaleY(1); }
}

/* ── STORY VIGNETTES ──────────────────────────────── */
.ring-phone {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: ring 2.2s ease-in-out infinite;
}
@keyframes ring {
  0%, 55%, 100% { transform: rotate(0); }
  60% { transform: rotate(-7deg); }
  65% { transform: rotate(7deg); }
  70% { transform: rotate(-6deg); }
  75% { transform: rotate(5deg); }
  80% { transform: rotate(-2deg); }
}
.ring-arcs .arc {
  transform-box: fill-box;
  animation: arc 2.2s ease-out infinite;
}
.ring-arcs .a2 { animation-delay: 0.12s; }
@keyframes arc {
  0%, 55% { opacity: 0; }
  62%     { opacity: 1; }
  90%, 100% { opacity: 0; }
}

.bubble-text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  fill: var(--dark);
}
.bubble-text.on-blue { fill: #fff; }
.bubble {
  transform-box: fill-box;
  animation: bubble 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.bubble.b1 { transform-origin: 90% 100%; }
.bubble.b2 { transform-origin: 10% 100%; animation-name: bubble-2; }
@keyframes bubble {
  0%       { opacity: 0; transform: scale(0.4); }
  8%, 88%  { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.9); }
}
@keyframes bubble-2 {
  0%, 28%  { opacity: 0; transform: scale(0.4); }
  36%, 88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(0.9); }
}

.stamp-tool { animation: stamp-press 3.2s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes stamp-press {
  0%, 30%   { transform: translateY(-44px); }
  42%, 52%  { transform: translateY(0); }
  66%, 100% { transform: translateY(-44px); }
}
.stamp-mark { animation: stamp-mark 3.2s steps(1) infinite; }
@keyframes stamp-mark {
  0%, 42% { opacity: 0; }
  43%, 96% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

.plane { animation: plane 4.2s cubic-bezier(0.45, 0, 0.3, 1) infinite; }
@keyframes plane {
  0%   { opacity: 0; transform: translate(-70px, 60px) rotate(8deg); }
  12%  { opacity: 1; }
  62%  { opacity: 1; transform: translate(60px, -30px) rotate(-6deg); }
  72%, 100% { opacity: 0; transform: translate(78px, -40px) rotate(-8deg) scale(0.6); }
}
.notify {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: notify 4.2s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes notify {
  0%, 64% { opacity: 0; transform: translateY(-8px) scale(0.85); }
  72%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  100%     { opacity: 0; }
}

/* ── PRICING / FAQ / CONTACT CHARACTERS ───────────── */
.pricing-mascot {
  position: absolute;
  left: -150px;
  bottom: 40px;
  width: 150px;
  z-index: 1;
  animation: lean 4.6s ease-in-out infinite;
  transform-origin: 70% 100%;
}
@keyframes lean {
  0%, 100% { transform: rotate(4deg); }
  50%      { transform: rotate(7deg) translateY(-3px); }
}

.faq-peek {
  position: relative;
  width: 210px;
  height: 150px;
  margin-top: 32px;
  overflow: hidden;
  border-bottom: 6px solid var(--kraft-deep);
}
.faq-peek .mascot {
  position: absolute;
  left: 40px;
  top: 8px;
  width: 164px;
  animation: peek 5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
@keyframes peek {
  0%, 100% { transform: translateY(22px); }
  18%, 70% { transform: translateY(0); }
}

.fcta-mascot {
  width: 116px;
  margin-top: 36px;
}
.fcta-mascot .mascot { animation: hop 3.6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
@keyframes hop {
  0%, 60%, 100% { transform: translateY(0); }
  70%           { transform: translateY(-12px); }
  80%           { transform: translateY(0); }
}

/* ── STAMP (pricing) ──────────────────────────────── */
.plan-badge.stamp span { display: block; transform: rotate(-6deg); }

/* ── RESPONSIVE ───────────────────────────────────── */
/* Below 1280px the stage is too narrow for the booking note to sit inside
   it without covering the office window, so it hangs off the bottom edge. */
@media (max-width: 1279px) {
  .note-1 { bottom: -34px; right: 6px; }
  .hero-visual { margin-bottom: 30px; }
}
@media (max-width: 1023px) {
  .hero-visual { max-width: 560px; margin-inline: auto; width: 100%; }
}
@media (max-width: 560px) {
  .note { padding: 10px 12px 9px; gap: 8px; }
  .note-icon { width: 22px; height: 22px; }
  .note .fc-text strong { font-size: 0.75rem; }
  .note .fc-text span { font-size: 0.6875rem; }
  .note-2 { top: 2%; }

  .faq-peek { width: 170px; height: 118px; margin-top: 16px; }
  .faq-peek .mascot { left: 34px; width: 128px; }
  .fcta-mascot { width: 92px; margin-top: 28px; }
}

/* ── REDUCED MOTION: every loop off, scenes rest on a good frame ── */
@media (prefers-reduced-motion: reduce) {
  .scene *, .step-art *, .mascot *, .mascot, .note, .pricing-mascot,
  .faq-peek .mascot, .fcta-mascot .mascot, .call-line, .sign-247 {
    animation: none !important;
  }
  .bubble, .stamp-mark, .zzz .z, .notify { opacity: 1 !important; transform: none !important; }
  .stamp-tool { transform: translateY(-44px); }
  .plane { transform: translate(40px, -20px) rotate(-4deg); }
  .faq-peek .mascot { transform: none; }
}