/* ==========================================================================
   Animations CSS — Educare Apresentação
   Efeitos replicados dos modelos do catálogo (WAAPI + Keyframes nativos)
   ========================================================================== */

/* 1. Revelação de Texto (Palavra por Palavra) */
.word-shell {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.word-shell .word {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.65s ease;
  will-change: transform, opacity;
}

.is-active .word-shell .word {
  transform: translateY(0);
  opacity: 1;
}

/* Stagger automático de palavras se não controlado por WAAPI */
.is-active .stagger-words .word-shell:nth-child(1) .word {
  transition-delay: 0.05s;
}

.is-active .stagger-words .word-shell:nth-child(2) .word {
  transition-delay: 0.12s;
}

.is-active .stagger-words .word-shell:nth-child(3) .word {
  transition-delay: 0.19s;
}

.is-active .stagger-words .word-shell:nth-child(4) .word {
  transition-delay: 0.26s;
}

.is-active .stagger-words .word-shell:nth-child(5) .word {
  transition-delay: 0.33s;
}

.is-active .stagger-words .word-shell:nth-child(6) .word {
  transition-delay: 0.40s;
}

.is-active .stagger-words .word-shell:nth-child(7) .word {
  transition-delay: 0.47s;
}

.is-active .stagger-words .word-shell:nth-child(8) .word {
  transition-delay: 0.54s;
}

/* 2. Pulso da Mãozinha e Halo de Amor */
@keyframes pulse-gentle {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 4px 14px rgba(255, 196, 0, 0.3));
  }

  50% {
    transform: scale(1.05);
    filter: drop-shadow(0 8px 24px rgba(255, 196, 0, 0.55));
  }
}

.pulse-anim {
  animation: pulse-gentle 3.5s ease-in-out infinite;
}

/* 3. Confetes do Logo Flutuantes */
.confetti-decor {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.confetti-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  opacity: 0.85;
}

.triangle-red {
  border-width: 0 10px 18px 10px;
  border-color: transparent transparent var(--educare-red) transparent;
  animation: float-triangle-1 5s ease-in-out infinite alternate;
}

.triangle-yellow {
  border-width: 0 12px 20px 12px;
  border-color: transparent transparent var(--educare-yellow) transparent;
  animation: float-triangle-2 6s ease-in-out infinite alternate;
}

.triangle-green {
  border-width: 0 9px 16px 9px;
  border-color: transparent transparent var(--educare-green) transparent;
  animation: float-triangle-3 4.5s ease-in-out infinite alternate;
}

.triangle-blue {
  border-width: 0 11px 19px 11px;
  border-color: transparent transparent var(--educare-blue-deep) transparent;
  animation: float-triangle-1 5.5s ease-in-out infinite alternate;
}

.triangle-orange {
  border-width: 0 10px 17px 10px;
  border-color: transparent transparent var(--educare-orange) transparent;
  animation: float-triangle-2 4.8s ease-in-out infinite alternate;
}

@keyframes float-triangle-1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(12px, -18px) rotate(35deg);
  }
}

@keyframes float-triangle-2 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(-15px, -14px) rotate(-45deg);
  }
}

@keyframes float-triangle-3 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(10px, 16px) rotate(25deg);
  }
}

/* 4. Carimbo de PRIORIDADE / SELO */
@keyframes stamp-slam {
  0% {
    opacity: 0;
    transform: scale(2.2) rotate(-16deg);
  }

  60% {
    opacity: 1;
    transform: scale(0.92) rotate(-8deg);
  }

  85% {
    transform: scale(1.05) rotate(-9deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }
}

.stamp-badge {
  display: inline-block;
  border: 3px dashed var(--educare-red);
  color: var(--educare-red);
  padding: 4px 14px;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 8px;
  transform: rotate(-8deg);
  background: rgba(255, 235, 238, 0.85);
  box-shadow: 0 4px 12px rgba(229, 57, 53, 0.2);
}

.is-active .stamp-animate {
  animation: stamp-slam 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: 0.4s;
}

/* 5. Cartão Interativo que Vira (3D Card Flip) */
.flip-card {
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.65s cubic-bezier(0.2, 0.85, 0.4, 1.15);
  transform-style: preserve-3d;
}

.flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
}

.flip-card-back {
  transform: rotateY(180deg);
}

/* 6. Anel Circular SVG */
.ring-svg circle {
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.ring-bg {
  stroke: rgba(21, 27, 79, 0.08);
}

.ring-progress {
  stroke: var(--educare-red);
  transition: stroke-dashoffset 1.4s var(--ease-out);
}

/* 7. Barras Horizontais com Efeito Escalonado */
.bar-track {
  width: 100%;
  height: 14px;
  background: rgba(21, 27, 79, 0.08);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.2s var(--ease-out);
}

.is-active .bar-fill {
  /* O valor é aplicado via data-value ou JS */
}

/* 8. Efeito Órbita Solar (Slide 06) */
.orbit-stage {
  position: relative;
  width: 580px;
  height: 580px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbit-center {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--educare-yellow) 40%, var(--educare-orange) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 50px rgba(255, 196, 0, 0.6), 0 0 20px rgba(255, 122, 0, 0.4);
  z-index: 10;
  text-align: center;
  padding: 12px;
  border: 4px solid #FFFFFF;
}

.orbit-track-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgba(21, 27, 79, 0.15);
  pointer-events: none;
}

.orbit-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-card);
  border: 2px solid;
  cursor: pointer;
  transition: transform 0.25s var(--ease-spring), box-shadow 0.25s ease;
  z-index: 5;
}

.orbit-bubble:hover {
  transform: translate(-50%, -50%) scale(1.15) !important;
  box-shadow: var(--shadow-hover);
  z-index: 20;
}

/* 9. Totens 3D Tilt com Perspectiva (Slide 07 & 15) */
.tilt-wrapper {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.tilt-card {
  transition: transform 0.15s ease-out, box-shadow 0.25s ease;
  will-change: transform;
}

/* 10. Slider Antes/Depois com Cortina (Slide 12) */
.comparison-slider-box {
  position: relative;
  width: 100%;
  max-width: 820px;
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-floating);
  border: 3px solid var(--educare-yellow);
}

.comparison-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparison-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.05s linear;
}

.comparison-divider-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 4px;
  background: #FFFFFF;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 25;
}

.comparison-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--educare-yellow);
  border: 3px solid var(--educare-blue-deep);
  color: var(--educare-blue-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 30;
}

.comparison-range-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 40;
}