/* The landing mascot is layered 2D artwork; no heavy 3D runtime is needed. */
.hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(500px, .95fr);
  gap: clamp(32px, 3.5vw, 70px);
  min-height: max(610px, calc(100svh - 222px));
}

.hero-visual.mascot-stage {
  height: 100%;
  min-height: 600px;
  isolation: isolate;
  perspective: none;
  pointer-events: none;
}

.mascot-stage .hero-glow {
  inset: 12% -7% 2% 0;
  background: radial-gradient(ellipse at 58% 52%, rgba(239, 99, 34, .24), rgba(239, 99, 34, .07) 42%, transparent 70%);
  filter: blur(22px);
}

.mascot-atmosphere {
  position: absolute;
  inset: 7% -7% 1% 2%;
  z-index: -1;
  background:
    radial-gradient(circle at 33% 69%, rgba(34, 198, 246, .13), transparent 19%),
    radial-gradient(circle at 72% 32%, rgba(255, 137, 62, .14), transparent 46%);
}

.mascot-float {
  position: absolute;
  z-index: 1;
  right: -2.5%;
  bottom: -6%;
  width: min(660px, 45vw);
  aspect-ratio: 1145 / 1374;
  animation: mascot-breathe 5s ease-in-out infinite;
}

.mascot-figure {
  position: relative;
  width: 100%;
  height: 100%;
  transform: translate3d(var(--mascot-x, 0px), var(--mascot-y, 0px), 0) rotate(var(--mascot-turn, 0deg));
  transform-origin: 52% 63%;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

.mascot-figure > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.mascot-ribbon {
  z-index: 1;
  transform-origin: 51% 32%;
  animation: mascot-ribbon-sway 3.4s ease-in-out infinite;
}

.mascot-base { z-index: 2; }

.mascot-grin {
  z-index: 3;
  opacity: 0;
  transition: opacity .18s ease-out;
}

.mascot-figure.is-grinning .mascot-grin { opacity: 1; }

.mascot-eye-mask {
  position: absolute;
  inset: 0;
  z-index: 4;
  -webkit-mask-image: url("mascot-eye-mask.png");
  mask-image: url("mascot-eye-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-mode: alpha;
}

.mascot-pupil {
  position: absolute;
  z-index: 4;
  display: block;
  width: 4.1%;
  height: 3.6%;
  border: max(2px, .2vw) solid #0b0d0f;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 34%, #373d42 0 7%, #111619 13% 64%, #080b0d 78%);
  box-shadow: inset -3px -4px 5px rgba(0, 0, 0, .6);
  transform: translate3d(var(--gaze-x, 0px), var(--gaze-y, 0px), 0);
  transition: transform .14s ease-out;
}

.mascot-pupil::after {
  position: absolute;
  top: 15%;
  left: 19%;
  width: 16%;
  height: 15%;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.mascot-pupil-left { top: 44%; left: 30.3%; }
.mascot-pupil-right { top: 39.3%; left: 47.8%; }

.mascot-blink {
  z-index: 5;
  opacity: 0;
  transition: opacity .065s ease-out;
}

.mascot-figure.is-blinking .mascot-blink { opacity: 1; }

.mascot-grip-card {
  position: absolute;
  top: 80.8%;
  left: 47%;
  z-index: 6;
  width: 52%;
  height: 22.6%;
  overflow: hidden;
  border: clamp(3px, .4vw, 5px) solid #657782;
  border-radius: 3.5% 3.5% 0 0 / 7% 7% 0 0;
  background: radial-gradient(circle at 30% 40%, #344755, #1b2932 50%, #101b22);
  box-shadow: inset 0 0 0 9px rgba(10, 17, 22, .6), 0 15px 32px rgba(2, 9, 13, .3);
}

.mascot-grip-card::after {
  position: absolute;
  inset: auto 6% 11%;
  height: 3%;
  border-radius: 99px;
  background: linear-gradient(90deg, #fa7d35 0 42%, #71818a 42%);
  content: "";
}

.mascot-grip-play {
  position: absolute;
  top: 19%;
  left: 15%;
  display: grid;
  width: 18%;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #ff9d43, #d95d23);
  box-shadow: 0 0 20px rgba(254, 126, 53, .25);
}

.mascot-grip-play::after {
  width: 37%;
  height: 42%;
  margin-left: 8%;
  background: #fff;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  content: "";
}

.mascot-glove { z-index: 7; }

.mascot-orb {
  position: absolute;
  top: 53.5%;
  left: 6%;
  z-index: 8;
  width: 25%;
  aspect-ratio: 1;
  transform: translate3d(var(--orb-x, 0px), var(--orb-y, 0px), 0);
  transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 0 14px rgba(68, 225, 255, .72));
}

.mascot-orb > span { position: absolute; display: block; }

.mascot-orb-halo {
  inset: -38%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 242, 255, .36), rgba(47, 186, 241, .13) 42%, transparent 70%);
  animation: mascot-orb-glow 2.8s ease-in-out infinite;
}

.mascot-orb-shell {
  inset: 13%;
  border: 2px solid rgba(204, 255, 255, .9);
  border-radius: 50%;
  background: radial-gradient(circle at 44% 43%, #fff 0 10%, #d5ffff 20%, rgba(51, 218, 255, .8) 42%, rgba(18, 125, 235, .48) 67%, transparent 75%);
  box-shadow: 0 0 16px #73eeff, inset 0 0 20px rgba(236, 255, 255, .95), 0 0 42px rgba(45, 204, 255, .8);
  animation: mascot-orb-glow 2.4s ease-in-out infinite;
}

.mascot-orb-ring {
  inset: 9%;
  border: 3px solid transparent;
  border-top-color: #e2ffff;
  border-right-color: rgba(114, 240, 255, .96);
  border-bottom-color: rgba(31, 167, 245, .85);
  border-radius: 48% 52% 46% 54%;
  box-shadow: 0 0 8px rgba(116, 246, 255, .9);
}

.mascot-orb-ring-one { transform: rotate(-24deg) scaleX(1.16) scaleY(.76); animation: mascot-orbit-one 2.7s linear infinite; }
.mascot-orb-ring-two { inset: 2%; transform: rotate(64deg) scaleX(.83) scaleY(1.1); animation: mascot-orbit-two 3.5s linear infinite; }
.mascot-orb-core { inset: 39%; border-radius: 50%; background: #fff; box-shadow: 0 0 17px 9px #d0ffff; }

.mascot-orb-spark {
  width: 5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #caffff;
  box-shadow: 0 0 10px 3px #60eaff;
  animation: mascot-spark 2s ease-in-out infinite;
}
.mascot-orb-spark-one { top: 5%; left: 17%; }
.mascot-orb-spark-two { top: 71%; right: 0; animation-delay: -.8s; }
.mascot-orb-spark-three { bottom: 2%; left: 15%; animation-delay: -1.35s; }

@keyframes mascot-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
@keyframes mascot-ribbon-sway {
  0%, 100% { transform: rotate(-1.4deg) skewY(-.4deg); }
  50% { transform: rotate(2.3deg) skewY(1deg) translateY(4px); }
}
@keyframes mascot-orb-glow {
  0%, 100% { opacity: .78; scale: .96; }
  50% { opacity: 1; scale: 1.07; }
}
@keyframes mascot-orbit-one { to { rotate: 360deg; } }
@keyframes mascot-orbit-two { to { rotate: -360deg; } }
@keyframes mascot-spark {
  0%, 100% { opacity: .35; scale: .55; }
  50% { opacity: 1; scale: 1.3; }
}

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 12px; min-height: 0; }
  .hero-visual.mascot-stage { height: 580px; min-height: 580px; overflow: hidden; }
  .mascot-float { right: 1%; bottom: -8%; width: min(570px, 76vw); }
}

@media (max-width: 600px) {
  .hero { gap: 0; }
  .hero-visual.mascot-stage { height: 390px; min-height: 390px; }
  .mascot-float { right: -5%; bottom: -6%; width: min(390px, 98vw); }
  .mascot-stage .hero-glow { inset: 11% 0 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .mascot-float,
  .mascot-ribbon,
  .mascot-orb-halo,
  .mascot-orb-shell,
  .mascot-orb-ring,
  .mascot-orb-spark { animation: none !important; }
  .mascot-figure,
  .mascot-pupil,
  .mascot-orb { transition: none !important; }
}