/* Topo fixo (230vh com movimento) sobre o "espaço" grafite: a esfera ocupa
   o fundo, o título fica embaixo à esquerda e as linhas e estados mudam
   com --pin, nas mesmas faixas do eezyinn. */

.hero {
  --pin: 0;
  --a: clamp(0, calc((var(--pin) - 0.14) * 6), 1);
  --a-out: clamp(0, calc((var(--pin) - 0.52) * 8), 1);
  --b: clamp(0, calc((var(--pin) - 0.54) * 6), 1);
  --end: clamp(0, calc((var(--pin) - 0.88) * 8), 1);
  position: relative;
  z-index: 2;
}
.has-motion .hero { height: 230vh; }
.hero__sticky {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding-block: 136px 56px;
  overflow: clip;
}
.has-motion .hero__sticky { position: sticky; top: 0; height: 100svh; }
.hero__sphere { position: absolute; inset: 0; }
.hero__globe { display: block; width: 100%; height: 100%; }
.has-motion .hero__globe { animation: sphere-in 1.4s var(--ease-out) 0.15s both; }
@keyframes sphere-in { from { opacity: 0; transform: scale(0.96); } }
.hero__inner { position: relative; z-index: 1; }

.hero__title { font-size: clamp(48px, 7.4vw, 120px); line-height: 0.98; letter-spacing: -0.02em; margin: 14px 0 0; }
.hero__line { display: block; }
.has-motion .hero__line--a { opacity: calc(1 - (var(--a-out) - var(--end)) * 0.72); transition: opacity 0.12s linear; }
.has-motion .hero__line--b { opacity: calc(1 - (var(--a) - var(--b)) * 0.72); transition: opacity 0.12s linear; }
.hero__foot { display: grid; gap: 32px; margin-top: clamp(40px, 1rem + 4vw, 80px); }
.hero__foot .lead { max-width: 34ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Legenda, estados e dica no canto superior direito. */
.hero__legend, .hero__states, .hero__hint { position: absolute; z-index: 1; right: var(--gutter); }
.hero__legend { top: 120px; display: flex; gap: 20px; align-items: center; }
.hero__clock { padding-right: 20px; border-right: 1px solid color-mix(in srgb, var(--warm) 25%, transparent); color: var(--warm); font-variant-numeric: tabular-nums; }
.hero__legend-item { display: inline-flex; align-items: center; gap: 8px; }
.hero__key { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--warm) 70%, var(--ink)); }
.hero__key--client { background: var(--sun); box-shadow: 0 0 8px color-mix(in srgb, var(--sun) 60%, transparent); }
.hero__states { top: 148px; display: grid; margin: 0; padding: 0; list-style: none; }
.hero__state { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.hero__state:nth-child(1) { opacity: calc(var(--a) - var(--b)); }
.hero__state:nth-child(2) { opacity: var(--b); }
.hero__hint { top: 176px; display: none; opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .has-motion .hero__sticky { cursor: grab; touch-action: pan-y; }
  .has-motion .hero[data-dragging] .hero__sticky { cursor: grabbing; user-select: none; }
  .has-motion .hero__hint { display: block; animation: hint-in 0.6s var(--ease-out) 2.4s forwards; }
  .has-motion .hero[data-dragged] .hero__hint { animation: none; opacity: 0; }
}
@keyframes hint-in { to { opacity: 0.8; } }

/* Título digitado: palavras recortadas e o ponto laranja como cursor. */
.hero__title[data-opener] { position: relative; }
.op-word { display: inline-block; }
.op-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.16em;
  height: 0.16em;
  margin: -0.08em 0 0 0.06em;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sun) 70%, transparent);
  pointer-events: none;
  transition: opacity 0.12s linear;
}

@media (min-width: 900px) {
  .hero__line--b { padding-left: 8vw; }
  .hero__foot { grid-template-columns: 1fr auto; align-items: end; }
  .hero-actions { margin-right: calc(10.5rem + 16px); }
}
@media (max-width: 899px) {
  .hero__legend, .hero__states, .hero__hint { display: none !important; }
  .hero__sphere { bottom: auto; top: 36px; height: 60%; -webkit-mask-image: linear-gradient(var(--ink) 55%, transparent 100%); mask-image: linear-gradient(var(--ink) 55%, transparent 100%); }
  .hero__sticky { padding-block: 104px 32px; }
  .hero__title { font-size: clamp(42px, 11.2vw, 58px); line-height: 0.95; }
  .hero__foot { gap: 24px; margin-top: 24px; }
  .hero-actions { margin-bottom: 60px; }
}