/* ===================
  ANIMATIONS
======================*/

/* border_title in get_started should always be visible (no animation) */
.get_started .border_title {
  opacity: 1 !important;
  transform: none !important;
}

/* Initial state for animated elements */
.about .border_title,
.about .about_title,
.about .about_title_container,
.about .section_description,
.about .download-buttons-container,
.about .about_center_img,
.about .about_left_img,
.about .about_right_img,
.about .phone_cards_container,
.section_title,
.section_description,
.stats .stats_card,
.service .services_left_column,
.service .services_images_row,
.howworks .howworks_title,
.become .download-buttons-container,
.become .avatars,
.faq .faq_card,
.faq .faq_answer_wrp,
.reviews .reviews_title,
.reviews .reviews_description,
.reviews .section_title,
.get_started .download-buttons-container,
.get_started .get_started_center_img,
.get_started .get_started_side_img:first-of-type,
.get_started .get_started_side_img:last-of-type {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Initial state for cards with scale */
.about .awaiting_card,
.about .arrived_card,
.get_started .card_info_container,
.get_started .arrived_content {
  opacity: 0;
  transform: scale(0.9) translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Initial state for content_left_block images - transform не меняет размер блока */
.content_left_block_img {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.content_left_block_img_2 {
  opacity: 0;
  transform: translateY(-50px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Initial state for content_left_block card */
.content_left_block .phone_card.arrived_card {
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* Animated state */
.about .border_title.animate,
.about .about_title.animate,
.about .about_title_container.animate,
.about .section_description.animate,
.about .download-buttons-container.animate,
.about .about_center_img.animate,
.about .about_left_img.animate,
.about .about_right_img.animate,
.about .phone_cards_container.animate,
.section_title.animate,
.section_description.animate,
.stats .stats_card.animate,
.service .services_left_column.animate,
.service .services_images_row.animate,
.howworks .howworks_title.animate,
.become .download-buttons-container.animate,
.become .avatars.animate,
.faq .faq_card.animate,
.faq .faq_answer_wrp.animate,
.reviews .reviews_title.animate,
.reviews .reviews_description.animate,
.reviews .section_title.animate,
.get_started .download-buttons-container.animate,
.get_started .get_started_center_img.animate,
.get_started .get_started_side_img:first-of-type.animate,
.get_started .get_started_side_img:last-of-type.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure hover scale works together with animate state for stats cards */
.stats .stats_card.animate:hover {
  transform: translateY(0) scale(1.02);
}

/* Animated state for content_left_block images */
.content_left_block_img.animate {
  opacity: 1;
  transform: translateY(0);
}

.content_left_block_img_2.animate {
  opacity: 1;
  transform: translateY(0);
}

/* Animated state for content_left_block card */
.content_left_block .phone_card.arrived_card.animate {
  opacity: 1;
}

/* Delay for title */
.about .about_title.animate,
.about .about_title_container.animate,
.section_title.animate,
.howworks .howworks_title.animate {
  transition-delay: 0.1s;
}

/* Delay for description */
.about .section_description.animate,
.section_description.animate {
  transition-delay: 0.2s;
}

/* Delay for buttons */
.about .download-buttons-container.animate {
  transition-delay: 0.3s;
}

/* Delay for become section buttons and avatars - handled by JS setTimeout */

/* Center image appears first (no delay) */
.about .about_center_img.animate {
  transition-delay: 0s;
}

/* Delay for left phone and card (0.1s) */
.about .about_left_img.animate,
.about .phone_cards_container.card_left.animate {
  transition-delay: 0.1s;
}

/* Delay for right phone and card (0.2s) */
.about .about_right_img.animate,
.about .phone_cards_container.card_right.animate {
  transition-delay: 0.2s;
}

/* Scale in animation for cards - appears together with phones */
.about .phone_cards_container.card_left.animate .awaiting_card {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0.1s;
}

.about .phone_cards_container.card_right.animate .arrived_card {
  opacity: 1;
  transform: scale(1) translateY(0);
  transition-delay: 0.2s;
}

/* Get started cards scale in animation */
.get_started .card_info_container.animate,
.get_started .arrived_content.animate {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Scroll parallax for phones - preserve opacity animation for initial appearance */
.about .about_left_img.animate,
.about .about_right_img.animate {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Parallax scroll will override transform and opacity via inline styles */
.about .about_left_img,
.about .about_right_img {
  will-change: transform, opacity;
}

/* Hover effect for download buttons in about section */
.about .download-button-wrapper {
  transition: transform 0.3s ease;
}

.about .download-button-wrapper:hover {
  transform: translateY(-10px);
}


/* Services section animation delays */
.service .services_left_column.animate {
  transition-delay: 0.2s;
}

/* Services images rows - each row appears 0.1s after previous */
.service .services_images_row:nth-child(1).animate {
  transition-delay: 0.3s;
}

.service .services_images_row:nth-child(2).animate {
  transition-delay: 0.4s;
}

.service .services_images_row:nth-child(3).animate {
  transition-delay: 0.5s;
}

.service .services_images_row:nth-child(4).animate {
  transition-delay: 0.6s;
}

/* Services images hover effects */
.service .services_image_wrapper {
  transition: transform 0.3s ease;
}

.service .services_image_wrapper:hover {
  transform: scale(1.05);
  z-index: 10;
}