/* Enhanced CSS with beautiful typography */

/* Import Google Fonts - Space Grotesk for brand title */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap");

/* Base styles */
* {
  box-sizing: border-box;
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
  
  background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: calc(var(--radius) - 2px);
    border: 1px solid var(--border);
    background-color: var(--background);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
}

.badge-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
    border: none;
}

.badge-outline {
    background-color: transparent;
    color: var(--foreground);
}

.card {
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background-color: var(--card);
    color: var(--card-foreground);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.card-content {
    padding: 1.5rem;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 500;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    outline: none;
    border: 1px solid transparent;
}

.button:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.button-lg {
    height: 2.75rem;
    padding: 0 1.5rem;
    font-size: 1rem;
}

.button-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.button-primary:hover {
    background-color: color-mix(in oklab, var(--primary) 90%, black);
}

/* Beautiful brand title styling */
.brand-title {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-rendering: optimizeLegibility;
  -webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

.brand-title span {
  color: #ffffff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 4px 8px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.brand-title:hover span {
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.4), 0 6px 12px rgba(0, 0, 0, 0.6), 0 3px 6px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}



/* Alternative color options - uncomment to use */
/* 
.brand-title span {
  color: #3b82f6; // Blue
}
*/

/* 
.brand-title span {
  color: #06b6d4; // Cyan
}
*/

/* 
.brand-title span {
  color: #8b5cf6; // Purple
}
*/

/* Enhanced button styles with new color palette */
.btn-primary {
  @apply inline-flex items-center px-8 py-4 bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-semibold rounded-2xl transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shadow-lg hover:shadow-xl;
}

.btn-secondary {
  @apply inline-flex items-center px-8 py-4 bg-white/10 hover:bg-white/20 text-slate-100 hover:text-white font-semibold rounded-2xl transition-all duration-300 transform hover:scale-105 backdrop-blur-sm border border-white/20 hover:border-white/30;
}

/* Dark mode button adjustments */
.dark .btn-primary {
  @apply from-blue-600 to-purple-700 hover:from-blue-700 hover:to-purple-800 focus:ring-offset-slate-900;
}

.dark .btn-secondary {
  @apply bg-slate-800/50 hover:bg-slate-700/50 text-slate-200 hover:text-white border-slate-600/50 hover:border-slate-500/50;
}

/* Header specific styles */
#header {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#header.scrolled {
  background: rgba(15, 23, 42, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Navigation link hover effects */
.nav-link {
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.nav-link:hover::before {
  left: 100%;
}

/* Enhanced animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.4);
  }
}

/* Marquee */


/* Defina a animação para o conteúdo em si */
/* Defina a animação para o conteúdo em si */
.marquee-content {
 animation: marquee 10s linear infinite; /* Ajuste o tempo aqui */
}

.marquee-container {
  overflow-x: hidden;   /* corta só horizontalmente */
  overflow-y: visible;  /* deixa o texto inteiro aparecer */
  width: 100%;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%); /* Altere este valor para -100% */
  }
}



/* Feature cards */
.feature-card {
  will-change: transform;
  transition: all 0.3s ease;
}

.feature-card:hover {
  animation: glow 2s ease-in-out infinite;
}

/* Portfolio items */
.portfolio-item {
  will-change: transform;
  transition: all 0.3s ease;
}

.portfolio-item.hidden {
  display: none;
}

/* ENHANCED DARK MODE STYLES */
.dark {
  background-color: #0f172a;
  color: #f1f5f9;
}

/* Dark mode brand title */
.dark .brand-title span {
  color: #ffffff;
  text-shadow: 0 0 25px rgba(255, 255, 255, 0.4), 0 4px 8px rgba(0, 0, 0, 0.7), 0 2px 4px rgba(0, 0, 0, 0.5);
}

.dark .brand-title:hover span {
  text-shadow: 0 0 35px rgba(255, 255, 255, 0.5), 0 6px 12px rgba(0, 0, 0, 0.8), 0 3px 6px rgba(0, 0, 0, 0.6);
}

/* Updated color palette for dark mode */
.dark .bg-white {
  background-color: #1e293b !important;
}

.dark .bg-gray-50 {
  background-color: #0f172a !important;
}

.dark .bg-gray-100 {
  background-color: #334155 !important;
}

.dark .bg-gray-200 {
  background-color: #475569 !important;
}

.dark .bg-gray-900 {
  background-color: #020617 !important;
}

/* Enhanced text colors */
.dark .text-gray-900 {
  color: #f1f5f9 !important;
}

.dark .text-gray-700 {
  color: #cbd5e1 !important;
}

.dark .text-gray-600 {
  color: #94a3b8 !important;
}

.dark .text-gray-500 {
  color: #64748b !important;
}

.dark .text-gray-400 {
  color: #475569 !important;
}

.dark .text-white {
  color: #f1f5f9 !important;
}

/* Enhanced borders */
.dark .border-gray-200 {
  border-color: #334155 !important;
}

.dark .border-gray-300 {
  border-color: #475569 !important;
}

.dark .border-gray-800 {
  border-color: #1e293b !important;
}

/* Header dark mode enhancements */
.dark header {
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark #header.scrolled {
  background: rgba(2, 6, 23, 0.98) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Enhanced forms dark mode */
.dark input,
.dark textarea {
  background-color: #334155 !important;
  border-color: #475569 !important;
  color: #f1f5f9 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #64748b !important;
}

.dark input:focus,
.dark textarea:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
}

/* Enhanced shadows dark mode */
.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3) !important;
}

