/* Hero mascot sequence ---------------------------------------------------- */
.deme-mascot-loop {
  position: absolute;
  z-index: 3;
  top: 82px;
  left: -34px;
  width: clamp(150px, 16vw, 205px);
  aspect-ratio: 1;
  pointer-events: none;
  filter: drop-shadow(0 16px 13px rgba(21, 19, 41, 0.16));
  isolation: isolate;
}

.deme-mascot-loop svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.deme-mascot-variant {
  opacity: 0;
  visibility: hidden;
  transform-box: fill-box;
  transform-origin: center 78%;
}

.deme-mascot-variant.is-active {
  visibility: visible;
  animation: demeMascotArrive 540ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

.deme-mascot-variant.is-active.is-leaving {
  animation: demeMascotLeave 440ms cubic-bezier(0.55, 0, 0.85, 0.25) both;
}

.deme-mascot-motion,
.deme-mascot-eyes,
.portal-stripes,
.crt-static-a,
.crt-static-b,
.crt-tear,
.toxic-stripes,
.toxic-tear,
.sports-headband {
  transform-box: fill-box;
  transform-origin: center;
}

.mascot-main.is-active .deme-mascot-motion {
  animation: demeMascotHover 3.8s ease-in-out infinite;
}

.mascot-idle.is-active .deme-mascot-motion {
  animation: demeMascotIdle 4.6s ease-in-out infinite;
}

.mascot-bizarre.is-active .deme-mascot-motion {
  animation: demeMascotPortalDrift 3.7s ease-in-out infinite;
}

.mascot-bizarre.is-active .portal-stripes {
  animation: demePortalFlow 2.4s ease-in-out infinite alternate;
}

.mascot-crt.is-active .deme-mascot-motion {
  animation: demeCrtTwitch 1.65s steps(7, end) infinite;
}

.mascot-crt.is-active .crt-static-a {
  animation: demeCrtStaticA 760ms steps(3, end) infinite;
}

.mascot-crt.is-active .crt-static-b {
  animation: demeCrtStaticB 1.05s steps(4, end) infinite;
}

.mascot-crt.is-active .crt-tear {
  animation: demeCrtTear 1.3s steps(4, end) infinite;
}

.mascot-toxic.is-active .deme-mascot-motion {
  animation: demeToxicSnap 2.9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.mascot-toxic.is-active .toxic-stripes {
  animation: demeToxicBands 1.25s linear infinite;
}

.mascot-toxic.is-active .toxic-tear {
  animation: demeToxicTear 1.05s steps(3, end) infinite;
}

.mascot-sports.is-active .deme-mascot-motion {
  animation: demeSportsRun 1.45s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.mascot-sports.is-active .sports-headband {
  animation: demeHeadband 780ms ease-in-out infinite alternate;
}

.deme-mascot-variant.is-active .deme-mascot-eyes {
  animation: demeEyeScan 3.6s ease-in-out infinite;
}

.deme-mascot-loop.is-paused *,
.deme-mascot-loop.is-reduced * {
  animation-play-state: paused !important;
}

@keyframes demeMascotArrive {
  0% { opacity: 0; transform: translate3d(34px, 14px, 0) rotate(9deg) scale(0.72); }
  72% { opacity: 1; transform: translate3d(-3px, -4px, 0) rotate(-2deg) scale(1.04); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}

@keyframes demeMascotLeave {
  from { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
  to { opacity: 0; transform: translate3d(-32px, -10px, 0) rotate(-8deg) scale(0.76); }
}

@keyframes demeMascotHover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(5px, -13px, 0) rotate(2deg); }
}

@keyframes demeMascotIdle {
  0%, 100% { transform: translate3d(-4px, 3px, 0) rotate(-2deg); }
  28% { transform: translate3d(6px, -13px, 0) rotate(2deg); }
  62% { transform: translate3d(12px, -4px, 0) rotate(1deg); }
}

@keyframes demeMascotPortalDrift {
  0%, 100% { transform: translate3d(-5px, 3px, 0) rotate(-2deg); }
  50% { transform: translate3d(8px, -12px, 0) rotate(3deg); }
}

@keyframes demePortalFlow {
  from { transform: translate3d(-55px, -80px, 0) rotate(-5deg); }
  to { transform: translate3d(55px, 95px, 0) rotate(4deg); }
}

@keyframes demeCrtTwitch {
  0%, 100% { transform: translate3d(-4px, 2px, 0) rotate(-1deg); }
  24% { transform: translate3d(7px, -7px, 0) rotate(2deg); }
  52% { transform: translate3d(-8px, -2px, 0) rotate(-2deg); }
  76% { transform: translate3d(4px, -10px, 0) rotate(1deg); }
}

@keyframes demeCrtStaticA {
  0%, 100% { transform: translate3d(-25px, -16px, 0); }
  50% { transform: translate3d(34px, 22px, 0); }
}

@keyframes demeCrtStaticB {
  0%, 100% { transform: translate3d(28px, 18px, 0); }
  50% { transform: translate3d(-38px, -24px, 0); }
}

@keyframes demeCrtTear {
  0%, 100% { transform: translateY(-380px); }
  50% { transform: translateY(420px); }
}

@keyframes demeToxicSnap {
  0%, 100% { transform: translate3d(-8px, 2px, 0) rotate(-2deg); }
  32% { transform: translate3d(14px, -12px, 0) rotate(4deg); }
  66% { transform: translate3d(-2px, -5px, 0) rotate(-1deg); }
}

@keyframes demeToxicBands {
  from { transform: translate3d(-80px, -120px, 0) rotate(-4deg); }
  to { transform: translate3d(80px, 120px, 0) rotate(4deg); }
}

@keyframes demeToxicTear {
  0%, 100% { transform: translateY(-360px); }
  50% { transform: translateY(410px); }
}

@keyframes demeSportsRun {
  0%, 100% { transform: translate3d(-12px, 3px, 0) rotate(-4deg) scaleY(1); }
  25% { transform: translate3d(3px, -12px, 0) rotate(2deg) scaleY(0.97); }
  50% { transform: translate3d(14px, 2px, 0) rotate(5deg) scaleY(1.02); }
  75% { transform: translate3d(1px, -10px, 0) rotate(-1deg) scaleY(0.98); }
}

@keyframes demeHeadband {
  from { transform: translate3d(-8px, 0, 0) rotate(-1deg); }
  to { transform: translate3d(18px, 6px, 0) rotate(3deg); }
}

@keyframes demeEyeScan {
  0%, 100% { transform: translateX(-14px); }
  48% { transform: translateX(15px); }
  66% { transform: translateX(8px); }
}

@media (max-width: 980px) {
  .deme-mascot-loop {
    top: 54px;
    left: max(0px, calc(50% - 285px));
    width: clamp(135px, 22vw, 175px);
  }
}

@media (max-width: 620px) {
  .deme-mascot-loop {
    top: 64px;
    left: 0;
    width: clamp(105px, 30vw, 138px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .deme-mascot-variant,
  .deme-mascot-variant.is-active,
  .deme-mascot-variant.is-active.is-leaving {
    animation: none !important;
  }

  .deme-mascot-variant {
    opacity: 0;
    visibility: hidden;
  }

  .deme-mascot-variant.mascot-main.is-active {
    opacity: 1;
    visibility: visible;
  }
}