/* Hero em slider da Via. Todas as classes comecam com vh- e ficam sob .vh-hero para nao brigar com o tema. */
@property --vh-bg    { syntax: '<color>'; inherits: true; initial-value: #0a0d0a; }
@property --vh-fg    { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --vh-muted { syntax: '<color>'; inherits: true; initial-value: #b8b8b8; }
@property --vh-a     { syntax: '<color>'; inherits: true; initial-value: #a8ff3e; }
@property --vh-ona   { syntax: '<color>'; inherits: true; initial-value: #0a0d0a; }

.vh-hero {
  --vh-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --vh-body: 'DM Sans', system-ui, sans-serif;
  --vh-mono: 'JetBrains Mono', ui-monospace, monospace;
  --vh-spring: cubic-bezier(.34, 1.56, .64, 1);
  --vh-bg: #0a0d0a; --vh-fg: #ffffff; --vh-muted: #b8b8b8; --vh-a: #a8ff3e; --vh-ona: #0a0d0a;
  position: relative; overflow: hidden; isolation: isolate; box-sizing: border-box;
  height: 86vh; height: clamp(560px, 86svh, 880px); display: flex; flex-direction: column;
  color: var(--vh-fg); font-family: var(--vh-body); font-size: 16px; line-height: 1.4; text-align: left;
  background:
    radial-gradient(900px 520px at 80% 12%, color-mix(in srgb, var(--vh-a) 14%, transparent), transparent 65%),
    radial-gradient(700px 480px at 8% 105%, color-mix(in srgb, var(--vh-a) 10%, transparent), transparent 70%),
    var(--vh-bg);
  transition: --vh-bg 1s ease, --vh-fg 1s ease, --vh-muted 1s ease, --vh-a 1s ease, --vh-ona 1s ease;
  outline: none;
}
.vh-hero *, .vh-hero *::before, .vh-hero *::after { box-sizing: border-box; }
.vh-hero .vh-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: .55; }
.vh-hero .vh-bgimg { position: absolute; inset: 0; z-index: -4; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.vh-hero .vh-bgimg.on { opacity: var(--vh-img-op, .1); }

.vh-hero .vh-bgw { position: absolute; z-index: -2; left: 0; top: 50%; white-space: nowrap; font-family: var(--vh-display); text-transform: uppercase; font-size: 40vw; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--vh-a) 14%, transparent); transform: translateY(-50%); animation: vh-bgmove 18s ease-in-out infinite alternate; pointer-events: none; transition: opacity .5s ease; }
@keyframes vh-bgmove { from { translate: 6vw 0; } to { translate: -40vw 0; } }

.vh-hero .vh-wipe { position: absolute; inset: 0; z-index: 20; transform: scaleX(0); pointer-events: none; }
.vh-hero .vh-wipe.w1 { background: var(--vh-a); }
.vh-hero .vh-wipe.w2 { background: var(--vh-fg); }
.vh-hero.wiping .vh-wipe { animation: vh-wipe .9s cubic-bezier(.7, 0, .3, 1) both; }
.vh-hero.wiping .vh-wipe.w1 { animation-delay: .08s; }
@keyframes vh-wipe { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

.vh-hero .vh-inner { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 1320px; margin: 0 auto;
  padding-block: 20px 22px;
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

.vh-hero .vh-head { position: relative; z-index: 7; display: flex; align-items: center; justify-content: flex-start; gap: 16px; min-height: 24px; }
.vh-hero .vh-now { font-family: var(--vh-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--vh-muted); text-align: left; }

.vh-hero .vh-stage { position: relative; flex: 1; min-height: 0; touch-action: pan-y; }
.vh-hero .vh-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility 0s .22s; }
.vh-hero .vh-slide.active { opacity: 1; visibility: visible; transition-delay: 0s; }
.vh-hero .vh-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }

.vh-hero .vh-meta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--vh-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--vh-muted); }
.vh-hero .vh-meta::before, .vh-hero .vh-meta::after { content: ""; width: 26px; height: 1px; background: var(--vh-a); transform: scaleX(0); }
.vh-hero .active .vh-meta::before, .vh-hero .active .vh-meta::after { animation: vh-grow .8s .1s cubic-bezier(.2, .7, .1, 1) forwards; }
@keyframes vh-grow { to { transform: scaleX(1); } }

.vh-hero .vh-words { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.vh-hero .active .vh-words { animation: vh-push 5.6s linear forwards; }
@keyframes vh-push { from { transform: scale(1); } to { transform: scale(1.04); } }
.vh-hero .vh-ln { display: block; width: max-content; max-width: 100%; font-family: var(--vh-display); text-transform: uppercase; line-height: .96; letter-spacing: .006em; color: var(--vh-fg); font-size: 60px; font-weight: 400; }
.vh-hero .vh-ln.hl { color: var(--vh-a); }
.vh-hero .vh-ln.ol { color: transparent; -webkit-text-stroke: clamp(1.2px, .16vw, 2.4px) var(--vh-fg); }
.vh-hero .vh-wm { display: inline-block; vertical-align: top; padding: .1em .03em .05em; margin: -.1em -.03em -.05em; }
.vh-hero .vh-a0 .vh-wm { overflow: hidden; }
.vh-hero .vh-w { display: inline-block; }

.vh-hero .vh-a0 .vh-w { transform: translateY(115%); }
.vh-hero .vh-a1 .vh-w { opacity: 0; filter: blur(14px); transform: translateY(26px) scale(1.12); }
.vh-hero .vh-a2 .vh-w { opacity: 0; transform: translateX(-80px) skewX(-14deg); }
.vh-hero .vh-a3 .vh-w { opacity: 0; transform: translateX(80px) skewX(14deg); }
.vh-hero .vh-a4 .vh-w { opacity: 0; transform: scale(.35) rotate(-6deg); }
.vh-hero .vh-a5 .vh-w { opacity: 0; transform: perspective(700px) rotateX(-85deg); transform-origin: 50% 100%; }
.vh-hero .active .vh-w { animation: vh-land .9s var(--vh-spring) forwards; animation-delay: calc(var(--off, 0ms) + var(--i) * 75ms + 100ms); }
.vh-hero .vh-a0.active .vh-w, .vh-hero .vh-a1.active .vh-w { animation-timing-function: cubic-bezier(.2, .75, .1, 1); }
@keyframes vh-land { to { opacity: 1; filter: none; transform: none; } }
.vh-hero .out .vh-w { animation: vh-leave .5s cubic-bezier(.6, 0, .9, .4) forwards; animation-delay: calc(var(--i) * 28ms); }
@keyframes vh-leave { from { opacity: 1; filter: none; transform: none; } to { opacity: 0; filter: blur(8px); transform: translateY(-45%) scale(.92); } }

/* palavra por palavra: entra uma, sai, entra outra */
.vh-hero .vh-seqbox { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; }
.vh-hero .vh-sq { grid-area: 1 / 1; font-family: var(--vh-display); text-transform: uppercase; line-height: 1; font-size: clamp(46px, 11vw, 132px); color: var(--vh-fg); opacity: 0; text-align: center; padding-inline: 8px; }
.vh-hero .vh-sq.hi { color: var(--vh-a); }
.vh-hero .active .vh-sq { animation: vh-sqword .54s cubic-bezier(.3, 1.3, .5, 1) forwards; animation-delay: calc(var(--q) * 470ms + 200ms); }
@keyframes vh-sqword {
  0% { opacity: 0; transform: scale(.5) translateY(36px); filter: blur(10px); }
  20% { opacity: 1; transform: none; filter: none; }
  78% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: scale(1.3) translateY(-34px); filter: blur(8px); }
}
.vh-hero .out .vh-sq { animation: none; opacity: 0; }

.vh-hero .vh-badge { position: relative; width: clamp(96px, 15vw, 150px); aspect-ratio: 1; display: grid; place-items: center; color: var(--vh-a); transform: scale(0); }
.vh-hero .active .vh-badge { animation: vh-popb .8s .05s var(--vh-spring) forwards; }
@keyframes vh-popb { to { transform: scale(1); } }
.vh-hero .vh-badge svg.vh-ico { width: 52%; height: 52%; stroke-width: 1.5; }
.vh-hero .vh-badge svg.vh-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: vh-spin 14s linear infinite; }
@keyframes vh-spin { to { transform: rotate(360deg); } }
.vh-hero .out .vh-badge { transform: scale(0); transition: transform .35s ease; animation: none; }

