/* ═══ Hero da home (mesmo visual do eightlabs.digital atual) ═══ */
.hero-section { position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.hero-section::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 48% at 50% 64%, rgba(255,255,255,0.03) 0%, transparent 68%);
}
/* emenda suave com a seção seguinte */
.hero-section::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 4; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10,10,10,0), var(--bg));
}

/* Blobs */
.hero-gooey { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; filter: blur(62px); animation: fadein 1.8s ease both; }
.goo-blob { position: absolute; width: 74vmax; height: 74vmax; top: calc(50% - 37vmax); left: calc(50% - 37vmax); border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.gb1 { background: radial-gradient(circle, rgba(255,255,255,.022) 0%, rgba(255,255,255,0) 62%); animation: gV 7s ease infinite; }
.gb2 { background: radial-gradient(circle, rgba(255,255,255,.015) 0%, rgba(255,255,255,0) 62%); transform-origin: calc(50% - 310px) calc(50% + 90px); animation: gO 10s ease infinite; }
.gb3 { background: radial-gradient(circle, rgba(255,255,255,.018) 0%, rgba(255,255,255,0) 62%); transform-origin: calc(50% + 190px) calc(50% - 210px); animation: gO2 12s ease infinite; }
.gb4 { background: radial-gradient(circle, rgba(255,255,255,.010) 0%, rgba(255,255,255,0) 62%); transform-origin: calc(50% - 110px) calc(50% + 270px); animation: gV 9s ease 1.2s infinite reverse; }
.gb5 { background: radial-gradient(circle, rgba(255,255,255,.012) 0%, rgba(255,255,255,0) 62%); transform-origin: calc(50% + 290px) calc(50% + 160px); animation: gO 15s linear infinite; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes gV  { 0%,100% { transform: translateY(-8%) scale(1); } 50% { transform: translateY(8%) scale(1.06); } }
@keyframes gO  { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } }
@keyframes gO2 { 0%,100% { transform: rotate(0deg) scale(1); } 33% { transform: rotate(120deg) scale(1.1); } 66% { transform: rotate(240deg) scale(.94); } }

/* Partículas */
#dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ΞIGHT / LABS */
.ghost-left, .ghost-right {
  position: absolute; top: 50%; transform: translateY(-42%); z-index: 1; pointer-events: none; white-space: nowrap;
  font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(160px, 22vw, 460px);
  line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  background: linear-gradient(105deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.10) 35%, rgba(255,255,255,0.07) 60%, rgba(255,255,255,0.03) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: gShift 14s ease infinite;
}
.ghost-left  { left: 1vw; }
.ghost-right { right: 8vw; }
@keyframes gShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* Ξ desenhado como 3 barras (a fonte não tem o glifo grego) */
.ghost-left .xi-letter {
  display: inline-block; width: 0.46em; height: 0.70em; vertical-align: baseline; margin-right: 0.04em;
  background-image: linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)), linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)), linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08));
  background-size: 100% 15%; background-repeat: no-repeat; background-position: 0 2%, 0 50%, 0 98%;
}

/* Halo que respira */
.halo-pulse {
  position: absolute; left: 50%; top: 44%; width: 64vh; height: 64vh; transform: translate(-50%,-50%); border-radius: 50%;
  z-index: 1; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,.03) 45%, transparent 68%);
  animation: haloBreath 4s ease-in-out infinite;
}
@keyframes haloBreath { 0%,100% { transform: translate(-50%,-50%) scale(.9); opacity: .5; } 50% { transform: translate(-50%,-50%) scale(1.1); opacity: .9; } }

/* Retrato humano + robô */
.hero-photo, .hero-reveal {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  height: 86%; width: auto; max-width: none; z-index: 2; pointer-events: none;
  object-fit: contain; object-position: bottom center;
}
.hero-photo {
  -webkit-mask-image: radial-gradient(ellipse 42% 74% at 50% 48%, #000 50%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 8%, #000 86%, rgba(0,0,0,0) 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 42% 74% at 50% 48%, #000 50%, rgba(0,0,0,0) 100%), linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 8%, #000 86%, rgba(0,0,0,0) 100%);
  mask-composite: intersect;
}
/* Robô: círculo do cursor ∩ elipse do rosto */
.hero-reveal {
  mask-image: radial-gradient(circle var(--rv-r,0px) at var(--rv-x,-999px) var(--rv-y,-999px), #000 0%, #000 32%, rgba(0,0,0,0) 100%), radial-gradient(ellipse 15% 31% at 50% 41%, #000 68%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat; mask-composite: intersect;
  -webkit-mask-image: radial-gradient(circle var(--rv-r,0px) at var(--rv-x,-999px) var(--rv-y,-999px), #000 0%, #000 32%, rgba(0,0,0,0) 100%), radial-gradient(ellipse 15% 31% at 50% 41%, #000 68%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat; -webkit-mask-composite: source-in;
}
.mouse-layer { position: absolute; inset: 0; z-index: 3; }

/* Tagline e redes */
@keyframes slideup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-tagline {
  position: absolute; bottom: 62px; left: 0; right: 0; z-index: 5; text-align: center;
  font-size: 11px; font-weight: 400; letter-spacing: .38em; color: rgba(255,255,255,0.30);
  text-transform: uppercase; pointer-events: none; animation: slideup .8s ease .5s both;
}
.hero-socials { position: absolute; z-index: 5; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; gap: 22px; }
.social-ic { color: var(--muted); text-decoration: none; transition: color .2s; }
.social-ic:hover { color: #fff; }
.social-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Indicador de rolagem */
.scroll-hint {
  position: absolute; right: 40px; bottom: 30px; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.35); text-decoration: none;
  writing-mode: vertical-rl; animation: slideup .8s ease .8s both;
}
.scroll-hint::after { content: ''; width: 1px; height: 46px; background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); animation: hintline 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes hintline { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (hover: none) { .mouse-layer { display: none; } }

@media (max-width: 768px) {
  .ghost-left, .ghost-right { font-size: clamp(130px, 40vw, 240px); left: 0; right: 0; text-align: center; transform: none; top: auto; bottom: auto; }
  .ghost-left  { top: 11vh; }
  .ghost-right { bottom: 14vh; }
  .hero-photo, .hero-reveal { height: 58vh; top: 22vh; bottom: auto; }
  .halo-pulse { width: 80vw; height: 80vw; top: 26%; }
  .hero-tagline { bottom: 52px; font-size: 9px; letter-spacing: .28em; }
  .hero-socials { bottom: 18px; }
  .scroll-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .goo-blob, .halo-pulse, .ghost-left, .ghost-right { animation: none; }
}