/* Grok Bot motion for the defringed mascot cutouts.
   The body idles on a smooth 5.4s loop: 2px lift and a 2 degree tilt.
   That loop is the owner's exception to the stepped-motion rule.
   Pill-eye blinks and the scan line stay stepped.
   prefers-reduced-motion stops every animation. The button still introduces.
   The image is the noshadow plate. The contact shadow is the frame's ::after,
   so it can shrink while the body is in the air. */

.mf-bot {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  vertical-align: top;
}
.mf-bot:focus-visible {
  outline: 3px solid #2EE68A;
  outline-offset: 3px;
  border-radius: 16px;
}

.mf-bot-frame {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  flex: none;
  isolation: isolate;
  --h: 96px;
}
.mf-bot-frame--hero { width: clamp(180px, 46vw, 240px); height: clamp(180px, 46vw, 240px); --h: clamp(180px, 46vw, 240px); }
.mf-bot-frame--card { width: 96px; height: 96px; --h: 96px; }
.mf-bot-frame--note { width: 72px; height: 72px; --h: 72px; }
.mf-bot-frame--home { width: 100px; height: 100px; --h: 100px; }
.mf-bot-frame--modal { width: 110px; height: 110px; --h: 110px; }
.mf-bot-frame--mike { width: 140px; height: 140px; --h: 140px; }

.mf-bot-art {
  position: absolute;
  inset: 0;
  transform-origin: 50% 86%;
  animation: mf-mascot-idle 5.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: var(--idle-delay, 0s);
}
.mf-bot-art picture { display: block; width: 100%; height: 100%; }
.mf-bot-frame img,
.mf-bot-frame.is-slot .avatar-slot {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.mf-bot-frame::after {
  content: "";
  position: absolute;
  left: 25%;
  width: 50%;
  top: 82%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .30), rgba(0, 0, 0, 0));
  transform-origin: center;
  pointer-events: none;
  z-index: -1;
  animation: mf-mascot-shadow 5.4s cubic-bezier(0.37, 0, 0.63, 1) infinite;
  animation-delay: var(--idle-delay, 0s);
}
/* Black at 30% disappears on navy and ink. A wider, denser ellipse
   stays under the feet without a light fringe around the body. */
.mf-bot-frame.is-on-dark::after {
  left: 18%;
  width: 64%;
  top: 78%;
  height: 12%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .62) 48%, rgba(186, 196, 214, .34) 72%, rgba(0, 0, 0, 0) 82%);
}
.mf-bot-frame.is-slot .avatar-slot {
  display: grid;
  border-radius: 28px;
  place-items: center;
}

.mf-bot-eyes,
.mf-bot-scan { pointer-events: none; }

.mf-bot-eyes {
  position: absolute;
  display: none;
  left: var(--eye-x, 30%);
  top: var(--eye-y, 34%);
  width: var(--eye-span, 40%);
  height: var(--eye-h, 16%);
  justify-content: space-between;
  align-items: center;
  animation: mf-look 6.6s steps(1, end) infinite;
}
.mf-bot-frame.is-eyes .mf-bot-eyes,
.mf-bot-frame.is-slot .mf-bot-eyes { display: flex; }
.mf-bot-frame.is-slot .mf-bot-eyes {
  left: 28%;
  top: 32%;
  width: 44%;
  height: 18%;
}
.mf-bot-lid {
  width: 42%;
  height: 100%;
  display: grid;
  place-items: center;
  background: var(--skin, transparent);
  border-radius: 40%;
}
.mf-bot-frame.is-slot .mf-bot-lid { background: transparent; }
.mf-bot-eye {
  display: block;
  width: 70%;
  height: 78%;
  border-radius: 999px;
  background: #161616;
  transform: skewX(-14deg);
  transform-origin: center;
  animation: mf-eye-boot 0.72s steps(1, end) both, mf-blink 5.2s steps(1, end) 0.72s infinite;
}

.mf-bot-scan {
  position: absolute;
  left: var(--scan-x, 49%);
  top: var(--scan-y, 30%);
  width: var(--scan-w, 22%);
  height: var(--scan-h, 13%);
  border-radius: 999px;
  background: #161616;
  opacity: 0;
  mix-blend-mode: multiply;
}
.mf-bot-frame.is-scan .mf-bot-scan { animation: mf-scan 4.4s steps(1, end) infinite; }

