/* ============================================================
   WB UPGRADE — camada visual: fundo vivo, refinamentos de movimento,
   cabeçalho flutuante e modo leve para celular.
   Só atua quando o controlador adiciona .wb-upgrade ao <main>.
   ============================================================ */

/* ---------- Tokens ---------- */
.cortex-landing.wb-upgrade {
  --wb-ease-out: cubic-bezier(.16, 1, .3, 1);
  --wb-ease-soft: cubic-bezier(.22, 1, .36, 1);
  --wb-orb-a: color-mix(in srgb, var(--cl-accent) 26%, transparent);
  --wb-orb-b: color-mix(in srgb, #79d3ff 18%, transparent);
  --wb-orb-c: color-mix(in srgb, #bdf2ff 9%, transparent);
  --wb-ambient-opacity: 1;
  --wb-grain-opacity: .06;
}
.cortex-landing.wb-upgrade[data-landing-theme="light"] {
  --wb-orb-a: color-mix(in srgb, var(--cl-accent) 13%, transparent);
  --wb-orb-b: color-mix(in srgb, #59c0ff 10%, transparent);
  --wb-orb-c: color-mix(in srgb, #a8ecff 14%, transparent);
  --wb-ambient-opacity: .85;
  --wb-grain-opacity: .035;
}

/* ---------- Fundo vivo (fixo atrás de todo o conteúdo) ---------- */
.wb-ambient {
  --wb-scroll-p: 0;
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: strict;
  opacity: var(--wb-ambient-opacity);
}
.wb-ambient-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  translate: var(--wb-orb-px, 0px) calc(var(--wb-orb-py, 0px) + var(--wb-scroll-p) * var(--wb-orb-drift, -10vh));
  transition: translate 1.4s var(--wb-ease-soft);
}
.wb-ambient-orb-a {
  width: 72vmax; height: 72vmax;
  top: -34vmax; left: -22vmax;
  --wb-orb-drift: -14vh;
  background: radial-gradient(circle at 50% 50%, var(--wb-orb-a) 0%, color-mix(in srgb, var(--wb-orb-a) 45%, transparent) 28%, transparent 62%);
  animation: wb-orb-a 42s ease-in-out infinite alternate;
}
.wb-ambient-orb-b {
  width: 64vmax; height: 64vmax;
  right: -28vmax; bottom: -30vmax;
  --wb-orb-drift: 10vh;
  background: radial-gradient(circle at 50% 50%, var(--wb-orb-b) 0%, color-mix(in srgb, var(--wb-orb-b) 40%, transparent) 30%, transparent 64%);
  animation: wb-orb-b 54s ease-in-out infinite alternate;
}
.wb-ambient-orb-c {
  width: 38vmax; height: 38vmax;
  top: 36%; left: 54%;
  --wb-orb-drift: -22vh;
  background: radial-gradient(circle at 50% 50%, var(--wb-orb-c) 0%, transparent 60%);
  animation: wb-orb-c 36s ease-in-out infinite alternate;
}
.wb-ambient-grain {
  position: absolute;
  inset: 0;
  opacity: var(--wb-grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .72 0 0 0 0 .86 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  mix-blend-mode: soft-light;
}
.wb-ambient-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 38%, transparent 55%, color-mix(in srgb, var(--cl-bg) 55%, transparent) 100%);
}
@keyframes wb-orb-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(9vw, 7vh, 0) scale(1.08); }
  100% { transform: translate3d(-4vw, 12vh, 0) scale(.96); }
}
@keyframes wb-orb-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-11vw, -9vh, 0) scale(1.1); }
  100% { transform: translate3d(5vw, -16vh, 0) scale(.94); }
}
@keyframes wb-orb-c {
  0%   { transform: translate3d(0, 0, 0) scale(.9); opacity: .55; }
  50%  { transform: translate3d(-14vw, 8vh, 0) scale(1.15); opacity: 1; }
  100% { transform: translate3d(8vw, -10vh, 0) scale(1); opacity: .7; }
}

