/* Hero: óculos anáglifos com o marquee passando pelas lentes.
   Fora das lentes o texto é cinza e borrado; dentro delas fica nítido.
   O tamanho e a posição dos óculos e do bloco de texto são calculados em js/hero.js. */

.hero {
  position: relative;
  z-index: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--black);
  /* recortes das lentes, em % da caixa dos óculos */
  --lens-left: polygon(27.6% 27.1%, 43.75% 27.1%, 43.75% 38.4%, 40.8% 43.9%, 27.6% 43.9%);
  --lens-right: polygon(56.8% 27.1%, 72.8% 27.1%, 72.8% 43.9%, 59.7% 43.9%, 56.8% 38.4%);
  --marquee-dur: 44.8s;
}

.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .65) 100%);
}

/* ---------- Óculos ---------- */

.hero__glasses {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 8svh;
  width: min(90vw, 106svh);
  aspect-ratio: 1100 / 621;
  translate: -50% 0;
  transform-origin: 50% 20%;
  container-type: inline-size;
  will-change: transform;
}

.hero__float {
  position: absolute;
  inset: 0;
  animation: hero-float 6s ease-in-out infinite;
}

.hero__glasses-img {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}

/* Luz vermelha e azul vazando das lentes */
.hero__spill {
  position: absolute;
  z-index: 0;
  top: 29.5%;
  width: 85%;
  aspect-ratio: 1.2 / 1;
  translate: -50% -50%;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero__spill--red {
  left: 35.7%;
  animation: hero-drift-red 11s ease-in-out infinite alternate;
}

.hero__spill--blue {
  left: 64.8%;
  animation: hero-drift-blue 14s ease-in-out -5s infinite alternate;
}

.hero__spill-light,
.hero__spill-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__spill-light {
  filter: blur(70px);
  mix-blend-mode: screen;
  animation: hero-breath 7s ease-in-out infinite;
}

.hero__spill--red .hero__spill-light {
  background: radial-gradient(closest-side, rgba(242, 5, 5, .75), rgba(242, 5, 5, 0) 100%);
}

.hero__spill--blue .hero__spill-light {
  background: radial-gradient(closest-side, rgba(11, 121, 217, .75), rgba(11, 121, 217, 0) 100%);
  animation-delay: -1.5s;
}

/* Grão colorido dentro da luz, sumindo para as bordas junto com ela. */
.hero__spill-grain {
  background-size: 256px 256px;
  opacity: .22;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, transparent 85%);
  mask-image: radial-gradient(closest-side, #000 0%, transparent 85%);
}

.hero__spill--red .hero__spill-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.02 0 0 0 0 0.02 9 0 0 0 -4.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.hero__spill--blue .hero__spill-grain {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.04 0 0 0 0 0.47 0 0 0 0 0.85 9 0 0 0 -4.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- Marquee ---------- */

.hero__marquee {
  position: absolute;
  left: calc(50% - 50vw);
  top: calc(35.4% - 10px);
  display: flex;
  white-space: nowrap;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 2.909cqw;
  line-height: 1;
  animation: hero-marquee var(--marquee-dur) linear infinite;
}

/* Fora das lentes: cinza, com fantasma anáglifo e borrado. A máscara esconde o trecho atrás dos óculos. */
.hero__ghost {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: url("../assets/hero-glasses.avif"), linear-gradient(#000 0 0);
  mask-image: url("../assets/hero-glasses.avif"), linear-gradient(#000 0 0);
  -webkit-mask-size: 100cqw 100%, 100% 100%;
  mask-size: 100cqw 100%, 100% 100%;
  -webkit-mask-position: center, 0 0;
  mask-position: center, 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.hero__ghost .hero__marquee {
  left: 0;
  color: var(--fg-4);
  text-shadow: var(--anaglyph-shadow);
  filter: blur(1px);
}

/* Dentro das lentes: uma camada colorida que se mistura ao vidro e uma camada branca nítida por cima. */
.hero__lens {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 500px;
}

.hero__lens--left {
  clip-path: var(--lens-left);
}

.hero__lens--right {
  clip-path: var(--lens-right);
}

.hero__lens--tint {
  z-index: 3;
  mix-blend-mode: overlay;
}

.hero__lens--sharp {
  z-index: 4;
}

.hero__lens-inner {
  position: absolute;
  inset: 0;
  transform-origin: 50% 35.4%;
  transform: translateZ(14px) scale(1.06);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}

.hero__lens--tint.hero__lens--left .hero__marquee {
  color: var(--signal-red);
}

.hero__lens--tint.hero__lens--right .hero__marquee {
  color: var(--optical-blue);
}

.hero__lens--sharp .hero__marquee {
  color: var(--white);
  text-shadow: -2px 0 rgba(11, 121, 217, .95), 2px 0 rgba(242, 5, 5, .95), 0 0 10px rgba(255, 255, 255, .45), 0 0 22px rgba(255, 255, 255, .18);
}

/* ---------- Texto ---------- */

.hero__text {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--space-4);
  text-align: center;
}

.hero__eyebrow {
  margin: 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .22em;
  line-height: 1.3;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--white);
  text-shadow: -1.5px 0 rgba(242, 5, 5, .55), 1.5px 0 rgba(11, 121, 217, .55), 0 0 12px rgba(255, 255, 255, .25);
}

.hero__title {
  --rest-shadow: var(--glow);
  margin: 12px 0 0;
  max-width: min(960px, 100%);
  font-family: var(--font-heading);
  font-weight: 400;
  /* mesma escala do protótipo: título contido, com respiro em volta */
  font-size: clamp(44px, 5.1vw, 80px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--white);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 14px 28px;
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  background: var(--optical-blue);
  color: var(--white);
}

.hero__status {
  margin: 10px 0 0;
  text-wrap: balance;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .56);
}

.hero__status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--optical-blue);
  vertical-align: middle;
}

