/* IOMI — avatar «O Selo vivo» (2.23.0): o símbolo da IOMI como personagem. Marcação em inc/avatar.php. */

.iomi-av { display: block; width: 100%; height: 100%; overflow: visible; }
.iomi-av .av-ring { fill: #FFFFFF; }
.iomi-av.av-tone-light .av-ring { fill: var(--navy); }
.iomi-av .av-gold { fill: var(--gold); }
.iomi-av .av-ink { fill: var(--navy-deep); }
.iomi-av .av-glint { fill: #FFFFFF; }
.iomi-av .av-joy { fill: none; stroke: var(--navy-deep); stroke-width: 4.5; stroke-linecap: round; opacity: 0; }
.iomi-av .av-shadow { fill: #000814; opacity: 0.3; }
.iomi-av.av-tone-light .av-shadow { fill: var(--navy-deep); opacity: 0.14; }
.iomi-av .av-spark { fill: var(--gold); opacity: 0; }
.iomi-av .av-body,
.iomi-av .av-arms,
.iomi-av .av-armL,
.iomi-av .av-armR,
.iomi-av .av-barL,
.iomi-av .av-barR { transform-box: view-box; transform-origin: 100px 100px; }
.iomi-av .av-eye,
.iomi-av .av-shadow,
.iomi-av .av-spark path { transform-box: fill-box; transform-origin: center; }
.iomi-av .av-pupil { transition: transform 0.3s ease, opacity 0.2s ease; }

/* Estados sem movimento: também valem com movimento reduzido. */
.iomi-av.av-listen .av-pupil { transform: translate(5px, 0); }
.iomi-av.av-think .av-pupil { transform: translate(-4px, -5px); }
.iomi-av.av-show .av-pupil { transform: translate(5px, -3px); }
.iomi-av.av-happy .av-pupil { opacity: 0; }
.iomi-av.av-happy .av-joy { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .iomi-av .av-body { animation: av-float 3.2s ease-in-out infinite; }
  .iomi-av .av-shadow { animation: av-shadow 3.2s ease-in-out infinite; }
  .iomi-av .av-eye { animation: av-blink 5s infinite; }
  .iomi-av.av-idle .av-pupil { animation: av-glance 7s ease-in-out infinite; }
  .iomi-av.av-listen .av-armL { animation: av-ear-l 1.4s ease-in-out infinite alternate; }
  .iomi-av.av-listen .av-armR { animation: av-ear-r 1.4s ease-in-out infinite alternate; }
  .iomi-av.av-talk .av-barL { animation: av-talk 0.34s ease-in-out infinite alternate; }
  .iomi-av.av-talk .av-barR { animation: av-talk 0.34s ease-in-out infinite alternate-reverse; }
  .iomi-av.av-talk .av-eye { animation: av-pulse 0.68s ease-in-out infinite; }
  .iomi-av.av-think .av-arms { animation: av-orbit 4.5s linear infinite; }
  .iomi-av.av-happy .av-body { animation: av-hop 1.1s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; }
  .iomi-av.av-happy .av-eye { animation: none; }
  .iomi-av.av-happy .av-spark { opacity: 1; }
  .iomi-av.av-happy .av-spark path { animation: av-twinkle 1.1s ease-in-out infinite; }
  .iomi-av.av-happy .av-spark path:nth-child(2) { animation-delay: 0.35s; }
  .iomi-av.av-happy .av-spark path:nth-child(3) { animation-delay: 0.7s; }
  .iomi-av.av-show .av-armR { transform-origin: 121px 100px; animation: av-point 1.6s ease-in-out infinite alternate; }
  .iomi-av.av-still,
  .iomi-av.av-still * { animation: none !important; }
}

@keyframes av-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes av-shadow { 0%, 100% { transform: scaleX(1); opacity: 0.3; } 50% { transform: scaleX(0.86); opacity: 0.18; } }
@keyframes av-blink { 0%, 45%, 51%, 100% { transform: scaleY(1); } 48% { transform: scaleY(0.1); } }
@keyframes av-glance { 0%, 20% { transform: translate(0, 0); } 30%, 48% { transform: translate(4px, -2px); } 58%, 78% { transform: translate(-4px, 1px); } 88%, 100% { transform: translate(0, 0); } }
@keyframes av-ear-l { from { transform: translateX(0); } to { transform: translateX(-7px); } }
@keyframes av-ear-r { from { transform: translateX(0); } to { transform: translateX(7px); } }
@keyframes av-talk { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes av-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes av-orbit { to { transform: rotate(360deg); } }
@keyframes av-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 12% { transform: translateY(0) scale(1.04, 0.95); } 45% { transform: translateY(-12px) scale(0.98, 1.02); } 80% { transform: translateY(0) scale(1.03, 0.97); } }
@keyframes av-twinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 1; transform: scale(1); } }
@keyframes av-point { from { transform: rotate(0); } to { transform: rotate(-26deg); } }

/* ---------- Onde o avatar aparece ---------- */

/* Botão «Conhecer a IOMI» e cabeçalho do painel */
.assist-launcher-face > .iomi-av { border-radius: 50%; background: var(--navy-deep); border: 2px solid var(--navy-deep); padding: 4px; box-sizing: border-box; }
.assist-head > .iomi-av { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--navy-deep); border: 2px solid var(--gold); padding: 6px; box-sizing: border-box; }
.assist-launcher-face .av-shadow,
.assist-head .av-shadow,
.story-watch-face .av-shadow,
.explainer-cover-face .av-shadow { display: none; }

/* Botão «A IOMI explicada» na página inicial: o avatar no círculo e o «play» num distintivo dourado */
.story-watch-face { overflow: visible; background: var(--navy-deep); }
.story-watch-face > .iomi-av { border-radius: 50%; padding: 6px; box-sizing: border-box; }
.story-watch-face > .icon { inset: auto -5px -5px auto; margin: 0; width: 1.35rem; height: 1.35rem; padding: 0.22rem; box-sizing: border-box; border-radius: 50%; background: var(--gold); color: var(--navy-deep); --icon-accent: var(--navy-deep); filter: none; }

/* Cartões «A IOMI explicada» */
.explainer-card-media.is-avatar { display: grid; place-items: center; background: radial-gradient(110% 90% at 50% 0%, #0B3A6B 0%, var(--navy-deep) 72%); }
.explainer-card-media.is-avatar::after { display: none; }
.explainer-card-media.is-avatar > .iomi-av { width: 52%; height: auto; aspect-ratio: 1; margin-top: -6%; transition: transform 0.6s ease; }
.explainer-card-btn:hover .explainer-card-media.is-avatar > .iomi-av { transform: scale(1.04); }
.explainer-cover-face { background: var(--navy-deep); }
.explainer-cover-face > .iomi-av { padding: 4px; box-sizing: border-box; }

/* Apresentação em ecrã inteiro */
.avatar-frame.has-avatar { display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 10%, #0B3A6B 0%, #0B2747 60%, var(--navy-deep) 100%); }
.avatar-frame.has-avatar > .iomi-av { width: 76%; height: auto; aspect-ratio: 1; margin-top: -8%; }
.avatar-frame.has-avatar .avatar-wave { display: none; }
@media (max-width: 820px) {
  .avatar-frame.has-avatar > .iomi-av { width: 82%; margin-top: 0; }
  .avatar-frame.has-avatar .av-shadow { display: none; }
}