/* ============================================================
   GRANDE SÁBIO — animations.css
   Temática: Educação, Escola, Formação
   ============================================================ */

/* ============================================
   1. AOS — VARIANTES ADICIONAIS
   ============================================ */

/* slide da esquerda */
.aos-ready[data-aos="left"] {
  opacity: 0;
  transform: translateX(-44px);
  transition: opacity .7s ease, transform .7s ease;
}
.aos-ready[data-aos="left"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}

/* slide da direita */
.aos-ready[data-aos="right"] {
  opacity: 0;
  transform: translateX(44px);
  transition: opacity .7s ease, transform .7s ease;
}
.aos-ready[data-aos="right"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}

/* pop com bounce */
.aos-ready[data-aos="pop"] {
  opacity: 0;
  transform: scale(.78);
  transition: opacity .55s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.aos-ready[data-aos="pop"].aos-animate {
  opacity: 1;
  transform: scale(1);
}

/* flip 3D */
.aos-ready[data-aos="flip"] {
  opacity: 0;
  transform: perspective(700px) rotateY(28deg);
  transition: opacity .7s ease, transform .7s ease;
}
.aos-ready[data-aos="flip"].aos-animate {
  opacity: 1;
  transform: perspective(700px) rotateY(0);
}

/* delay utilities */
[data-aos-delay="100"] { transition-delay: 100ms !important; }
[data-aos-delay="200"] { transition-delay: 200ms !important; }
[data-aos-delay="300"] { transition-delay: 300ms !important; }
[data-aos-delay="400"] { transition-delay: 400ms !important; }
[data-aos-delay="500"] { transition-delay: 500ms !important; }
[data-aos-delay="600"] { transition-delay: 600ms !important; }
[data-aos-delay="700"] { transition-delay: 700ms !important; }
[data-aos-delay="800"] { transition-delay: 800ms !important; }

/* ============================================
   2. AUTO-STAGGER por grupo
   ============================================ */
.services-grid .service-card:nth-child(1) { --sd: 0ms; }
.services-grid .service-card:nth-child(2) { --sd: 110ms; }
.services-grid .service-card:nth-child(3) { --sd: 220ms; }
.services-grid .service-card:nth-child(4) { --sd: 330ms; }
.services-grid .service-card:nth-child(5) { --sd: 440ms; }
.services-grid .service-card:nth-child(6) { --sd: 550ms; }
.services-grid .service-card.aos-ready { transition-delay: var(--sd, 0ms) !important; }

/* cards pares: slide da direita em vez de baixo */
.services-grid .service-card:nth-child(even).aos-ready[data-aos] {
  transform: translateX(36px);
}
.services-grid .service-card:nth-child(even).aos-ready[data-aos].aos-animate {
  transform: translateX(0);
}

/* stats: bounce pop */
.stats-grid .stat-card:nth-child(1) { --sd: 0ms; }
.stats-grid .stat-card:nth-child(2) { --sd: 120ms; }
.stats-grid .stat-card:nth-child(3) { --sd: 240ms; }
.stats-grid .stat-card:nth-child(4) { --sd: 360ms; }
.stats-grid .stat-card.aos-ready { transition-delay: var(--sd, 0ms) !important; }
.stats-grid .stat-card.aos-ready[data-aos] {
  transform: scale(.82) translateY(20px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1) !important;
}
.stats-grid .stat-card.aos-ready[data-aos].aos-animate {
  transform: scale(1) translateY(0);
}

/* parceiros: stagger */
.partners-cards-grid .partner-teaser-card:nth-child(1) { --sd: 0ms; }
.partners-cards-grid .partner-teaser-card:nth-child(2) { --sd: 140ms; }
.partners-cards-grid .partner-teaser-card:nth-child(3) { --sd: 280ms; }
.partners-cards-grid .partner-teaser-card.aos-ready { transition-delay: var(--sd, 0ms) !important; }

/* ============================================
   3. HERO — texto gradiente animado
   ============================================ */
.hero-content h1 span {
  background: linear-gradient(90deg, #EE7727, #27BCEA, #EE7727, #f4984e);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientText 5s ease infinite;
  display: inline-block;
}

@keyframes gradientText {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Badge entrada */
.hero-badge {
  animation: badgePop .6s cubic-bezier(.34,1.56,.64,1) .4s both;
}
@keyframes badgePop {
  from { opacity: 0; transform: scale(.6) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Hero h1 entrada */
.hero-content h1 {
  animation: heroTitle .8s ease .6s both;
}
@keyframes heroTitle {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero parágrafo entrada */
.hero-content p {
  animation: heroTitle .8s ease .85s both;
}

/* Hero CTA entrada */
.hero-cta {
  animation: heroTitle .8s ease 1.05s both;
}

/* Pulse ring no botão primário do hero */
.hero-cta .btn-primary {
  position: relative;
  overflow: visible;
}
.hero-cta .btn-primary::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgba(238,119,39,.55);
  animation: pulseRing 2.8s ease-out infinite 1.5s;
  pointer-events: none;
}
@keyframes pulseRing {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* ============================================
   4. SECTION LABEL — estrelinhas piscantes
   ============================================ */
.section-label {
  position: relative;
  padding: 0 .2rem;
}
.section-label::before,
.section-label::after {
  content: '✦';
  font-size: .55rem;
  margin: 0 .35rem;
  vertical-align: middle;
  opacity: .5;
  animation: twinkle 2.4s ease-in-out infinite;
}
.section-label::after { animation-delay: 1.2s; }

@keyframes twinkle {
  0%, 100% { opacity: .2; transform: scale(.7) rotate(0deg); }
  50%       { opacity: .9; transform: scale(1.3) rotate(15deg); }
}

/* ============================================
   5. SECTION TITLE — linha animada ao entrar
   ============================================ */
.section-header .section-title,
.section-header.centered .section-title {
  position: relative;
  display: inline-block;
}
.section-header .section-title::after,
.section-header.centered .section-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), #27BCEA);
  transition: width 1s ease .2s;
}
.section-header.centered .section-title::after {
  left: 50%;
  transform: translateX(-50%);
}
.section-header.in-view .section-title::after {
  width: 56px;
}
.section-header.centered.in-view .section-title::after {
  width: 76px;
}

/* ============================================
   6. SERVICE CARDS — efeitos hover
   ============================================ */
.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
  will-change: transform;
}
.service-card:hover .service-icon {
  transform: scale(1.25) rotate(10deg);
}

/* Glare ao passar o rato */
.service-card {
  position: relative;
  overflow: hidden;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 55%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.07),
    transparent
  );
  transition: left .65s ease;
  pointer-events: none;
  z-index: 0;
}
.service-card:hover::before { left: 160%; }

/* ============================================
   7. STAT NUMBERS — hover + counter
   ============================================ */
.stat-number {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), color .3s ease;
  display: inline-block;
}
.stat-card:hover .stat-number {
  transform: scale(1.1);
  color: var(--teal);
}
.stat-number.counting {
  animation: countPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes countPop {
  0%   { transform: scale(.65); opacity: .2; }
  100% { transform: scale(1);   opacity: 1; }
}

/* ============================================
   8. PARTNER CARDS — icon wiggle
   ============================================ */
.partner-teaser-icon {
  transition: transform .3s ease;
  display: inline-block;
}
.partner-teaser-card:hover .partner-teaser-icon {
  animation: iconWiggle .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes iconWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%       { transform: rotate(-14deg) scale(1.2); }
  75%       { transform: rotate(14deg)  scale(1.2); }
}

/* ============================================
   9. BUTTONS — ripple ao clicar
   ============================================ */
.btn {
  position: relative;
  overflow: hidden;
}
.btn .btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  transform: scale(0);
  animation: btnRipple .65s linear;
  pointer-events: none;
}
@keyframes btnRipple {
  to { transform: scale(4.5); opacity: 0; }
}