.wb-ambient[data-paused="true"] * { animation-play-state: paused !important; }

/* ---------- Halo giratório atrás dos títulos de seção ---------- */
.cortex-landing.wb-upgrade .cl-section-heading,
.cortex-landing.wb-upgrade .cl-final-content {
  position: relative;
  isolation: isolate;
}
.cortex-landing.wb-upgrade :is(.cl-section-heading, .cl-final-content)::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(760px, 130vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: .9;
  background: conic-gradient(from 0deg,
    transparent 0 18%,
    color-mix(in srgb, var(--cl-accent) 11%, transparent) 28%,
    transparent 40%,
    color-mix(in srgb, var(--cl-accent-soft) 8%, transparent) 58%,
    transparent 68%,
    color-mix(in srgb, #b8f1ff 5%, transparent) 84%,
    transparent 94%);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000a 30%, transparent 62%);
  mask-image: radial-gradient(circle, #000 0%, #000a 30%, transparent 62%);
  animation: wb-halo-spin 46s linear infinite;
}
.cortex-landing.wb-upgrade .cl-final-content::before { width: min(900px, 140vw); opacity: 1; }
@keyframes wb-halo-spin { to { rotate: 360deg; } }

/* ---------- Transição suave entre seções (sem corte seco) ---------- */
.cortex-landing.wb-upgrade .cl-purchase-section {
  border-top-color: transparent;
  border-bottom-color: transparent;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--cl-accent) 4%, transparent) 18% 82%, transparent),
    radial-gradient(ellipse at 0% 0%, var(--cl-accent-tint), transparent 38%);
}
.cortex-landing.wb-upgrade .cl-purchase-section::before,
.cortex-landing.wb-upgrade .cl-purchase-section::after {
  content: "";
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: min(1120px, 100% - 64px);
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cl-accent) 55%, var(--cl-border)) 35% 65%, transparent);
  opacity: .7;
}
.cortex-landing.wb-upgrade .cl-purchase-section::before { top: 0; }
.cortex-landing.wb-upgrade .cl-purchase-section::after { bottom: 0; }

/* ---------- Entradas mais ricas ---------- */
.cortex-landing.wb-upgrade.wb-motion-enabled {
  --wb-reveal-duration: 1050ms;
  --wb-reveal-distance: 36px;
}
.cortex-landing.wb-upgrade.wb-motion-enabled [data-wb-reveal] {
  scale: var(--wb-reveal-scale, 1);
  transition:
    opacity var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
    translate var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
    scale var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms),
    filter var(--wb-reveal-duration) var(--wb-reveal-ease) var(--wb-delay, 0ms);
}
.cortex-landing.wb-upgrade.wb-motion-enabled :is(.cl-feature, .cl-benefit, .cl-plan, .cl-pd-step)[data-wb-reveal="pending"] {
  --wb-reveal-scale: .965;
}
.cortex-landing.wb-upgrade.wb-motion-enabled [data-wb-reveal="visible"] { --wb-reveal-scale: 1; }

