/* ==========================================================================
   Corrente - arte, componentes e scroll effects
   Os tokens --c-*, --ff-*, --r-*, --dur-*, --ease-* vem do theme.json.
   ========================================================================== */

/* ---------- base ---------- */
.wp-site-blocks { position: relative; isolation: isolate; overflow-x: clip; }
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(summary):focus-visible {
  outline: 2px solid var(--c-amber); outline-offset: 3px; border-radius: var(--r-sm);
}

/* grao global: tambem evita banding nos gradientes desfocados */
.wp-site-blocks::after {
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .03; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- A CORRENTE ---------- */
.corrente { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .7; }
.corrente svg {
  width: 100%; height: 100%; display: block;
  /* a linha fica forte nas margens e discreta atras da coluna de leitura */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 14%, rgba(0,0,0,.18) 32%, rgba(0,0,0,.18) 68%, #000 86%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 14%, rgba(0,0,0,.18) 32%, rgba(0,0,0,.18) 68%, #000 86%, #000 100%);
}
.corrente .flow {
  fill: none; stroke: url(#gflow); stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0));
}
.corrente .flow-glow {
  fill: none; stroke: var(--c-cobalt-lift); stroke-width: 8;
  vector-effect: non-scaling-stroke; opacity: .14; filter: blur(10px);
  stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p, 0));
}
.corrente .no {
  fill: var(--c-amber); stroke: none; opacity: .18;
  transition: opacity var(--dur-3) var(--ease-out);
}
.corrente .no.on { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,191,0,.85)); }

/* ---------- AURORA ---------- */
.aurora { position: absolute; z-index: -2; pointer-events: none; border-radius: 50%; filter: blur(90px); }
.aurora--cobalt {
  width: min(64vw, 760px); aspect-ratio: 1.3; top: -14%; left: -12%;
  background: radial-gradient(circle at 40% 40%, var(--c-cobalt) 0%, transparent 66%); opacity: .55;
  animation: corrente-drift-a 34s var(--ease-flow) infinite alternate;
}
.aurora--amber {
  width: min(40vw, 460px); aspect-ratio: 1; top: 10%; right: -8%;
  background: radial-gradient(circle at 50% 50%, var(--c-amber-soft) 0%, transparent 62%); opacity: .16;
  animation: corrente-drift-b 28s var(--ease-flow) infinite alternate;
}
@keyframes corrente-drift-a { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(9%,7%,0) scale(1.2); } }
@keyframes corrente-drift-b { from { transform: translate3d(0,0,0) scale(1.1); } to { transform: translate3d(-8%,10%,0) scale(.92); } }

.tem-aurora { position: relative; }

/* ---------- cabecalho ---------- */
.corrente-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-2) var(--ease-out);
}
/* O desfoque fica num pseudo-elemento de proposito: backdrop-filter aplicado
   direto no header o transforma em containing block e prende o overlay
   position:fixed do menu mobile dentro da barra (menu "nao abre direito"). */
.corrente-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--c-base) 76%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.corrente-header.is-scrolled { border-bottom-color: var(--c-line); }
.corrente-header .wp-block-navigation-item__content { text-decoration: none; }
.corrente-header .current-menu-item > .wp-block-navigation-item__content { color: var(--c-text); }
.corrente-header .current-menu-item > .wp-block-navigation-item__content::after {
  content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-amber); margin: 4px auto 0;
}

/* ---------- eyebrow ---------- */
.is-style-corrente-eyebrow {
  font-family: var(--ff-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c-text-3);
  display: flex; align-items: center; gap: 12px; margin-bottom: 0;
}
.is-style-corrente-eyebrow::before {
  content: ""; width: 26px; height: 2px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--c-cobalt-lift), var(--c-amber));
}