.vh-hero .vh-foot { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.vh-hero .vh-sub { max-width: 52ch; margin: 0; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.5; color: var(--vh-muted); opacity: 0; transform: translateY(12px); }
.vh-hero .active .vh-sub { animation: vh-fade .7s .8s ease forwards; }
@keyframes vh-fade { to { opacity: 1; transform: none; } }
.vh-hero .out .vh-sub, .vh-hero .out .vh-cta { animation: vh-fadeout .35s ease forwards; }
@keyframes vh-fadeout { from { opacity: 1; } to { opacity: 0; } }
.vh-hero .vh-cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 4px; text-decoration: none;
  font-family: var(--vh-body); font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--vh-ona); background: var(--vh-a); opacity: 0; transition: transform .2s ease, box-shadow .2s ease; }
.vh-hero .active .vh-cta { animation: vh-fade .7s .95s ease forwards; }
.vh-hero .vh-cta svg { width: 18px; height: 18px; transition: transform .2s ease; }
.vh-hero .vh-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px var(--vh-a); color: var(--vh-ona); }
.vh-hero .vh-cta:hover svg { transform: translateX(4px); }
.vh-hero .vh-cta:focus-visible, .vh-hero .vh-ctl:focus-visible, .vh-hero .vh-seg:focus-visible { outline: 2px solid var(--vh-a); outline-offset: 3px; }