/* ============================================
   10. PROGRESS BAR — topo da página
   ============================================ */
#gs-page-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), #27BCEA, var(--teal));
  background-size: 200% 100%;
  z-index: 9999;
  transition: width .25s ease;
  border-radius: 0 2px 2px 0;
  animation: progressShimmer 2s linear infinite;
  pointer-events: none;
}
@keyframes progressShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* ============================================
   11. INFO BOX — borda esquerda cresce
   ============================================ */
.info-box {
  position: relative;
  padding-left: 1.25rem;
}
.info-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 0;
  border-radius: 4px;
  background: linear-gradient(to bottom, var(--teal), #27BCEA, transparent);
  transition: height .9s cubic-bezier(.4,0,.2,1) .1s;
}
.info-box.in-view::before { height: 100%; }

/* ============================================
   12. FLOATING EDUCATIONAL PARTICLES (stats bg)
   ============================================ */
.edu-particle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  animation: floatEdu linear infinite;
  will-change: transform, opacity;
}
@keyframes floatEdu {
  0%   { opacity: 0;    transform: translateY(0)      rotate(0deg)   scale(.8); }
  8%   { opacity: .18; }
  92%  { opacity: .18; }
  100% { opacity: 0;    transform: translateY(-130px) rotate(360deg) scale(1.2); }
}

