/* Hero: texto e ações à esquerda; o N em 3D à direita, num estúdio que cobre a hero inteira.
   No celular o texto vem primeiro e o N ganha um enquadramento próprio logo abaixo. Tokens em site.css. */
.nero-hero{position:relative;isolation:isolate;min-height:max(600px,min(80svh,900px));display:flex;align-items:center;padding:104px max(var(--m),calc((100vw - 1680px) / 2 + var(--m))) 56px;overflow:hidden;background:linear-gradient(#ffffff0c 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,#ffffff0c 1px,transparent 1px) 0 0/72px 72px,#050506}
.nero-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.nero-scene canvas{display:block;width:100%;height:100%;position:absolute;inset:0}
.nero-fallback{position:absolute;right:9%;top:50%;width:min(42vw,600px);height:auto;translate:0 -50%;transition:opacity .5s}
.nero-scene.is-ready .nero-fallback{opacity:0}
/* escurecimento neutro só atrás do texto; a grade da cena continua visível por baixo */
.nero-hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#050506d9 0,#05050699 30%,#05050600 54%),linear-gradient(0deg,var(--bg) 0,#07070800 18%)}
.nero-copy{position:relative;z-index:2;max-width:min(580px,46%)}
.nero-copy h1{font:700 var(--s-display)/.95 var(--display);letter-spacing:-.055em;color:var(--ink);text-wrap:balance}
.nero-sub{font-size:var(--s-lead);line-height:1.45;margin-top:26px;color:var(--ink);max-width:34ch}
.nero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* área de arrasto: só sobre o N, longe dos botões; a rolagem vertical continua livre */
.n-drag{position:absolute;left:52%;right:5%;top:15%;bottom:17%;z-index:2;pointer-events:auto;touch-action:pan-y;cursor:grab;border-radius:28px;outline-offset:6px}
.n-drag.is-dragging{cursor:grabbing}
.n-drag-hint{position:absolute;left:50%;bottom:0;translate:-50% 0;padding:7px 14px;border-radius:999px;background:#0c0c0ecc;color:var(--ink-soft);font-size:13px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.n-drag:hover .n-drag-hint,.n-drag:focus-visible .n-drag-hint{opacity:1}
.n-drag:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media(max-width:1100px){.nero-copy{max-width:50%}.n-drag{left:56%}}
@media(max-width:900px){
  /* em pé: texto e ações primeiro; o N num quadro próprio logo abaixo, com a prévia embaixo dele */
  .nero-hero{display:block;min-height:0;padding:104px 0 32px}
  .nero-hero::after{display:none}
  .nero-copy{max-width:none;padding-inline:var(--m)}
  .nero-sub{margin-top:18px}
  .nero-actions{margin-top:24px}
  .nero-actions .btn{flex:1 1 auto}
  .nero-scene{position:relative;inset:auto;height:min(42svh,360px);margin-top:4px}
  .nero-fallback{right:auto;left:50%;top:40%;width:72%;translate:-50% -50%}
  .n-drag{left:10%;right:10%;top:6%;bottom:14%}
}

/* logo da barra: o N em 3D girando; a imagem fica até a cena carregar */
.brand-n{position:relative;display:block;width:44px;height:44px}
.brand-n img{width:100%;height:100%;object-fit:contain;transform:scale(1.35);transition:opacity .4s}
.brand-n canvas{position:absolute;inset:0;width:100%!important;height:100%!important}
.brand-n.is-ready img{opacity:0}

/* Nero 3D: só o corpo recebe clique; o resto da área deixa a página livre */
.nero-buddy{position:fixed;z-index:149;left:0;top:0;pointer-events:none;transition:opacity .35s}
.nero-buddy.is-away{opacity:0}
.nero-buddy-body{position:absolute;inset:8% 28% 2% 28%;padding:0;border:0;border-radius:40px;background:none;cursor:pointer;pointer-events:auto}
.nero-buddy>canvas{position:absolute;inset:0;display:block;pointer-events:none}
.nero-buddy-hide{position:absolute;top:2px;right:4px;pointer-events:auto;min-width:26px;min-height:26px;border-radius:20px;background:#151517;color:var(--ink-soft);font-size:13px;line-height:1;opacity:0;transition:opacity .2s}
.nero-buddy:hover .nero-buddy-hide,.nero-buddy-hide:focus-visible{opacity:1}
.nero-buddy.is-collapsed .nero-buddy-body,.nero-buddy.is-collapsed .nero-buddy-say,.nero-buddy.is-collapsed>canvas{display:none}
.nero-buddy.is-collapsed .nero-buddy-hide{opacity:1;top:auto;bottom:0;right:0;padding:8px 12px;font-size:13px}
.nero-buddy-say{position:absolute;bottom:92%;left:50%;translate:-50% 6px;white-space:nowrap;margin:0;padding:7px 12px;border-radius:14px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;opacity:0;transition:opacity .25s,translate .25s}
.nero-buddy-say.is-emoji{font-size:22px;padding:4px 10px;background:#151517;color:var(--ink)}
.nero-buddy-say.is-on{opacity:1;translate:-50% 0}
.nero-buddy :focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(hover:none){.nero-buddy-hide{opacity:.8}}
@media (prefers-reduced-motion:reduce){.nero-buddy,.nero-buddy-say{transition:none}}

/* ---------- abertura: N e "Hello, world." centralizados como um conjunto, na área visível (svh e áreas seguras).
   Toda em CSS: ~1,35 s, some sozinha mesmo sem script. Só aparece com a classe .op (primeira visita da sessão). ---------- */
.opening{display:none}
.op .opening{display:grid;place-items:center;position:fixed;inset:0;z-index:400;min-height:100svh;padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));
  background:linear-gradient(#ffffff08 1px,transparent 1px) 50% 50%/48px 48px,linear-gradient(90deg,#ffffff08 1px,transparent 1px) 50% 50%/48px 48px,#050506;animation:op-out .32s cubic-bezier(.4,0,.2,1) 1.05s forwards}
.op body{overflow:hidden}
.op-stage{display:grid;justify-items:center;gap:clamp(12px,3svh,28px);max-width:100%;animation:op-settle .32s ease 1.05s forwards}
.op-n{display:block;height:clamp(76px,min(30svh,36vw),260px);width:auto;max-width:80vw;overflow:visible}
.op-line path{stroke-dasharray:1;stroke-dashoffset:1;animation:op-draw .45s cubic-bezier(.6,0,.2,1) .32s forwards,op-dim .25s ease .78s forwards}
.op-fill path{opacity:0;animation:op-lit .3s ease .62s forwards}
.op-fill .op-blade{fill:#6b6e74}
.op-hello{display:flex;font:500 clamp(17px,2.2vw + 6px,30px)/1.3 var(--code);color:var(--ink);white-space:nowrap}
.op-hello span{display:inline-block;overflow:hidden;width:0;animation:op-type .34s steps(13,end) .1s forwards}
.op-hello::after{content:'_';animation:op-blink .45s steps(1) infinite}
.op-rule{display:block;height:1px;width:clamp(120px,40vw,320px);background:linear-gradient(90deg,transparent,#f2f1ee,transparent);transform:scaleX(0);animation:op-rule .3s cubic-bezier(.2,.7,.2,1) .78s forwards}
.op-skip{position:absolute;right:max(16px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top));min-height:44px;padding:8px 18px;border-radius:999px;background:#ffffff14;color:var(--ink);font:600 14px var(--text)}
.op-skip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.op-replay{color:inherit;text-decoration:underline;text-underline-offset:3px}
@keyframes op-type{to{width:13ch}}
@keyframes op-blink{50%{opacity:0}}
@keyframes op-draw{to{stroke-dashoffset:0}}
@keyframes op-dim{to{stroke-opacity:.25}}
@keyframes op-lit{to{opacity:1}}
@keyframes op-rule{to{transform:scaleX(1)}}
@keyframes op-settle{to{transform:scale(1.04);opacity:0}}
@keyframes op-out{to{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.op .opening{display:none}.op-replay{display:none}}