html,
body {
  overflow-x: hidden;
}

@media (min-width: 1024px) {
  #top::before {
    content: "";
    position: absolute;
    left: 3rem;
    top: 9rem;
    bottom: auto;
    z-index: 1;
    width: min(20vw, 350px);
    aspect-ratio: 1198 / 1313;
    background: url("/mascots/kitty-sentada.png") center bottom / contain no-repeat;
    opacity: 0.96;
    pointer-events: none;
    filter: drop-shadow(0 22px 38px rgba(233, 154, 188, 0.12));
  }

  .hero-art-right {
    width: min(20vw, 300px) !important;
    right: 1.5rem !important;
    top: 10.5rem !important;
  }

  .gs-lateral img[src="/mascots/kitty-holding.png"],
  img[src="/mascots/kitty-holding.png"],
  img[alt="Kitty segurando painel"] {
    height: 650px !important;
    max-height: 650px !important;
    max-width: none !important;
  }
}

@media (max-width: 1023px) {
  .hero-art-right {
    width: min(42vw, 180px) !important;
    right: 0 !important;
    top: 12.5rem !important;
    overflow: hidden;
  }

  .gs-lateral {
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .gs-lateral img[src="/mascots/kitty-holding.png"],
  img[src="/mascots/kitty-holding.png"],
  img[alt="Kitty segurando painel"] {
    height: 340px !important;
    max-height: 340px !important;
    max-width: min(100%, 280px) !important;
    width: auto !important;
  }
}

.foot-line:has(> img[src="/mascots/kitty-deitada.png"]) {
  margin-top: 10rem !important;
}

img[src="/mascots/kitty-deitada.png"],
img[alt="Kitty deitada sobre a borda"] {
  left: 50% !important;
  width: 160px !important;
  max-width: 160px !important;
  height: auto !important;
  transform: translate(-50%, -90%) !important;
}

@media (min-width: 640px) {
  .foot-line:has(> img[src="/mascots/kitty-deitada.png"]) {
    margin-top: 11rem !important;
  }
  img[src="/mascots/kitty-deitada.png"],
  img[alt="Kitty deitada sobre a borda"] {
    width: 180px !important;
    max-width: 180px !important;
  }
}

@media (min-width: 768px) {
  img[src="/mascots/kitty-deitada.png"],
  img[alt="Kitty deitada sobre a borda"] {
    left: 40% !important;
    width: 200px !important;
    max-width: 200px !important;
  }
}

.mouse-follow-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --move-x: 0px;
  --move-y: 0px;
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  max-width: 100%;
  transform: perspective(1000px) translate3d(var(--move-x), var(--move-y), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 180ms ease-out, box-shadow 180ms ease-out;
  will-change: transform;
}

.mouse-follow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--glow-x) var(--glow-y), rgba(233, 154, 188, 0.14), transparent 48%);
  opacity: 0;
  transition: opacity 180ms ease-out;
}

.mouse-follow-card.is-following-mouse {
  border-color: rgba(233, 154, 188, 0.22) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.48), 0 0 42px rgba(233, 154, 188, 0.08);
  transition-duration: 80ms, 180ms, 180ms;
}

.mouse-follow-card.is-following-mouse::after {
  opacity: 1;
}

@keyframes kitty-bow-float{0%,100%{transform:translateY(0) rotate(var(--bow-rot,0deg));}50%{transform:translateY(-8px) rotate(var(--bow-rot,0deg));}}
@keyframes kitty-bow-pulse{0%,100%{opacity:var(--bow-op,.45);transform:translateY(0) rotate(var(--bow-rot,0deg)) scale(1);}50%{opacity:calc(var(--bow-op,.45)*1.25);transform:translateY(-6px) rotate(var(--bow-rot,0deg)) scale(1.08);}}
.kitty-bow{position:absolute;line-height:1;user-select:none;pointer-events:none;animation:kitty-bow-pulse var(--bow-dur,3.5s) ease-in-out infinite;animation-delay:var(--bow-delay,0s);will-change:transform,opacity;}
@keyframes kitty-tagline-in{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:translateY(0);}}
.kitty-tagline-word{display:inline-block;animation:kitty-tagline-in .55s ease-out both;}