/* animations.css — R100 动画系统 */
:root {
  --anim-speed-slow: 0.8s;
  --anim-speed-normal: 0.5s;
  --anim-speed-fast: 0.3s;
  --elder-anim-scale: 1.5;
}

@keyframes view-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-fade-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes heart-open { 0% { transform: scale(0.3); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@keyframes bounce-in { 0% { transform: scale(0.8); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } }
@keyframes btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,123,66,0.4); } 50% { box-shadow: 0 0 0 12px rgba(255,123,66,0); } }
@keyframes list-stagger-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes envelope-tear { 0% { transform: scaleY(0.2); opacity: 0; } 100% { transform: scaleY(1); opacity: 1; } }
@keyframes envelope-open { 0% { transform: scale(0.5) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes card-flip-3d { 0% { transform: perspective(600px) rotateY(90deg); opacity: 0; } 100% { transform: perspective(600px) rotateY(0); opacity: 1; } }
@keyframes typewriter-reveal { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes photo-float-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes star-burst { 0% { filter: brightness(1); } 50% { filter: brightness(1.3); transform: scale(1.02); } 100% { filter: brightness(1); } }
@keyframes countdown-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0); } }
@keyframes voice-wave { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes loading-blurb { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes btn-press-bounce { 0% { transform: scale(1); } 50% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes send-flight { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-80px); opacity: 0; } }
@keyframes petal-fall { 0% { transform: translateY(-10px) rotate(0); opacity: 0.8; } 100% { transform: translateY(20px) rotate(20deg); opacity: 0; } }

.anim-fade-in { animation: hero-fade-in var(--anim-speed-normal) ease both; }
.anim-heart-open .hero-heart { animation: heart-open var(--anim-speed-slow) ease both; }
.anim-bounce-in { animation: bounce-in var(--anim-speed-normal) cubic-bezier(0.34,1.56,0.64,1) 0.6s both; }
.anim-list-in { animation: list-stagger-in var(--anim-speed-normal) ease both; }
.anim-envelope { animation: envelope-tear var(--anim-speed-slow) ease both; }
.anim-envelope-open { animation: envelope-open calc(var(--anim-speed-slow) * var(--elder-anim-scale)) ease both; }
.anim-flip { animation: countdown-flip 0.6s ease; }
.anim-voice-wave { animation: voice-wave 1s ease infinite; display: inline-block; }
.anim-loading { animation: loading-blurb 1.2s ease infinite; }
.anim-star-burst { animation: star-burst 1.5s ease; }
.anim-photo-float { animation: photo-float-in var(--anim-speed-fast) ease both; }
.typewriter-text { animation: typewriter-reveal 2s ease both; }

body.mode-elder .anim-envelope-open,
body.mode-elder .typewriter-text { animation-duration: calc(2s * var(--elder-anim-scale)); }

.btn:active { animation: btn-press-bounce 0.2s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}