/* Flicko mascot kit v2 (construction "Premium 3D-ish"). Scoped under .flicko-m.
   All motion is driven by the shared JS spring rig in flicko-mascot.js (transform and opacity only, plus a blur at
   hero size). This file only lays out the mascot box, the speech bubble and the reduced-motion fallbacks.
   `size` = body diameter: the box is the body, hands/shadow/effects overflow it (overflow: visible). */

.flicko-m {
  --fm-flick: var(--flicko-ease-flick, cubic-bezier(.22, 1.32, .36, 1));
  position: relative;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  transition: opacity 250ms linear;
}
.flicko-m[hidden] { display: none; }
.flicko-m .fm-fig { display: block; position: relative; transform-origin: 50% 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.flicko-m .fm-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.flicko-m.fm-out .fm-fig { opacity: 0 !important; }
/* One Flicko per screen: a companion that yields (narration bar) steps aside while another Flicko is visible. */
.flicko-m.fm-yield { opacity: 0; pointer-events: none; }

/* ---------- speech bubble, anchored to the mascot (never a card far away) ---------- */
.flicko-m .fm-say {
  position: absolute;
  z-index: 3;
  width: max-content;
  max-width: var(--flicko-bubble-max, 280px);
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--flicko-bubble-bg, #FFFFFF);
  color: var(--flicko-bubble-fg, #1A1024);
  font: 500 14px/1.4 Figtree, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 18px -6px rgba(26, 16, 36, .22), 0 0 0 1px rgba(26, 16, 36, .06);
  opacity: 0;
  transform: translate(0, 4px) scale(.92);
  transition: opacity 250ms linear, transform 375ms var(--fm-flick);
  pointer-events: none;
}
.flicko-m .fm-say::before { /* the tail points at the mouth */
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  background: inherit;
  transform: rotate(45deg);
}
.flicko-m .fm-say:empty { display: none; }
.flicko-m .fm-say.on { opacity: 1; transform: none; }
.flicko-m.fm-b-right .fm-say { left: calc(100% + 18px); top: 50%; margin-top: -28px; transform-origin: 0 50%; }
.flicko-m.fm-b-right .fm-say::before { left: -5px; top: 22px; }
.flicko-m.fm-b-left .fm-say { right: calc(100% + 18px); top: 50%; margin-top: -28px; transform-origin: 100% 50%; }
.flicko-m.fm-b-left .fm-say::before { right: -5px; top: 22px; }
.flicko-m.fm-b-top .fm-say { bottom: calc(100% + 26px); left: 50%; translate: -50% 0; transform-origin: 50% 100%; }
.flicko-m.fm-b-top .fm-say::before { bottom: -5px; left: calc(50% - 6px); }
.flicko-m.fm-b-bottom .fm-say { top: calc(100% + 24px); left: 50%; translate: -50% 0; transform-origin: 50% 0; }
.flicko-m.fm-b-bottom .fm-say::before { top: -5px; left: calc(50% - 6px); }
.flicko-m--dark .fm-say { --flicko-bubble-bg: #2C2036; --flicko-bubble-fg: #FBF8F6; }

.flicko-m .fm-fig:focus-visible { outline: 2px solid #2B4BE0; outline-offset: 6px; border-radius: 50%; }

/* ---------- reduced motion / "Discreto": pose swaps only (the rig already holds still poses) ---------- */
@media (prefers-reduced-motion: reduce) {
  .flicko-m, .flicko-m .fm-say { transition: opacity 125ms linear !important; }
  .flicko-m .fm-say { transform: none !important; }
}
.flicko-m.fm-rm, .flicko-m.fm-rm .fm-say { transition: opacity 125ms linear !important; }
.flicko-m.fm-rm .fm-say { transform: none !important; }

/* ---------- static spots and stages (flicko-ui.js) ---------- */
.fk-spot svg { overflow: visible; }
/* Work stage: the post skeleton in the CUSTOMER's colours while the image is created; the Flicko handles cards beside it. */
.fk-stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; width: 100%; padding: 12px 8px; box-sizing: border-box; text-align: left; }
.fk-stage-skel { position: relative; grid-column: 1 / -1; aspect-ratio: 4 / 3; max-height: 220px; border-radius: 12px; overflow: hidden; background: var(--fk-skel-bg, #F2EDE9); }
.fk-stage-skel::before { content: ''; position: absolute; left: 10%; right: 10%; top: 14%; height: 34%; border-radius: 10px; background: var(--fk-skel-accent, #E9E3EE); opacity: .9; }
.fk-stage-skel i { position: absolute; left: 10%; height: 9%; border-radius: 99px; background: var(--fk-skel-ink, rgba(26, 16, 36, .18)); }
.fk-stage-skel i:nth-child(1) { top: 58%; width: 62%; }
.fk-stage-skel i:nth-child(2) { top: 72%; width: 40%; }
.fk-stage-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-100%); animation: fk-sheen 1.8s ease-in-out infinite; }
@keyframes fk-sheen { to { transform: translateX(100%); } }
.fk-stage-copy { min-width: 0; }
.fk-stage-copy strong { display: block; font-weight: 600; }
.fk-stage-copy small { display: block; opacity: .75; margin-top: 2px; }
.fk-stage.is-back { grid-template-columns: 1fr; padding: 6px; }
.fk-stage.is-back .fk-stage-copy { display: none; }
@media (prefers-reduced-motion: reduce) { .fk-stage-skel::after { animation: none; } }
/* Non-blocking celebration overlay (real publish): never takes a click, leaves on its own. */
.fk-celebrate { position: fixed; inset: auto 0 calc(96px + env(safe-area-inset-bottom, 0px)) 0; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 28px; pointer-events: none; }
.fk-celebrate p { margin: 0; padding: 8px 16px; border-radius: 999px; background: #1A1024; color: #FBF8F6; font: 600 16px/1.3 Figtree, system-ui, sans-serif; box-shadow: 0 10px 30px -10px rgba(26, 16, 36, .4); }
.fk-celebrate.is-leaving { opacity: 0; transition: opacity 250ms linear; }
/* Inline (24-32 px) Flicko in a toast: static pose only. */
.fk-inline { display: inline-flex; vertical-align: middle; margin-right: 8px; flex: none; }

/* ---------- Placements: mascot containers only (body-diameter sizes; the rest of each layout is untouched) ---------- */
.swn-bar.swn-guided .swn-caption { display: none; } /* the tour caption is the guide's own bubble */
.tour-stage .tour-art-flicko, .tour-stage .tour-art-team { min-height: 280px; align-items: center; }
.tour-stage .tour-art-meet { min-height: 300px; }
.tour-stage .tour-art .fk-guide { padding-bottom: 18px; }
@media (max-width: 860px) {
  .tour-stage .tour-art .fk-guide, .tour-stage .tour-art-meet .fk-guide { height: auto; transform: none; }
  .tour-stage .tour-art-flicko, .tour-stage .tour-art-team, .tour-stage .tour-art-meet { min-height: 200px; padding-bottom: 64px; }
}
.flicko-home-split .flicko-home-flicko { margin: 8px 12px 14px 4px; }
.fk-spot.fk-spot-center { margin-bottom: 26px; }
.guest-flicko-slot { display: flex; justify-content: center; min-height: 104px; margin: 4px 0 10px; }
.ntour-gift.ntour-gift-flicko { display: flex; justify-content: center; align-items: center; min-height: 230px; overflow: visible; }
.ns-progress-star .fk-spot, .ns-loading .fk-spot { margin: 6px; }
div .fk-hero-mascot { margin: 6px 0 22px; }
@media (min-width: 1024px) { div .fk-hero-mascot { margin: 0; top: -40px; } }
.fk-cta-mascot .flicko-m { display: block; }
.nart-mini-post { display: block; width: 100%; height: 100%; }
/* Settings > Preferências: "O Flicko na tela" (Animado / Discreto / Desligado) */
.sx-radio-group { display: grid; gap: 8px; }
.sx-radio { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; line-height: 1.35; }
.sx-radio input { margin-top: 3px; accent-color: #D8360F; }
.sx-radio small { display: block; opacity: .75; }
/* Home stage (flicko-stage.js): the home Flicko steps out while the actor is on the lane; the sign hangs in his spot. */
.flicko-m.fm-away { opacity: 0; pointer-events: none; }
.fk-sign { position: absolute; left: 5%; right: 5%; top: 18%; line-height: 0; transform-origin: 50% 0; animation: fk-sign-in 900ms cubic-bezier(.2, .8, .2, 1) both; pointer-events: none; }
.fk-sign svg { width: 100%; height: auto; overflow: visible; }
.fk-sign.is-leaving { animation: fk-sign-out 125ms ease-in both; }
@keyframes fk-sign-in { 0% { transform: translateY(-30%) rotate(-14deg); opacity: 0; } 25% { opacity: 1; } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }
@keyframes fk-sign-out { to { transform: translateY(-40%); opacity: 0; } }
.flicko-home-flicko { position: relative; }
.fk-stage-layer .fk-bubble { line-height: 0; }
.fk-calm { appearance: none; border: 0; background: none; padding: 4px 8px; border-radius: 999px; font: 600 12px/1.2 Figtree, system-ui, sans-serif; color: #574765; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.fk-calm:focus-visible { outline: 2px solid #2B4BE0; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .fk-sign { animation: none; } .fk-calm { display: none; } }