/* ---------- varredura de gradiente ---------- */
.is-style-corrente-sweep, .sweep {
  background: linear-gradient(100deg, var(--c-amber) 0%, var(--c-amber-soft) 32%, var(--c-cobalt-lift) 78%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- cartao ---------- */
.is-style-corrente-card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-flow); padding: 24px;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.is-style-corrente-card:hover { border-color: var(--c-cobalt-lift); transform: translateY(-2px); }

/* ---------- bloco de resposta (AEO / GEO) ---------- */
.is-style-corrente-answer {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-amber); border-radius: var(--r-flow);
  padding: 32px; max-width: 728px;
}
.is-style-corrente-answer p:last-child { margin-bottom: 0; }

/* ---------- divisor em onda ---------- */
.is-style-corrente-onda {
  border: 0; height: 72px; opacity: 1; max-width: none !important;
  background: no-repeat center / 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 72' preserveAspectRatio='none'%3E%3Cpath d='M0 46 C 220 8 380 66 600 38 S 980 6 1200 34' fill='none' stroke='%231B2231' stroke-width='1.4'/%3E%3C/svg%3E");
}

/* ---------- passos numerados ---------- */
.is-style-corrente-passos { list-style: none; padding: 0; counter-reset: passo; }
.is-style-corrente-passos > li {
  counter-increment: passo; display: grid; grid-template-columns: 60px 1fr;
  gap: 16px; padding: 32px 0; margin: 0;
}
.is-style-corrente-passos > li + li { border-top: 1px solid var(--c-line); }
.is-style-corrente-passos > li::before {
  content: "0" counter(passo);
  font-family: var(--ff-mono); font-size: .8rem; letter-spacing: .1em; color: var(--c-amber);
}

/* ---------- bloco de prova ---------- */
.stat { display: flex; flex-direction: column; gap: 4px; }
.stat__value {
  font-family: var(--ff-display); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(2.4rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -.04em; color: var(--c-text);
}
.stat__label {
  font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-text-2);
}
.stat__source { font-size: .8rem; color: var(--c-text-3); }

/* ---------- frame de screencast ---------- */
.frame { border: 1px solid var(--c-line); border-radius: var(--r-lg); overflow: hidden; background: var(--c-raised); }
.frame__bar { height: 30px; display: flex; align-items: center; gap: 6px; padding: 0 16px; border-bottom: 1px solid var(--c-line); }
.frame__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-strong); }
.frame__body { position: relative; background: radial-gradient(120% 90% at 20% 30%, var(--c-cobalt-dim), transparent 70%); }
.frame__body img, .frame__body video, .frame__body iframe { display: block; width: 100%; height: auto; }
.frame__cap { font-family: var(--ff-mono); font-size: .72rem; color: var(--c-text-3); padding: 12px 16px; border-top: 1px solid var(--c-line); }

/* ---------- botoes ---------- */
.wp-block-button__link { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out); }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255,191,0,.35), 0 18px 50px -18px rgba(255,191,0,.5); }
.wp-block-button.is-style-outline .wp-block-button__link { border-color: var(--c-line-strong); color: var(--c-text); box-shadow: none; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--c-cobalt-lift); box-shadow: none; }
.btn-fluxo .wp-block-button__link { background: var(--c-cobalt); color: #fff; }
.btn-fluxo .wp-block-button__link:hover { box-shadow: 0 18px 60px -22px rgba(76,141,255,.6); }

/* ---------- meta e tag ---------- */
.meta-mono { font-family: var(--ff-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-3); }
.tag-sinal { display: inline-block; font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-amber); background: var(--c-amber-dim); padding: 5px 11px; border-radius: var(--r-full); }
.tag-fluxo { color: var(--c-cobalt-lift); background: var(--c-cobalt-dim); }

/* ---------- barra de progresso do artigo ---------- */
.progresso {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: var(--c-amber); transform-origin: 0 50%; transform: scaleX(var(--p, 0));
}
@supports (animation-timeline: scroll(root block)) {
  .progresso { transform: none; animation: corrente-progresso linear both; animation-timeline: scroll(root block); }
  @keyframes corrente-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- lista de artigos ---------- */
.artigo-card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-flow); overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.artigo-card:hover { border-color: var(--c-cobalt-lift); transform: translateY(-2px); }
.artigo-card .wp-block-post-title a { text-decoration: none; }