.mf-bot:hover .mf-bot-art,
.mf-bot:focus-visible .mf-bot-art,
.bot:hover .mf-bot-art,
.bot:focus-visible .mf-bot-art {
  animation: mf-snap 0.24s steps(2, end) forwards;
}
.mf-bot-frame.is-wave .mf-bot-art {
  animation: mf-wave 0.48s steps(1, end) both;
}

.mf-bot-say {
  position: fixed;
  z-index: 40;
  max-width: min(280px, calc(100vw - 24px));
  margin: 0;
  padding: 12px 36px 12px 14px;
  border: 3px solid #24204A;
  border-radius: 16px;
  background: #FFF4DF;
  color: #24204A;
  box-shadow: 4px 4px 0 #24204A;
  font: 16px/1.35 system-ui, sans-serif;
  text-align: left;
}
.mf-bot-say[hidden] { display: none; }
.mf-bot-say p { margin: 0; }
.mf-bot-who { font-weight: 800; }
.mf-bot-line { margin-top: 4px; }
.mf-bot-say-x {
  position: absolute;
  top: 4px;
  right: 6px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 22px;
  cursor: pointer;
}

.journal-card,
.journal-by { display: flex; gap: 12px; align-items: center; }
.journal-card .journal-link { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.journal-card .journal-link:hover h2,
.journal-card .journal-link:hover h3 { text-decoration: underline; }

@keyframes mf-mascot-idle {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-2px) rotate(2deg); }
}
@keyframes mf-mascot-shadow {
  0%, 100% { transform: scale(1, 1); opacity: 1; }
  50% { transform: scale(.96, 1); opacity: .85; }
}
@keyframes mf-snap {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(-8deg) scale(1.06); }
  100% { transform: rotate(3deg) scale(1.04); }
}
@keyframes mf-wave {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-14deg); }
  50% { transform: rotate(12deg); }
  75% { transform: rotate(-7deg); }
  100% { transform: rotate(0deg); }
}
@keyframes mf-look {
  0%, 42% { translate: 0 0; }
  48%, 68% { translate: -18% 0; }
  74%, 90% { translate: 16% 0; }
  96%, 100% { translate: 0 0; }
}
@keyframes mf-eye-boot {
  0%, 28% { transform: skewX(-14deg) scaleY(0.08); }
  44% { transform: skewX(-14deg) scaleY(1); }
  62% { transform: skewX(-14deg) scaleY(0.16); }
  78%, 100% { transform: skewX(-14deg) scaleY(1); }
}
@keyframes mf-blink {
  0%, 70% { transform: skewX(-14deg) scaleY(1); }
  76%, 82% { transform: skewX(-14deg) scaleY(0.42); }
  86% { transform: skewX(-14deg) scaleY(1); }
  90%, 94% { transform: skewX(-14deg) scaleY(0.08); }
  98%, 100% { transform: skewX(-14deg) scaleY(1); }
}
@keyframes mf-scan {
  0%, 64% { opacity: 0; transform: translateY(0) scaleY(1); }
  70% { opacity: 0.9; transform: translateY(0) scaleY(0.28); }
  76% { opacity: 0.1; transform: translateY(10px) scaleY(1); }
  82% { opacity: 0.95; transform: translateY(0) scaleY(0.2); }
  90%, 100% { opacity: 0; transform: translateY(18px) scaleY(1); }
}

@media (max-width: 520px) {
  .bot .mf-bot-frame--home { width: 72px; height: 72px; --h: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-bot-art,
  .mf-bot-frame::after,
  .mf-bot-frame img,
  .mf-bot-frame.is-slot .avatar-slot,
  .mf-bot-eyes,
  .mf-bot-eye,
  .mf-bot-scan,
  .mf-bot:hover .mf-bot-art,
  .mf-bot:focus-visible .mf-bot-art,
  .bot:hover .mf-bot-art,
  .bot:focus-visible .mf-bot-art,
  .mf-bot-frame.is-wave .mf-bot-art {
    animation: none !important;
    transition: none !important;
  }
  .mf-bot-scan { display: none !important; }
}