/* ============================================
   CSS Variables & Base Styles
   ============================================ */

:root {
  /* Colors */
  --color-background: #ffffff;
  --color-text: #000000;
  --color-accent: #8b5cf6;
  --color-accent-hover: #7c3aed;
  --color-highlight: #a78bfa;

  /* Typography */
  --font-primary: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
    sans-serif;
  --font-heading: "Zalando Sans SemiExpanded", sans-serif;
  --font-size-base: 1rem;
  --font-size-small: 12px;
  --font-size-large: 20px;
  --font-size-h1: 3rem;
  --font-size-h2: 2rem;
  --line-height-base: 1.6;
  --line-height-heading: 1.04;

  /* Layout */
  --container-max-width: 1400px;
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  --spacing-2xl: 6rem;

  /* Transitions */
  --transition-base: 0.3s ease;
}

/* ============================================
   Reset & Base Styles
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  position: relative;
  min-height: 100vh;
}

/* Improved noise texture */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.025;
  pointer-events: none;
  z-index: 1;
}

/* Added highlight styling for text */
.highlight {
  color: var(--color-highlight);
  position: relative;
}

/* ============================================
   Navigation
   ============================================ */

/* Added fixed centered navigation with grid-width background */
.nav {
  position: fixed;
  top: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Estado Final (Pequeno e com Vidro) */
.nav__container {
    background-color: rgba(255, 255, 255, 0.03); /* Fundo Vidro */
    backdrop-filter: blur(12px);                 /* Blur ativado */
    border: 1px solid rgba(255, 255, 255, 0.1);  /* Borda visível */
    border-radius: 50px;
    padding: 0.75rem 2rem;
    display: flex;
    gap: var(--spacing-md);
    max-width: var(--container-max-width);
    /* Prepara para a animação de escala */
    transform-origin: center top; 
    will-change: transform, background-color, border-color;
}

/* Links no tamanho padrão (pequeno) */
.nav__link {
    color: var(--color-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px; /* Tamanho base (pequeno) */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color var(--transition-base);
    display: inline-block; /* Necessário para o scale funcionar bem */
}

.nav__link:hover {
  color: var(--color-accent);
}

/* ============================================
   Container & Layout
   ============================================ */

.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  z-index: 2;
  width: 100%;
}

/* ============================================
   Buttons
   ============================================ */

/* Buttons now rounded with icon animations on hover */
.button {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.875rem 2rem;
  font-size: var(--font-size-base);
  font-weight: 500;
  text-decoration: none;
  border-radius: 50px;
  transition: all var(--transition-base);
  cursor: pointer;
  border: 2px solid transparent;
  overflow: hidden;
  position: relative;
}

.button__text {
  transition: transform var(--transition-base);
  display: inline-block;
}

.button__icon {
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all var(--transition-base);
  position: absolute;
  right: 1rem;
}

.button:hover .button__text {
  transform: translateX(-8px);
}

.button:hover .button__icon {
  opacity: 1;
  transform: translateX(0);
}

.button--primary {
  background-color: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}

.button--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-2px);
  padding-right: 2.5rem;
}

.button--secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}

.button--secondary:hover {
  background-color: var(--color-text);
  color: var(--color-background);
  transform: translateY(-2px);
  padding-right: 2.5rem;
}

/* ============================================
   Hero Section
   ============================================ */

/* Hero now split 50/50 with flexbox layout */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl) 0;
  position: relative;
}

.hero__split {
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
  flex-direction: column;
}

/* Removed max-width from hero content */
.hero__content {
  flex: 1 1 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__media {
  flex: 1 1 50%;
  min-height: 400px;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  width: 100%;
}

.hero__pretitle {
  font-size: 6vw;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--spacing-sm);
  opacity: 0.8;
  /* border: 1px solid var(--color-accent); */
  /* width: fit-content; */
  /* padding: 8px 16px; */
  border-radius: 34px;
  position: absolute;
  top: -40%;
  white-space: nowrap;
  color: #8b5ef417; /* Cor do preenchimento */
   /* Espessura da borda */
   /* Cor da borda */
  font-weight: 900;
  left: 50%;
  transform: translateX(-50%);
}

/* Applied Poetsen One font to hero title */
.hero__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h1);
  line-height: var(--line-height-heading);
  font-weight: 600;
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: -2px;
  /* max-width: 700px; */
}

.hero__subtitle {
  font-size: var(--font-size-large);
  margin-bottom: var(--spacing-md);
  opacity: 0.9;
  /* max-width: 385px; */
}

.hero__actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* ============================================
   About Section
   ============================================ */

/* About section now 50/50 inverted with image on left */
.about {
  padding: var(--spacing-2xl) 0;
  position: relative;
  z-index: 2;
}

.about__split {
  display: flex;
  gap: var(--spacing-xl);
  align-items: center;
  flex-direction: column;
}

.about__media {
  flex: 1;
  width: 100%;
}

.about__image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

.about__content {
  flex: 1;
}

/* Applied Poetsen One font to about title */
.about__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
  font-weight: 400;
  margin-bottom: var(--spacing-md);
  letter-spacing: -1.87px;
}

.about__text {
  font-size: var(--font-size-large);
  margin-bottom: var(--spacing-lg);
  line-height: 1.8;
}

.about__actions {
  display: flex;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
}

