/* =========================================================
   RIVERA PIANO STUDIOS — ANIMATIONS
   ========================================================= */

.reveal{
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal:nth-child(2){ transition-delay: 0.08s; }
.reveal:nth-child(3){ transition-delay: 0.16s; }
.reveal:nth-child(4){ transition-delay: 0.24s; }
.reveal:nth-child(5){ transition-delay: 0.32s; }
.reveal:nth-child(6){ transition-delay: 0.4s; }

@keyframes stringPluck{
  0%{ transform: scaleX(0); }
  60%{ transform: scaleX(1.04); }
  100%{ transform: scaleX(1); }
}

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

@keyframes drawThread{
  from{ height:0; }
  to{ height:100%; }
}

.hero-visual .anim-key{
  animation: floatKey 5s ease-in-out infinite;
}
.hero-visual .anim-key:nth-of-type(2){ animation-delay: 0.6s; }
.hero-visual .anim-key:nth-of-type(3){ animation-delay: 1.2s; }
.hero-visual .anim-key:nth-of-type(4){ animation-delay: 1.8s; }

@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
.hero-visual{ animation: fadeIn 1.2s var(--ease); }

.logo .mark{
  display:inline-block;
}

/* Button micro key-press */
.btn-primary:active{ transform: translateY(1px) scale(0.98); }

/* Nav underline pluck on load for active link */
.nav-links a.active::after{ animation: stringPluck 0.6s var(--ease) 0.3s both; }

@media (prefers-reduced-motion: reduce){
  .hero-visual .anim-key{ animation: none; }
}