/* ============================================
   FamilyOS Marketing — Animation Keyframes
   ============================================ */

/* ---- Generic Utility Animations ---- */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideDownFade {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Badge / Dot Animations ---- */

@keyframes badgeAppear {
  0%   { opacity: 0; transform: scale(0); }
  60%  { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes badgeBounce {
  0%   { opacity: 0; transform: scale(0); }
  50%  { transform: scale(1.3); }
  70%  { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes dotPop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { transform: scale(1.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---- Checkbox / Progress ---- */

@keyframes checkboxFill {
  0%   { background-color: transparent; border-color: #D1D5DB; }
  50%  { background-color: #2563EB; border-color: #2563EB; transform: scale(1.1); }
  100% { background-color: #2563EB; border-color: #2563EB; transform: scale(1); }
}

@keyframes checkmarkDraw {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}

@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--progress-target, 75%); }
}

/* ---- Swipe / Flip ---- */

@keyframes swipeRight {
  0%   { transform: translateX(0); }
  40%  { transform: translateX(60px); }
  100% { transform: translateX(0); }
}

@keyframes flipStatus {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(90deg); }
  51%  { color: #10B981; }
  100% { transform: rotateX(0); color: #10B981; }
}

/* ---- Typewriter ---- */

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blinkCursor {
  0%, 100% { border-color: transparent; }
  50%      { border-color: #2563EB; }
}

/* ---- Message Bubble ---- */

@keyframes messageBubbleIn {
  0%   { opacity: 0; transform: scale(0.5) translateY(10px); }
  60%  { transform: scale(1.05) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---- Stagger Helper Classes ---- */

.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
.stagger-7 { animation-delay: 0.7s; }
.stagger-8 { animation-delay: 0.8s; }

/* ---- Animation Utility Classes ---- */

.animate-fade-in        { animation: fadeIn 0.5s ease-out both; }
.animate-slide-up       { animation: slideUpFade 0.5s ease-out both; }
.animate-slide-down     { animation: slideDownFade 0.5s ease-out both; }
.animate-slide-right    { animation: slideInRight 0.5s ease-out both; }
.animate-slide-left     { animation: slideInLeft 0.5s ease-out both; }
.animate-slide-in-up    { animation: slideInUp 0.5s ease-out both; }
.animate-scale-in       { animation: scaleIn 0.4s ease-out both; }
.animate-badge-appear   { animation: badgeAppear 0.4s ease-out both; }
.animate-badge-bounce   { animation: badgeBounce 0.5s ease-out both; }
.animate-dot-pop        { animation: dotPop 0.3s ease-out both; }
.animate-checkbox-fill  { animation: checkboxFill 0.4s ease-out both; }
.animate-checkmark      { animation: checkmarkDraw 0.3s ease-out both; stroke-dasharray: 20; stroke-dashoffset: 20; }
.animate-progress-fill  { animation: progressFill 1s ease-out both; }
.animate-swipe-right    { animation: swipeRight 0.8s ease-in-out both; }
.animate-flip-status    { animation: flipStatus 0.6s ease-in-out both; }
.animate-message-bubble { animation: messageBubbleIn 0.4s ease-out both; }

.animate-typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #2563EB;
  animation: typewriter 1.5s steps(20) both, blinkCursor 0.7s step-end infinite;
}

/* ---- Phone Mockup ---- */

.phone-frame {
  width: 280px;
  height: 560px;
  background: #1F2937;
  border-radius: 40px;
  padding: 12px;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), inset 0 0 0 2px #374151;
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 28px;
  background: #1F2937;
  border-radius: 0 0 16px 16px;
  z-index: 10;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: #F9FAFB;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}

.phone-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 20px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  background: white;
}

.phone-screen-content {
  padding: 0 12px 12px;
  height: calc(100% - 32px);
  overflow: hidden;
}

/* ---- Scroll-triggered visibility ---- */

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Hero floating animation ---- */

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

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* ---- Pulse ring for CTA buttons ---- */

@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.4); opacity: 0; }
}

.pulse-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid currentColor;
  animation: pulseRing 2s ease-out infinite;
}