/* Robot-head: geometria, navigazione, stati e responsive. */
.robot-wrap {
  width: 310px;
  height: 310px;
  cursor: pointer;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  transform: scale(var(--s));
  transform-origin: 0 0;
}
.robot {
  position: absolute;
  inset: 0;
  animation: robot-float 4s ease-in-out infinite;
  --metal-light: #607b9d;
  --metal-mid: #304762;
  --metal-dark: #1c3049;
}
.head {
  position: absolute;
  left: 28px;
  top: 18px;
  width: 254px;
  height: 274px;
  border: 1px solid #e4fcff99;
  border-radius: 48% 48% 45% 45% / 40% 40% 54% 54%;
  background: radial-gradient(ellipse at 30% 10%,#6b88b84d,transparent 50%),linear-gradient(125deg,var(--metal-light),#435d7b 28%,var(--metal-mid) 60%,#4b6583 80%,var(--metal-dark));
  border-color: #7ec7e366;
  box-shadow: inset 2px 2px 2px #a6d8ff33,inset -5px -6px 12px #07132373,0 22px 40px #0006,0 0 36px #38bdf812;
}
.head::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border-bottom: 2px solid #38bdf890;
  pointer-events: none;
}
.ear {
  position: absolute;
  top: 112px;
  width: 41px;
  height: 105px;
  border: 1px solid #b2d8e9;
  border-radius: 70% 20% 20% 70%;
  border-color: #38bdf866;
  background: linear-gradient(90deg,#0d1430,#33456d 25%,#1d2e4c 55%,#080d1a 70%);
  box-shadow: inset 2px 0 4px #7dd3fc33,0 8px 15px #0006;
}
.ear-left { left: 5px; }
.ear-right { right: 5px; transform: scaleX(-1); }
.forehead {
  position: absolute;
  top: -1px;
  left: 86px;
  width: 82px;
  height: 72px;
  border: 2px solid #15212d;
  border-top: 1px solid #fff;
  border-radius: 12% 12% 32% 32%;
  border-color: #080d1a;
  border-top-color: #7dd3fc66;
  background: linear-gradient(165deg,#34476b,#1b2a4b 40%,#0b1124);
  box-shadow: 0 2px 0 #7dd3fc33,inset 2px 0 1px #7dd3fc22;
}
.status-light {
  position: absolute;
  top: 24px;
  left: 34px;
  width: 12px;
  height: 31px;
  border: 1px solid #aaffff;
  border-radius: 999px;
  background: linear-gradient(#bbffff,var(--cyan));
  box-shadow: 0 0 10px var(--cyan),0 0 22px #38bdf877;
}
.visor {
  position: absolute;
  z-index: 2;
  left: 17px;
  right: 17px;
  top: 80px;
  height: 137px;
  border: 5px solid #040a10;
  border-radius: 30% 30% 38% 38% / 32% 32% 40% 40%;
  overflow: hidden;
  border-color: #060b18;
  background: radial-gradient(ellipse at 40% -15%,#223b60,#0a142a 45%,#050b19 80%);
  box-shadow: 0 -2px 0 #7dd3fc55,0 2px 0 #7dd3fc66,inset 0 0 0 1px #38bdf833;
}
.visor::before {
  content: "";
  position: absolute;
  left: -25px;
  top: -40px;
  width: 130px;
  height: 180px;
  transform: rotate(38deg);
  background: linear-gradient(90deg,#edffff4d,transparent 85%);
  border-radius: 50%;
  pointer-events: none;
  opacity: .45;
}
.visor::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-top: 1px solid #c5ffff55;
  border-radius: inherit;
  pointer-events: none;
}
.eye {
  position: absolute;
  top: 42px;
  width: 64px;
  height: 64px;
  animation: eye-blink 8s ease-in-out infinite;
}
.eye-left { left: 23px; }
.eye-right { right: 23px; }
.pupil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 45px;
  height: 45px;
  margin: -22.5px;
  border: 8px solid var(--cyan);
  border-radius: 50%;
  background: radial-gradient(circle,#020b14 30%,#0b3442);
  box-shadow: 0 0 3px #c6ffff,inset 0 0 7px #38bdf899,0 0 15px #38bdf880,0 0 28px #38bdf830;
  transition: transform .12s ease-out;
}
.pupil::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-top: 2px solid #ceffffb3;
  border-radius: 50%;
}
.chin {
  position: absolute;
  left: 44px;
  right: 44px;
  bottom: 1px;
  height: 66px;
  border: 2px solid #182d3a;
  border-top: 0;
  border-radius: 5% 5% 50% 50% / 5% 5% 90% 90%;
  border-color: #080d1a;
  background: linear-gradient(140deg,#33476a,#1d2d4c 48%,#101a32);
  box-shadow: inset 2px 0 0 #7dd3fc33,inset -2px -1px 2px #080d1a99;
}
.mouth {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 13px;
  border: 2px solid #193a50;
  border-radius: 999px;
  background: #070e1a;
  border-color: #101a32;
  box-shadow: 0 0 0 1px #7dd3fc33;
}
.mouth::after {
  content: "";
  position: absolute;
  inset: 2px 5px;
  border-radius: 999px;
  background: var(--pink);
  box-shadow: 0 0 7px var(--pink);
  transition: inset var(--motion);
}
.robot-wrap:hover .mouth::after { inset: 1px 3px; }
.robot-wrap:hover .status-light, .robot-wrap.lit .status-light { box-shadow: 0 0 14px var(--cyan),0 0 30px #38bdf899; background: #eaffff; }
.mascot-stage {
  --hero-scale: 1;
  position: relative;
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 24px 0 8px;
}
.mascot-nav {
  --s: 1;
  position: relative;
  width: min(360px,calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  z-index: 20;
  transform-origin: 50% 0;
}
.mascot-body {
  position: relative;
  width: calc(310px * var(--s));
  height: calc(310px * var(--s));
  flex: none;
}
.robot-wrap:focus-visible { outline: 2px solid var(--cyan); outline-offset: 8px; border-radius: 50%; }
.aura {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(12px);
  transform: translate(var(--glow-x,0px),var(--glow-y,0px));
  transition: transform .35s ease-out;
}
.aura::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: aura-breathe 6s ease-in-out infinite;
  background: radial-gradient(ellipse at 45% 42%,#38bdf808 30%,#38bdf830 43%,#38bdf812 55%,transparent 68%);
}
.aura::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: aura-breathe 6s ease-in-out infinite;
  inset: 8%;
  background: radial-gradient(ellipse at 65% 72%,#e879c525,transparent 64%);
  animation-delay: -3s;
}
.mascot-body:hover .aura::before, .mascot-body:focus-within .aura::before { filter: brightness(1.4); }
.menu-caption {
  min-height: 44px;
  padding: 8px 16px;
  font: 600 .75rem/1.5 var(--body);
  letter-spacing: .03em;
  font-family: var(--mono);
  font-weight: 400;
  border: 1px solid #38bdf833;
  border-radius: 999px;
  color: #91d7ef;
  border-color: #6aa3bf55;
  background: #14273c;
}
.robot-menu {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #38bdf84d;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: #0d1430f5;
  backdrop-filter: blur(18px);
  position: absolute;
  left: var(--menu-left);
  top: var(--menu-top);
  width: var(--menu-width,300px);
  max-height: var(--menu-height,80dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  grid-template-columns: 1fr;
  animation: menu-from-robot 200ms ease-out;
}
.robot-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--bg);
  color: var(--ink);
  font: 500 .875rem/1.4 var(--body);
}
.robot-menu a:first-child { grid-column: 1/-1; }
.robot-menu a:hover, .robot-menu a:focus-visible { border-color: var(--cyan); color: var(--cyan); }
.robot-menu a[aria-current="page"] { border-color: var(--cyan); }
.mascot-nav.docked {
  --s: .5;
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(320px,calc(100vw - 48px));
}
.mascot-nav.in-footer { --s: .65; }
.page-mascot-station { display: none; }
.mascot-stage .mascot-nav { --s: var(--hero-scale); }
.robot-wrap.lit .eye-left { animation: robot-wink 650ms ease both; }
.robot-wrap.lit .mouth::after { background: #fff0fa; box-shadow: 0 0 12px var(--pink); }
.robot-wrap:hover .visor { box-shadow: 0 -2px 0 #7dd3fc88,0 2px 0 #7dd3fc88,inset 0 0 0 1px var(--cyan),0 0 20px #38bdf833; }
.menu-caption:hover { background: #38bdf81a; border-color: var(--cyan); }
.contact-page .mascot-nav.docked { right: auto; left: 24px; }
@keyframes eye-blink {
  0%,43%,47%,100% { transform:scaleY(1); }
  45% { transform:scaleY(.1); }
}
@keyframes robot-float {
  50% { transform:translateY(-7px) rotate(1deg); }
}
@keyframes aura-breathe {
  50% { opacity:.65; transform:scale(.94); }
}
@keyframes robot-wink {
  0%,100% { transform:scaleY(1); }
  35%,65% { transform:scaleY(.14); }
}
@keyframes menu-from-robot {
  from { opacity:0; transform:translateX(8px); }
  to { opacity:1; transform:translateX(0); }
}
@media(prefers-reduced-motion:reduce) {
  .aura { transition: none; }
  .aura::before, .aura::after { animation: none; }
}
@media(max-width:1000px) {
  .mascot-stage { --hero-scale: .8; }
}
@media(max-width:760px) {
  .mascot-stage { --hero-scale: .64; padding-top: 8px; }
  .page-mascot-station { display: grid; justify-items: center; padding: 24px 0; }
  .page-mascot-station .mascot-nav { --s: .64; }
  .mascot-nav.in-footer { --s: .6; }
  .mascot-nav.docked {
    --s: .3;
    width: 138px;
    right: 12px;
    bottom: 12px;
    gap: 4px;
  }
  .mascot-nav.docked .menu-caption { font-size: .6rem; padding: 6px 10px; }
}