.dark .shadow-2xl {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Enhanced gradient backgrounds dark mode */
.dark .from-white {
  --tw-gradient-from: #0f172a !important;
}

.dark .to-gray-50 {
  --tw-gradient-to: #1e293b !important;
}

.dark .from-blue-50 {
  --tw-gradient-from: #1e293b !important;
}

.dark .to-purple-50 {
  --tw-gradient-to: #334155 !important;
}

/* Filter buttons dark mode */
.dark .filter-btn {
  transition: all 0.3s ease;
}

.dark .filter-btn:not(.bg-blue-600) {
  background-color: #334155 !important;
  color: #cbd5e1 !important;
}

.dark .filter-btn:not(.bg-blue-600):hover {
  background-color: #475569 !important;
}

/* Timeline dark mode */
.dark .bg-blue-200 {
  background-color: #1e40af !important;
}

.dark .bg-blue-600 {
  background-color: #2563eb !important;
}

/* Footer dark mode */
.dark footer {
  background-color: #020617 !important;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Loading state */
.loading {
  opacity: 0;
}

.loaded {
  opacity: 1;
  animation: fadeIn 0.6s ease-out;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .marquee-content span {
    font-size: 4rem;
  }

  #header {
    backdrop-filter: blur(15px);
  }
}

/* Performance optimizations */
img {
  max-width: 100%;
  height: auto;
}

/* Custom scrollbar with new colors */
/* Scrollbar geral */
::-webkit-scrollbar {
  width: 10px;   /* largura da barra */
  height: 10px;  /* altura da barra horizontal, se houver */
}

/* Trilha (fundo da barra) */
::-webkit-scrollbar-track {
  background: #f1f5f9; /* cor clara */
}

/* Thumb (a parte que arrasta) */
::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #06b6d4, #2563eb); /* cyan-500 → blue-600 */
  border-radius: 6px;
}

/* Hover no thumb */
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #0891b2, #1d4ed8); /* versões mais escuras */
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #06b6d4 #f1f5f9; /* thumb | track */
}

/* Dark mode */
.dark ::-webkit-scrollbar-track {
  background: #1e293b;
}
.dark ::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #06b6d4, #2563eb);
}


/* Enhanced theme toggle */
#theme-toggle {
  transition: all 0.3s ease;
}

.dark #theme-toggle {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: #fbbf24 !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

.dark #theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Mobile menu enhancements */
.dark #mobile-menu {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Hero video background styles */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hero-section video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  z-index: 1;
}

/* Enhanced hero content styles - Left aligned and smaller */
.hero-section h1 {
  animation: fadeInUp 1s ease-out;
}

.hero-section p {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  animation: fadeInUp 1s ease-out 0.2s both;
}

.hero-section .btn-primary,
.hero-section .btn-secondary {
  animation: fadeInUp 1s ease-out 0.4s both;
}

