/* home.css — estilos exclusivos da página inicial */

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

:root {
  --bg: #000; --fg: #f0f0f0; --muted: #666;
  --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --side: 5.208vw; --gap: 6.354vw; --row-gap: 4.5vw;
  --c28: 88.958vw; --c19: 60.365vw; --c18: 57.188vw;
  --c13: 41.302vw; --c8: 25.417vw; --c7: 22.24vw;
}

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ── Focus (acessibilidade de teclado) ──────────────────────────────────── */
:focus-visible {
  outline: 2px solid #F60028;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Cursor ─────────────────────────────────────────────────────────────── */
#cursor { position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); }
#eye-svg {
  overflow: visible;
  transition: width 0.3s cubic-bezier(.16,1,.3,1), height 0.3s cubic-bezier(.16,1,.3,1);
}

/* ── Scroll container ───────────────────────────────────────────────────── */
#scroll-container { position: fixed; top: 0; left: 0; width: 100%; will-change: transform; }

/* ── Header ─────────────────────────────────────────────────────────────── */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 0.833vw 1.458vw;
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 1.667vw; width: auto; display: block; }
.nav-center { display: flex; justify-content: center; }
.nav-right  { display: flex; justify-content: flex-end; gap: 1.5em; }
header a {
  font-size: 0.677vw; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #fff; text-decoration: none; opacity: .9;
}
header a:hover { opacity: 1; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative; width: 100%; height: 95vh; overflow: hidden; background: #000;
}
.hero video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 177.78vh; height: 56.25vw; min-width: 100%; min-height: 100%;
  object-fit: cover; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,.25); pointer-events: none;
}

/* ── Hero logo ──────────────────────────────────────────────────────────── */
.hero-logo { position: fixed; bottom: var(--side); left: var(--side); z-index: 50; }
.hero-logo img { width: 11.979vw; height: auto; display: block; }

/* ── Bio pill ───────────────────────────────────────────────────────────── */
.hero-bio {
  position: absolute; bottom: calc(var(--side) - 0.781vw); right: var(--side);
  z-index: 10; background: transparent; border: 0.1rem solid #fff;
  border-radius: 99vw; padding: 0.5rem 1.5rem;
  font-size: 1.5rem; font-weight: 400; color: #fff;
  letter-spacing: -0.02em; line-height: 1; white-space: nowrap;
}

/* ── Arrow ──────────────────────────────────────────────────────────────── */
.arrow-wrap { height: 5vh; display: flex; align-items: center; justify-content: center; }
.arrow-wrap svg { width: 1.354vw; height: 1.354vw; animation: arrowBounce 2s ease-in-out infinite; }
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50%       { transform: translateY(0.365vw); opacity: .4; }
}

/* ── Grid ───────────────────────────────────────────────────────────────── */
.grid-section { padding: calc(var(--row-gap) * 0.5) var(--side) calc(var(--row-gap) * 1.5) var(--side); }
.grid { display: flex; flex-direction: column; gap: var(--row-gap); }
.row  { display: flex; gap: var(--gap); align-items: flex-start; }

.thumb {
  flex-shrink: 0; border-radius: 0.744vw; overflow: hidden; background: #1c1c1c;
  position: relative; aspect-ratio: 16/9; display: block; text-decoration: none; opacity: 0;
}
.thumb > img, .thumb > video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: opacity .3s ease;
}
.thumb:hover > img, .thumb:hover > video { opacity: .75; }

/* ── Award logos overlay ────────────────────────────────────────────────── */
.thumb-awards {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1.5vw;
  padding: 2.5vw 1.5vw 0.9vw;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.55));
  pointer-events: none;
}
.thumb-awards img {
  height: 20px;
  width: auto;
  max-width: 62px;
  object-fit: contain;
  object-position: center;
  filter: brightness(0) invert(1);
  opacity: 0.65;
  display: block;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}
.thumb:hover .thumb-awards img { opacity: 0.9; }

.w28 { width: var(--c28); } .w19 { width: var(--c19); } .w18 { width: var(--c18); }
.w13 { width: var(--c13); } .w8  { width: var(--c8);  } .w7  { width: var(--c7);  }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer {
  border-top: 1px solid #1a1a1a; padding: 1.458vw 1.667vw;
  display: flex; justify-content: space-between;
  font-size: 0.573vw; color: var(--muted); letter-spacing: .04em; text-transform: uppercase;
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--fg); }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  * { cursor: auto !important; }
  #cursor { display: none; }

  body { overflow: auto; }
  #scroll-container { position: relative; top: auto; left: auto; width: auto; will-change: auto; transform: none !important; }

  header { padding: 14px 20px; }
  .nav-logo img { height: 5vw; }
  header a { font-size: 11px; }

  .hero { height: 56.25vw; }
  .hero-logo img { width: 28vw; }
  .hero-bio { font-size: 3.5vw; padding: 0.4rem 1rem; }

  .arrow-wrap svg { width: 5vw; height: 5vw; }

  .grid-section { padding: 4vw 5vw 8vw; }
  .row { flex-direction: column; gap: 4vw; }
  .w28, .w19, .w18, .w13, .w8, .w7 { width: 100%; }

  footer { padding: 4vw 5vw; font-size: 2.5vw; }

  .thumb-awards { gap: 3vw; padding: 8vw 3vw 3vw; }
  .thumb-awards img { height: 3.5vw; min-height: 10px; max-height: 18px; max-width: 14vw; }
}