/* =========================================================
   Eurípedes Júnior — Portfólio
   ========================================================= */
:root {
  --bg: hsl(0 0% 4%);
  --fg: hsl(40 10% 92%);
  --card: hsl(0 0% 7%);
  --secondary: hsl(0 0% 12%);
  --muted-fg: hsl(0 0% 55%);
  --border: hsl(0 0% 16%);
  --primary: hsl(38 80% 55%);
  --primary-h: 38 80% 55%;
  --primary-fg: hsl(0 0% 4%);
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius-xl: 0.75rem;
  --radius-lg: 0.5rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid var(--border); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.sem-rolagem { overflow: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; cursor: pointer; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid hsl(var(--primary-h) / .6); outline-offset: 2px; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: hsl(var(--primary-h) / .3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary-h) / .5); }

/* ---------- Utilitários ---------- */
.container { max-width: 80rem; margin: 0 auto; }
.container--md { max-width: 64rem; }
.container--sm { max-width: 56rem; }
.divisor { width: 6rem; height: 1px; background: hsl(var(--primary-h) / .3); margin: 0 auto; }
.sobretitulo { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: var(--primary); margin-bottom: .75rem; }
.titulo { font-size: 1.875rem; line-height: 1.2; }
.icone-circulo {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: hsl(var(--primary-h) / .1); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s;
}
.icone-circulo--lg { width: 3rem; height: 3rem; }

/* ---------- Navbar ---------- */
.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .5s, border-color .5s, backdrop-filter .5s;
}
.navbar.rolado {
  background: hsl(0 0% 4% / .9);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border-bottom-color: var(--border);
}
.navbar__inner {
  max-width: 80rem; margin: 0 auto; padding: 0 1.5rem; height: 4rem;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar__logo { font-family: var(--font-heading); font-size: 1.125rem; letter-spacing: .05em; color: var(--primary); }
.navbar__links { display: none; align-items: center; gap: 2.5rem; }
.navbar__links a {
  font-size: .875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-fg); transition: color .3s;
}
.navbar__links a:hover { color: var(--primary); }
.navbar__toggle { color: var(--fg); position: relative; z-index: 60; }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: hsl(0 0% 4% / .98);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  opacity: 0; visibility: hidden; transform: translateY(-20px);
  transition: opacity .3s, transform .3s, visibility .3s;
}
.mobile-menu.aberto { opacity: 1; visibility: visible; transform: none; }
.mobile-menu a { font-family: var(--font-heading); font-size: 1.875rem; transition: color .3s; }
.mobile-menu a:hover { color: var(--primary); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; background: linear-gradient(to bottom right, var(--bg), var(--bg), hsl(0 0% 12% / .3)); }
.hero__glow { position: absolute; border-radius: 9999px; filter: blur(64px); pointer-events: none; }
.hero__glow--1 { top: 25%; right: 25%; width: 24rem; height: 24rem; background: hsl(var(--primary-h) / .05); }
.hero__glow--2 { bottom: 25%; left: 25%; width: 16rem; height: 16rem; background: hsl(var(--primary-h) / .03); }
.hero__inner {
  position: relative; z-index: 10; max-width: 64rem; margin: 0 auto;
  padding: 6rem 1.5rem 3rem;
  display: flex; flex-direction: column; align-items: center; gap: 3rem; text-align: center;
}
.hero__foto {
  flex-shrink: 0; width: 10rem; height: 10rem; border-radius: 9999px; overflow: hidden;
  border: 4px solid hsl(var(--primary-h) / .3);
  box-shadow: 0 0 0 4px hsl(var(--primary-h) / .1);
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.hero__sobretitulo { font-size: .875rem; margin-bottom: 1.5rem; }
.hero__nome { font-size: 3rem; font-weight: 500; line-height: 1.25; }
.hero__nome span { color: var(--primary); font-weight: 400; letter-spacing: .02em; }
.hero__desc { color: var(--muted-fg); font-size: 1rem; line-height: 1.625; margin-top: 2rem; max-width: 36rem; }
.hero__desc small { font-size: .875rem; }
.hero__cta { margin-top: 4rem; }
.hero__cta a { display: inline-flex; flex-direction: column; align-items: center; gap: .75rem; color: var(--muted-fg); transition: color .3s; }
.hero__cta a:hover { color: var(--primary); }
.hero__cta span { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; }

@keyframes bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
}
.bounce { animation: bounce 1s infinite; }

/* ---------- Seções ---------- */
.secao { padding: 6rem 1.5rem; }
.secao__cab { margin-bottom: 4rem; }
.secao__cab--sm { margin-bottom: 3rem; }
.secao__cab--centro { text-align: center; }
.secao__cab--centro .titulo { margin-bottom: 1rem; }
.secao__intro { color: var(--muted-fg); max-width: 28rem; margin: 0 auto; }

/* Sobre */
.sobre > * + * { margin-top: 2rem; }
.sobre__item { display: flex; gap: 1.25rem; }
.sobre__item .icone-circulo { margin-top: .25rem; }
.sobre__item h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.sobre__item p { color: var(--muted-fg); font-size: .875rem; line-height: 1.625; }
.sobre__destaque { padding: 1.5rem; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); }
.sobre__destaque h3 { font-size: 1.125rem; color: var(--primary); margin-bottom: .75rem; }
.sobre__destaque p { color: var(--muted-fg); font-size: .875rem; line-height: 1.625; }

