/* Abertura: palco fixado no scroll. Globo no centro, aurora no topo, depois a inundação verde e a roda do manifesto.
   Sem js (ou com movimento reduzido) vira um bloco comum: abertura e, logo abaixo, o manifesto em lista. */
.hero { position: relative; background: var(--night); color: #fff; }
.hero__stage { position: relative; isolation: isolate; overflow: hidden; }
.hero.has-scenes { height: 400vh; }
.hero.has-scenes .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }

.hero__view {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  min-height: min(100svh, 920px);
  padding: clamp(104px, 16vh, 150px) max(var(--pad), env(safe-area-inset-right, 0px)) clamp(28px, 6vh, 72px) max(var(--pad), env(safe-area-inset-left, 0px));
}
.hero.has-scenes .hero__view { position: absolute; inset: 0; min-height: 0; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; }
#globe { z-index: 1; animation: globe-in 1.6s var(--ui-ease) .1s backwards; }

/* Aurora: três manchas de luz no topo, respirando devagar */
.aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; will-change: transform; }
.aurora i:nth-child(1) { left: 50%; top: -44%; width: min(1240px, 116%); aspect-ratio: 2 / 1; translate: -50% 0; background: radial-gradient(closest-side, rgba(0, 169, 87, .78), rgba(0, 169, 87, .26) 46%, rgba(0, 169, 87, 0) 72%); animation: aurora-a 12s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { left: 6%; top: -30%; width: 46%; aspect-ratio: 1.6 / 1; background: radial-gradient(closest-side, rgba(45, 242, 145, .32), rgba(45, 242, 145, 0) 70%); animation: aurora-b 16s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { right: 2%; top: -36%; width: 44%; aspect-ratio: 1.5 / 1; background: radial-gradient(closest-side, rgba(0, 75, 43, .95), rgba(0, 75, 43, 0) 70%); animation: aurora-b 20s ease-in-out infinite alternate-reverse; }

/* Grão de filme sobre o palco */
.grain {
  position: absolute; inset: -6%; z-index: 6; pointer-events: none;
  opacity: .28; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  animation: grain .7s steps(3, end) infinite;
}

/* ---------- Texto da abertura ---------- */
.hero__top { position: relative; z-index: 3; text-align: center; will-change: transform, opacity; }
.kicker { display: grid; gap: 2px; justify-items: center; }
.kicker span:first-child { opacity: .45; }
.hero__title { margin: 22px auto 0; max-width: 17em; font-size: clamp(34px, 5.6vw, 84px); font-weight: 400; line-height: 1; letter-spacing: -.06em; color: #E3EAE5; }
.hero__line { display: block; text-wrap: balance; }
.hero__cycle { display: block; min-height: 1em; white-space: nowrap; color: var(--neon); animation: blur-in 1.8s var(--ui-ease) .3s backwards; }
.hero__cycle .ch { display: inline-block; will-change: transform, opacity, filter; }
[data-blur] { animation: blur-in 1.8s var(--ui-ease) var(--bd, 0s) backwards; }

.hero__bottom { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hero__meta { display: grid; gap: 18px; }
.hero__meta--left { max-width: 440px; }
.hero__meta--right { max-width: 300px; }
.hero__meta .mono.dim { opacity: .5; }
.hero__lead { font-size: 17px; line-height: 1.28; letter-spacing: -.035em; }
.miniticker { max-width: 250px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.miniticker__track { display: flex; width: max-content; animation: ticker 20s linear infinite; }
.miniticker__track span { padding-right: .7em; white-space: nowrap; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 8px; }

/* ---------- Inundação verde, linhas e roda do manifesto ---------- */
.hero:not(.has-scenes) .flood, .hero:not(.has-scenes) .waves { display: none; }
.flood { position: absolute; inset: 0; z-index: 2; opacity: 0; background: linear-gradient(180deg, var(--night) 0%, #003A22 26%, #007A44 50%, var(--signal) 66%, #8CEBBB 84%, var(--ivory) 100%); will-change: opacity; }
.waves { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.waves path { fill: none; stroke: #fff; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.waves path:nth-child(even) { stroke: var(--neon); }

.wheel { position: relative; z-index: 4; padding: clamp(56px, 8vw, 96px) var(--pad); border-top: 1px solid var(--line-dark); text-align: center; }
.wheel__label { margin-bottom: 22px; color: var(--neon); }
.wheel__items { display: grid; gap: .12em; font-size: clamp(28px, 5vw, 72px); }
.wheel__item { font-weight: 400; line-height: 1.1; letter-spacing: -.06em; }
.hero.has-scenes .wheel { position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.hero.has-scenes .wheel__label { position: absolute; top: clamp(112px, 18vh, 170px); left: 0; right: 0; margin: 0; color: #fff; }
.hero.has-scenes .wheel__items { position: relative; display: block; width: 100%; height: 1.1em; perspective: 1000px; transform-style: preserve-3d; }
.hero.has-scenes .wheel__item { position: absolute; top: 0; left: var(--pad); right: var(--pad); backface-visibility: hidden; transform-origin: center center; transform-style: preserve-3d; will-change: transform, opacity; }

/* ---------- Letreiro gigante ---------- */
.bigmarquee { padding-block: clamp(8px, 2vw, 24px) clamp(28px, 5vw, 64px); }
.bigmarquee .marquee__track { font-size: clamp(46px, 9.7vw, 140px); font-weight: 400; line-height: 1.12; letter-spacing: -.06em; text-transform: uppercase; color: #D9DED9; white-space: nowrap; }
.bigmarquee .marquee__track span { padding-right: .28em; }

@keyframes aurora-a { to { transform: translate3d(3%, 6%, 0) scale(1.08); } }
@keyframes aurora-b { to { transform: translate3d(-6%, 8%, 0) scale(1.15); } }
@keyframes grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-2%, 1%); } 66% { transform: translate(1%, -2%); } 100% { transform: translate(0, 0); } }
@keyframes blur-in { from { opacity: 0; filter: blur(12px); transform: translate3d(0, .7em, 0); } }
@keyframes globe-in { from { opacity: 0; transform: scale(.94); } }

@media (max-width: 860px) {
  .hero__view { justify-content: flex-start; gap: 26px; padding-top: 104px; }
  .hero__bottom { flex-direction: column; align-items: center; gap: 22px; text-align: center; }
  .hero__meta { justify-items: center; }
  .hero__meta--right { order: -1; max-width: 25rem; }
  .hero__meta--left > .mono, .hero__meta--left .miniticker { display: none; }
  .hero__ctas { justify-content: center; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}