/* ============================================
   13. BACK-TO-TOP — hover bounce
   ============================================ */
.back-top {
  transition: transform .35s cubic-bezier(.34,1.56,.64,1),
              background .25s ease,
              opacity .3s ease,
              box-shadow .3s ease !important;
}
.back-top:hover {
  transform: translateY(-5px) scale(1.12) !important;
}

/* ============================================
   14. ABOUT IMAGES — hover lift
   ============================================ */
.about-img-main,
.about-img-secondary {
  transition: transform .5s ease, box-shadow .5s ease;
}
.about-img-main:hover {
  transform: scale(1.03) translateY(-6px);
  box-shadow: 0 24px 50px rgba(0,0,0,.22);
}
.about-img-secondary:hover {
  transform: scale(1.06) rotate(1.5deg);
  box-shadow: 0 14px 32px rgba(0,0,0,.18);
}

/* ============================================
   15. HERO OWL — efeito de brilho pulsante
   ============================================ */
.hero-owl {
  filter: drop-shadow(0 0 3px white) drop-shadow(0 0 3px white) drop-shadow(0 0 30px rgba(57,172,183,.6));
  animation: float 4s ease-in-out infinite, owlGlow 3s ease-in-out infinite;
}
@keyframes owlGlow {
  0%, 100% { filter: drop-shadow(0 0 3px white) drop-shadow(0 0 3px white) drop-shadow(0 0 30px rgba(238,119,39,.45)); }
  50%       { filter: drop-shadow(0 0 3px white) drop-shadow(0 0 3px white) drop-shadow(0 0 45px rgba(39,188,234,.65)); }
}

/* ============================================
   16. HERO SCROLL — animação contínua
   ============================================ */
.hero-scroll {
  animation: heroScrollBounce 2s ease-in-out infinite;
}
@keyframes heroScrollBounce {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%       { transform: translateY(8px); opacity: 1; }
}

/* ============================================
   17. FORMAÇÃO ACCORDION — highlight hover
   ============================================ */
.acc-header:hover {
  background: rgba(39,188,234,.06) !important;
}
.acc-item.open .acc-header {
  background: rgba(39,188,234,.1) !important;
}

/* ============================================
   18. LINK BTN hover — slide fill
   ============================================ */
.card-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  position: relative;
  transition: gap .3s ease;
}
.card-link::after {
  content: '→';
  transition: transform .3s ease;
}
.service-card:hover .card-link,
.partner-teaser-card:hover .card-link {
  gap: .6rem;
}
.service-card:hover .card-link::after,
.partner-teaser-card:hover .card-link::after {
  transform: translateX(4px);
}

/* ============================================
   prefers-reduced-motion — respeitar
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-badge,
  .hero-content h1,
  .hero-content p,
  .hero-cta,
  .hero-cta .btn-primary::before,
  .section-label::before,
  .section-label::after,
  .edu-particle,
  .hero-owl,
  .hero-scroll {
    animation: none !important;
  }
  .hero-content h1 span {
    -webkit-text-fill-color: var(--teal);
  }
  .service-card::before { display: none; }
  #gs-page-progress { display: none; }
  .section-header .section-title::after,
  .section-header.centered .section-title::after {
    transition: none;
    width: 60px;
  }
}

/* ============================================
   HERO OWL — piscar (partilhado com chatbot)
   ============================================ */
.gs-lid-l, .gs-lid-r {
  transform-box: fill-box;
  transform-origin: center top;
  animation: gsOwlBlink 4.8s ease-in-out infinite;
}
.gs-lid-r { animation-delay: .09s; }
@keyframes gsOwlBlink {
  0%,90%,100% { transform: scaleY(0.02); }
  93%         { transform: scaleY(1); }
  97%         { transform: scaleY(0.02); }
}