/* ---------- Fora da tela ----------
   Quando a Hero já saiu inteira da tela, para de animar e de ser desenhada. */

.hero.is-covered {
  visibility: hidden;
}

.hero.is-covered * {
  animation-play-state: paused !important;
}

/* Enquanto a página carrega, nada da Hero ocupa lugar à vista: evita o pulo quando as fontes chegam. */
.is-loading .hero__glasses,
.is-loading .hero__text {
  visibility: hidden;
}

/* ---------- Entrada ---------- */

.hero[data-intro="pending"] :is(.hero__glasses-img, .hero__marquee, .hero__spill),
body:has(.hero[data-intro="pending"]) .nav {
  opacity: 0;
}

.hero[data-intro="pending"] .hero__spill {
  animation-play-state: paused;
}

/* ---------- Passagem Hero ↔ Work ----------
   Cópia dos óculos numa camada fixa (js/hero.js), usada do meio da passagem em diante: a armação e o
   fundo escuro têm o formato da lente vermelha recortado, e pela lente se vê o Work. O vidro é uma
   camada vermelha translúcida que tinge o que está atrás (multiply), mais clara no centro, com um
   reflexo de luz por cima. */
.hero-pass {
  position: fixed;
  inset: 0;
  z-index: 150;
  overflow: hidden;
  pointer-events: none;
}

.hero-pass__glasses {
  position: absolute;
  translate: -50% 0;
}

.hero-pass__float,
.hero-pass__img,
.hero-pass__tint,
.hero-pass__glare {
  position: absolute;
  inset: 0;
}

.hero-pass__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hero-pass__back {
  position: absolute;
  background: var(--black);
}

.hero-pass__tint,
.hero-pass__glare {
  /* o vidro da lente vermelha (o mesmo contorno de LENS em js/hero.js) */
  clip-path: polygon(26.9% 27.2%, 27.6% 26%, 43.6% 26%, 44.3% 27.2%, 44.3% 38.6%, 41.2% 45.1%, 27.6% 45.1%, 26.9% 43.9%);
}

.hero-pass__tint {
  background: radial-gradient(ellipse 60% 70% at 46% 42%, rgba(244, 73, 72, .62), rgba(242, 5, 5, .9) 100%);
  mix-blend-mode: multiply;
}

.hero-pass__glare {
  /* o reflexo corre pelo vidro: o degradê é mais largo que a lente e anda por dentro dela */
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .26) 46%, rgba(255, 255, 255, 0) 54%) 0 0 / 160% 100% no-repeat;
  mix-blend-mode: screen;
}

/* ---------- Animações ---------- */

@keyframes hero-marquee {
  from { transform: translate(0, -50%); }
  to { transform: translate(-50%, -50%); }
}

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes hero-breath {
  0%, 100% { opacity: .8; }
  50% { opacity: 1; }
}

@keyframes hero-drift-red {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(4%, -3%) scale(1.12); }
  100% { transform: translate(-3%, 3%) scale(.96); }
}

@keyframes hero-drift-blue {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-4%, -2%) scale(1.1); }
  100% { transform: translate(3%, 4%) scale(.95); }
}

/* No celular o deslocamento de 10px para cima (pensado para os óculos grandes do desktop) jogava o
   marquee na borda de cima das lentes, cortando as letras. Aqui ele fica no meio da lente. */
@media (max-width: 767px) {
  .hero__marquee {
    top: 35.4%;
  }
}

@media (max-width: 479px) {
  .hero__text {
    bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__float,
  .hero__marquee,
  .hero__spill,
  .hero__spill-light {
    animation: none;
  }

  .hero__marquee {
    transform: translate(0, -50%);
  }
}

/* ---------- A Hero só se alcança pela passagem (js/hero.js) ----------
   Na Hero, a página não rola por conta própria: todo gesto para baixo vira a passagem dos óculos.
   Abaixo dela, a Hero sai da página, e o Work vira o topo: não há como rolar de volta para ela;
   a volta é sempre pela animação. scrollbar-gutter evita que a página pule de lado quando a barra
   de rolagem some e volta (mouse com barra sempre visível). */
html {
  scrollbar-gutter: stable;
}

html.hero-lock {
  overflow: hidden;
}

html.hero-gone .hero {
  display: none;
}