/* Hero da home: marca LYMOS em 3D (assets/js/hero3d.js). A <img> é o estado padrão; o canvas entra por cima quando o WebGL está pronto. */
.hero{overflow-x:clip}
.hero-top{display:grid;grid-template-columns:minmax(0,1fr) clamp(240px,34%,440px);column-gap:24px;position:relative}
.hero-top>.eyebrow{grid-column:1;grid-row:1;justify-self:start;position:relative;z-index:2}
.hero-top>h1{grid-column:1;grid-row:2;position:relative;z-index:2}
.hero-top>.hero-foot{grid-column:1/-1;grid-row:3;position:relative;z-index:2}

.mark3d{grid-column:2;grid-row:1/3;position:relative;z-index:1;min-height:260px;user-select:none;-webkit-user-select:none}
.mark3d::before{content:"";position:absolute;inset:-6% -14% -2%;pointer-events:none;background:radial-gradient(closest-side,rgba(0,232,107,.20),rgba(0,232,107,.05) 55%,transparent 72%)}
.mark3d canvas,.mark3d-img{position:absolute;left:-10%;top:-8%;width:120%;height:114%}
.mark3d canvas{cursor:grab;touch-action:pan-y;opacity:0;transition:opacity .35s var(--ease)}
.mark3d-img{left:50%;top:0;width:auto;height:98%;aspect-ratio:731/864;translate:-50% 0;pointer-events:none;transition:opacity .25s var(--ease)}
.mark3d.is-3d canvas{opacity:1}
.mark3d.is-3d .mark3d-img{opacity:0}
.mark3d.grabbing canvas{cursor:grabbing}

.mark3d-hint{position:absolute;left:50%;bottom:-6px;translate:-50% 0;z-index:2;pointer-events:none;white-space:nowrap;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);opacity:0;transition:opacity .5s var(--ease)}
.mark3d.is-3d:not(.touched) .mark3d-hint{opacity:1;transition-delay:2.2s}

@media (prefers-reduced-motion:no-preference){
  .mark3d-img{animation:markin .9s var(--ease) .1s backwards}
  @keyframes markin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.mark3d-hint{display:none}}

@media (max-width:640px){
  .hero-top{display:block}
  .mark3d{position:absolute;top:2px;right:-6px;width:170px;height:200px;min-height:0;opacity:.55;z-index:0}
  .mark3d-hint{display:none}
}

/* Links de texto da home (desenvolvimento de software, serviços) */
.lede-link{color:inherit;text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
.lede-link:hover{color:var(--signal)}
.txt-link{color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.svc h3 a:hover,.svc li a:hover{color:var(--signal)}
.svc li a{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}