/* AI Travel Agent mascot.
   The .bot block is the production CSS from the mascot spec, unchanged apart from
   two tokens it expects (--font, --text-3), mapped to the site here.
   The rest lays out the Lab card stage and the mascot page on the site grid. */

.bot-scope {
  --font: var(--font-ui);
  --text-3: rgb(255 255 255 / 55%);
}

/* mascot: зелёный чемодан FBT (Figma 8316:8345) */
.bot{--s:44px;font-size:var(--s);width:1em;height:1.518em;position:relative;flex:none;display:inline-block;transition:transform .3s}
.bot svg{display:block;width:100%;height:100%;overflow:visible}
.bot.sq{height:1.042em}
.bot .eyes{transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.bot .eye{transform-box:fill-box;transform-origin:50% 55%;animation:blinkE 4.2s infinite}
.bot .eye+.eye{animation-delay:.04s}
.bot .e-happy,.bot .e-wow,.bot .e-sleep,.bot .e-wink{display:none}
.bot .hd{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s}
@keyframes blinkE{0%,44%,48%,92%,100%{transform:scaleY(1)}46%{transform:scaleY(.1)}94%{transform:scaleY(.1)}96%{transform:scaleY(1)}}
@keyframes lookE{0%,100%{transform:translate(0,0)}18%,32%{transform:translate(-80px,-14px)}50%{transform:translate(0,-30px)}68%,82%{transform:translate(80px,-14px)}}
@keyframes bob{50%{transform:translateY(-.03em)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-.05em) rotate(-2deg)}70%{transform:translateY(0) rotate(2deg)}}
@keyframes jump{40%{transform:translateY(-.12em)}70%{transform:translateY(.01em)}}
@keyframes shake{20%,60%{transform:translateX(-.03em)}40%,80%{transform:translateX(.03em)}}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}40%{opacity:1}100%{opacity:0;transform:translate(.25em,-.45em)}}
.bot.live{animation:bob 3.2s ease-in-out infinite}
.bot.think{animation:hop .9s ease-in-out infinite}
.bot.think .eyes{animation:lookE 2.2s ease-in-out infinite;transition:none}
.bot.think .eye{animation:blinkE 1.6s infinite}
.bot.think .hd{transform:rotate(-8deg)}
.bot.listen{animation:none;transform:rotate(4deg)}
.bot.happy{animation:jump .55s ease}
.bot.happy .e-open,.bot.surprised .e-open,.bot.sleepy .e-open,.bot.hello .e-open{display:none}
.bot.happy .e-happy,.bot.surprised .e-wow,.bot.sleepy .e-sleep,.bot.hello .e-wink{display:inline}
.bot.surprised{animation:shake .45s ease}
.bot.surprised .hd{transform:translateY(-30px)}
.bot.sleepy{animation:bob 4.5s ease-in-out infinite}
.bot.sleepy::after{content:"z";position:absolute;right:-.14em;top:-.02em;font:700 .24em/1 var(--font);color:var(--text-3);animation:zz 2.2s ease-in-out infinite}
.bot.hello{animation:jump .6s ease}
.bot.sm .eye{animation-duration:5.2s}

@media (prefers-reduced-motion: reduce) {
  .bot,
  .bot * {
    animation: none !important;
    transition: none !important;
  }
}

/* ── Stage: where the mascot stands ──────────────────────────── */
.mascot-stage {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: radial-gradient(120% 90% at 30% 0%, #1f2823 0%, #151b17 60%, #111613 100%);
}

.mascot-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14%;
  width: 34%;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 55%), transparent);
  pointer-events: none;
}

.mascot-stage .bot {
  position: relative;
  z-index: 1;
  cursor: pointer;
}

.mascot-stage__line {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 1;
  color: rgb(255 255 255 / 70%);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}

/* Lab card */
.lab-item__media--mascot {
  aspect-ratio: 16 / 9;
}

.lab-item__media--mascot .mascot-stage {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  padding-bottom: 28px;
}

.lab-status--proto::before {
  background: #e8b75a;
}

/* ── Mascot page ─────────────────────────────────────────────── */
.page--mascot {
  background: var(--color-bg);
}

.l-page-shell--mascot {
  width: min(100%, var(--container-max));
  margin: 0 auto;
}

.m-shell {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: calc(var(--page-gutter) + 88px + 32px);
  padding-right: var(--page-gutter);
}

.m-hero {
  padding-top: 22px;
}

.m-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
}

.m-kicker a {
  color: var(--color-link);
}

.m-kicker a:hover {
  color: var(--color-link-hover);
}

.m-title {
  margin-top: 12px;
  max-width: 900px;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 56px;
  font-weight: 500;
  text-wrap: balance;
}

.m-lead {
  margin-top: 16px;
  max-width: 720px;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 24px;
  line-height: 32px;
}

.m-meta {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
}

.m-meta dt {
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
}

.m-meta dd {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}

/* Playground */
.m-play {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: 16px;
}

.m-play .mascot-stage {
  min-height: 520px;
  grid-template-rows: 1fr auto;
  padding: 32px 24px 24px;
}

.m-play__hero {
  display: grid;
  place-items: center;
  padding-bottom: 24px;
}

.m-minis {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
  padding-top: 16px;
  border-top: 1px dashed rgb(255 255 255 / 14%);
}

.m-minis figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.m-minis figcaption {
  color: rgb(255 255 255 / 55%);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
}

.m-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: #0d0d0d;
}

.m-panel__label {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 20px;
}

