/* The drawn characters and their idle motion.
   All artwork is inline SVG built in JS; this file only sizes and animates it.
   Everything here is suppressed by the reduced-motion block in base.css. */

/* ---- Mascot sizing ---- */

.eddy-figure {
  width: var(--eddy-size, 170px);
  margin-inline: auto;
}

.eddy-figure--lg { --eddy-size: 180px }
.eddy-figure--xl { --eddy-size: 200px }

/* ---- Mascot motion ---- */

.eddy .eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 5.5s infinite;
}

.eddy .eyes { transition: transform .25s ease-out }

.eddy .ant {
  transform-origin: 100px 64px;
  animation: wob 4s ease-in-out infinite;
}

.eddy .bob { animation: bob 5s ease-in-out infinite }

/* Happy swaps the round eyes for the arched pair. */
.eddy.happy .eyes { display: none }
.eddy .heyes { display: none }
.eddy.happy .heyes { display: inline }

@keyframes blink {
  0%, 93%, 100% { transform: scaleY(1) }
  96% { transform: scaleY(.08) }
}

@keyframes wob {
  50% { transform: rotate(-4deg) }
}

@keyframes bob {
  50% { transform: translateY(-6px) }
}

/* ---- Provider characters ---- */

.fig .bob { animation: bob2 4.6s ease-in-out infinite }
.fig .float { animation: float 3.4s ease-in-out infinite }

.fig .spin {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 18s linear infinite;
}

.fig .fan {
  transform-box: fill-box;
  transform-origin: center;
  animation: spin 1.1s linear infinite;
}

.fig .orbit { animation: dash 6s linear infinite }
.fig .blink { animation: cur 1s steps(1) infinite }
.fig .tw { animation: tw 2.6s ease-in-out infinite }

.fig .sway {
  transform-box: fill-box;
  transform-origin: top center;
  animation: sway 3.2s ease-in-out infinite;
}

/* Offsets for the switchboard's hanging cables, so they do not swing in unison. */
.fig .sway-d0 { animation-delay: 0s }
.fig .sway-d1 { animation-delay: -.5s }
.fig .sway-d2 { animation-delay: -1s }
.fig .sway-d3 { animation-delay: -1.5s }
.fig .sway-d4 { animation-delay: -2s }

.fig .eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 5.2s infinite;
}

.fig.think .eye { animation: think .9s ease-in-out infinite }

@keyframes bob2 { 50% { transform: translateY(-4px) } }
@keyframes float { 50% { transform: translateY(-10px) } }
@keyframes dash { to { stroke-dashoffset: -120 } }
@keyframes cur { 50% { opacity: 0 } }
@keyframes tw { 50% { opacity: .2 } }
@keyframes sway { 50% { transform: rotate(4deg) } }
@keyframes think { 50% { transform: scale(.6) } }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---- Hero stage: mascot, halos, orbiting characters ---- */

.stagewrap {
  position: relative;
  width: min(1000px, 100%);
  height: min(38vh, 340px);
  margin: 6px auto 0;
}

.hero-eddy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(200px, 36vw);
  transform: translate(-50%, -50%);
}

.halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.halo.a {
  inset: -22%;
  border: 1px dashed rgba(232, 145, 63, .35);
  animation: spin 60s linear infinite;
}

.halo.b {
  inset: -6%;
  border: 1px solid rgba(232, 145, 63, .12);
  border-top-color: rgba(232, 145, 63, .85);
  animation: spin 18s linear infinite reverse;
}

.halo.g {
  inset: -40%;
  background: radial-gradient(circle, rgba(232, 145, 63, .28), transparent 62%);
}

/* Position is set per frame in JS from the stage size, so it stays out of CSS. */
.orbiter {
  position: absolute;
  width: 64px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .5));
}

/* ---- Perspective grid floor ---- */

.floor {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: -20%;
  height: 60%;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(232, 145, 63, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 145, 63, .09) 1px, transparent 1px);
  background-size: 78px 78px;
  transform: perspective(700px) rotateX(68deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  mask-image: linear-gradient(to top, #000 10%, transparent 85%);
}