/* Portfólio */
.filtros { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 3rem; }
.filtro {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .625rem 1.25rem; border-radius: 9999px; border: 1px solid var(--border);
  color: var(--muted-fg); transition: all .3s;
}
.filtro:hover { border-color: hsl(var(--primary-h) / .5); color: var(--fg); }
.filtro.ativo { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); }

.grid-projetos { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.card-projeto {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  overflow: hidden; border-radius: var(--radius-xl); background: var(--card); text-align: left;
}
.card-projeto.entrando { animation: zoom .4s ease-out both; }
.card-projeto img, .card-projeto video {
  width: 100%; height: 100%; object-fit: cover; transition: transform .7s;
}
.card-projeto:hover img, .card-projeto:hover video { transform: scale(1.05); }
.card-projeto__info {
  position: absolute; inset: 0; padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(to top, hsl(0 0% 4% / .9), hsl(0 0% 4% / .2), transparent);
  opacity: 0; transition: opacity .5s;
}
.card-projeto:hover .card-projeto__info, .card-projeto:focus-visible .card-projeto__info { opacity: 1; }
@media (hover: none) { .card-projeto__info { opacity: 1; background: linear-gradient(to top, hsl(0 0% 4% / .85), transparent 55%); } }
.card-projeto__cat { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--primary); margin-bottom: .25rem; }
.card-projeto__titulo { font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.3; color: var(--fg); }

.behance { text-align: center; margin-top: 4rem; }
.behance a {
  font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg);
  border-bottom: 1px solid hsl(0 0% 55% / .3); padding-bottom: .25rem; transition: color .3s, border-color .3s;
}
.behance a:hover { color: var(--primary); border-color: var(--primary); }

/* Modal */
.modal {
  position: fixed; inset: 0; z-index: 70; padding: 1rem;
  background: hsl(0 0% 4% / .95);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.modal.aberto { opacity: 1; visibility: visible; }
.modal__caixa {
  position: relative; width: 100%; max-width: 64rem; max-height: 90vh; overflow: auto;
  transform: scale(.9); transition: transform .3s;
}
.modal.aberto .modal__caixa { transform: none; }
.modal__fechar {
  position: sticky; top: 0; float: right; z-index: 10;
  width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: var(--card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; transition: color .3s;
}
.modal__fechar:hover { color: var(--primary); }
.modal__cab { margin-bottom: 1.5rem; padding-right: 3.5rem; }
.modal__cab .sobretitulo { letter-spacing: .2em; margin-bottom: .25rem; }
.modal__cab h3 { font-size: 1.5rem; }
.modal__midia { clear: both; }
.modal__midia > * + * { margin-top: 1rem; }
.modal__midia img, .modal__midia video { width: 100%; border-radius: var(--radius-lg); }
.modal__nav { display: flex; justify-content: space-between; margin-top: 2rem; padding-bottom: .5rem; }
.modal__nav button { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--muted-fg); transition: color .3s; }
.modal__nav button:hover { color: var(--primary); }

/* Contato */
.contatos { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.contato {
  display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem;
  border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border);
}
.contato:hover { border-color: hsl(var(--primary-h) / .4); }
.contato:hover .icone-circulo { background: hsl(var(--primary-h) / .2); }
.contato__txt { min-width: 0; display: flex; flex-direction: column; }
.contato__label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: .125rem; }
.contato__valor { overflow-wrap: anywhere; transition: color .3s; }
.contato:hover .contato__valor { color: var(--primary); }

/* Rodapé */
.rodape { border-top: 1px solid var(--border); padding: 2.5rem 1.5rem; }
.rodape__inner { max-width: 80rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.rodape__nome { font-family: var(--font-heading); font-size: 1.125rem; color: var(--primary); letter-spacing: .05em; }
.rodape__copy { font-size: .75rem; color: var(--muted-fg); letter-spacing: .05em; }

/* ---------- Animações ---------- */
@keyframes sobe { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes zoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
.anim-up   { animation: sobe .8s ease-out both; }
.anim-zoom { animation: zoom .8s ease-out both; }
.anim-fade { animation: aparece .8s ease-out both; }
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .6s ease-out, transform .6s ease-out, border-color .3s; }
.reveal.visivel { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
.atraso-1 { transition-delay: .1s; }
.atraso-2 { animation-delay: .2s; transition-delay: .2s; }
.atraso-3 { transition-delay: .3s; }
.atraso-4 { animation-delay: .4s; }
.atraso-8 { animation-delay: .8s; }


/* ---------- Responsivo ---------- */
@media (min-width: 640px) {
  .grid-projetos, .contatos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .navbar__inner { padding: 0 3rem; height: 5rem; }
  .navbar__logo { font-size: 1.25rem; }
  .navbar__links { display: flex; }
  .navbar__toggle { display: none; }
  .hero__inner { flex-direction: row; text-align: left; padding-top: 0; padding-bottom: 0; }
  .hero__foto { width: 14rem; height: 14rem; }
  .hero__sobretitulo { font-size: 1rem; }
  .hero__nome { font-size: 4.5rem; }
  .hero__desc { font-size: 1.125rem; }
  .secao { padding: 8rem 1.5rem; }
  .titulo { font-size: 3rem; }
  .sobre__item p { font-size: 1rem; }
  .modal { padding: 2rem; }
  .modal__cab h3 { font-size: 1.875rem; }
  .rodape__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
@media (min-width: 1024px) {
  .grid-projetos { grid-template-columns: repeat(3, 1fr); }
  .hero__nome { font-size: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}