/* ========================================================
   UNIVERSO DO ÓRION - DESIGN SYSTEM & ESTÉTICA CÓSMICA ACOLHEDORA
   Baseado no Design System da Infinito Soft & Constelação de Órion
   ======================================================== */

@font-face {
  font-family: 'Architype Van Doesburg';
  src: url('assets/fonts/VanDoesburgArchiType.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Cores Centrais */
  --color-blue-night: #010440;
  --color-steel-blue: #5496BF;
  --color-sky-cyan: #82C0D9;
  --color-tech-cyan: #2CD6DC;
  --color-gray-light: #F4F7FA;
  --color-purple-accent: #9333EA;
  --color-purple-light: #C084FC;
  --color-blue-navy: #163E73;
  --color-gold-star: #FBBF24;
  --color-white: #FFFFFF;

  /* Efeitos */
  --shadow-subtle: 0 4px 20px -2px rgba(1, 4, 64, 0.06);
  --shadow-card: 0 10px 30px -4px rgba(1, 4, 64, 0.1);
  --shadow-glow-cyan: 0 0 25px rgba(44, 214, 220, 0.35);
  --shadow-glow-gold: 0 0 20px rgba(251, 191, 36, 0.4);

  /* Tipografia */
  --font-brand: 'Architype Van Doesburg', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Background com Efeito Céu Noturno Suave */
body {
  font-family: var(--font-sans);
  background: radial-gradient(circle at 50% 0%, #0c1a40 0%, #030826 60%, #010440 100%);
  color: #1e293b;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* Tipografia de Marca */
.font-brand {
  font-family: var(--font-brand);
  letter-spacing: 0.05em;
}

/* Efeito de Estrelas Cintilantes no Fundo */
.stars-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: 
    radial-gradient(1.5px 1.5px at 15% 20%, rgba(255, 255, 255, 0.8), transparent),
    radial-gradient(1px 1px at 30% 65%, rgba(130, 192, 217, 0.7), transparent),
    radial-gradient(2px 2px at 45% 15%, rgba(251, 191, 36, 0.9), transparent),
    radial-gradient(1px 1px at 60% 40%, rgba(255, 255, 255, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 75% 85%, rgba(44, 214, 220, 0.8), transparent),
    radial-gradient(2px 2px at 85% 25%, rgba(192, 132, 252, 0.7), transparent),
    radial-gradient(1px 1px at 92% 70%, rgba(255, 255, 255, 0.8), transparent);
  background-size: 550px 550px;
  opacity: 0.8;
  z-index: 0;
  animation: starsFloat 80s linear infinite;
}

@keyframes starsFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-550px); }
}

/* Glassmorphism Suave */
.glass-panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-card-dark {
  background: rgba(1, 4, 64, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(130, 192, 217, 0.25);
}

/* Constelação de Órion - Linhas Conectadas */
.orion-star {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.orion-star:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 10px #2CD6DC);
}

/* Badges e Destaques */
.badge-rapida {
  background-color: #E0F2FE;
  color: #0369A1;
  border: 1px solid #BAE6FD;
}

.badge-apoio {
  background-color: #FEF3C7;
  color: #B45309;
  border: 1px solid #FDE68A;
}

.badge-pernoite {
  background-color: #F3E8FF;
  color: #6B21A8;
  border: 1px solid #E9D5FF;
}

/* Animações e Transições */
.animate-fade-in {
  animation: fadeIn 0.4s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #010440;
}
::-webkit-scrollbar-thumb {
  background: #163E73;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5496BF;
}

/* Moldura Estilo Polaroid Cósmica */
.polaroid-card {
  background: #ffffff;
  padding: 10px 10px 14px 10px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 0 15px rgba(44, 214, 220, 0.2);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.polaroid-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.4), 0 0 25px rgba(44, 214, 220, 0.35);
}

.polaroid-photo-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
  background-color: #0c1a40;
}

.polaroid-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.polaroid-card:hover .polaroid-photo-wrapper img {
  transform: scale(1.05);
}

/* Efeito de fita adesiva suave no topo da foto */
.tape-effect {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 18px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  border: 1px dashed rgba(84, 150, 191, 0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 10;
}

/* Ranking e Pódio dos Guardiões */
.podium-1 {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.25) 0%, rgba(1, 4, 64, 0.7) 100%);
  border: 2px solid rgba(251, 191, 36, 0.7);
  box-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}

.podium-2 {
  background: linear-gradient(180deg, rgba(203, 213, 225, 0.2) 0%, rgba(1, 4, 64, 0.7) 100%);
  border: 2px solid rgba(203, 213, 225, 0.5);
  box-shadow: 0 0 20px rgba(203, 213, 225, 0.2);
}

.podium-3 {
  background: linear-gradient(180deg, rgba(217, 119, 6, 0.2) 0%, rgba(1, 4, 64, 0.7) 100%);
  border: 2px solid rgba(217, 119, 6, 0.5);
  box-shadow: 0 0 20px rgba(217, 119, 6, 0.2);
}

.podium-crown {
  animation: floatCrown 3s ease-in-out infinite;
}

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

/* Calendário de Disponibilidade */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.calendar-day-cell {
  min-height: 72px;
  border-radius: 12px;
  padding: 6px;
  font-size: 11px;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #e2e8f0;
  cursor: pointer;
  background-color: #ffffff;
}

.calendar-day-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(1, 4, 64, 0.08);
}

.calendar-day-cell.selected {
  border-color: #2CD6DC;
  background-color: rgba(44, 214, 220, 0.08);
  box-shadow: 0 0 0 2px rgba(44, 214, 220, 0.4);
}

.calendar-day-cell.past {
  opacity: 0.45;
  background-color: #f8fafc;
  cursor: not-allowed;
}

.calendar-day-cell.blocked {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.calendar-day-cell.has-apoio {
  background-color: #faf5ff;
  border-color: #e9d5ff;
}

.calendar-day-cell.has-visita {
  background-color: #f0f9ff;
  border-color: #bae6fd;
}