/* Cards: brilho de borda que acompanha o ponteiro (desktop) */
@media (hover: hover) and (pointer: fine) {
  .cortex-landing.wb-upgrade :is(.cl-feature, .cl-benefit, .cl-plan, .cl-faq-item) {
    --wb-mx: 50%;
    --wb-my: 50%;
  }
  .cortex-landing.wb-upgrade :is(.cl-feature, .cl-benefit, .cl-plan)::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 5;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: radial-gradient(220px circle at var(--wb-mx) var(--wb-my),
      color-mix(in srgb, var(--cl-accent-soft) 85%, #fff), transparent 60%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 320ms ease;
  }
  .cortex-landing.wb-upgrade :is(.cl-feature, .cl-benefit, .cl-plan):hover::after { opacity: .9; }

  /* Imagem dos projetos: zoom lento no hover */
  .cortex-landing.wb-upgrade .cl-feature-media img {
    transition: transform 1.1s var(--wb-ease-soft), scale 1.1s var(--wb-ease-soft);
  }
  .cortex-landing.wb-upgrade .cl-feature:hover .cl-feature-media img { scale: 1.045; }

  /* Botão secundário: varredura de luz */
  .cortex-landing.wb-upgrade .cl-button-secondary { position: relative; overflow: hidden; }
  .cortex-landing.wb-upgrade .cl-button-secondary::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, #cff5ff2e 50%, transparent 65%);
    translate: -120% 0;
    transition: translate 0s;
  }
  .cortex-landing.wb-upgrade .cl-button-secondary:hover::after {
    translate: 120% 0;
    transition: translate 760ms var(--wb-ease-soft);
  }
  .cortex-landing.wb-upgrade .cl-button-secondary:hover { translate: 0 -2px; }

  /* Abas do tour: indicador com respiro */
  .cortex-landing.wb-upgrade .cl-tour-tabs button { transition: color 180ms ease, background 220ms ease, translate 260ms var(--wb-ease-out); }
  .cortex-landing.wb-upgrade .cl-tour-tabs button:hover:not(.is-active) { translate: 0 -1px; }

  /* FAQ: pequeno deslocamento no hover */
  .cortex-landing.wb-upgrade .cl-faq-item { transition: border-color .22s, background .22s, translate .3s var(--wb-ease-out); }
  .cortex-landing.wb-upgrade .cl-faq-item:hover { translate: 2px 0; border-color: color-mix(in srgb, var(--cl-accent) 45%, var(--cl-border)); }
}

/* Ícones dos cards: anel de luz pulsando */
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-icon-box {
  position: relative;
}
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-icon-box::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--cl-accent) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  animation: wb-ring-pulse 4.8s ease-out infinite;
}
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-feature:nth-child(2) .cl-icon-box::before { animation-delay: -1.2s; }
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-feature:nth-child(3) .cl-icon-box::before { animation-delay: -2.4s; }
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-feature:nth-child(4) .cl-icon-box::before { animation-delay: -3.6s; }
@keyframes wb-ring-pulse {
  0% { opacity: 0; scale: .9; }
  12% { opacity: .9; }
  60%, 100% { opacity: 0; scale: 1.45; }
}

/* Eyebrow: traço que se desenha ao entrar */
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-section-heading .cl-eyebrow {
  position: relative;
  display: inline-flex;
  padding-inline: 14px;
}
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-section-heading .cl-eyebrow::before,
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-section-heading .cl-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cl-accent));
  scale: 0 1;
  transform-origin: right center;
  transition: scale 900ms var(--wb-ease-out) 350ms;
}
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-section-heading .cl-eyebrow::after {
  background: linear-gradient(90deg, var(--cl-accent), transparent);
  transform-origin: left center;
}
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-section-heading .cl-eyebrow[data-wb-reveal="visible"]::before,
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-section-heading .cl-eyebrow[data-wb-reveal="visible"]::after { scale: 1 1; }

/* Título do hero: ponto final com brilho respirando */
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-accent {
  display: inline-block;
  animation: wb-accent-breathe 3.2s ease-in-out infinite;
}
@keyframes wb-accent-breathe {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  50% { text-shadow: 0 0 18px var(--cl-accent), 0 0 2px var(--cl-accent-soft); }
}

/* Moldura do tour: borda de luz que percorre ---------- */
.cortex-landing.wb-upgrade.wb-motion-enabled .cl-tour-frame-shell::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 3;
  border-radius: calc(var(--cl-showcase-radius, 19px) + 1px);
  padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--wb-frame-angle, 0deg),
    transparent 0 72%, color-mix(in srgb, var(--cl-accent-soft) 70%, #fff) 86%, var(--cl-accent) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .75;
  animation: wb-frame-orbit 9s linear infinite;
}
@property --wb-frame-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes wb-frame-orbit { to { --wb-frame-angle: 360deg; } }

