/* ============================================
   SHARED CSS - Carla Virginia Confeitaria
   ============================================ */

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100vh; font-family: 'Poppins', sans-serif; overflow-x: hidden; }

/* Body */
body {
  position: relative;
  color: #7b2346;
  background:
    radial-gradient(circle at top left, rgba(255,240,245,0.95) 0%, transparent 30%),
    radial-gradient(circle at bottom right, rgba(255,228,236,0.95) 0%, transparent 30%),
    linear-gradient(135deg, #fff8fb 0%, #ffeef4 25%, #fff9fc 50%, #ffe8ef 100%);
  background-size: 120% 120%, 120% 120%, 300% 300%;
  animation: backgroundMove 18s ease infinite;
}

/* Shine effect */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.28) 45%, transparent 100%);
  animation: shine 10s linear infinite;
  pointer-events: none;
  z-index: 0;
}

/* Modal open lock */
body.modal-open { overflow: hidden; }

/* Particles container */
#particles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Sakura particles */
.particle {
  position: absolute;
  opacity: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95) 0%, rgba(255,210,225,0.95) 20%, rgba(255,170,195,0.92) 60%, rgba(255,120,170,0.85) 100%);
  border-radius: 70% 0 70% 0;
  box-shadow: 0 0 12px rgba(255,182,193,0.55), 0 0 25px rgba(255,192,203,0.35);
  animation: sakuraFloat linear infinite;
}

/* Logo box */
.logo-box {
  width: 320px;
  max-width: 100%;
  margin: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-box::before {
  content: '';
  position: absolute;
  width: 110%;
  height: 110%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,192,203,0.35) 0%, rgba(255,192,203,0.08) 45%, transparent 75%);
  filter: blur(25px);
  animation: pulseGlow 4s ease-in-out infinite;
  z-index: 0;
}
.logo-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 10px 20px rgba(214,51,108,0.16));
  animation: floatLogo 6s ease-in-out infinite;
}

/* Brand subtitle */
.brand-subtitle {
  text-align: center;
  color: #9f4c68;
  margin-top: -55px;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 400;
  font-family: 'Parisienne', cursive;
  padding: 0 10px;
  text-shadow: 0 2px 10px rgba(214,51,108,0.08);
}

/* Image Modal */
.image-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(123,35,70,0.42);
  backdrop-filter: blur(14px);
}
.image-modal.active { display: flex; }
.image-modal-box {
  width: min(92vw, 460px);
  position: relative;
  z-index: 100000;
  border-radius: 28px;
  padding: 14px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(255,255,255,0.92);
  box-shadow: 0 24px 70px rgba(123,35,70,0.34);
}
.image-modal-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 22px;
  display: block;
  background: linear-gradient(135deg, #f8bfd0, #ffdae5);
}
.image-modal-title {
  margin-top: 12px;
  text-align: center;
  color: #7b2346;
  font-size: 16px;
  font-weight: 700;
}
.image-modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  z-index: 100001;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #f39ab7, #ffdce7);
  color: #7b2346;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px rgba(214,51,108,0.22);
  cursor: pointer;
}

/* Keyframes */
@keyframes shine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
@keyframes backgroundMove {
  0% { background-position: 0% 0%, 100% 100%, 0% 50%; }
  50% { background-position: 10% 5%, 90% 95%, 100% 50%; }
  100% { background-position: 0% 0%, 100% 100%, 0% 50%; }
}
@keyframes pulseGlow {
  0% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 0.7; }
}
@keyframes floatLogo {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}
@keyframes sakuraFloat {
  0% { transform: translateY(110vh) translateX(0) rotate(0deg) scale(0.7); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateY(45vh) translateX(-35px) rotate(180deg) scale(1.08); }
  100% { transform: translateY(-150px) translateX(-25px) rotate(360deg) scale(0.7); opacity: 0; }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fade in utility */
.fade-in { animation: fadeIn 0.35s ease; }

/* Mobile shared */
@media (max-width: 480px) {
  .logo-box { width: 250px; }
  .brand-subtitle { font-size: 24px; margin-top: -42px; }
}