/*
Theme Name: Heavy
Theme URI: https://heavyagencia.com.br
Description: Não Fazemos mágica, fazemos milagres!
Author: Jacques Palermo
Author URI: https://jacquespalermo.com
Template: twentytwentyfive
Version: 1.0.0
*/

/* estilos personalizados */

html, body { overflow-x: hidden; }


/* =========================================================
   HEAVY — PÁGINA DE ESCOLHA (mesh + logo + botões + legenda)
   ========================================================= */

:root{
  --heavy-black:#000;
  --heavy-white:#fff;
  --heavy-red:#c10f0b;   /* Empresas */
  --heavy-green:#addb00; /* Política */
}

html, body { overflow-x: hidden; background:#000; }

/* ===== Seção base ===== */
.heavy-choice{
  position: relative;
  min-height: 100svh;           /* viewport seguro no mobile */
  background: var(--heavy-black);
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;           /* separa blending/shadows do canvas */
}

/* Canvas de partículas */
#heavy-mesh{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: .95;
  pointer-events: none;         /* não intercepta cliques/hover */
}

/* Conteúdo */
.heavy-choice__inner{
  position: relative;
  z-index: 1;
  max-width: 1100px;
  width: 100%;
  padding: clamp(1.25rem, 4vw, 3rem);
  text-align: center;           /* centraliza logo, botões e legenda */
  color: var(--heavy-white);
}

/* ===== Logo (SVG inline) ===== */
.heavy-logo{ 
  opacity: 0; 
  transform: translateY(4px) scale(.985);
  margin-bottom: clamp(.75rem, 2.5vw, 1rem);
}
.heavy-logo svg{
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;
  shape-rendering: geometricPrecision;
  text-rendering: optimizeLegibility;
}

/* Estado inicial */
.logo-stroke--red{
  fill: none;
  stroke: var(--heavy-red);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pathLength: 1;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.logo-fill--red{
  fill: var(--heavy-red);
  opacity: 0;
}
.logo-letter{
  fill:#fff;
  opacity:0;
  transform: translateY(6px);
}

/* Animações */
.heavy-logo.is-in{ animation: logoFade .45s cubic-bezier(.22,.61,.36,1) .02s forwards; }
.heavy-logo.is-in .logo-stroke--red{ animation: drawRed .7s ease .10s forwards; }
.heavy-logo.is-in .logo-fill--red{ animation: fillRed .35s ease .60s forwards; }

.heavy-logo.is-in .logo-letter.l1{ animation: letterIn .24s ease .90s forwards; }
.heavy-logo.is-in .logo-letter.l2{ animation: letterIn .24s ease 1.08s forwards; }
.heavy-logo.is-in .logo-letter.l3{ animation: letterIn .24s ease 1.26s forwards; }
.heavy-logo.is-in .logo-letter.l4{ animation: letterIn .24s ease 1.44s forwards; }
.heavy-logo.is-in .logo-letter.l5{ animation: letterIn .24s ease 1.62s forwards; }

/* Keyframes */
@keyframes logoFade { to{ opacity:1; transform:none; } }
@keyframes drawRed  { to{ stroke-dashoffset:0; } }
@keyframes fillRed  { to{ opacity:1; } }
@keyframes letterIn { to{ opacity:1; transform:none; } }



/* Legenda */
.heavy-legend{
  color: rgba(255,255,255,.8);
  font-size: 1rem;
  margin-top: .9rem;
}

/* ===== Responsivo básico ===== */
@media (max-width: 640px){
  .heavy-logo svg{ width: 64vw; }
  .heavy-btn{
    display: block;             /* empilha naturalmente */
    width: 80%;
    margin: .5rem auto;
    font-size: 1.05rem;
    padding: 1.05rem 1.2rem;
	margin-top: 45px;
  }
  .heavy-legend{
    width: 90%;
    margin-inline: auto;
    line-height: 1.4;
  }
}

/* ===== Acessibilidade: reduzir movimento ===== */
@media (prefers-reduced-motion: reduce){
  .heavy-logo{ opacity:1; transform:none; animation:none; }
  .logo-stroke--red{ stroke-dashoffset:0; }
  .logo-fill--red, .logo-letter{ opacity:1; transform:none; animation:none; }
}

.heavy-logo.is-in .logo-fill--red{ opacity:1; }   /* já fica no estado visível */



/* **** fim pagina escolha ***/



.hero-title {
 
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase; /* remova se não quiser tudo maiúsculo */
   font-size: clamp(25px, 15vw, 80px);
  
}

/* ****** animação header **********/
/* cada linha controlada separadamente (anima ao carregar) */
.hero-title .line {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  animation: upfade 700ms cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-title .line:nth-child(1) { animation-delay: 280ms; }
.hero-title .line:nth-child(2) { animation-delay: 380ms; }

/* destaque preto para “Superficial.” */
.hero-title .highlight {
  background: #000;
  color: #fff;
  padding: 0 .18em .02em; /* ajuste fino do “bloco” */
  border-radius: 2px;     /* 0 se quiser retão */
  box-decoration-break: clone; 
  -webkit-box-decoration-break: clone; /* evita falha em quebra de linha */
}

/* animação */
@keyframes upfade {
  to { opacity: 1; transform: none; }
}

/* acessibilidade: se JS não carregar, já mostra tudo */
html:not(.js) .hero-title .line { opacity: 1; transform: none; }


/* Estado inicial (parágrafo e botão) */
.hero-sub,
.hero-cta,
.hero-cta .wp-element-button {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 600ms cubic-bezier(.22,.61,.36,1),
    transform 600ms cubic-bezier(.22,.61,.36,1);
}

/* Mostra com um pouco de delay (em cascata) */
.hero-sub.show {
  opacity: 1;
  transform: none;
  transition-delay: 140ms;
}
.hero-cta.show,
.hero-cta .wp-element-button.show {
  opacity: 1;
  transform: none;
  transition-delay: 300ms;
}

/* Fallback: se JS não carregar, tudo visível */
html:not(.js) .hero-sub,
html:not(.js) .hero-cta,
html:not(.js) .hero-cta .wp-element-button {
  opacity: 1;
  transform: none;
}

/* ================= Carrossel de Logos ===================== */
/* Keyframes: apenas UMA definição */
@keyframes logos-scroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-100%,0,0); }
}