/* Enhanced fade in up animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced scroll indicator */
@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* Mobile optimizations for left-aligned content */
@media (max-width: 768px) {
  .hero-section {
    min-height: 100vh;
    padding: 0 1rem;
    justify-content: center;
  }

  .hero-section h1 {
    font-size: 2.5rem;
    line-height: 1.1;
  }

  .hero-section p {
    font-size: 1rem;
    line-height: 1.6;
  }
  \ 
  .hero-section .w-full.lg\\:w-1\\/2.xl\\:w-2\\/5 {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .hero-section h1 {
    font-size: 2rem;
  }

  .hero-section p {
    font-size: 0.9rem;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .hero-section video {
    animation: none;
  }

  .animate-bounce {
    animation: none;
  }

  .hero-section h1,
  .hero-section p,
  .hero-section .btn-primary,
  .hero-section .btn-secondary {
    animation: none;
  }

  .nav-link::before {
    transition: none;
  }

  .brand-title span {
    transition: none;
  }

  .brand-title:hover span {
    transform: none;
  }
}

/* Enhanced glassmorphism effects */
.backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Typography performance optimizations */
.brand-title {
  will-change: transform;
}

/* Font loading optimization */
@font-face {
  font-family: "Space Grotesk";
  font-display: swap;
}

/* Entrada suave dos cards */
@keyframes cardFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.portfolio-item { animation: cardFadeIn .6s ease-out both; }

/* Borda gradiente sutil (com máscara, cria “anel” suave) */
.gradient-border::before {
  content: "";
  position: absolute; inset: -1px; border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(34,211,238,.5), rgba(59,130,246,.5));
  -webkit-mask: 
    linear-gradient(#000, #000) content-box, 
    linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  opacity: .25;
  transition: opacity .35s ease, filter .35s ease;
}
.group:hover .gradient-border::before { opacity: .55; filter: saturate(1.2); }

/* Shine da imagem */
.shine {
  position: absolute; inset: 0; pointer-events: none;
}
.shine::before {
  content:"";
  position:absolute; top:0; left:-150%;
  height:100%; width:60%;
  background: linear-gradient(75deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
  transform: skewX(-15deg);
  transition: left .9s cubic-bezier(.22,.7,.25,1);
}
.group:hover .shine::before { left: 130%; }
@media (prefers-reduced-motion: reduce){
  .shine::before { transition: none; }
  .group:hover .shine::before { left: -150%; }
}

/* Botão CTA (gradiente + vidro levinho) */
.cta-btn {
  background-image: linear-gradient(90deg, var(--tw-gradient-from), var(--tw-gradient-to));
  box-shadow: 0 14px 35px -14px rgba(59,130,246,.45);
  backdrop-filter: blur(4px);
}
.cta-btn:hover { transform: translateY(-1px); }

/* Pills de filtro com glass e glow discreto */
.glass-pill {
  color: #0f172a; background: rgba(255,255,255,.7);
  border: 1px solid rgba(2,6,23,.08); backdrop-filter: blur(18px);
  box-shadow: 0 10px 30px -14px rgba(2,6,23,.12);
}
.dark .glass-pill {
  color: #e2e8f0; background: rgba(2,6,23,.55);
  border-color: rgba(255,255,255,.08); box-shadow: 0 18px 45px -16px rgba(0,0,0,.45);
}
.glass-pill.is-active { color: #fff; }
.glass-pill.is-active { background: linear-gradient(90deg, var(--tw-gradient-from), var(--tw-gradient-to)); border-color: transparent; }

.filter-glow {
  position:absolute; inset:-2px; border-radius:999px; pointer-events:none; opacity:0; 
  background: radial-gradient(600px 120px at 50% -20%, rgba(56,189,248,.35), transparent);
  transition: opacity .35s ease;
}
.glass-pill:hover .filter-glow { opacity:.55; }

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  .portfolio-item { animation: none !important; }
  .cta-btn, .glass-pill { transition: none !important; }
}
/* ---------- PORTFÓLIO: POLIMENTO DO MODO CLARO ---------- */

/* Cards: vidro + sombra mais rica no light */
html:not(.dark) #work .portfolio-item{
  background: rgba(255,255,255,.86);
  box-shadow:
    0 8px 24px -12px rgba(2,6,23,.16),
    0 1px 1.5px rgba(2,6,23,.06);
  border-radius: 1.5rem;
}
html:not(.dark) #work .portfolio-item:hover{
  box-shadow: 0 22px 50px -20px rgba(2,6,23,.28);
}

/* Borda gradiente sutil (mais viva no light) */
html:not(.dark) #work .gradient-border::before{
  background: linear-gradient(135deg, rgba(56,189,248,.6), rgba(59,130,246,.6));
  opacity: .35;
}
html:not(.dark) #work .group:hover .gradient-border::before{
  opacity: .6; filter: saturate(1.15);
}

