/* Hero do Vérité Pix: só a cena 3D (redoma de vidro + Pix), sóbria, à direita do texto.
   O CSS decide ONDE a redoma fica (.dome-anchor); o three.js se encaixa nessa caixa, e o fallback estático também. */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.hero-stage { position: absolute; inset: 0; z-index: -1;
  --dome-cx: 72%; --floor: 82%; --dome-w: min(50vw, 82vh); }
.hero-bg { position: absolute; inset: 0; background:
  radial-gradient(55% 60% at var(--dome-cx) 60%, rgba(90, 60, 190, .16), transparent 70%),
  radial-gradient(40% 40% at calc(var(--dome-cx) + 10%) 30%, rgba(80, 130, 230, .06), transparent 70%),
  radial-gradient(80% 50% at 20% 110%, rgba(120, 80, 200, .05), transparent 70%), var(--navy-950); }
/* chão: um brilho elíptico e uma grade em perspectiva que some no horizonte */
.hero-bg::after { content: ''; position: absolute; left: -10%; right: -10%; top: var(--floor); height: 40%; background:
  radial-gradient(50% 40% at var(--dome-cx) 0%, rgba(190, 170, 255, .07), transparent 70%),
  repeating-linear-gradient(90deg, rgba(244, 239, 227, .03) 0 1px, transparent 1px 72px);
  transform: perspective(500px) rotateX(62deg); transform-origin: top; -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%); }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 900ms var(--ease-out); }
.hero.is-3d .hero-canvas { opacity: 1; }
.dome-anchor { position: absolute; width: var(--dome-w); aspect-ratio: 1; left: calc(var(--dome-cx) - var(--dome-w) / 2); bottom: calc(100% - var(--floor) - var(--dome-w) * .06); pointer-events: none; }
.dome-fallback { width: 124%; height: 124%; max-width: none; margin: -12%; object-fit: contain; opacity: 0; transition: opacity 600ms var(--ease-out); }
.hero.is-static .dome-fallback { opacity: 1; animation: domeBreath 6s var(--ease-in-out) infinite; }
@keyframes domeBreath { 50% { filter: drop-shadow(0 0 22px rgba(150, 120, 230, .18)); } }
@media (prefers-reduced-motion: reduce) { .hero.is-static .dome-fallback { animation: none; } }

/* brilho sutil que atravessa a cena de tempos em tempos */
.hero-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(244, 239, 227, .045) 48%, rgba(200, 180, 255, .03) 50%, transparent 58%); background-size: 300% 100%; animation: sheen 11s var(--ease-in-out) 3s infinite; mix-blend-mode: screen; }
@keyframes sheen { 0% { background-position: 120% 0; } 35%, 100% { background-position: -40% 0; } }
@media (prefers-reduced-motion: reduce) { .hero-sheen { animation: none; } }

.hero-copy { position: relative; z-index: 2; padding-block: var(--s-16) var(--s-12); display: grid; gap: var(--s-4); justify-items: start; }
.hero-copy > * { max-width: 500px; }
.hero-title { font-size: clamp(2.6rem, 1.3rem + 4.1vw, 4.9rem); letter-spacing: -.04em; line-height: 1.02; font-weight: 600; }
.hero-title .serif-i { color: var(--cream); font-size: 1.04em; letter-spacing: -.02em; }
.hero-note { font-size: var(--t-xs); color: var(--text-faint); }
.hero-in { opacity: 0; transform: translateY(14px); }
.hero.ready .hero-in { animation: copyIn 900ms var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 90ms + 100ms); }
.hero-in[data-d='1'] { --d: 1; } .hero-in[data-d='2'] { --d: 2; } .hero-in[data-d='3'] { --d: 3; } .hero-in[data-d='4'] { --d: 4; }
@keyframes copyIn { to { opacity: 1; transform: none; } }
.no-js .hero-in { opacity: 1; transform: none; }
.hero-scroll { position: absolute; left: 50%; bottom: var(--s-3); width: 24px; height: 40px; margin-left: -12px; border-radius: 12px; box-shadow: 0 0 0 1px var(--line-strong) inset; z-index: 2; }
.hero-scroll span { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; border-radius: 2px; background: var(--magenta-soft); animation: wheel 2s var(--ease-in-out) infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

@media (max-width: 1100px) and (min-width: 761px) { .hero-stage { --dome-cx: 73%; --dome-w: min(52vw, 66vh); } .hero-copy > * { max-width: min(540px, 44vw); } }
/* celular: a cena ganha um palco PRÓPRIO no topo (redoma inteira + base, com respiro) e o texto vem DEPOIS, no fluxo:
   nada se sobrepõe, e o canvas só pinta a área do palco (menos pixels → dá para renderizar nítido a 2x). */
@media (max-width: 760px) {
  .hero { display: block; min-height: 0; }
  .hero-stage { position: relative; inset: auto; z-index: 0;
    --dome-w: min(80vw, 42svh, 360px); --top: 60px;
    --dome-cx: 50%; --floor: calc(var(--top) + var(--dome-w) * .94);
    height: calc(var(--top) + var(--dome-w) * 1.08); }
  .dome-anchor { top: var(--top); bottom: auto; }
  .hero-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--dome-w) * .06); background: linear-gradient(transparent, var(--navy-950)); pointer-events: none; }
  .hero-bg::after { height: calc(var(--dome-w) * .3); }
  .hero-sheen { display: none; }
  .hero-copy .eyebrow { display: none; }
  .hero-copy { padding-block: var(--s-3) var(--s-10); gap: var(--s-2); }
  .hero-ctas { flex-wrap: wrap; gap: var(--s-1); } .hero-ctas .btn-lg { height: 52px; padding: 0 var(--s-3); font-size: var(--t-md); }
  .hero-title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .hero-scroll { display: none; }
  .hero .lede { font-size: var(--t-md); }
}
@media (max-width: 760px) and (max-height: 640px) { .hero-stage { --dome-w: min(70vw, 40svh, 320px); } }