/* ============================================
   HERO FULLSCREEN — intro cinematográfica
   ============================================ */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

/* Imagem de fundo */
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Estado inicial — GSAP libera de cima pra baixo */
  clip-path: inset(0 0 100% 0);
  will-change: clip-path;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Zoom inicial: GSAP traz pra scale(1) */
  transform: scale(1.08);
  will-change: transform;
}

/* Grain sutil pra reforçar a vibe cinematográfica */
.hero__grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.08'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0;
}

/* Título "Portfólio" centralizado, blend mode difference */
.hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(7rem, 24vw, 26rem);
  line-height: 1.4;
  padding: 0.2em 0.1em;
  color: #FFFFFF;
  mix-blend-mode: difference;
  z-index: 10;
  white-space: nowrap;
  letter-spacing: -0.02em;
  margin: 0;
  /* Estado inicial: oculto (GSAP revela como handwriting) */
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  pointer-events: none;
}

/* Mantém o span interno funcionando como bloco animável */
.hero__title-text {
  display: inline-block;
}

/* Nome no canto inferior esquerdo */
.hero__name {
  position: absolute;
  bottom: var(--space-md);
  left: var(--space-md);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFFFFF;
  z-index: 10;
  opacity: 0;
}

.hero__name [data-split-text] {
  display: inline-block;
}

/* Indicador de scroll no canto inferior direito */
.hero__scroll {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 1px;
  height: 60px;
  z-index: 10;
  opacity: 0;
}

.hero__scroll-line {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, #FFFFFF 50%, transparent 100%);
  background-size: 100% 200%;
  background-position: 0% 0%;
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { background-position: 0% -100%; }
  100% { background-position: 0% 100%; }
}

/* Switcher de idioma sobre a hero — branco + difference garante legibilidade */
.lang-switcher {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 100;
  mix-blend-mode: difference;
  color: #FFFFFF;
}

/* Mobile */
@media (max-width: 768px) {
  .hero__title {
    font-size: clamp(4rem, 28vw, 10rem);
    line-height: 1.4;
  }

  .hero__name {
    font-size: var(--fs-micro);
  }
}

/* prefers-reduced-motion: revela tudo direto */
@media (prefers-reduced-motion: reduce) {
  .hero__bg { clip-path: inset(0 0 0% 0); }
  .hero__img { transform: scale(1); }
  .hero__grain { opacity: 1; }
  .hero__title { clip-path: inset(0 0% 0 0); }
  .hero__name,
  .hero__scroll { opacity: 1; }
  .hero__scroll-line { animation: none; }
}