/* src/styles.scss */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.app-loading {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  overflow: hidden;
}
.app-loading::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(
      circle,
      rgba(233, 30, 99, 0.1) 1px,
      transparent 1px);
  background-size: 50px 50px;
  animation: float-particles 20s linear infinite;
  opacity: 0.5;
  pointer-events: none;
}
.app-loading .spinner {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 2rem;
}
.app-loading .spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #e91e63;
  border-right-color: #e91e63;
  animation: spin 1.2s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite;
}
.app-loading .spinner::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-bottom-color: #ff6b9d;
  border-left-color: #ff6b9d;
  animation: spin 0.8s cubic-bezier(0.5, 0.2, 0.5, 0.8) infinite reverse;
}
.app-loading .spinner-heart {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #e91e63;
  animation: pulse-heart 1.5s ease-in-out infinite;
}
.app-loading .logo-text {
  color: #fff;
  font-family:
    "Georgia",
    "Times New Roman",
    serif;
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  position: relative;
  animation: fade-in 1s ease-out;
  background:
    linear-gradient(
      135deg,
      #fff 0%,
      #ff6b9d 50%,
      #e91e63 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.app-loading .logo-text::after {
  content: "Yuumi";
  position: absolute;
  left: 0;
  top: 0;
  filter: blur(20px);
  opacity: 0.5;
  background:
    linear-gradient(
      135deg,
      #e91e63,
      #ff6b9d);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: -1;
}
.app-loading .loading-text {
  margin-top: 1rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: "Arial", sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  animation: pulse-opacity 2s ease-in-out infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse-heart {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes pulse-opacity {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
@keyframes float-particles {
  from {
    transform: translate(-25%, -25%);
  }
  to {
    transform: translate(0%, 0%);
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */