/* glunty academy engagement layer - kid zone only.
   Scroll-reveal, micro-interactions, idle motion, count-up, click sparkle.
   Progressive enhancement: JS adds .eng-reveal only to below-fold blocks, so if
   JS never runs nothing is hidden. Fully reduced-motion safe (gated below). */

.eng-reveal { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }
.eng-reveal.eng-in {
  opacity: 1; transform: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--eng-delay, 0ms);
}

/* hover pop for interactive cards/buttons that opt in */
.eng-pop { transition: transform .13s ease, box-shadow .13s ease; }
.eng-pop:hover { transform: translateY(-3px) scale(1.015); }
.eng-pop:active { transform: translateY(0) scale(.985); }

/* gentle idle bob for decorative badges + emoji */
@keyframes eng-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.eng-float { animation: eng-bob 3.4s ease-in-out infinite; }
@keyframes eng-bob-slow { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(2deg); } }
.eng-float-2 { animation: eng-bob-slow 4.6s ease-in-out infinite; }

/* subtle sheen sweep for "look here" elements (opt in with .eng-sheen) */
.eng-sheen { position: relative; overflow: hidden; }
.eng-sheen::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); animation: eng-sheen-sweep 5s ease-in-out infinite; pointer-events: none;
}
@keyframes eng-sheen-sweep { 0%, 60% { left: -60%; } 85%, 100% { left: 130%; } }

/* click sparkle particles (created by engage.js) */
.eng-spark {
  position: fixed; pointer-events: none; z-index: 9999; font-size: 0.95rem; line-height: 1;
  will-change: transform, opacity; user-select: none;
}
@keyframes eng-spark-fly { to { transform: translate(var(--sx,0), var(--sy,0)) scale(0.2); opacity: 0; } }

/* a tiny "pulse" ring to draw the eye (opt in with .eng-pulse) */
.eng-pulse { position: relative; }
.eng-pulse::before {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in srgb, #6c5ce7 55%, transparent);
  animation: eng-pulse-ring 2.4s ease-out infinite; pointer-events: none;
}
@keyframes eng-pulse-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, #6c5ce7 45%, transparent); }
  70%, 100% { box-shadow: 0 0 0 12px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .eng-reveal, .eng-reveal.eng-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .eng-float, .eng-float-2, .eng-sheen::after, .eng-pulse::before { animation: none !important; }
  .eng-pop { transition: none; }
  .eng-sheen::after { display: none; }
}