/* ================================
   Variáveis padrão para animações
================================ */
:root {
  --ec-duration: 4s;
  --ec-delay: 0s;
  --ec-iter: infinite;
  --ec-ease: ease-in-out;
  --ec-dist: 10px;
  --ec-amp-x: 50px;
  --ec-amp-y: 12px;
  --ec-rotate: 6deg;
  --ec-scale: 1.05;
}

/* ================================
   Proteção do Navbar e Menu Mobile
================================ */
#ecNav * {
  animation: none !important;
  transform: none !important;
}
#ecNav #mobileMenu {
  --ec-menu-x: 100%;
  transform: translateX(var(--ec-menu-x)) !important;
  transition: transform .3s ease;
  will-change: transform;
}
#ecNav #mobileMenu.is-open { --ec-menu-x: 0%; }
#ecNav #mobileMenu * { transform: none !important; }

/* ================================
   Animações isoladas (uso apenas em quem precisa)
================================ */

/* Float vertical */
@keyframes ec-float-y {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(var(--ec-amp-y, 12px)); }
}
.ec-animate-float-y {
  animation: ec-float-y var(--ec-duration,4s) var(--ec-ease,ease-in-out) var(--ec-delay,0s) var(--ec-iter,infinite);
  will-change: transform;
}

/* Float horizontal */
@keyframes ec-float-x {
  0%,100% { transform: translateX(0); }
  50%     { transform: translateX(var(--ec-amp-x, 50px)); }
}
.ec-animate-float-x {
  animation: ec-float-x var(--ec-duration,4s) var(--ec-ease,ease-in-out) var(--ec-delay,0s) var(--ec-iter,infinite);
  will-change: transform;
}

/* Panorama horizontal */
@keyframes ec-pan-x {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(var(--ec-amp-x, 50px)); }
  100% { transform: translateX(0); }
}
.ec-animate-pan-x {
  animation: ec-pan-x var(--ec-duration,8s) var(--ec-ease,ease-in-out) var(--ec-delay,0s) var(--ec-iter,infinite);
  will-change: transform;
}

/* Panorama vertical */
@keyframes ec-pan-y {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(var(--ec-amp-y, 18px)); }
  100% { transform: translateY(0); }
}
.ec-animate-pan-y {
  animation: ec-pan-y var(--ec-duration,8s) var(--ec-ease,ease-in-out) var(--ec-delay,0s) var(--ec-iter,infinite);
  will-change: transform;
}

/* Pulse scale */
@keyframes ec-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(var(--ec-scale, 1.05)); }
}
.ec-animate-pulse {
  animation: ec-pulse var(--ec-duration,2.5s) var(--ec-ease,ease-in-out) var(--ec-delay,0s) var(--ec-iter,infinite);
  will-change: transform;
}

/* Tilt */
@keyframes ec-tilt {
  0%,100% { transform: rotate(0deg); }
  50%     { transform: rotate(var(--ec-rotate, 6deg)); }
}
.ec-animate-tilt {
  animation: ec-tilt var(--ec-duration,4s) var(--ec-ease,ease-in-out) var(--ec-delay,0s) var(--ec-iter,infinite);
  transform-origin: center;
  will-change: transform;
}

/* Entradas com fade */
@keyframes ec-fade-up { from { opacity:0; transform: translateY(var(--ec-dist,10px)); } to { opacity:1; transform: translateY(0); } }
@keyframes ec-fade-down { from { opacity:0; transform: translateY(calc(var(--ec-dist,10px) * -1)); } to { opacity:1; transform: translateY(0); } }
@keyframes ec-fade-left { from { opacity:0; transform: translateX(var(--ec-dist,12px)); } to { opacity:1; transform: translateX(0); } }
@keyframes ec-fade-right { from { opacity:0; transform: translateX(calc(var(--ec-dist,12px) * -1)); } to { opacity:1; transform: translateX(0); } }

