/* Gênesis OS - Global Styles */

:root {
  --color-base: #F2EDE5; /* Cream quente */
  --color-surface: #FFFFFF;
  --color-primary: #0A2540; /* Navy text */
  --color-text-main: #0A2540;
  --color-text-sec: #5c6c7c; 
  --color-border: #E5DFD5;
}

html.dark {
  --color-base: #0A2540; /* Dark navy */
  --color-surface: #112F4E; 
  --color-primary: #F2EDE5; /* Cream text */
  --color-text-main: #F2EDE5;
  --color-text-sec: #9BAEC2; 
  --color-border: rgba(255, 255, 255, 0.1);
}

@layer utilities {
  .glass-panel {
    @apply bg-surface/40 backdrop-blur-md border border-border;
  }
  
  .glass-card {
    @apply bg-surface/30 backdrop-blur-[12px] border border-border shadow-glass transition-all duration-300;
  }
  
  .glass-card:hover {
    @apply -translate-y-1 bg-surface/50 border-primary/30;
  }
  
  .glow-gold {
    text-shadow: 0 0 10px rgba(212, 165, 116, 0.4), 0 0 20px rgba(212, 165, 116, 0.2);
  }
  
  .glow-cyan {
    text-shadow: 0 0 10px rgba(62, 207, 207, 0.4), 0 0 20px rgba(62, 207, 207, 0.2);
  }

  .premium-border {
    position: relative;
  }
  
  .premium-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg, rgba(212,165,116,0.3) 0%, rgba(212,165,116,0) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(139, 139, 154, 0.2);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 165, 116, 0.5);
}

/* Hide scrollbar for main areas but allow scroll */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animations */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

@keyframes pageDropIn {
    0% { opacity: 0; transform: translateY(-15px) scaleX(0.95); }
    100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

.page-animate-in {
    opacity: 0;
    animation: pageDropIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes premium-enter {
  0% { opacity: 0; transform: translateY(20px) scale(0.99); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.view-enter {
  animation: premium-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.sidebar-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(212,165,116,0.2) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.4s ease-out, opacity 0.4s ease-out;
}

.sidebar-btn:active::after {
  transform: translate(-50%, -50%) scale(2);
  opacity: 1;
  transition: 0s;
}

.sidebar-btn:active {
  transform: scale(0.96);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

html.dark body::before {
  opacity: 0.15;
}

/* Logo Animations */
.draw-path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: drawPath 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.fade-dot {
  opacity: 0;
  animation: fadeDot 0.6s ease-out 1.2s forwards;
}
.logo-text-anim {
  opacity: 0;
  animation: fadeLogoText 0.8s ease-out 0.8s forwards;
}
.logo-icon-anim {
  animation: scaleLogoIcon 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes drawPath {
  to { stroke-dashoffset: 0; }
}
@keyframes fadeDot {
  to { opacity: 1; transform: scale(1); }
}
@keyframes fadeLogoText {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleLogoIcon {
  from { transform: scale(0.8) rotate(-15deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}