.m-moods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.m-mood,
.m-btn {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 10px;
  background: #161616;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 22px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.m-mood:hover,
.m-btn:hover {
  border-color: rgb(255 255 255 / 32%);
}

.m-mood[aria-pressed="true"] {
  border-color: #34c46a;
  background: #173323;
}

.m-btn--primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  font-family: var(--font-mono);
  text-align: center;
}

.m-btn--primary:hover {
  border-color: #4a80ff;
  background: #4a80ff;
}

.m-mood:focus-visible,
.m-btn:focus-visible,
.m-composer input:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

.m-composer {
  display: flex;
  gap: 8px;
}

.m-composer input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 10px;
  background: #161616;
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
}

.m-composer input::placeholder {
  color: rgb(255 255 255 / 45%);
}

.m-composer .m-btn {
  text-align: center;
}

.m-hint {
  color: var(--color-text-secondary);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 21px;
}

/* Story */
.m-story {
  margin-top: 120px;
  display: flex;
  flex-direction: column;
  gap: 88px;
}

.m-block {
  max-width: 760px;
}

.m-block h2 {
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 48px;
  font-weight: 500;
  text-wrap: balance;
}

.m-block p,
.m-block li {
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 20px;
  line-height: 30px;
}

.m-block p {
  margin-top: 12px;
}

.m-block ul {
  margin-top: 12px;
  padding-left: 24px;
}

.m-block li + li {
  margin-top: 6px;
}

.m-block__note {
  color: var(--color-text-secondary);
}

.m-figure {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 32px;
  padding: 28px 32px;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
  background: radial-gradient(120% 90% at 30% 0%, #1f2823 0%, #151b17 60%, #111613 100%);
}

.m-figure figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.m-figure figcaption {
  color: rgb(255 255 255 / 60%);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* Version 1 avatar, rebuilt from its spec: a navy square with two eyes. */
.v1-ava {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: radial-gradient(120% 90% at 30% 15%, #3b4a6b 0%, #1b2236 70%);
  box-shadow: 0 0 0 6px #edf8f1, 0 8px 24px rgb(27 34 54 / 50%);
}

.v1-ava .eyes {
  display: flex;
  gap: 14px;
}

.v1-ava .eye {
  width: 16px;
  height: 24px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 12px rgb(140 230 180 / 55%);
  transform-origin: 50% 60%;
  animation: blinkE 4.2s infinite;
}

.v1-ava .eye + .eye {
  animation-delay: 0.04s;
}

.m-table-wrap {
  margin-top: 28px;
  overflow-x: auto;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 16px;
}

.m-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-family: var(--font-ui);
}

.m-table th,
.m-table td {
  padding: 14px 18px;
  border-bottom: 1px solid rgb(255 255 255 / 8%);
  text-align: left;
  vertical-align: top;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 24px;
}

.m-table thead th {
  background: rgb(255 255 255 / 4%);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 400;
}

.m-table tbody tr:last-child td,
.m-table tbody tr:last-child th {
  border-bottom: 0;
}

.m-table tbody th {
  font-weight: 600;
  white-space: nowrap;
}

.m-table td:first-child {
  width: 64px;
}

.m-table button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.page--mascot .site-footer {
  margin-top: 120px;
}

@media (max-width: 1100px) {
  .m-shell {
    padding-left: var(--page-gutter-mobile);
    padding-right: var(--page-gutter-mobile);
  }

  .m-hero {
    padding-top: 188px;
  }

  .m-play {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .m-title {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.15;
  }

  .m-lead {
    font-size: 20px;
    line-height: 28px;
  }

  .m-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .m-meta dd {
    font-size: 20px;
    line-height: 28px;
  }

  .m-play .mascot-stage {
    min-height: 440px;
  }

  .m-story {
    margin-top: 88px;
    gap: 64px;
  }

  .m-block h2 {
    font-size: 30px;
    line-height: 38px;
  }

  .m-block p,
  .m-block li {
    font-size: 18px;
    line-height: 27px;
  }

  .m-figure {
    padding: 20px;
    gap: 24px;
  }

  .page--mascot .site-footer {
    margin-top: 88px;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.m-block code {
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* Playground: the shadow sits under the big mascot, not under the size row. */
.m-play .mascot-stage::after {
  display: none;
}

.m-play__hero {
  position: relative;
}

.m-play__hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 200px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 55%), transparent);
  pointer-events: none;
}

/* Playground: a little one hides behind the big mascot. It peeks out
   scared (wide eyes, trembling), listens, then cheers up and steps out.
   lab/mascot.js drives data-stage and the moods; click it to replay. */
.m-pair {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
}

.m-buddy {
  position: absolute;
  right: 14px;
  bottom: 0;
  z-index: 0;
  display: inline-flex;
  transform-origin: 50% 100%;
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.2s ease;
  cursor: pointer;
}

/* Hidden: fully gone, so its wheels don't show under the big one.
   It fades out only after it has slid back behind. */
.m-buddy[data-stage="hide"] {
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.3, 1), opacity 0.2s ease 0.4s;
}

.m-buddy::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 70%;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 50%), transparent);
  pointer-events: none;
}

.m-buddy[data-stage="peek"] {
  transform: translateX(56px) rotate(8deg);
}

.m-buddy[data-stage="out"] {
  transform: translateX(84px);
}

/* Scared: keep trembling while the eyes are wide. */
.m-buddy .bot.surprised {
  animation: buddy-tremble 0.28s linear infinite;
}

.m-buddy .bot.surprised .hd {
  transform: translateY(-40px);
}

@keyframes buddy-tremble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-0.025em) rotate(-1deg); }
  75% { transform: translateX(0.025em) rotate(1deg); }
}

@media (max-width: 600px) {
  .m-buddy[data-stage="out"] {
    transform: translateX(70px);
  }
}