/* Sleeping-mouse hero advertisement */
.no-mouse-sticker-ad {
  display: inline-flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem 1.25rem 0.85rem;
  margin: 1.5rem 0 2rem;
  background: linear-gradient(145deg, #1e1e2e 0%, #181825 100%);
  border: 2px dashed rgba(245, 169, 127, 0.6);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(245, 194, 231, 0.12);
  transform: rotate(-2deg);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.no-mouse-sticker-ad:hover {
  transform: rotate(0deg) scale(1.03) translateY(-3px);
  border-color: #f5a97f;
  border-style: solid;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(245, 169, 127, 0.35);
}

.no-mouse-sticker-ad::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 12px;
  background: rgba(245, 169, 127, 0.45);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.no-mouse-sticker-tag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #f5c2e7;
  text-transform: uppercase;
}

.no-mouse-sticker-tag span { color: #f5a97f; }

.no-mouse-sticker-main {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  text-transform: uppercase;
}

.sleeping-mouse-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 54px;
  width: 54px;
  height: 44px;
  position: relative;
  filter: drop-shadow(0 3px 8px rgba(245, 194, 231, 0.4));
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sleeping-mouse-svg {
  display: block;
  width: 54px;
  height: 44px;
  overflow: visible;
}

.mouse-body {
  transform-box: fill-box;
  transform-origin: center;
  animation: mouseBreathe 2.2s ease-in-out infinite;
}

.mouse-tail {
  stroke-dasharray: 36;
  animation: tailDream 2.2s ease-in-out infinite;
}

.no-mouse-sticker-ad:hover .sleeping-mouse-container {
  transform: scale(1.15) rotate(4deg);
}

.sleeping-z {
  fill: none;
  stroke: #f5a97f;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: fill-box;
  transform-origin: center;
  animation: zFloat 2.4s infinite ease-in-out;
}
.sleeping-z-two { animation-delay: .45s; }
.sleeping-z-three { stroke: #f5c2e7; animation-delay: .9s; }

@keyframes zFloat {
  0%, 100% { opacity: 0.22; transform: translateY(2px) scale(.88); }
  50% { opacity: 1; transform: translateY(-3px) scale(1); }
}

@keyframes mouseBreathe { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(.96); } }
@keyframes tailDream { 0%,100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 5; } }

.no-mouse-sticker-sub {
  margin: 0;
  font-family: var(--mono, "JetBrains Mono", monospace);
  font-size: 0.76rem;
  font-weight: 500;
  color: #bac2de;
  letter-spacing: 0.02em;
}

.no-mouse-sticker-sub em {
  font-style: normal;
  color: #f5a97f;
  font-weight: 700;
}

@media (max-width: 480px) {
  .no-mouse-sticker-ad {
    width: 100%;
    padding-inline: 1rem;
    transform: rotate(-1deg);
  }

  .no-mouse-sticker-main {
    gap: 0.5rem;
    font-size: 1.05rem;
    flex-wrap: nowrap;
  }

  .no-mouse-sticker-sub {
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mouse-body, .mouse-tail, .sleeping-z { animation: none; }
}