/* ================================================================
   EVOY — Frontend Enhancement Layer
   Animações, micro-interações e efeitos visuais
   Compatível com Elementor + tema Educatex
   ================================================================ */

/* ── 0. Variáveis de animação ──────────────────────────────────── */
:root {
  --evoy-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --evoy-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --evoy-ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --evoy-duration-fast:   0.3s;
  --evoy-duration-base:   0.6s;
  --evoy-duration-slow:   0.9s;
  --evoy-primary:      #2f827e;
  --evoy-primary-glow: rgba(47, 130, 126, 0.35);
}

/* ── 1. Scroll progress bar ─────────────────────────────────────── */
#evoy-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, #2f827e 0%, #52c4b8 50%, #2f827e 100%);
  background-size: 200% 100%;
  z-index: 99999;
  transition: width 0.1s linear;
  animation: evoy-shimmer 2.5s linear infinite;
  box-shadow: 0 0 10px var(--evoy-primary-glow);
}
@keyframes evoy-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ── 2. Scroll reveal — keyframes ───────────────────────────────── */
@keyframes evoy-fade-up {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes evoy-fade-down {
  from { opacity: 0; transform: translateY(-28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes evoy-fade-left {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes evoy-fade-right {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes evoy-scale-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes evoy-blur-in {
  from { opacity: 0; filter: blur(8px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Estado inicial — elementos aguardam entrada.
   Só elementos fora do viewport recebem esta classe (ver JS). */
.evoy-reveal {
  opacity: 0;
  will-change: opacity, transform;
}
/* Garantia: marquees e tickers nunca ficam invisíveis */
[class*="marquee"] .evoy-reveal,
[class*="ticker"]  .evoy-reveal,
[class*="brand"]   .evoy-reveal,
.elementor-section:first-of-type .evoy-reveal {
  opacity: 1 !important;
  animation: none !important;
}
.evoy-reveal.is-visible {
  animation-fill-mode: both;
  animation-duration: var(--evoy-duration-slow);
  animation-timing-function: var(--evoy-ease-out);
}
.evoy-reveal[data-reveal="fade-up"].is-visible    { animation-name: evoy-fade-up; }
.evoy-reveal[data-reveal="fade-down"].is-visible  { animation-name: evoy-fade-down; }
.evoy-reveal[data-reveal="fade-left"].is-visible  { animation-name: evoy-fade-left; }
.evoy-reveal[data-reveal="fade-right"].is-visible { animation-name: evoy-fade-right; }
.evoy-reveal[data-reveal="scale-in"].is-visible   { animation-name: evoy-scale-in; }
.evoy-reveal[data-reveal="blur-in"].is-visible    { animation-name: evoy-blur-in; }

/* Stagger delays automáticos para colunas irmãs */
.evoy-reveal[data-delay="100"].is-visible { animation-delay: 0.1s; }
.evoy-reveal[data-delay="200"].is-visible { animation-delay: 0.2s; }
.evoy-reveal[data-delay="300"].is-visible { animation-delay: 0.3s; }
.evoy-reveal[data-delay="400"].is-visible { animation-delay: 0.4s; }
.evoy-reveal[data-delay="500"].is-visible { animation-delay: 0.5s; }
.evoy-reveal[data-delay="600"].is-visible { animation-delay: 0.6s; }

/* ── 3. Micro-interações — Elementor icon-boxes e image-boxes ───── */
.elementor-widget-icon-box .elementor-icon-box-wrapper,
.elementor-widget-image-box .elementor-image-box-wrapper {
  transition:
    transform  var(--evoy-duration-fast) var(--evoy-ease-out),
    box-shadow var(--evoy-duration-fast) var(--evoy-ease-out);
  border-radius: 12px;
}
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper,
.elementor-widget-image-box:hover .elementor-image-box-wrapper {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}

/* Ícone com efeito de escala no hover */
.elementor-widget-icon-box .elementor-icon {
  transition: transform var(--evoy-duration-fast) var(--evoy-ease-spring);
}
.elementor-widget-icon-box:hover .elementor-icon {
  transform: scale(1.15) rotate(-4deg);
}

/* ── 4. Botões — efeito shimmer + lift ──────────────────────────── */
.elementor-widget-button .elementor-button,
.dtbtn,
.evoy-cs__btn {
  position: relative;
  overflow: hidden;
  transition:
    transform  var(--evoy-duration-fast) var(--evoy-ease-out),
    box-shadow var(--evoy-duration-fast) var(--evoy-ease-out) !important;
}
.elementor-widget-button .elementor-button::after,
.dtbtn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.55s var(--evoy-ease-smooth);
  pointer-events: none;
}
.elementor-widget-button .elementor-button:hover::after,
.dtbtn:hover::after {
  left: 160%;
}
.elementor-widget-button .elementor-button:hover,
.dtbtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(47, 130, 126, 0.35) !important;
}

/* ── 5. Imagens — hover zoom suave ─────────────────────────────── */
.elementor-widget-image img,
.elementor-widget-image-box img {
  transition: transform 0.5s var(--evoy-ease-smooth);
}
.elementor-widget-image:hover img,
.elementor-widget-image-box:hover img {
  transform: scale(1.04);
}
/* Wrapping overflow hidden */
.elementor-widget-image figure,
.elementor-widget-image-box figure {
  overflow: hidden;
  border-radius: 8px;
}

/* ── 6. Headings — underline animado ───────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
  position: relative;
  display: inline-block;
}

/* ── 7. Divisor / separador — animação de largura ──────────────── */
.elementor-widget-divider .elementor-divider-separator {
  animation: evoy-divider-grow 1.2s var(--evoy-ease-out) both;
  transform-origin: left center;
}
@keyframes evoy-divider-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── 8. Parallax containers ─────────────────────────────────────── */
.evoy-parallax-bg {
  will-change: background-position;
  backface-visibility: hidden;
}

/* ── 9. Contador animado ─────────────────────────────────────────── */
.elementor-counter-number-wrapper {
  position: relative;
}
.elementor-counter-number {
  display: inline-block;
  transition: opacity 0.3s ease;
}

/* ── 10. Sticky header — sombra ao fazer scroll ─────────────────── */
.em40_header_area_main {
  transition: box-shadow 0.3s var(--evoy-ease-smooth);
}
.em40_header_area_main.evoy-header-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

/* ── 11. Cursor personalizado (desktop only) ────────────────────── */
@media (pointer: fine) {
  body { cursor: none; }
  #evoy-cursor {
    position: fixed;
    top: 0; left: 0;
    width: 10px; height: 10px;
    background: var(--evoy-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, opacity 0.2s;
    mix-blend-mode: multiply;
  }
  #evoy-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    border: 1.5px solid var(--evoy-primary);
    border-radius: 50%;
    pointer-events: none;
    z-index: 999998;
    transform: translate(-50%, -50%);
    transition: transform 0.12s var(--evoy-ease-smooth),
                width 0.25s var(--evoy-ease-out),
                height 0.25s var(--evoy-ease-out),
                border-color 0.2s;
    opacity: 0.6;
  }
  body.cursor-hover #evoy-cursor {
    width: 6px; height: 6px;
    opacity: 0.6;
  }
  body.cursor-hover #evoy-cursor-ring {
    width: 54px; height: 54px;
    border-color: rgba(47, 130, 126, 0.4);
    opacity: 0.4;
  }
  body.cursor-clicking #evoy-cursor {
    transform: translate(-50%, -50%) scale(0.6);
  }
}

/* ── 12. Secção hero — animações de fundo ───────────────────────── */
@keyframes evoy-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-12px) rotate(1.5deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}
@keyframes evoy-pulse-ring {
  0%   { transform: scale(0.95); opacity: 0.6; }
  50%  { transform: scale(1.05); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.6; }
}

/* Decoração hero — shapes com float */
[class*="hero-shape"],
[class*="about-shape"],
[class*="hero-thumb"] .elementor-widget-image img:first-child {
  animation: evoy-float 6s ease-in-out infinite;
}

/* ── 13. Scroll suave global ─────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

/* ── 14. Seleção de texto com cor primária ──────────────────────── */
::selection {
  background: rgba(47, 130, 126, 0.18);
  color: #1e1e1e;
}

/* ── 15. Focus ring acessível ───────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid var(--evoy-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 16. Prefers reduced motion — desativa tudo ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  body { cursor: auto; }
  #evoy-cursor,
  #evoy-cursor-ring { display: none; }
}