/* ---------- Cabeçalho flutuante (aparece ao rolar para cima) ---------- */
.cortex-landing.wb-upgrade .cl-container:has(> .cl-header) { min-height: var(--wb-header-h, 96px); }
.cortex-landing.wb-upgrade[data-wb-header] .cl-header { transition: none; }
.cortex-landing.wb-upgrade[data-wb-header="pinned"] .cl-header,
.cortex-landing.wb-upgrade[data-wb-header="hidden"] .cl-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: 66px;
  padding-inline: max(24px, calc((100% - 1120px) / 2));
  background: color-mix(in srgb, var(--cl-bg) 82%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--cl-border) 75%, transparent);
  box-shadow: 0 10px 40px -18px #000c;
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  translate: 0 0;
  transition: translate 420ms var(--wb-ease-out), background 300ms ease;
}
.cortex-landing.wb-upgrade[data-wb-header="pinned"] .cl-header { animation: wb-header-in 480ms var(--wb-ease-out) both; }
.cortex-landing.wb-upgrade[data-wb-header="hidden"] .cl-header { translate: 0 -110%; }
.cortex-landing.wb-upgrade[data-wb-header="pinned"] .cl-header .cl-brand,
.cortex-landing.wb-upgrade[data-wb-header="hidden"] .cl-header .cl-brand { width: 148px; }
/* O menu do celular é irmão do cabeçalho; acompanha a posição fixa. */
.cortex-landing.wb-upgrade:is([data-wb-header="pinned"], [data-wb-header="hidden"]) .cl-mobile-nav {
  position: fixed;
  z-index: 61;
  top: 72px;
  left: 16px;
  right: 16px;
  max-height: calc(100dvh - 88px);
  overflow: auto;
  animation: wb-header-nav-in 320ms var(--wb-ease-out) both;
}
@keyframes wb-header-nav-in {
  from { opacity: 0; translate: 0 -8px; }
  to { opacity: 1; translate: 0 0; }
}
.cortex-landing.wb-upgrade:is([data-wb-header="pinned"], [data-wb-header="hidden"]) .cl-skip-link { position: fixed; }
@keyframes wb-header-in {
  from { translate: 0 -110%; }
  to { translate: 0 0; }
}
@media (width <= 900px) {
  .cortex-landing.wb-upgrade[data-wb-header="pinned"] .cl-header,
  .cortex-landing.wb-upgrade[data-wb-header="hidden"] .cl-header { height: 62px; padding-inline: 20px; }
}

/* ---------- Barra de progresso mais refinada ---------- */
.cortex-landing.wb-upgrade ~ .wb-scroll-progress,
html:has(.cortex-landing.wb-upgrade) .wb-scroll-progress {
  height: 3px;
  z-index: 70;
  background: linear-gradient(90deg, #166cda, #3baaff 40%, #8ddeff 80%, #b7f1ff);
  box-shadow: 0 0 14px #4ab5ff77, 0 0 2px #fff3;
  border-radius: 0 3px 3px 0;
}

/* ---------- Scroll suave nativo como reserva ---------- */
html:has(.cortex-landing.wb-upgrade):not(.lenis) { scroll-behavior: smooth; }
html:has(.cortex-landing.wb-upgrade) :is(section, footer, [id]) { scroll-margin-top: 84px; }

/* ============================================================
   MODO LEVE (celular / aparelhos modestos): html.wb-lite
   Mantém o visual, retira o que custa caro no processador do celular.
   ============================================================ */
html.wb-lite .wb-ambient-orb { transition: none; translate: none; will-change: auto; }
html.wb-lite .wb-ambient-orb-a { width: 58vmax; height: 58vmax; top: -26vmax; left: -20vmax; animation-duration: 64s; }
html.wb-lite .wb-ambient-orb-b { width: 54vmax; height: 54vmax; right: -24vmax; bottom: -26vmax; animation-duration: 76s; }
html.wb-lite .wb-ambient-orb-c { display: none; }
html.wb-lite .wb-ambient-grain { mix-blend-mode: normal; opacity: .035; }
html.wb-lite .wb-ambient-vignette { display: none; }

/* Blur em transição é o que mais trava no celular. */
html.wb-lite .cortex-landing.wb-motion-enabled [data-wb-reveal],
html.wb-lite .cortex-landing.wb-motion-enabled [data-wb-reveal="pending"] {
  filter: none !important;
  transition-property: opacity, translate, scale;
}
html.wb-lite .cortex-landing.wb-motion-enabled { --wb-reveal-duration: 780ms; --wb-reveal-distance: 22px; }

/* Cabeçalho fixo sem desfoque de fundo. */
html.wb-lite .cortex-landing.wb-upgrade[data-wb-header="pinned"] .cl-header,
html.wb-lite .cortex-landing.wb-upgrade[data-wb-header="hidden"] .cl-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--cl-bg);
}

