@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* --- Configurações Globais (Matte Black Theme) --- */
:root {
  --brand-bg: #050505;
  --brand-card: #121212;
  --brand-border: #222222;
  --brand-pink: #FF4D8D;
  --brand-pink-light: #FF86B6;
  --brand-glow: rgba(255, 77, 141, 0.4);
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--brand-bg);
  /* Fundo sutil para não brigar com o conteúdo */
  background-image: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #050505 60%);
  color: #f0f0f0;
  overflow-x: hidden;
}

/* --- Glassmorphism --- */
.glass-card {
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--brand-border);
  transition: all 0.3s ease;
}
.glass-card:hover {
  border-color: rgba(255, 77, 141, 0.3);
}

/* --- Input File Customizado --- */
input[type="file"] { display: none; }

/* --- Scrollbar Customizada --- */
.custom-scroll::-webkit-scrollbar { width: 4px; }
.custom-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
.custom-scroll::-webkit-scrollbar-thumb { background: var(--brand-pink); border-radius: 4px; }

/* --- ANIMAÇÕES --- */

/* 1. Slideshow Suave */
.slider-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}
.slide-image {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.5s ease-in-out, transform 6s ease; /* Zoom lento */
  transform: scale(1);
}
.slide-image.active {
  opacity: 1;
  transform: scale(1.05); /* Leve zoom in quando ativo */
}

/* 2. Corações Flutuantes */
.floating-heart {
  position: absolute;
  bottom: 0;
  font-size: 1.5rem;
  pointer-events: none;
  animation: floatUp 2.5s ease-out forwards;
  z-index: 50;
  filter: drop-shadow(0 0 5px rgba(255, 77, 141, 0.8));
}
@keyframes floatUp {
  0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 0; }
  20% { opacity: 1; transform: translateY(-30px) scale(1.2) rotate(10deg); }
  100% { transform: translateY(-200px) scale(0.8) rotate(-10deg); opacity: 0; }
}

/* 3. Modal Overlay */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  opacity: 0; visibility: hidden;
  transition: all 0.3s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal-content { 
  transform: scale(0.95) translateY(20px); 
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Efeito Bouncy */
}
.modal-overlay.open .modal-content { transform: scale(1) translateY(0); }

/* 4. Background Animado do Preview (Celular) */
.animated-bg-gradient {
  background: linear-gradient(-45deg, #121212, #1a0b14, #0f1426, #000000);
  background-size: 400% 400%;
  animation: gradient-xy 15s ease infinite;
}
@keyframes gradient-xy {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 5. Utilitários */
.animate-sweep { animation: sweep 0.4s ease-out forwards; }
@keyframes sweep {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Equalizador de Música (Visual Premium) */
.music-bar {
  width: 3px;
  background-color: var(--brand-pink);
  animation: equalize 1s infinite;
}
@keyframes equalize {
  0% { height: 5px; }
  50% { height: 15px; }
  100% { height: 5px; }
}

/* --- Scroll Invisível para o Celular --- */
.phone-scroll-area {
  overflow-y: auto; /* Permite rolar verticalmente */
  scrollbar-width: none; /* Firefox: esconde a barra */
  -ms-overflow-style: none; /* IE/Edge: esconde a barra */
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 20px; /* Espaço extra no final */
}

/* Chrome/Safari: esconde a barra */
.phone-scroll-area::-webkit-scrollbar {
  display: none;
}