/* icones grandes */
.vh-hero .vh-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; transition: opacity .4s ease; }
.vh-hero .out .vh-deco { opacity: 0; }
.vh-hero .vh-hico { position: absolute; left: 50%; top: 50%; width: clamp(300px, 84vmin, 840px); aspect-ratio: 1; color: var(--vh-a); opacity: .16; translate: -50% -50%; animation: vh-hfloat 7s ease-in-out infinite alternate; }
@keyframes vh-hfloat { from { transform: translateY(-14px) rotate(-3deg) scale(1); } to { transform: translateY(14px) rotate(3deg) scale(1.05); } }
.vh-hero .vh-hico svg { width: 100%; height: 100%; stroke-width: .3; overflow: visible; }
.vh-hero .vh-hico svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.vh-hero .active .vh-hico svg > * { animation: vh-draw 1.8s .15s cubic-bezier(.5, 0, .2, 1) forwards; }
@keyframes vh-draw { to { stroke-dashoffset: 0; } }
.vh-hero .vh-tile { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--s) * 1px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(0) rotate(-80deg); }
.vh-hero .active .vh-tile { animation: vh-pop .8s var(--vh-spring) forwards; animation-delay: calc(.3s + var(--n) * 130ms); }
@keyframes vh-pop { to { transform: translate(-50%, -50%) scale(1) rotate(var(--r)); } }
.vh-hero .vh-tile > div { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 24%; color: var(--vh-a);
  border: 1px solid color-mix(in srgb, var(--vh-a) 50%, transparent); background: color-mix(in srgb, var(--vh-a) 11%, transparent);
  animation: vh-bob 3.8s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.9s); }
@keyframes vh-bob { from { transform: translateY(-10px) rotate(-4deg); } to { transform: translateY(10px) rotate(4deg); } }
.vh-hero .vh-tile svg { width: 54%; height: 54%; stroke-width: 1.6; }

.vh-hero .vh-controls { position: relative; z-index: 7; display: flex; align-items: flex-end; gap: 20px; }
.vh-hero .vh-segs { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.vh-hero .vh-seg { all: unset; cursor: pointer; display: grid; gap: 9px; min-width: 0; }
.vh-hero .vh-seg:hover, .vh-hero .vh-seg:focus { background: none; color: inherit; }
.vh-hero .vh-seg .vh-bar { height: 3px; background: color-mix(in srgb, var(--vh-fg) 20%, transparent); position: relative; overflow: hidden; }
.vh-hero .vh-seg .vh-bar i { position: absolute; inset: 0; background: var(--vh-a); transform: scaleX(0); transform-origin: left; }
.vh-hero .vh-seg.done .vh-bar i { transform: scaleX(1); }
.vh-hero .vh-seg .vh-lb { font-family: var(--vh-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--vh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .25s ease; }
.vh-hero .vh-seg:hover .vh-lb, .vh-hero .vh-seg.on .vh-lb { color: var(--vh-fg); }
.vh-hero .vh-btns { display: flex; gap: 8px; }
.vh-hero .vh-ctl { all: unset; cursor: pointer; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--vh-fg) 26%, transparent); border-radius: 50%; color: var(--vh-fg); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.vh-hero .vh-ctl:hover, .vh-hero .vh-ctl:focus { background: var(--vh-a); color: var(--vh-ona); border-color: var(--vh-a); }
.vh-hero .vh-ctl svg { width: 18px; height: 18px; }

@media (max-width: 900px) {
  .vh-hero .vh-segs { gap: 5px; }
  .vh-hero .vh-seg .vh-lb { display: none; }
  .vh-hero .vh-tile { width: calc(var(--s) * .55px); }
  .vh-hero .vh-tile > div { opacity: .75; }
  .vh-hero .vh-hico { opacity: .12; }
}
@media (max-width: 520px) {
  .vh-hero .vh-btns .vh-ctl:not(.pp) { display: none; }
  .vh-hero .vh-now { display: none; }
  .vh-hero .vh-sq { font-size: clamp(40px, 15vw, 84px); }
}
@media (prefers-reduced-motion: reduce) {
  .vh-hero .vh-bgw, .vh-hero .vh-hico, .vh-hero .vh-tile > div, .vh-hero .active .vh-words, .vh-hero .vh-badge svg.vh-ring { animation: none !important; }
  .vh-hero .vh-w { opacity: 1 !important; filter: none !important; transform: none !important; animation: none !important; }
  .vh-hero .vh-sub, .vh-hero .vh-cta { opacity: 1; transform: none; animation: none !important; }
  .vh-hero .vh-badge { transform: none; animation: none !important; }
  .vh-hero .vh-tile { transform: translate(-50%, -50%) rotate(var(--r)) !important; animation: none !important; }
  .vh-hero .vh-hico svg > * { stroke-dashoffset: 0 !important; animation: none !important; }
  .vh-hero .vh-meta::before, .vh-hero .vh-meta::after { transform: none; animation: none !important; }
  .vh-hero .vh-wipe { display: none; }
}