/* Shine da imagem um pouco mais “branco” no light */
html:not(.dark) #work .shine::before{
  background: linear-gradient(75deg, rgba(255,255,255,0), rgba(255,255,255,.28), rgba(255,255,255,0));
}

/* CTA com halo leve no light */
html:not(.dark) #work .cta-btn{
  box-shadow: 0 16px 36px -16px rgba(59,130,246,.45);
}

/* Pills do filtro com vidro + glow */
html:not(.dark) #work .glass-pill{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(2,6,23,.08);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 24px -16px rgba(2,6,23,.12);
}
html:not(.dark) #work .glass-pill.is-active{
  color: #fff; border-color: transparent;
}

/* Glow sutil no hover dos filtros (se já tiver, mantém) */
#work .filter-glow{
  position:absolute; inset:-2px; border-radius:999px; pointer-events:none; opacity:0;
  background: radial-gradient(600px 120px at 50% -20%, rgba(56,189,248,.35), transparent);
  transition: opacity .35s ease;
}
#work .glass-pill:hover .filter-glow{ opacity:.55; }

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce){
  #work .portfolio-item, #work .cta-btn, #work .glass-pill { transition: none !important; }
}
/* Linha da timeline (light + dark) */
.tl-line {
  background-image: linear-gradient(to bottom, rgba(56,189,248,.7), rgba(59,130,246,.9), rgba(79,70,229,.7));
}

/* Conector horizontal até a linha central */
.tl-connector {
  background-image: linear-gradient(90deg, rgba(56,189,248,.7), rgba(59,130,246,.8));
  border-radius: 999px;
}

