:root{
  --evoe-orange:#E94E1B;
  --evoe-graphite:#3E4A43;
  --evoe-ink:#3C3C3B;
  --evoe-paper:#F2F0E9;
  --evoe-beige:#CBBBA0;
  --evoe-shadow:0 18px 40px rgba(0,0,0,.10);
  --evoe-ease:cubic-bezier(.2,.8,.2,1);

  /* Tipografia (padrão). Pode ser sobrescrito via Admin (partials/typography.php) */
  --font-display:'Oswald', sans-serif;
  --font-body:'Lora', serif;
  --font-tech:'Syncopate', sans-serif;
}

html{scroll-behavior:smooth;}
body{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-family:var(--font-body);}

/* Suavidade geral (sem ficar "enjoativo") */
a,button,[role="button"],input,textarea,select{
  transition-property:background-color,border-color,color,opacity,transform,box-shadow,filter;
  transition-duration:260ms;
  transition-timing-function:var(--evoe-ease);
}

/* Ajuste: animações existentes mais suaves */
.fade-in-section{
  opacity:0;
  transform:translateY(14px);
  transition:opacity 950ms var(--evoe-ease), transform 950ms var(--evoe-ease);
  will-change:opacity,transform;
}
.fade-in-section.is-visible{opacity:1; transform:none;}

/* Blob menos "agitado" */
.mask-blob{animation-duration:18s !important; filter:saturate(0.98) contrast(1.02);}

/* Ken Burns leve no hero (se existir) */
@keyframes kenBurns{
  0%{transform:scale(1.03) translateY(0px);}
  100%{transform:scale(1.10) translateY(-12px);}
}

/* Preloader / Splash */

/* === Preloader (tela de carregamento) === */
#evoe-preloader{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(1200px 600px at 20% 30%, rgba(233,78,27,.18), transparent 60%),
    radial-gradient(900px 540px at 82% 76%, rgba(233,78,27,.10), transparent 62%),
    linear-gradient(180deg, rgba(8,8,8,.92), rgba(0,0,0,.96));
  backdrop-filter: blur(10px);
  transition:opacity 520ms var(--evoe-ease), visibility 520ms var(--evoe-ease);
}

body:not(.evoe-loaded){overflow:hidden;}

#evoe-preloader .evoe-preloader-card{
  width:min(520px, calc(100% - 44px));
  padding:26px 22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(14px);
  box-shadow:0 28px 80px rgba(0,0,0,.45);
}

#evoe-preloader .evoe-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

#evoe-preloader img{
  height:46px;
  width:auto;
  opacity:.95;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.35));
  animation:evoe-float 2.8s var(--evoe-ease) infinite;
}

#evoe-preloader .evoe-ring{
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.18);
  border-top-color:rgba(233,78,27,.95);
  border-right-color:rgba(233,78,27,.55);
  animation:evoe-spin 0.95s linear infinite;
}

#evoe-preloader .evoe-loading-text{
  margin-top:14px;
  font-family:var(--font-tech);
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:rgba(255,255,255,.86);
  text-align:center;
}

@media (max-width: 640px){
  #evoe-preloader .evoe-preloader-card{padding:22px 18px; border-radius:18px; width:calc(100% - 32px);}
  #evoe-preloader img{height:42px;}
}

body.evoe-loaded #evoe-preloader{opacity:0; visibility:hidden; pointer-events:none;}

@keyframes evoe-spin{to{transform:rotate(360deg);}}
@keyframes evoe-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}


/* Modal/Lightbox com transição suave */
.evoe-modal{opacity:0; pointer-events:none; transition:opacity 260ms var(--evoe-ease);} 
.evoe-modal.is-open{opacity:1; pointer-events:auto;}
.evoe-modal .evoe-modal-backdrop{opacity:0; transition:opacity 260ms var(--evoe-ease);} 
.evoe-modal.is-open .evoe-modal-backdrop{opacity:1;}
.evoe-modal .evoe-modal-panel{opacity:0; transform:translateY(10px) scale(.985); transition:opacity 360ms var(--evoe-ease), transform 360ms var(--evoe-ease);} 
.evoe-modal.is-open .evoe-modal-panel{opacity:1; transform:none;}

/* Carrossel: evita conflito com scroll-smooth quando usamos animação custom */
#portfolioCarousel{scroll-behavior:auto;}


