.hero-layout {
  grid-template-columns: 1fr;
}

.hero-visual {
  position: relative;
  --hero-mascot-size: 160px;
  --hero-mascot-offset-x: 0px;
  --hero-mascot-offset-y: 0px;
  --hero-mascot-enter-duration: 720ms;
  --hero-mascot-enter-delay: 80ms;
  --hero-mascot-enter-distance: 10px;
  --hero-mascot-breathe-duration: 7.2s;
  --hero-mascot-breathe-y: -2.2px;
  --hero-mascot-breathe-x: 0.6px;
  --hero-mascot-breathe-rotate: -0.45deg;
  --hero-mascot-breathe-scale: 0.004;
  --hero-mascot-glow-size: 140%;
  --hero-mascot-glow-opacity: 0.42;
  --hero-mascot-glow-blur: 18px;
  --hero-mascot-shadow-opacity: 0.22;
  --hero-mascot-shadow-blur: 18px;
  --hero-mascot-shadow-scale: 1;
  --hero-mascot-shadow-scale-max: 1.06;
  --hero-cta-pulse-duration: 6.4s;
  --hero-visual-gap: 1.25rem;
  gap: var(--hero-visual-gap);
}

.hero-visual > :not(.hero-mascot) {
  position: relative;
  z-index: 1;
}

.hero-mascot {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
  user-select: none;
  width: var(--hero-mascot-size);
  max-width: 100%;
  z-index: 2;
  transform: translate(var(--hero-mascot-offset-x), var(--hero-mascot-offset-y));
}

.hero-visual .hero-mascot {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: end;
  margin-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.hero-mascot-inner {
  width: 100%;
  will-change: transform;
  animation: heroMascotBreathe var(--hero-mascot-breathe-duration) cubic-bezier(0.45, 0.05, 0.2, 1) infinite;
  transform-origin: center bottom;
}

.hero-mascot-stage {
  position: relative;
  display: grid;
  width: 100%;
  align-items: end;
  animation: heroMascotEnter var(--hero-mascot-enter-duration) cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: var(--hero-mascot-enter-delay);
}

.hero-mascot-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: var(--hero-mascot-glow-size);
  height: calc(var(--hero-mascot-glow-size) * 0.7);
  transform: translateX(-50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(37, 99, 235, 0.35),
    rgba(20, 184, 166, 0.12) 55%,
    transparent 70%
  );
  opacity: var(--hero-mascot-glow-opacity);
  filter: blur(var(--hero-mascot-glow-blur));
  z-index: 0;
  pointer-events: none;
}

.hero-mascot-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 72%;
  height: 18%;
  transform: translateX(-50%) scale(var(--hero-mascot-shadow-scale));
  transform-origin: center;
  background: radial-gradient(ellipse at center, rgba(2, 6, 23, 0.32), transparent 70%);
  opacity: var(--hero-mascot-shadow-opacity);
  filter: blur(var(--hero-mascot-shadow-blur));
  animation: heroMascotShadow var(--hero-mascot-breathe-duration) ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

.hero-mascot-frame {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  grid-area: 1 / 1;
  transform: translate3d(var(--hero-mascot-frame-x, 0px), var(--hero-mascot-frame-y, 0px), 0)
    scale(var(--hero-mascot-frame-scale, 1));
  transform-origin: center bottom;
  position: relative;
  z-index: 1;
  will-change: transform;
}

@keyframes heroMascotBreathe {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate3d(var(--hero-mascot-breathe-x), var(--hero-mascot-breathe-y), 0)
      rotate(var(--hero-mascot-breathe-rotate))
      scale(calc(1 + var(--hero-mascot-breathe-scale)));
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes heroMascotEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--hero-mascot-enter-distance), 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroMascotShadow {
  0%,
  100% {
    transform: translateX(-50%) scale(var(--hero-mascot-shadow-scale));
    opacity: var(--hero-mascot-shadow-opacity);
  }
  50% {
    transform: translateX(-50%) scale(var(--hero-mascot-shadow-scale-max));
    opacity: calc(var(--hero-mascot-shadow-opacity) * 0.75);
  }
}

@keyframes heroCtaPulse {
  0%,
  100% {
    box-shadow:
      0 10px 24px rgba(2, 6, 23, 0.12),
      0 0 0 0 rgba(37, 99, 235, 0);
  }
  50% {
    box-shadow:
      0 12px 28px rgba(2, 6, 23, 0.16),
      0 0 0 6px rgba(37, 99, 235, 0.08);
  }
}

#home-hero .ns-btn-primary {
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.12);
  animation: heroCtaPulse var(--hero-cta-pulse-duration) ease-in-out infinite;
}

.hero-mascot.reduced-motion .hero-mascot-inner,
.hero-mascot.reduced-motion .hero-mascot-stage,
.hero-mascot.reduced-motion .hero-mascot-stage::before,
.hero-mascot.reduced-motion .hero-mascot-stage::after {
  animation: none;
}

@media (min-width: 640px) {
  .hero-visual {
    --hero-mascot-size: 180px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    grid-template-rows: auto auto;
  }

  .hero-visual .hero-mascot {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: center;
    margin-top: 0;
    padding-bottom: 0;
  }
}

@media (min-width: 1024px) {
  .hero-layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  }

  .hero-visual {
    --hero-mascot-size: 200px;
    --hero-visual-gap: 1.5rem;
  }
}

@media (min-width: 1280px) {
  .hero-visual {
    --hero-mascot-size: 215px;
  }
}

@media (max-width: 639px) {
  .hero-visual {
    --hero-mascot-size: 130px;
    --hero-visual-gap: 0.75rem;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
    grid-template-rows: auto auto;
  }

  .hero-visual > :first-child {
    grid-column: 1 / -1;
  }

  .hero-visual .hero-mascot {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    justify-self: center;
    align-self: center;
    margin-top: 0;
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-mascot-inner {
    animation: none !important;
  }

  .hero-mascot-stage,
  .hero-mascot-stage::before,
  .hero-mascot-stage::after,
  #home-hero .ns-btn-primary {
    animation: none !important;
  }
}