/* ============================================
   Gallery Section (Full Width)
   ============================================ */

/* Gallery grid now shows 3 columns on desktop */
.gallery {
  width: 100%;
  padding: var(--spacing-2xl) 0;
  position: relative;
  z-index: 2;
}

/* Added gallery header styling */
.gallery__header {
  max-width: var(--container-max-width);
  margin: 0 auto var(--spacing-xl);
  padding: 0 var(--spacing-md);
}

/* Applied Poetsen One font to gallery title */
.gallery__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-heading);
  font-weight: 400;
}

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.gallery__item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #000000c4;
}

.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--transition-base);
}

.gallery__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.gallery__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  background: linear-gradient(to top, #000000 -47%, transparent 95%);
  opacity: 0;
  transition: opacity var(--transition-base);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.gallery__project-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
}

.gallery__link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-base);
}

.gallery__link:hover {
  color: #f3f4f6;
}

/* Hover Effects */
.gallery__item:hover .gallery__image {
  opacity: 0;
}

.gallery__item:hover .gallery__video {
  opacity: 1;
}

.gallery__item:hover .gallery__overlay {
  opacity: 1;
}

/* ============================================
   Contact Section (Footer)
   ============================================ */

.contact {
  padding: var(--spacing-2xl) 0;
  position: relative;
  z-index: 2;
}

/* Applied Poetsen One font to contact title */
.contact__title {
  font-family: var(--font-heading);
  font-size: 80px;
  line-height: var(--line-height-heading);
  font-weight: 400;
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.contact__subtitle {
  font-size: var(--font-size-large);
  margin: 0 auto;
  margin-bottom: var(--spacing-lg);
  opacity: 0.9;
  max-width: 600px;
  text-align: center;
}

.contact__links {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.contact__link {
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--font-size-large);
  font-weight: 500;
  position: relative;
  transition: color var(--transition-base);
}

.contact__link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-base);
}

.contact__link:hover {
  color: var(--color-accent);
}

.contact__link:hover::after {
  width: 100%;
}

/* ============================================
   Responsive Design (Mobile First)
   ============================================ */

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) {
  .gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  :root {
    --font-size-h1: 4rem;
    --font-size-h2: 44px;
    --spacing-xl: 5rem;
    --spacing-2xl: 8rem;
  }

  .hero__split {
    flex-direction: row;
    width: 100%;
  }

  .about__split {
    flex-direction: row;
  }

  /* Gallery shows 3 columns starting from tablet size */
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  :root {
    --font-size-h1: 4.5rem;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  :root {
    --font-size-h1: 60px;
  }
}
/* Container fixo */
.spotlight-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background-color: var(--color-background); /* Usa seu branco #ffffff */
}

/* O Brilho Roxo que segue o mouse */
.spotlight {
    position: absolute;
    width: 800px;
    height: 800px;
    /* Gradiente usando seu Roxo (#8b5cf6 -> 139, 92, 246) */
    background: radial-gradient(
        circle, 
        rgba(139, 92, 246, 0.15) 0%,   /* Roxo suave no centro (15%) */
        rgba(139, 92, 246, 0.05) 40%,  /* Quase invisível no meio */
        rgba(255, 255, 255, 0) 70%     /* Transparente na borda */
    );
    border-radius: 50%;
    top: 0; 
    left: 0;
    filter: blur(60px); 
    opacity: 0; 
    transition: opacity 0.5s ease;
}
/* --- 1. BLOQUEIO GLOBAL DO CURSOR --- */
html, body, a, button, input, textarea, .gallery__item {
    cursor: none !important; /* Garante que nada mostre a setinha */
}

/* --- 2. A BOLINHA (Cursor Principal - Instantâneo) --- */
.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--color-accent);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    /* IMPORTANTE: NENHUMA TRANSITION AQUI para movimento */
}

/* --- 3. O OUTLINE (Seguidor - Smooth) --- */
.cursor-outline {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    pointer-events: none;
    
    /* Centraliza o texto dentro */
    display: flex;
    justify-content: center;
    align-items: center;

    /* AQUI ESTAVA O BUG: */
    /* Removemos 'transform' e 'all' da transição. */
    /* A transição só deve afetar tamanho e cor, NUNCA a posição. */
    transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                background-color 0.3s,
                border-color 0.3s;
}

/* O resto das classes de hover (hover-link, hover-gallery) continua igual */
/* O Texto "VER" (Começa invisível) */
.cursor-text {
    opacity: 0;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: opacity 0.2s;
}

/* --- ESTADO 1: HOVER EM LINKS (Menu/Botões) --- */
body.hover-link .cursor-outline {
    width: 60px;
    height: 60px;
    background-color: rgba(139, 92, 246, 0.1); /* Roxo bem clarinho */
    border-color: transparent;
}
body.hover-link .cursor-dot {
    transform: translate(-50%, -50%) scale(0.5); /* Bolinha diminui */
}

/* --- ESTADO 2: HOVER NA GALERIA (Botão VER) --- */
body.hover-gallery .cursor-outline {
    width: 80px;
    height: 80px;
    background-color: #000000; /* Preto Sólido */
    border-color: transparent; /* Borda some */
}

body.hover-gallery .cursor-text {
    opacity: 1; /* Texto aparece */
}

body.hover-gallery .cursor-dot {
    opacity: 0; /* Bolinha some para não atrapalhar o texto */
}