/* Botões e hovers menos agressivos */
.btn-evoe:hover{transform:translateY(-1px) !important; box-shadow:0 14px 28px rgba(0,0,0,.08) !important;}
.btn-evoe{transition-duration:280ms !important;}
.nav-link::after{transition-duration:320ms !important;}

/* Respeita acessibilidade */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
  #evoe-preloader img{animation:none !important;}
}


/* =========================================================
   Responsividade global • Evoé
   (celular • tablet • notebooks menores / 1366x768 etc.)
   ========================================================= */

/* Evita scroll horizontal por elementos absolutos (marquees / blobs) */
body{overflow-x:hidden;}

/* Imagens sempre fluidas */
img, video{max-width:100%; height:auto;}

/* Melhor leitura em telas menores */
@media (max-width: 640px){
  .evoe-preloader .evoe-preloader-card{padding:22px 18px;}
}

/* Telas com pouca altura (notebooks 768px de altura, etc.) */
@media (max-height: 820px){
  header.min-h-screen{padding-top:5rem !important;}
}

/* Menu mobile: garante scroll e espaçamento confortável */
#mobile-menu-overlay nav{padding-bottom:24px;}


/* =========================================================
   Logos do Rodapé (Marquee) • abaixo das redes sociais
   ========================================================= */
.evoe-logo-marquee{
  position:relative;
  overflow:hidden;
  /* visual mais "carrossel": faixa compacta e contínua */
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(6px);
  /* controles (podem ser sobrescritos via style inline no HTML) */
  --evoe-footer-logo-h: 24px;
  --evoe-footer-logo-w: 64px;
  --evoe-footer-logo-gap: 12px;
  --evoe-footer-logo-pad-y: 8px;
  --evoe-footer-logo-pad-x: 12px;
}

.evoe-logo-marquee::before,
.evoe-logo-marquee::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:32px;
  z-index:2;
  pointer-events:none;
}
.evoe-logo-marquee::before{
  left:0;
  background:linear-gradient(to right, rgba(15,17,21,1), rgba(15,17,21,0));
}
.evoe-logo-marquee::after{
  right:0;
  background:linear-gradient(to left, rgba(15,17,21,1), rgba(15,17,21,0));
}
.evoe-logo-track{
  display:flex;
  align-items:center;
  /* itens "no limite" (um do lado do outro, compactos) */
  gap: var(--evoe-footer-logo-gap);
  padding: var(--evoe-footer-logo-pad-y) var(--evoe-footer-logo-pad-x);
  width:max-content;
  /* animação padrão (CSS) — usada apenas se NÃO estiver no modo JS */
  animation:evoeLogoMarquee 22s linear infinite;
  will-change:transform;
}

/* Modo JS: não duplica logos, então usamos rolagem contínua via JS */
.evoe-logo-marquee--js .evoe-logo-track{
  animation:none;
  transform:translateX(0);
}
.evoe-logo-item{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  /* todos no mesmo tamanho (pequeno) */
  width: var(--evoe-footer-logo-w);
  height: var(--evoe-footer-logo-h);
  text-decoration:none;
  cursor:default;
}
.evoe-logo-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:.92;
  filter:grayscale(1) contrast(1.05);
  transition:opacity 260ms var(--evoe-ease), filter 260ms var(--evoe-ease), transform 260ms var(--evoe-ease);
}
.evoe-logo-item img:hover{opacity:1; filter:none; transform:translateY(-1px);}
.evoe-logo-item[href]{cursor:pointer;}

@keyframes evoeLogoMarquee{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

@media (max-width: 640px){
  .evoe-logo-track{gap: calc(var(--evoe-footer-logo-gap) * .85); padding: calc(var(--evoe-footer-logo-pad-y) * .9) calc(var(--evoe-footer-logo-pad-x) * .9); animation-duration:18s;}
  .evoe-logo-item{width: calc(var(--evoe-footer-logo-w) * .85); height: calc(var(--evoe-footer-logo-h) * .85);}
  .evoe-logo-marquee::before, .evoe-logo-marquee::after{width:24px;}
}

@media (prefers-reduced-motion: reduce){
  .evoe-logo-track{animation:none; transform:none;}
  .evoe-logo-marquee::before, .evoe-logo-marquee::after{display:none;}
}