@charset "UTF-8";

.contact-mascot-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 510px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 38px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.075) 1px, transparent 1px),
    linear-gradient(138deg, #3211a8 0%, #6533f5 48%, #1bc9e6 125%);
  background-size: 32px 32px, 32px 32px, auto;
  box-shadow: 0 30px 76px rgba(62, 28, 145, 0.28);
}

.contact-mascot-scene::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -26%;
  right: -13%;
  width: 68%;
  aspect-ratio: 1;
  border-radius: 44% 56% 62% 38% / 53% 43% 57% 47%;
  background: linear-gradient(135deg, rgba(255, 215, 74, 0.92), rgba(255, 92, 173, 0.82));
  transform: rotate(18deg);
  filter: blur(1px);
}

.contact-mascot-scene::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: -12%;
  bottom: -35%;
  width: 65%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 32px rgba(255, 255, 255, 0.06),
    0 0 0 70px rgba(255, 255, 255, 0.035);
}

.contact-mascot-scene__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.contact-mascot-scene__glow--one {
  top: -12%;
  left: -7%;
  width: 48%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(121, 88, 255, 0.9), rgba(88, 44, 220, 0));
}

.contact-mascot-scene__glow--two {
  right: -3%;
  bottom: -8%;
  width: 43%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(39, 234, 226, 0.72), rgba(39, 200, 231, 0));
}

.contact-mascot-scene__streak {
  position: absolute;
  z-index: 2;
  height: 10px;
  border-radius: 999px;
  background: #ffd84d;
  box-shadow: 0 0 18px rgba(255, 216, 77, 0.5);
  transform: rotate(-28deg);
}

.contact-mascot-scene__streak--one {
  top: 30%;
  left: 7%;
  width: 54px;
}

.contact-mascot-scene__streak--two {
  top: 37%;
  left: 4%;
  width: 28px;
  height: 7px;
  background: #ff68b6;
}

.contact-mascot-scene__spark {
  position: absolute;
  z-index: 3;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.72);
}

.contact-mascot-scene__spark--one {
  top: 8%;
  left: 8%;
  font-size: 34px;
}

.contact-mascot-scene__spark--two {
  top: 42%;
  right: 4%;
  color: #ffd84d;
  font-size: 27px;
}

.contact-mascot-scene__spark--three {
  left: 45%;
  bottom: 12%;
  color: #6ff5f1;
  font-size: 20px;
}

.contact-mascot-scene__city {
  position: absolute;
  z-index: 1;
  right: -10%;
  bottom: -3%;
  width: 88%;
  max-width: none;
  opacity: 0.19;
  filter: brightness(1.5) saturate(0) drop-shadow(0 18px 24px rgba(20, 5, 80, 0.18));
}

.contact-mascot-scene__bear {
  position: absolute;
  z-index: 4;
  top: -5px;
  left: -8%;
  width: 72%;
  max-width: none;
  filter: drop-shadow(0 26px 22px rgba(25, 8, 91, 0.36));
  transform-origin: 48% 85%;
}

.contact-mascot-scene__message {
  position: absolute;
  z-index: 7;
  top: 8%;
  right: 5%;
  width: 50%;
  padding: 21px 23px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 24px 24px 8px 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 44px rgba(30, 10, 99, 0.24);
  backdrop-filter: blur(12px);
}

.contact-mascot-scene__message::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -11px;
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(255, 255, 255, 0.72);
  border-bottom: 2px solid rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.94);
  transform: rotate(45deg);
}

.contact-mascot-scene__message span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  color: #6533f5;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.contact-mascot-scene__message span::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #21dba9;
  box-shadow: 0 0 0 5px rgba(33, 219, 169, 0.14);
}

.contact-mascot-scene__message strong {
  display: block;
  color: #24106b;
  font-family: 'ExoBold', 'Exo', Arial, sans-serif;
  font-size: clamp(21px, 1.7vw, 31px);
  line-height: 1.12;
}

.contact-mascot-scene__flow {
  position: absolute;
  z-index: 6;
  right: 5%;
  bottom: 8%;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 999px;
  background: rgba(29, 12, 103, 0.56);
  color: #fff;
  box-shadow: 0 12px 30px rgba(25, 8, 91, 0.23);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  backdrop-filter: blur(10px);
}

.contact-mascot-scene__flow b {
  color: #ffd84d;
  font-size: 16px;
}

.contact-mascot-scene__chip {
  position: absolute;
  z-index: 6;
  right: 6%;
  padding: 9px 15px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 11px 28px rgba(25, 8, 91, 0.2);
  color: #39227d;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.contact-mascot-scene__chip::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6533f5, #20cfe6);
  box-shadow: 0 0 0 4px rgba(101, 51, 245, 0.1);
}

.contact-mascot-scene__chip--one {
  top: 44%;
}

.contact-mascot-scene__chip--two {
  top: 55%;
  right: 11%;
}

.contact-mascot-scene__chip--three {
  top: 66%;
}

@media screen and (max-width: 1280px) {
  .contact-mascot-scene {
    min-height: 450px;
  }

  .contact-mascot-scene__bear {
    top: 1%;
    width: 74%;
  }

  .contact-mascot-scene__message {
    width: 53%;
    padding: 17px 18px;
  }

  .contact-mascot-scene__chip {
    padding: 7px 11px;
    font-size: 10px;
  }

  .contact-mascot-scene__flow {
    gap: 5px;
    padding: 8px 10px;
    font-size: 8px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .contact-mascot-scene__bear {
    animation: contactBearEnergy 4.4s ease-in-out infinite;
  }

  .contact-mascot-scene__message {
    animation: contactBubbleFloat 3.6s ease-in-out infinite;
  }

  .contact-mascot-scene__chip--one {
    animation: contactChipFloat 3.2s ease-in-out infinite;
  }

  .contact-mascot-scene__chip--two {
    animation: contactChipFloat 3.8s ease-in-out -1.2s infinite;
  }

  .contact-mascot-scene__chip--three {
    animation: contactChipFloat 3.4s ease-in-out -2.1s infinite;
  }

  .contact-mascot-scene__spark {
    animation: contactSparkPulse 2.2s ease-in-out infinite;
  }
}

@keyframes contactBearEnergy {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-10px) rotate(1.2deg); }
}

@keyframes contactBubbleFloat {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(0.7deg); }
}

@keyframes contactChipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes contactSparkPulse {
  0%, 100% { opacity: 0.48; transform: scale(0.78) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.16) rotate(18deg); }
}