/* Container */
.logos-carousel{
  overflow:hidden;
  padding:16px 0;
  position:relative;
}

/* TRACK (ul) – FORÇA a animação, sem chance de override */
.logos-carousel .carousel{
  display:inline-flex !important;
  align-items:center !important;
  gap:48px !important;
  flex-wrap:nowrap !important;

  /* garante largura > viewport */
  min-width:max-content !important;
  width:auto !important;

  /* animação (com !important em tudo) */
  animation-name: logos-scroll !important;
  animation-duration: 60s !important;       
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
  animation-play-state: running !important;
  will-change: transform;
}

/* === mais lento no mobile === */
@media {
  .logos-carousel .carousel {
	  
    animation-duration: 190s !important; 
  }
}

/* Itens */
.logos-carousel .carousel > li{ list-style:none; flex:0 0 auto !important; margin:0 !important; }

/* Imagens */
.logos-carousel .carousel img{
  height:150px; width:auto; object-fit:contain;
  filter:grayscale(100%); opacity:.75;
  transition: transform .3s, filter .3s, opacity .3s;
}
.logos-carousel .carousel img:hover{ filter:none; opacity:1; transform:scale(1.05); }


/* Movimento em scroll */

.scroll-section {
  position: relative;
  height: 100vh; /* altura da tela */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scroll-jumper {
  width: 400px;
  position: relative;
  transition: transform 0.3s ease-out;
  will-change: transform;
  transform: translateX(100%); /* começa fora da tela, à direita */
  
}

.scroll-jumper.in { transform: translateX(001%); }

/* mobile: invisível/fora do fluxo */
@media (max-width: 640px){
  .scroll-jumper{ display: none !important; }
}

/* animação hover */
.point {
  display: inline-block; /* garante que o transform funcione */
  transition: transform 0.3s ease; /* define a transição no estado base */
  will-change: transform; /* dica pro navegador usar GPU */
}

.point:hover {
  transform: scale(1.05) translateZ(0); /* suaviza e previne "piscadas" */
}

.claro img {
  opacity: 0.5;
  filter: grayscale(100%);
  transition: all 0.4s ease;
}

.claro img:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* ===== SVG LOGO – auto anima sem depender de .is-in ===== */
/* Estado inicial */
.heavy-logo{ opacity:0; transform:translateY(4px) scale(.985); }
.heavy-logo svg{ display:block; width:min(420px,80vw); height:auto; margin:0 auto; }
.logo-stroke--red{
  fill:none; stroke:#c10f0b; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  pathLength:1; stroke-dasharray:1; stroke-dashoffset:1;
}
.logo-fill--red{ fill:#c10f0b; opacity:0; }
.logo-letter{ fill:#fff; opacity:0; transform:translateY(6px); }

/* Auto-start: dispara assim que CSS carrega */
.heavy-logo{ animation:logoFade .45s cubic-bezier(.22,.61,.36,1) .05s forwards; }
.logo-stroke--red{ animation:drawRed .75s ease .10s forwards; }
.logo-fill--red{   animation:fillRed .35s ease .60s forwards; }
.logo-letter.l1{   animation:letterIn .24s ease .85s forwards; }
.logo-letter.l2{   animation:letterIn .24s ease 1.03s forwards; }
.logo-letter.l3{   animation:letterIn .24s ease 1.21s forwards; }
.logo-letter.l4{   animation:letterIn .24s ease 1.39s forwards; }
.logo-letter.l5{   animation:letterIn .24s ease 1.57s forwards; }

/* Keyframes */
@keyframes logoFade { to { opacity:1; transform:none; } }
@keyframes drawRed  { to { stroke-dashoffset:0; } }
@keyframes fillRed  { to { opacity:1; } }
@keyframes letterIn { to { opacity:1; transform:none; } }

/* Se algum CSS antigo ainda zera opacidade, vence com !important */
.heavy-logo svg .logo-fill--red,
.heavy-logo svg .logo-letter{ animation-play-state:running !important; }


/* ===== HERO – garante visibilidade e anima suave ===== */
.hero, .hero-title, .hero-subtitle, .hero-cta{ will-change: opacity, transform; }

/* Estado seguro inicial (se algum CSS antigo deixou zerado) */
.hero, .hero-title, .hero-subtitle, .hero-cta{
  opacity:1; transform:none;
}

/* Entrada opcional (quando tiver .hero--in) */
.hero--in .hero-title{ opacity:0; transform:translateY(10px); animation:heroIn .5s ease .05s forwards; }
.hero--in .hero-subtitle{ opacity:0; transform:translateY(12px); animation:heroIn .55s ease .12s forwards; }
.hero--in .hero-cta{ opacity:0; transform:translateY(14px); animation:heroIn .55s ease .20s forwards; }

@keyframes heroIn { to { opacity:1; transform:none; } }

/* --- HOTFIX mobile: impedir que os pills cortem nas bordas --- */
.heavy-choice__inner{ overflow: visible; } /* não muda layout, só evita clipping do conteúdo */

/* limitar a largura útil e dar um respiro lateral, sem alterar posicionamento */
@media (max-width: 640px){
  .heavy-ctas{ padding-inline: 14px; } /* mantém o mesmo layout, só garante espaço na lateral */
  .heavy-btn{
    max-width: calc(100vw - 28px); /* nunca ultrapassa a viewport */
    box-sizing: border-box;
    border-radius: 999px;
    transform: translateZ(0);      /* reduz artefatos do WebKit */
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* evita corte do raio no iOS */
  }
}


/* --- CHOICE: revelar CTAs após o logo --- */
.heavy-ctas { /* já existe; só garantindo transições suaves */ }
.heavy-ctas .heavy-btn{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}

/* quando a classe é aplicada via JS, entra em cascata */
.heavy-ctas.is-in .heavy-btn{ opacity:1; transform:none; }
.heavy-ctas.is-in .heavy-btn:nth-child(1){ transition-delay:.06s; }
.heavy-ctas.is-in .heavy-btn:nth-child(2){ transition-delay:.18s; }
/* se houver 3º item (legenda/terceiro botão), siga a progressão */
.heavy-ctas.is-in .heavy-btn:nth-child(3){ transition-delay:.30s; }



/* estado inicial */
.heavy-ctas .heavy-btn{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}

.heavy-legend{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}

/* quando ativar via JS */
.heavy-ctas.is-in .heavy-btn{ opacity: 1; transform: none; }
.heavy-ctas.is-in .heavy-btn:nth-child(1){ transition-delay: .06s; }
.heavy-ctas.is-in .heavy-btn:nth-child(2){ transition-delay: .18s; }
/* se houver mais botões, continue a progressão: .30s, .42s, ... */

/* legenda só aparece quando marcarmos .legend-in (via JS após últimos botões) */
.heavy-legend.legend-in{ opacity: 1; transform: none; }

/* ===== Botões (estilo leve, sem forçar alinhamento) ===== */
.heavy-ctas{     
	margin-bottom: 60px;
    margin-top: 60px;
}

.heavy-btn{
  display: inline-block;        /* deixa fluir naturalmente */
  margin: .5rem;                /* espaçamento entre botões */
  padding: .95rem 1.4rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 10px 24px -12px rgba(0,0,0,.8);
	
}
.heavy-btn:hover,
.heavy-btn:focus-visible{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.25);
  outline: none;  
}

/* Paletas */
.heavy-btn--emp{
  background: rgb(193 15 11 / 33%);
  box-shadow:
    inset 0 0 0 1px rgba(193,15,11,.4),
    0 18px 40px -18px rgba(193,15,11,.6);
}
.heavy-btn--pol{
  background: rgb(173 219 0 / 14%);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow:
    inset 0 0 0 1px rgba(173,219,0,.4),
    0 18px 40px -18px rgba(173,219,0,.6);
}

/* Hover com maior especificidade — vence .is-in e .point */
.heavy-ctas.is-in .heavy-btn:hover,
.heavy-ctas.is-in .heavy-btn:focus-visible{
  transform: scale(1.05) translateY(-2px);
  border-color: rgba(255,255,255,.25);
  outline: none;
}