/* Card com glass + anel gradiente sutil (ótimo no LIGHT) */
.tl-card {
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(2,6,23,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 14px 35px -20px rgba(2,6,23,.18), 0 1px 1.5px rgba(2,6,23,.06);
  position: relative;
}
.tl-card::before {
  content:"";
  position:absolute; inset:-1px; border-radius:16px;
  background: linear-gradient(135deg, rgba(56,189,248,.55), rgba(59,130,246,.55));
  padding:1px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.28; transition: opacity .35s ease, filter .35s ease;
}
.tl-card:hover::before { opacity:.55; filter: saturate(1.1); }

/* Dark mode do card */
.dark .tl-card {
  background: rgba(2,6,23,.55);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 45px -16px rgba(0,0,0,.5);
}

/* Badge do número com anel gradiente e ping sutil */
.tl-badge {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 44px; width: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(56,189,248,.16), rgba(59,130,246,.16));
  box-shadow: 0 6px 18px -10px rgba(2,6,23,.25);
  color: #0f172a;
}
.dark .tl-badge { color: #e2e8f0; }
.tl-num {
  font-weight: 800; font-size: 14px; letter-spacing: .06em;
}
.tl-dot {
  position: absolute; inset: -2px; border-radius: 14px;
  background: conic-gradient(from 0deg, rgba(56,189,248,.65), rgba(59,130,246,.65), rgba(99,102,241,.65), rgba(56,189,248,.65));
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 18px, #000 19px);
          mask: radial-gradient(circle at 50% 50%, transparent 18px, #000 19px);
  animation: tl-pulse 2.8s ease-in-out infinite;
}
@keyframes tl-pulse {
  0%,100% { opacity:.35; transform: scale(1); }
  50%     { opacity:.65; transform: scale(1.03); }
}

/* Mini “imagem” do evento (chip). Se não houver imagem, vira um mesh gradiente */
.img-chip {
  height: 56px; width: 96px; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(2,6,23,.08);
  background: #fff;
  box-shadow: 0 10px 22px -16px rgba(2,6,23,.3);
}
.dark .img-chip { border-color: rgba(255,255,255,.08); background: rgba(255,255,255,.04); box-shadow: 0 14px 28px -18px rgba(0,0,0,.55); }

/* Mesh (fallback visual) — fica lindo no light */
.tl-mesh {
  background:
    radial-gradient(120px 60px at 10% 20%, rgba(56,189,248,.25), transparent 60%),
    radial-gradient(120px 60px at 80% 40%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(180px 80px at 30% 80%, rgba(99,102,241,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));
}
.dark .tl-mesh {
  background:
    radial-gradient(120px 60px at 10% 20%, rgba(56,189,248,.2), transparent 60%),
    radial-gradient(120px 60px at 80% 40%, rgba(59,130,246,.2), transparent 60%),
    radial-gradient(180px 80px at 30% 80%, rgba(99,102,241,.2), transparent 60%),
    linear-gradient(180deg, rgba(15,23,42,.8), rgba(2,6,23,.6));
}

/* Animações do cabeçalho e flutuação */
@keyframes tl-slide-up { from{opacity:0; transform: translateY(12px);} to{opacity:1; transform:none;} }
.animate-tl-slide-up { animation: tl-slide-up .6s cubic-bezier(.22,.7,.25,1) both; }

@keyframes float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.animate-float{ animation: float 8s ease-in-out infinite; }

/* Respeito a reduce-motion */
@media (prefers-reduced-motion: reduce){
  .animate-tl-slide-up, .animate-float, [data-tl-animate] { animation: none !important; transition: none !important; }
}
/* ====== PILLS DO FILTRO (FIXES) ====== */

/* Base legível no LIGHT */
html:not(.dark) #work .glass-pill{
  color:#0f172a; /* texto escuro */
  background: rgba(255,255,255,.85);
  border:1px solid rgba(2,6,23,.08);
  backdrop-filter: blur(18px);
}

/* Base legível no DARK (mantém o que você já tinha) */
.dark #work .glass-pill{
  color:#e2e8f0;
}

/* Estado ATIVO sempre com texto branco */
#work .glass-pill.is-active{
  color:#fff !important;
  border-color: transparent !important;
}

/* Fallback de gradiente NO LIGHT quando as classes from/to do Tailwind não aplicarem */
html:not(.dark) #work .glass-pill.is-active:not(.from-pink-500){
  /* cyan-500 (#06b6d4) -> blue-600 (#2563eb) */
  background: linear-gradient(90deg, #06b6d4, #2563eb) !important;
}
html:not(.dark) #work .glass-pill.is-active.from-pink-500{
  /* pink-500 (#ec4899) -> pink-600 (#db2777) */
  background: linear-gradient(90deg, #ec4899, #db2777) !important;
}

/* No DARK, mantenha seu gradiente normal (se já funciona, não precisa mexer) */
.dark #work .glass-pill.is-active:not(.from-pink-500){
  background: linear-gradient(90deg, #06b6d4, #2563eb);
}
.dark #work .glass-pill.is-active.from-pink-500{
  background: linear-gradient(90deg, #ec4899, #db2777);
}

/* Garanta que o "glow" fique ATRÁS do texto do botão */
#work .glass-pill{ position: relative; }
#work .glass-pill > *{ position: relative; z-index: 1; }
#work .glass-pill .filter-glow{ position: absolute; z-index: 0; }

/* Opcional: ao passar o mouse, aumente um pouco o brilho (sem cobrir o texto) */
#work .glass-pill .filter-glow{
  inset:-2px; border-radius:999px; pointer-events:none; opacity:0;
  background: radial-gradient(600px 120px at 50% -20%, rgba(56,189,248,.35), transparent);
  transition: opacity .35s ease;
}
#work .glass-pill:hover .filter-glow{ opacity:.55; }

/* === Cursor Glow para o card de newsletter === */
.newsletter-card{
  position: relative;
  overflow: hidden;         /* mantém o brilho dentro do retângulo */
  isolation: isolate;       /* blending seguro */
  border-radius: 1.5rem;    /* combina com rounded-3xl do Tailwind */
}

