/* viralizi.ai components: plain CSS classes for static HTML pages.
   Every colour, size, radius and curve comes from tokens.css; nothing here spells a hex. */

.vz-root { background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.vz-grid-bg {
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
}
.vz-only-gelo { display: none; }
[data-theme="gelo"] .vz-only-gelo { display: block; }
[data-theme="gelo"] .vz-only-noite { display: none; }

/* Button */
.vz-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent;
  font: 700 16px/1 var(--font-sans); letter-spacing: -0.005em; text-decoration: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.vz-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.vz-btn:active { transform: translateY(1px) scale(0.99); }
.vz-btn svg { width: 18px; height: 18px; flex: none; }
.vz-btn--primary { background: var(--action); color: var(--on-action); }
.vz-btn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--scan) 45%, transparent) 50%, transparent 70%);
}
.vz-btn--primary:hover::after { transform: translateX(120%); transition: transform var(--dur-slow) var(--ease-in-out); }
.vz-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.vz-btn--secondary:hover { border-color: var(--ink-muted); }
.vz-btn--ghost { background: transparent; color: var(--link); padding: 0 var(--space-3); }
.vz-btn--ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.vz-btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: 17px; }

/* Kicker and tag */
.vz-kicker {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-subtle);
}
.vz-kicker::before { content: ""; width: 24px; height: 1px; background: var(--scan); }
.vz-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill);
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--ink-muted); background: var(--surface-2); border: 1px solid var(--line);
}
.vz-tag--rec::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--scan); }
.vz-tag--ok { color: var(--success); }
.vz-tag--wait { color: var(--warning); }

/* Event card: a product moment floating over a photo or a video */
.vz-event {
  display: inline-flex; align-items: center; gap: var(--space-3); padding: 10px 16px 10px 10px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface) 84%, transparent); border: 1px solid var(--line); box-shadow: var(--shadow-float);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--ink);
}
.vz-event__icon {
  width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--scan) 16%, transparent); color: var(--scan);
}
.vz-event__icon svg { width: 18px; height: 18px; }
.vz-event--ok .vz-event__icon { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
.vz-event__title { display: block; font: 700 14px/1.25 var(--font-sans); }
.vz-event__meta { display: block; margin-top: 2px; font: 400 12px/1.35 var(--font-mono); color: var(--ink-subtle); }
.vz-event--in { animation: vz-pop var(--dur-slow) var(--ease-spring) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes vz-pop { from { opacity: 0; transform: translateY(14px) scale(0.8); } }

/* Scan frame: the logo's focus brackets around a photo or a video */
.vz-scanframe { position: relative; display: block; box-sizing: border-box; padding: var(--space-4); }
.vz-scanframe__media { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-lg); background: var(--surface); }
.vz-scanframe__corner { position: absolute; width: 18%; max-width: 64px; aspect-ratio: 1; border: 3px solid var(--ink); }
.vz-scanframe__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius-lg); }
.vz-scanframe__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: var(--radius-lg); }
.vz-scanframe__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: var(--radius-lg); }
.vz-scanframe__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: var(--radius-lg); }
.vz-scanframe__rec { position: absolute; top: 15px; right: 15px; width: 12px; height: 12px; border-radius: 50%; background: var(--scan); }
.vz-scanframe__line {
  position: absolute; left: var(--space-4); right: var(--space-4); top: var(--space-4); height: 2px; background: var(--scan);
  animation: vz-scan 2.6s var(--ease-in-out) infinite;
}
@keyframes vz-scan { 0% { top: var(--space-4); opacity: 0; } 12%, 88% { opacity: 1; } 100% { top: calc(100% - var(--space-4)); opacity: 0; } }

/* Level badge: the twin's level, Bronze to Diamante */
.vz-level { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.vz-level__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vz-level__name { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 15px/1.2 var(--font-sans); }
.vz-level__gem { width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: var(--level, var(--level-prata)); }
.vz-level__pct { font: 500 13px/1 var(--font-mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.vz-level__bar { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.vz-level__bar > i { display: block; height: 100%; width: var(--p, 50%); border-radius: inherit; background: var(--level, var(--level-prata)); }
.vz-level__next { font: 400 12px/1.4 var(--font-mono); color: var(--ink-subtle); }
.vz-level--bronze { --level: var(--level-bronze); }
.vz-level--prata { --level: var(--level-prata); }
.vz-level--ouro { --level: var(--level-ouro); }
.vz-level--diamante { --level: var(--level-diamante); }

/* Nav: floating glass bar */
.vz-nav {
  display: flex; align-items: center; gap: var(--space-6); padding: 10px 10px 10px var(--space-5); border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--bg) 72%, transparent); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.vz-nav__logo { display: block; flex: none; }
.vz-nav__logo img { display: block; height: 28px; width: auto; }
.vz-nav__links { display: flex; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.vz-nav__links a { color: var(--ink-muted); text-decoration: none; font: 500 15px/1 var(--font-sans); }
.vz-nav__links a:hover { color: var(--ink); }
.vz-nav__links a:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 4px; }
.vz-nav__cta { margin-left: auto; min-height: 44px; }
@media (max-width: 720px) { .vz-nav__links { display: none; } }

/* Stat: a big number with its label */
.vz-stats { display: flex; flex-wrap: wrap; gap: var(--space-7); }
.vz-stat { display: grid; gap: var(--space-1); }
.vz-stat__value { font: 800 48px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.vz-stat__value em { font-style: normal; color: var(--scan); }
.vz-stat__label { font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-subtle); }

@media (prefers-reduced-motion: reduce) {
  .vz-event--in, .vz-scanframe__line { animation: none; }
  .vz-scanframe__line { display: none; }
  .vz-btn--primary::after { display: none; }
  .vz-btn { transition: none; }
}