/* ipynbtopdfscanner mascots — Nooby & Printo. Remove this file (and js/mascots.js) to remove them. */

/* Pull the upload box up a little so both characters are visible without scrolling on laptops. */
.hero.has-mascots { padding-top: clamp(28px, 4.5vw, 56px); }
.has-mascots .lead { margin-bottom: 26px; }

.mascot {
  position: absolute;
  top: -8px;
  width: 150px;
  z-index: 2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.mascot.m-nooby { left: -168px; }
.mascot.m-printo { right: -172px; width: 156px; }
.m-svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: none; }
.m-svg * { transform-box: fill-box; }
.m-ink-stroke { stroke: #1b1b1f; }
.m-shadow { fill: rgba(0, 0, 0, 0.13); transform-origin: center; animation: m-shadow 3s ease-in-out infinite; }
:root[data-theme="dark"] .m-shadow { fill: rgba(0, 0, 0, 0.45); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .m-shadow { fill: rgba(0, 0, 0, 0.45); } }

/* ---------- Nooby ---------- */
.m-nooby .m-body { animation: m-bob 3s ease-in-out infinite; transform-box: view-box; }
.m-nooby .m-arm-r { transform-origin: 0% 100%; animation: m-wave 3.6s ease-in-out infinite; }
.m-nooby .m-eyes { transform-origin: center; animation: m-blink 4.2s infinite; }
.m-nooby .m-pupils { transition: transform 0.12s ease-out; }
.m-nooby .m-lines rect { transform-origin: left center; animation: m-type 5s ease-in-out infinite; }
.m-nooby .m-lines rect:nth-child(2) { animation-delay: 0.35s; }
.m-nooby .m-lines rect:nth-child(3) { animation-delay: 0.7s; }
.m-nooby .m-lines rect:nth-child(4) { animation-delay: 1.05s; }
.m-nooby .m-open { display: none; }

/* ---------- Printo ---------- */
.m-printo .m-body { animation: m-chug 1.6s ease-in-out infinite; transform-origin: 50% 100%; transform-box: view-box; }
.m-printo .m-eyes rect { transform-origin: center; animation: m-blink 3.6s infinite; }
.m-printo .m-paper { animation: m-print 3.2s cubic-bezier(0.45, 0, 0.3, 1) infinite; transform-box: view-box; }
.m-printo .m-led { animation: m-led 1.6s steps(2, jump-none) infinite; }
.m-printo .m-arm-l { transform-origin: 100% 0%; animation: m-arm 1.6s ease-in-out infinite; }
.m-printo .m-arm-r { transform-origin: 0% 0%; animation: m-arm 1.6s ease-in-out infinite reverse; }

/* ---------- speech bubble ---------- */
.m-bubble {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 6px) scale(0.92);
  padding: 8px 13px;
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--ink, #1b1b1f);
  border: 2px solid var(--ink, #1b1b1f);
  font: 600 13px/1.3 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.m-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: inherit;
  border: inherit;
  border-top: 0;
  border-left: 0;
  transform: translate(-50%, -6px) rotate(45deg);
}
.m-bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ---------- interactions ---------- */
.mascot:hover .m-svg { filter: drop-shadow(0 6px 10px rgba(232, 89, 12, 0.25)); }
.mascot.m-jump .m-svg { animation: m-jump 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.m-excited .mascot .m-svg { animation: m-hop 0.5s ease-in-out infinite; }
.m-excited .m-nooby .m-smile { display: none; }
.m-excited .m-nooby .m-open { display: inline; }
.m-excited .m-printo .m-paper { animation-duration: 1.2s; }

/* ---------- small pair at the bottom of the settings panel ---------- */
.m-panel {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: 26px;
  padding: 58px 6px 4px; /* room for the speech bubbles */
  border-top: 1px solid var(--line, #e4e0d6);
}
.mascot.m-mini { position: relative; top: auto; left: auto; right: auto; width: 74px; flex: none; }
.mascot.m-mini.m-printo { width: 78px; }
.m-panel-hint { flex: 1; margin: 0 0 16px; text-align: center; font-size: 12.5px; color: var(--muted, #6e6e7a); }
.m-mini .m-bubble { bottom: calc(100% + 4px) !important; top: auto !important; white-space: normal !important; width: 190px; max-width: 190px !important; font-size: 12.5px; }
.m-mini.m-nooby .m-bubble { left: 0 !important; right: auto !important; transform: translate(0, 6px) scale(0.92) !important; }
.m-mini.m-printo .m-bubble { left: auto !important; right: 0 !important; transform: translate(0, 6px) scale(0.92) !important; }
.m-mini .m-bubble.show { transform: translate(0, 0) scale(1) !important; }
.m-mini .m-bubble::after { top: 100% !important; border: inherit !important; border-top: 0 !important; border-left: 0 !important; transform: translate(-50%, -6px) rotate(45deg) !important; }
.m-mini.m-nooby .m-bubble::after { left: 36px !important; }
.m-mini.m-printo .m-bubble::after { left: auto !important; right: 26px !important; }

/* ---------- Printo in the "Creating your PDF" card ---------- */
.progress-ring.has-printo { height: auto; }
.mascot.m-busy { position: relative; left: auto; right: auto; bottom: auto; width: 104px; margin: 0 auto; cursor: default; }
.mascot.m-busy .m-paper { animation-duration: 1.4s; }
.mascot.m-busy .m-body { animation-duration: 0.7s; }

/* ---------- keyframes ---------- */
@keyframes m-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes m-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(0.86); opacity: 0.7; } }
@keyframes m-wave {
  0%, 55%, 100% { transform: rotate(0deg); }
  62% { transform: rotate(-24deg); } 70% { transform: rotate(10deg); }
  78% { transform: rotate(-24deg); } 86% { transform: rotate(10deg); }
}
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes m-type { 0% { transform: scaleX(0); } 25%, 85% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes m-chug { 0%, 100% { transform: scale(1, 1); } 45% { transform: scale(1.02, 0.97); } 60% { transform: scale(0.99, 1.02); } }
@keyframes m-print {
  0% { transform: translateY(0); opacity: 1; }
  65% { transform: translateY(40px); opacity: 1; }
  85% { transform: translateY(44px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
@keyframes m-led { 0%, 100% { fill: #51cf66; } 50% { fill: #b2f2bb; } }
@keyframes m-arm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
@keyframes m-jump { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-26px) scale(1.04, 0.96); } 70% { transform: translateY(0) scale(1.06, 0.92); } 100% { transform: translateY(0) scale(1); } }
@keyframes m-hop { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-3deg); } }

/* ---------- smaller screens: peek over the top of the drop box ---------- */
@media (max-width: 1060px) {
  .has-mascots .drop { margin-top: 84px; }
  .mascot:not(.m-mini):not(.m-busy) { width: 96px; bottom: auto; top: -88px; }
  .mascot.m-nooby:not(.m-mini) { left: 14px; }
  .mascot.m-printo:not(.m-mini):not(.m-busy) { right: 10px; width: 100px; }
  /* Bubbles sit in the gap between the two characters instead of over the text above. */
  .m-bubble { bottom: auto; top: 14px; white-space: normal; width: max-content; max-width: min(190px, calc(100vw - 230px)); }
  .m-nooby .m-bubble { left: calc(100% + 8px); transform: translate(-6px, 0) scale(0.92); transform-origin: left center; }
  .m-printo .m-bubble { left: auto; right: calc(100% + 8px); transform: translate(6px, 0) scale(0.92); transform-origin: right center; }
  .m-nooby .m-bubble.show, .m-printo .m-bubble.show { transform: translate(0, 0) scale(1); }
  .m-bubble::after { top: 14px; border: inherit; }
  .m-nooby .m-bubble::after { left: 0; border-top: 0; border-right: 0; transform: translate(-50%, 0) rotate(45deg); }
  .m-printo .m-bubble::after { left: 100%; border-bottom: 0; border-left: 0; transform: translate(-50%, 0) rotate(45deg); }
}
@media (max-width: 420px) {
  .mascot:not(.m-mini):not(.m-busy) { width: 84px; top: -78px; }
  .mascot.m-printo:not(.m-mini):not(.m-busy) { width: 88px; }
  .has-mascots .drop { margin-top: 74px; }
  .m-bubble { font-size: 12px; padding: 7px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot *, .mascot .m-svg { animation: none !important; }
}
@media print { .mascot { display: none !important; } }

/* =====================================================================
 * Nooby, the side buddy: slides in from the right edge and talks in a cloud
 * ===================================================================== */
.m-buddy {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  width: 118px;
  transform: translateX(160%);
  transition: transform 0.8s cubic-bezier(0.22, 1.35, 0.4, 1), opacity 0.25s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-buddy.in { transform: translateX(0) rotate(0deg); }
.m-buddy.in.tucked { transform: translateX(62%) rotate(-10deg); transition-duration: 0.6s; }
.m-buddy.in.tucked:hover { transform: translateX(42%) rotate(-6deg); }
.m-buddy .mascot.m-side { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; }
.m-buddy .m-shadow { opacity: 0.8; }
.m-buddy.m-excited .m-svg { animation: m-hop 0.5s ease-in-out infinite; }
.m-buddy.m-excited .m-smile { display: none; }
.m-buddy.m-excited .m-open { display: inline; }

/* The cloud: one white shape with puffs, outlined by stacked drop-shadows. */
.m-cloud {
  position: absolute;
  right: 72%;
  bottom: 86%;
  width: max-content;
  max-width: 230px;
  padding: 14px 20px 15px;
  border-radius: 34px;
  background: #ffffff;
  color: #1b1b1f;
  font: 700 15px/1.32 'Inter', system-ui, sans-serif;
  text-align: center;
  filter:
    drop-shadow(2px 0 0 #1b1b1f) drop-shadow(-2px 0 0 #1b1b1f)
    drop-shadow(0 2px 0 #1b1b1f) drop-shadow(0 -2px 0 #1b1b1f)
    drop-shadow(0 10px 16px rgba(0, 0, 0, 0.2));
  opacity: 0;
  transform: translate(10px, 14px) scale(0.5);
  transform-origin: 100% 100%;
  transition: opacity 0.22s, transform 0.42s cubic-bezier(0.3, 1.6, 0.5, 1);
  pointer-events: none;
}
.m-cloud.show { opacity: 1; transform: translate(0, 0) scale(1); }
.m-cloud::before, .m-cloud::after {
  content: '';
  position: absolute;
  z-index: -1;
  background: #ffffff;
  border-radius: 50%;
}
.m-cloud::before { width: 54px; height: 44px; top: -16px; left: 14%; }
.m-cloud::after { width: 44px; height: 36px; top: -12px; right: 16%; }
.m-cloud-text { position: relative; display: block; }
/* little "thought" puffs leading to Nooby */
.m-cloud i { position: absolute; z-index: -1; background: #ffffff; border-radius: 50%; }
.m-cloud .m-d1 { width: 16px; height: 16px; right: 6px; bottom: -14px; }
.m-cloud .m-d2 { width: 9px; height: 9px; right: -6px; bottom: -26px; }

/* phones: smaller, and above the bottom action bar in the notebook view */
@media (max-width: 860px) {
  .m-buddy { width: 92px; }
  .m-cloud { font-size: 14px; max-width: min(210px, calc(100vw - 120px)); padding: 12px 16px 13px; }
  body:has(#workspace:not([hidden])) .m-buddy { bottom: calc(86px + env(safe-area-inset-bottom)); }
  body:has(.panel.open) .m-buddy { opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { .m-buddy, .m-cloud { transition: none; } }
@media print { .m-buddy { display: none !important; } }

/* Left-side variant (home page on wide screens) */
.m-buddy.m-left { right: auto; left: max(10px, env(safe-area-inset-left)); transform: translateX(-160%); }
.m-buddy.m-left.in { transform: translateX(0) rotate(0deg); }
.m-buddy.m-left.in.tucked { transform: translateX(-62%) rotate(10deg); }
.m-buddy.m-left.in.tucked:hover { transform: translateX(-42%) rotate(6deg); }
.m-buddy.m-left .m-cloud { right: auto; left: 72%; transform-origin: 0 100%; transform: translate(-10px, 14px) scale(0.5); }
.m-buddy.m-left .m-cloud.show { transform: translate(0, 0) scale(1); }
.m-buddy.m-left .m-cloud .m-d1 { right: auto; left: 6px; }
.m-buddy.m-left .m-cloud .m-d2 { right: auto; left: -6px; }