/* garante que o conteúdo fique acima dos pseudo-elementos */
.newsletter-card > *{
  position: relative;
  z-index: 1;
}

/* Halo suave que segue o cursor (fundo) */
.newsletter-card::before{
  content:"";
  position: absolute;
  inset: -2px; /* leve bleed para não cortar no radius */
  pointer-events: none;
  z-index: 0;
  /* tamanho e posição do brilho são controlados por variáveis CSS que o JS atualiza */
  background:
    radial-gradient(160px 160px at var(--gx, 50%) var(--gy, 50%),
      rgba(34,211,238, .20),   /* cyan-500/20 */
      rgba(59,130,246, .18) 35%, /* blue-500/18 */
      transparent 70%);
  filter: blur(22px);
  opacity: var(--go, 0);     /* 0 fora, 1 dentro */
  transition: opacity .25s ease;
  mix-blend-mode: screen;     /* fica bonito no claro e no escuro */
}

/* Anel/brilho na borda próximo ao cursor */
.newsletter-card::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(190px 190px at var(--gx, 50%) var(--gy, 50%),
      rgba(34,211,238, .45),
      rgba(59,130,246, .40) 35%,
      transparent 70%);
  /* cria um "anel" usando máscara (só borda) */
  padding: 1px;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;      /* Safari/Chromium */
          mask-composite: exclude;  /* Firefox */
  filter: blur(10px);
  opacity: var(--go, 0);
  transition: opacity .25s ease;
}

/* Um pouco mais de presença no dark (valores sutis) */
.dark .newsletter-card::before{
  background:
    radial-gradient(170px 170px at var(--gx, 50%) var(--gy, 50%),
      rgba(34,211,238, .25),
      rgba(59,130,246, .22) 35%,
      transparent 70%);
  filter: blur(26px);
}
.dark .newsletter-card::after{
  background:
    radial-gradient(200px 200px at var(--gx, 50%) var(--gy, 50%),
      rgba(34,211,238, .55),
      rgba(59,130,246, .48) 35%,
      transparent 70%);
}

/* Acessibilidade: se o usuário prefere menos movimento, só mantém o fade */
@media (prefers-reduced-motion: reduce){
  .newsletter-card::before,
  .newsletter-card::after{ transition: opacity .2s ease; }
}

/* =========================================================
   NEWSLETTER — ajustes SOMENTE no modo CLARO (html:not(.dark))
   - Mantém o glow azul/ciano no card (sem "estourar" para branco)
   - Troca o brilho do botão de branco -> azul/ciano
   ========================================================= */
html:not(.dark) .newsletter-card::before,
html:not(.dark) .newsletter-card::after{
  /* No light o 'screen' deixava tudo branco; volta ao normal */
  mix-blend-mode: normal;
}

/* Halo (fundo) que segue o mouse — azul/ciano no light */
html:not(.dark) .newsletter-card::before{
  background: radial-gradient(170px 170px at var(--gx,50%) var(--gy,50%),
    rgba(6,182,212,.24),           /* cyan-500/24 */
    rgba(59,130,246,.22) 38%,      /* blue-500/22 */
    transparent 70%);
}

/* Anel/borda luminosa — azul/ciano no light */
html:not(.dark) .newsletter-card::after{
  background: radial-gradient(200px 200px at var(--gx,50%) var(--gy,50%),
    rgba(6,182,212,.48),           /* cyan-500/48 */
    rgba(59,130,246,.45) 38%,      /* blue-500/45 */
    transparent 70%);
}

/* Botão "Se inscreva": overlay (pseudo ::before) azul no light
   (usa !important para vencer o utilitário before:bg-gradient-to-r) */
html:not(.dark) .newsletter-card button[type="submit"]::before{
  background-image: linear-gradient(90deg,
    rgba(6,182,212,.22),           /* cyan-500/22 */
    rgba(59,130,246,.18),          /* blue-500/18 */
    transparent) !important;
}
/* ===== Timeline: linha com fluxo e cometa que acompanha o scroll ===== */