/* trilho horizontal */
.trilho { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.trilho > * { flex: 0 0 min(86vw, 340px); scroll-snap-align: start; }

/* ---------- indice lateral do artigo ---------- */
.indice { position: sticky; top: 96px; align-self: start; font-size: .9rem; }
.indice a { display: block; padding: 6px 0; color: var(--c-text-3); text-decoration: none; }
.indice a:hover, .indice a.is-ativo { color: var(--c-text); }
.indice a.is-ativo::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-amber); margin-right: 8px; vertical-align: middle; }

/* ---------- barra fixa de newsletter no mobile ---------- */
.barra-nl {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; align-items: center; gap: 12px; padding: 12px 16px;
  background: color-mix(in srgb, var(--c-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line);
  transform: translateY(110%); transition: transform var(--dur-3) var(--ease-out);
}
.barra-nl.is-visivel { transform: none; }
.barra-nl__texto { font-size: .86rem; color: var(--c-text-2); flex: 1; }
.barra-nl__fechar { background: none; border: 0; color: var(--c-text-3); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 4px 8px; }
@media (max-width: 781px) { .barra-nl { display: flex; } }

/* ---------- estados vazios: 404 e busca ---------- */
.estado-vazio { text-align: left; max-width: 60ch; }
.estado-vazio .codigo {
  font-family: var(--ff-display); font-weight: 700; letter-spacing: -.05em; line-height: .9;
  font-size: clamp(5rem, 22vw, 14rem);
  background: linear-gradient(100deg, var(--c-cobalt-lift), var(--c-cobalt-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- rodape ---------- */
.corrente-footer { border-top: 1px solid var(--c-line); color: var(--c-text-3); font-size: .88rem; }
.corrente-footer a:not(.wp-element-button) { color: var(--c-text-2); text-decoration: none; }
.corrente-footer a:not(.wp-element-button):hover { color: var(--c-amber); }
.corrente-footer .wp-element-button { color: var(--c-on-amber); text-decoration: none; }

/* ---------- formulario ---------- */
input[type=text], input[type=email], input[type=search], input[type=url], textarea, select {
  background: var(--c-base); color: var(--c-text); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-full); min-height: 48px; padding: 0 24px; font-family: var(--ff-text); font-size: .94rem;
}
textarea { border-radius: var(--r-md); padding: 16px 20px; min-height: 140px; }
input:focus, textarea:focus, select:focus { border-color: var(--c-amber); outline: none; box-shadow: 0 0 0 3px var(--c-amber-dim); }
::placeholder { color: var(--c-text-3); opacity: 1; }
.micro { font-size: .82rem; color: var(--c-text-3); }

/* ---------- revelacao ---------- */
.reveal { opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
@supports (animation-timeline: view()) {
  .reveal { opacity: 1; transform: none; animation: corrente-reveal linear both;
    animation-timeline: view(); animation-range: entry 5% cover 28%; }
}
@keyframes corrente-reveal { from { opacity: 0; transform: translate3d(0,26px,0); } to { opacity: 1; transform: none; } }

/* ---------- acessibilidade ---------- */
.pular-para-conteudo {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-amber); color: var(--c-base); padding: 12px 20px; border-radius: 0 0 var(--r-md) 0; font-weight: 600;
}
.pular-para-conteudo:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .12s !important; scroll-behavior: auto !important;
  }
  .corrente .flow, .corrente .flow-glow { stroke-dashoffset: 0 !important; }
  .corrente .no { opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .progresso { transform: scaleX(1); }
}

/* ---------- aurora em faixa full-bleed ---------- */
.alignfull.tem-aurora { position: relative; }
.alignfull.tem-aurora > :where(:not(.aurora)) { position: relative; }

/* aurora sem corte: a elipse desfocada sangra livre, o clip fica no wrapper da pagina */
.tem-aurora > :where(:not(.aurora)) { position: relative; z-index: 1; }
.aurora { will-change: transform; }