.ec-animate-fade-up    { animation: ec-fade-up var(--ec-duration,700ms) cubic-bezier(.2,.65,.3,1) var(--ec-delay,0s) 1 both; }
.ec-animate-fade-down  { animation: ec-fade-down var(--ec-duration,700ms) cubic-bezier(.2,.65,.3,1) var(--ec-delay,0s) 1 both; }
.ec-animate-fade-left  { animation: ec-fade-left var(--ec-duration,700ms) cubic-bezier(.2,.65,.3,1) var(--ec-delay,0s) 1 both; }
.ec-animate-fade-right { animation: ec-fade-right var(--ec-duration,700ms) cubic-bezier(.2,.65,.3,1) var(--ec-delay,0s) 1 both; }

/* Cursor digitando */
#typingText::after {
  content: "|";
  color: #c2485f;
  animation: ec-blink 1s steps(2, start) infinite;
}
@keyframes ec-blink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }



/* Evita layout “alargar” durante o pan */
.ec-pan-wrap{ position:relative; overflow:hidden; }

/* Garante que o transform não gere rolagem */
.ec-pan-target{
  display:block;
  max-width:100%;
  will-change:transform;
  transform: translateZ(0);
}

/* Segurança global contra barras horizontais */
html, body{ overflow-x:hidden; }





/* ================================
   NOVAS ANIMAÇÕES
   - Elevação de baixo para cima (entrada)
   - Panorama esquerda→direita (contínuo)
   - Quicar (bounce)
   - Correnteza / Wipe L→R (revelação)
   - Pulsar forte (variante)
================================ */

/* 1) Elevação de baixo para cima (one-shot) */
@keyframes ec-raise-in {
  from { opacity: 0; transform: translateY(var(--ec-dist, 16px)); }
  to   { opacity: 1; transform: translateY(0); }
}
.ec-animate-raise-in {
  animation: ec-raise-in var(--ec-duration, 700ms) cubic-bezier(.2,.65,.3,1) var(--ec-delay,0s) 1 both;
  will-change: transform, opacity;
}

/* 2) Panorama esquerda → direita (contínuo, não ping-pong) */
@keyframes ec-pan-ltr {
  0%   { transform: translateX(calc(var(--ec-amp-x, 50px) * -1)); }
  100% { transform: translateX(var(--ec-amp-x, 50px)); }
}
.ec-animate-pan-ltr {
  animation: ec-pan-ltr var(--ec-duration, 10s) linear var(--ec-delay,0s) var(--ec-iter,infinite);
  will-change: transform;
}

/* 3) Quicar (bounce) */
@keyframes ec-bounce {
  0%, 100% { transform: translateY(0);    animation-timing-function: cubic-bezier(.2,.6,.35,1); }
  40%      { transform: translateY(calc(var(--ec-amp-y, 18px) * -1)); animation-timing-function: cubic-bezier(.2,.65,.3,1); }
  55%      { transform: translateY(0); }
  70%      { transform: translateY(calc(var(--ec-amp-y, 10px) * -0.5)); }
  85%      { transform: translateY(0); }
}
.ec-animate-bounce {
  animation: ec-bounce var(--ec-duration, 1.2s) var(--ec-ease, ease-in-out) var(--ec-delay,0s) var(--ec-iter,infinite);
  will-change: transform;
}

/* 4) Correnteza (revelação da esquerda para direita) */
@keyframes ec-wipe-ltr {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.ec-animate-wipe-ltr {
  animation: ec-wipe-ltr var(--ec-duration, 1s) cubic-bezier(.2,.65,.3,1) var(--ec-delay,0s) 1 both;
  will-change: clip-path;
  /* fallback opcional para browsers antigos */
  /* overflow: hidden; */
}

/* 5) Pulsar forte (variante) */
@keyframes ec-pulse-strong {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(var(--ec-scale-strong, 1.1)); }
}
.ec-animate-pulse-strong {
  animation: ec-pulse-strong var(--ec-duration, 2s) var(--ec-ease, ease-in-out) var(--ec-delay,0s) var(--ec-iter,infinite);
  will-change: transform;
}