/* Linha central – mantém seu gradiente, acrescenta um "flow" */
.tl-center-line{
  background-image: linear-gradient(to bottom,
    rgba(56,189,248,.65), rgba(59,130,246,.85), rgba(79,70,229,.65));
  border-radius: 999px;
  overflow: hidden;
  opacity: .9;
}
.tl-center-line::after{
  content:"";
  position:absolute; inset:0;
  /* “marching flow” */
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(6,182,212,.35) 0 8px,
    rgba(6,182,212,0) 8px 16px
  );
  -webkit-mask: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  animation: tl-flow 1.2s linear infinite;
  opacity:.55;
}
.dark .tl-center-line::after{
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(148,163,184,.28) 0 8px,
    rgba(148,163,184,0) 8px 16px
  );
  opacity:.35;
}
@keyframes tl-flow { to { background-position-y: 16px; } }

/* Cometa – cabeça + halo + rastro */
.tl-comet{
  --cy: 0px;               /* y dinâmico (JS atualiza) */
  top: var(--cy);
  width: 18px; height: 18px;
  border-radius: 999px;
  transform: translate(-50%, -50%); /* centraliza na linha */
  background:
    radial-gradient(circle at 32% 30%, #fff 0 2px, #67e8f9 2px, #22d3ee 8px, #2563eb 14px);
  box-shadow:
    0 0 0 3px rgba(14,165,233,.16),
    0 0 28px 10px rgba(56,189,248,.28),
    0 10px 24px -12px rgba(2,6,23,.32);
  z-index: 2;
  isolation: isolate;
  will-change: transform, top;
}
.dark .tl-comet{
  box-shadow:
    0 0 0 3px rgba(14,165,233,.22),
    0 0 26px 10px rgba(56,189,248,.24),
    0 16px 34px -16px rgba(0,0,0,.55);
}

/* rastro (um flare vertical suave) */
.tl-comet::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width: 180px; height: 6px;
  transform: translate(-50%, -50%) rotate(90deg);
  background: linear-gradient(90deg, rgba(56,189,248,.55), rgba(59,130,246,.25), transparent 70%);
  filter: blur(10px);
  opacity:.9; pointer-events:none;
  mix-blend-mode: screen;
}

/* micro‑oscilação (vida ao cometa) */
@keyframes comet-wobble {
  0%,100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50%     { transform: translate(-50%, -50%) rotate(4deg); }
}
@media (prefers-reduced-motion: no-preference){
  .tl-comet { animation: comet-wobble 6s ease-in-out infinite; }
}

/* Ping no card quando o cometa passa perto */
.tl-ping{
  position:absolute; inset:-1px; border-radius: 16px;
  pointer-events:none; opacity:0; transform: scale(.98);
  background: radial-gradient(160px 120px at 50% 20%, rgba(56,189,248,.25), transparent 70%);
  transition: opacity .4s ease, transform .4s ease;
  z-index: 0;
}
.is-hit .tl-ping{ opacity:.9; transform: scale(1); }
@media (prefers-reduced-motion: reduce){
  .tl-comet::after { display:none; }
  .tl-center-line::after{ animation: none; }
}

/* (opcional) leve destaque no card “atingido” */
.is-hit{
  box-shadow: 0 18px 50px -18px rgba(59,130,246,.28), 0 0 0 1px rgba(56,189,248,.18);
}


/* Importando fontes do Google */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap");

/* Estilos base */
* {
  box-sizing: border-box;
  
  border-color: var(--border);
    outline-color: var(--ring);
}

body {
  font-family: "Inter", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Personalização das variáveis de tema */
:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.35 0 0);
    --card: oklch(0.98 0 0);
    --card-foreground: oklch(0.35 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.35 0 0);
    --primary: oklch(0.55 0.15 200);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.75 0.12 85);
    --secondary-foreground: oklch(0.35 0 0);
    --muted: oklch(0.98 0 0);
    --muted-foreground: oklch(0.55 0 0);
    --accent: oklch(0.75 0.12 85);
    --accent-foreground: oklch(1 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(1 0 0);
    --border: oklch(0.92 0 0);
    --input: oklch(0.98 0 0);
    --ring: oklch(0.55 0.15 200 / 0.3);
    --radius: 0.5rem;
    --sidebar: oklch(0.98 0 0);
    --sidebar-foreground: oklch(0.35 0 0);
    --sidebar-primary: oklch(0.55 0.15 200);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: oklch(0.75 0 0);
    --sidebar-accent-foreground: oklch(0.35 0 0);
    --sidebar-border: oklch(0.92 0 0);
    --sidebar-ring: oklch(0.55 0 0 / 0.3);
}