/* Efeitos de repintura contínua desligados. */
html.wb-lite .cortex-landing.wb-motion-enabled .cl-feature-media::before { animation: none; }
html.wb-lite .cortex-landing.wb-motion-enabled .cl-product-frame { animation: none; }
html.wb-lite .cortex-landing .cl-product-frame .cl-frame-fade {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: linear-gradient(transparent 40%, color-mix(in srgb, var(--cl-bg) 30%, transparent) 70%, var(--cl-bg) 100%);
}
html.wb-lite .wb-service-art .wb-subject { filter: none !important; }
html.wb-lite .cortex-landing .cl-tour-frame-shell::before { filter: none; }
html.wb-lite .cortex-landing .cl-feature-media::after { filter: blur(4px); }
html.wb-lite .cortex-landing.wb-upgrade.wb-motion-enabled .cl-tour-frame-shell::after { animation-duration: 14s; }
html.wb-lite .cortex-landing.wb-upgrade :is(.cl-section-heading, .cl-final-content)::before { animation-duration: 70s; opacity: .7; }
html.wb-lite .cortex-landing.wb-upgrade.wb-motion-enabled .cl-accent { animation: none; }

/* Feixes e partículas mais baratos. */
html.wb-lite .wb-bits-beam { filter: none !important; opacity: .55; }
html.wb-lite .wb-bits-beam:nth-child(3) { display: none; }
html.wb-lite .wb-bits-mote:nth-child(n + 7) { display: none; }
html.wb-lite .wb-bits-mote { box-shadow: none; }
html.wb-lite .wb-bits-grid-stage { opacity: .28; }

/* Ilustrações dos serviços: menos camadas animadas simultâneas. */
html.wb-lite .wb-service-art .wb-current { animation-duration: 7s; }
html.wb-lite .wb-service-art .wb-aura { animation: none; }

/* ---------- Acessibilidade / impressão ---------- */
@media (prefers-reduced-motion: reduce) {
  .wb-ambient-orb, .wb-ambient-orb-a, .wb-ambient-orb-b, .wb-ambient-orb-c { animation: none !important; transition: none !important; translate: none !important; }
  .cortex-landing.wb-upgrade :is(.cl-section-heading, .cl-final-content)::before { animation: none !important; }
  .cortex-landing.wb-upgrade .cl-tour-frame-shell::after,
  .cortex-landing.wb-upgrade .cl-icon-box::before { display: none !important; }
  .cortex-landing.wb-upgrade[data-wb-header] .cl-header { animation: none !important; transition: none !important; }
  .cortex-landing.wb-upgrade .cl-eyebrow::before,
  .cortex-landing.wb-upgrade .cl-eyebrow::after { scale: 1 1 !important; transition: none !important; }
}
@media print, (forced-colors: active) {
  .wb-ambient { display: none !important; }
  .cortex-landing.wb-upgrade { background: var(--cl-bg); }
  .cortex-landing.wb-upgrade :is(.cl-section-heading, .cl-final-content)::before { display: none !important; }
}