/* interactions/intro/animations.css — FINAL
   Kids Soft + Pulse (slower entrance, calm & friendly)
*/

/* =========================
   ROOT / WRAP
========================= */
.intro-wrap{
  animation: introFadeIn .85s ease-out both;
}

/* =========================
   TITLE (drop-in + gentle float)
========================= */
.intro-title-frame{
  animation:
    titleDropSoft .95s cubic-bezier(.2,.9,.2,1) both,
    titleFloatY 3.8s ease-in-out infinite;
  animation-delay: .15s, 1.25s;
  will-change: transform, opacity;
}

.intro-title-text{
  animation: titleTextPop .8s cubic-bezier(.15,.9,.25,1) both;
  animation-delay: .28s;
  will-change: transform, opacity;
}

/* =========================
   AUTHOR (soft fade-up)
========================= */
.intro-author-text{
  animation: authorFadeUp .75s ease-out both;
  animation-delay: .45s;
  will-change: transform, opacity;
}

/* =========================
   START BUTTON (pop + breathing pulse)
========================= */
.intro-start-frame{
  animation:
    startPopSoft .85s cubic-bezier(.2,.95,.25,1) both,
    startPulseSoft 2.3s ease-in-out infinite;
  animation-delay: .75s, 1.8s;
  will-change: transform, opacity;
  transition: transform .15s ease-out;
}

.intro-start-frame:hover{
  transform: scale(1.05);
}
.intro-start-frame:active{
  transform: scale(.97);
}

/* Soft glow ring */
.intro-start-frame::after{
  content:'';
  position:absolute;
  inset: 10px 14px;
  border-radius: 999px;
  pointer-events:none;
  opacity:0;
  box-shadow: 0 0 0 0 rgba(255,255,255,.0);
  animation: startGlowRing 2.3s ease-in-out infinite;
  animation-delay: 1.8s;
}

/* =========================
   KEYFRAMES
========================= */
@keyframes introFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes titleDropSoft{
  0%{
    opacity:0;
    transform: translateY(-18px) scale(.985);
  }
  70%{
    opacity:1;
    transform: translateY(0) scale(1.01);
  }
  100%{
    opacity:1;
    transform: translateY(0) scale(1);
  }
}

@keyframes titleFloatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

@keyframes titleTextPop{
  0%{ opacity:0; transform: scale(.985); }
  100%{ opacity:1; transform: scale(1); }
}

@keyframes authorFadeUp{
  0%{ opacity:0; transform: translateY(8px); }
  100%{ opacity:1; transform: translateY(0); }
}

@keyframes startPopSoft{
  0%{ opacity:0; transform: scale(.84); }
  70%{ opacity:1; transform: scale(1.04); }
  100%{ opacity:1; transform: scale(1); }
}

@keyframes startPulseSoft{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.03); }
}

@keyframes startGlowRing{
  0%, 100%{
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(255,255,255,.0);
  }
  50%{
    opacity: .55;
    box-shadow: 0 0 0 6px rgba(255,255,255,.18);
  }
}

/* =========================
   REDUCED MOTION
========================= */
@media (prefers-reduced-motion: reduce){
  .intro-wrap,
  .intro-title-frame,
  .intro-title-text,
  .intro-author-text,
  .intro-start-frame,
  .intro-start-frame::after{
    animation: none !important;
    transition: none !important;
  }
}