.dark {
    --background: #020617;
    --foreground: oklch(0.985 0 0);
    --card: #020617;
    --card-foreground: oklch(0.985 0 0);
    --popover: #020617;
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.65 0.15 200);
    --primary-foreground: #020617;
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.708 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.637 0.237 25.331);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --sidebar: #020617;
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.439 0 0);
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}


/* Estilos de botão */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.button-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.button-primary:hover {
  background-color: color-mix(in oklab, var(--primary) 90%, black);
}
.card .group:hover .group-hover:scale-105 {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}




/* Cards */
.card {
  border-radius: var(--radius);
  background-color: var(--background);
  border: 1px solid var(--border);
  color: var(--foreground);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.card-content {
  padding: 1.5rem;
}

/* Componentes de navegação */
.nav-link {
  position: relative;
  overflow: hidden;
}

.nav-link::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s;
}

.nav-link:hover::before {
  left: 100%;
}

/* Animações */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Marquee */
.marquee-content {
  animation: marquee 10s linear infinite;
}

/* Cards e bordas */
.card:hover {
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
}

.card-content img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
  object-fit: cover;
}

/* Glow para os itens de filtro */
.glass-pill {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(2, 6, 23, 0.08);
  box-shadow: 0 10px 30px -14px rgba(2, 6, 23, 0.12);
  backdrop-filter: blur(18px);
  padding: 8px 16px;
  border-radius: 999px;
}

.glass-pill:hover {
  filter: saturate(1.2);
}

/* Acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce) {
  .marquee-content {
    animation: none;
  }
}

/* Estilos no modo escuro */
.dark .card {
  background-color: oklch(0.145 0 0);
  color: #f1f5f9;
}

.dark .button-primary {
  background-color: oklch(0.65 0.15 200);
  color: oklch(0.145 0 0);
}

.dark .button-primary:hover {
  background-color: oklch(0.65 0.15 200 / 0.8);
}

.dark .glass-pill {
  background: rgba(2, 6, 23, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 45px -16px rgba(0, 0, 0, 0.5);
}


/* Estilos para a galeria de imagens */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Estilos para os cards da galeria */
.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--card);
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.gallery-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px);
}

/* Imagens da galeria */
.gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-image {
    transform: scale(1.05);
}

/* Overlay e informações */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.gallery-info {
    color: white;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.gallery-card:hover .gallery-info {
    transform: translateY(0);
}

.gallery-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.gallery-caption {
    font-size: 0.875rem;
    opacity: 0.9;
    line-height: 1.4;
}

/* Classes utilitárias para tamanhos */
.gallery-item-large {
    grid-column: span 1;
}

.gallery-item-tall {
    height: 320px;
}

.gallery-item-medium {
    height: 280px;
}

@media (min-width: 1024px) {
    .gallery-item-large {
        grid-column: span 2;
    }
}

/* Modo escuro para a galeria */
.dark .gallery-card {
    background-color: var(--card);
    border-color: var(--border);
}

.dark .gallery-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
}

/* Animações suaves */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.gallery-card {
    animation: fadeInUp 0.6s ease-out;
}

/* Para itens com diferentes alturas */
.h-80 {
    height: 20rem;
}

.h-64 {
    height: 16rem;
}

/* Footer - Modo Claro */
html:not(.dark) footer {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-top: 1px solid #e2e8f0 !important;
}

/* Footer - Modo Escuro (manter existente) */
.dark footer {
  background-color: #020617 !important;
  color: #f1f5f9 !important;
}
/* Acessibilidade - reduzir movimento */
@media (prefers-reduced-motion: reduce) {
    .gallery-card,
    .gallery-image,
    .gallery-overlay,
    .gallery-info {
        transition: none;
    }
    
    .gallery-card:hover .gallery-image {
        transform: none;
    }
}


  /* Aplicar cor preta aos SVGs apenas no tema claro */
  @media (prefers-color-scheme: light) {
    .icon-black-on-light svg {
      color: #000 !important;
      fill: #000 !important;
      stroke: #000 !important;
    }
  }