/* HERO "Voo pelo trabalho" (dono: dev-3d-motion-web). Carrega depois de home.css: usa #inicio para vencer .hero. */
#inicio.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: 0 var(--gutter); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }
#inicio [data-hero-stage] { position: absolute; inset: 0; z-index: 1; perspective: 1100px; perspective-origin: 50% 48%; overflow: hidden; pointer-events: none; }
#inicio .hero-world { position: absolute; left: 50%; top: 48%; width: 0; height: 0; transform-style: preserve-3d; }
#inicio .hero-veil { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse 46% 40% at 50% 52%, rgba(7, 9, 15, .85), transparent 70%); }
#inicio .hc { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; backface-visibility: hidden; }
#inicio .hc-in { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); background: var(--night-2); box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .6); }
#inicio .hc[data-layer="1"] .hc-in { box-shadow: 0 30px 80px -30px rgba(45, 140, 255, .35); }
#inicio .hc-in img, #inicio .hc-in video { width: 100%; height: 100%; object-fit: cover; }
#inicio .hc-dim { position: absolute; inset: 0; background: #07090F; pointer-events: none; }

/* Texto: zona segura, sempre parado e acima da mídia. Escondido até o JS assumir (failsafe de 4 s se o JS falhar). */
#inicio [data-hero-copy] { position: relative; z-index: 6; width: min(46vw, 760px); text-align: center; display: flex; flex-direction: column; align-items: center; opacity: 0; animation: hero-failsafe .01s 4s forwards; }
#inicio [data-hero-copy].is-live { opacity: 1; animation: none; }
#inicio [data-hero-copy].is-gone { display: none; }
@keyframes hero-failsafe { to { opacity: 1; } }
#inicio [data-hero-copy] > * { max-width: none; opacity: calc(var(--e, 1) * var(--s, 1)); translate: 0 calc(var(--ey, 0px) + var(--sy, 0px)); scale: var(--sc, 1); }
#inicio [data-hero-copy] h1 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); max-width: none; }
#inicio [data-hero-copy] .hero-sub { max-width: 42ch; margin-inline: auto; }
#inicio [data-hero-copy] .hero-cta { justify-content: center; }
#inicio [data-hero-copy] .tag { margin-bottom: 22px; }
.hw { display: inline-block; vertical-align: top; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hwi { display: inline-block; will-change: transform; }
#inicio .marquee { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; }
#inicio .mq-track { animation-delay: 1.6s; }
@media (max-width: 1099px) { #inicio [data-hero-copy] { width: min(56vw, 640px); } }
@media (max-width: 1023px) { #inicio [data-hero-copy] { width: min(76vw, 640px); } }

/* Pin: o capítulo seguinte só sobe nos últimos ~15% do voo (antes disso o palco é só dos cartões) */
.hero-pin #servicos { margin-top: -18vh; z-index: 2; }

/* Reduced-motion e < 768: sem 3D, sem pin */
@media (prefers-reduced-motion: reduce) { #inicio [data-hero-copy] { opacity: 1; animation: none; } #inicio .hc { opacity: 1; } }

/* MOBILE (< 768): texto no fluxo e, abaixo dele, um trilho horizontal de cartões à deriva */
@media (max-width: 767px) {
  #inicio.hero { min-height: auto; padding: 104px 0 0; justify-content: flex-start; align-items: stretch; }
  #inicio [data-hero-copy] { width: auto; padding: 0 var(--gutter); text-align: left; align-items: flex-start; }
  #inicio [data-hero-copy] .hero-cta { justify-content: flex-start; }
  #inicio [data-hero-stage] { position: relative; inset: auto; z-index: 1; perspective: none; height: auto; margin-top: 48px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
  #inicio .hero-veil, #inicio .hero-world { display: none; }
  #inicio [data-hero-copy] { order: 1; } #inicio [data-hero-stage] { order: 2; } #inicio .marquee { order: 3; }
  #inicio .hero-trail { display: flex; gap: 14px; width: max-content; padding: 0 7px; animation: hero-drift 40s linear infinite; }
  #inicio .hero-trail .hc { position: relative; flex: none; width: 42vw; opacity: 1; transform: none; }
  #inicio .hero-trail .hc.is-wide .hc-in { aspect-ratio: 5/4; }
  #inicio .hero-trail .hc:not(.is-wide) .hc-in { aspect-ratio: 4/5; }
  #inicio .hero-trail .hc { align-self: center; }
  #inicio .marquee { position: relative; margin-top: 36px; }
}
@keyframes hero-drift { to { transform: translateX(-50%); } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { #inicio .hero-trail { animation: none; } }
/* A faixa mono tem fundo próprio: cartões que saem pela borda passam por trás dela sem cobrir o texto */
#inicio .marquee { background: rgba(7, 9, 15, .92); }

/* Brilho azul (metade da intensidade anterior) SÓ na camada 1; demais camadas sem brilho. Elemento irmão atrás de .hc-in; opacidade segue a da guarda. */
#inicio .hc-neon { position: absolute; inset: 0; z-index: -1; border-radius: 16px; pointer-events: none; display: none; }
#inicio .hc-neon { display: block; }
#inicio .hc-neon::after { content: ""; position: absolute; inset: 0; border-radius: 16px; box-shadow: 0 0 0 1px rgba(45,140,255,.85), 0 0 10px 0 rgba(45,140,255,.6), 0 0 34px 6px rgba(10,92,255,.42); }
#inicio .hc-neon::before { content: ""; position: absolute; inset: -1px; border-radius: 17px; padding: 1px; opacity: .5; background: linear-gradient(115deg, #0A5CFF 0%, #2D8CFF 30%, #BBDBFF 50%, #2D8CFF 70%, #0A5CFF 100%) 0 0 / 220% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask-composite: exclude; }
@media (prefers-reduced-motion: no-preference) {
  #inicio .hc-neon::after { animation: neon-pulse 4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
  
}
@keyframes neon-pulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes neon-sweep { to { background-position: -220% 0; } }
#inicio .hero-trail .hc-neon { display: none; }

/* SLIDES do final do voo: mesma linguagem das fotos, graduada por profundidade (camada 5 frente = neon forte e nítido; 6 meio; 7 fundo = halo difuso e mais largo). Sem película escura. */
#inicio .hc[data-layer="5"] .hc-in, #inicio .hc[data-layer="6"] .hc-in, #inicio .hc[data-layer="7"] .hc-in { border-color: rgba(255, 255, 255, .22); }
#inicio .hc[data-layer="5"] .hc-in { box-shadow: 0 34px 80px -28px rgba(45, 140, 255, .55); }
#inicio .hc[data-layer="6"] .hc-in { box-shadow: 0 28px 64px -28px rgba(45, 140, 255, .42); }
#inicio .hc[data-layer="7"] .hc-in { box-shadow: 0 22px 50px -26px rgba(45, 140, 255, .3); }
#inicio .hc[data-layer="5"] .hc-neon::after { box-shadow: 0 0 0 1px rgba(45,140,255,.95), 0 0 12px 0 rgba(45,140,255,.7), 0 0 42px 8px rgba(10,92,255,.5); }
#inicio .hc[data-layer="6"] .hc-neon::after { box-shadow: 0 0 0 1px rgba(45,140,255,.8), 0 0 10px 0 rgba(45,140,255,.55), 0 0 36px 6px rgba(10,92,255,.4); }
#inicio .hc[data-layer="7"] .hc-neon::after { box-shadow: 0 0 0 1px rgba(45,140,255,.5), 0 0 8px 0 rgba(45,140,255,.32), 0 0 60px 16px rgba(10,92,255,.32); }
#inicio .hc[data-layer="7"] .hc-neon::before { opacity: .3; }