/* Base Keyframes */
@keyframes fade-in-up {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fade-in-up-small {
  from {
    transform: translateY(80px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fade-in-up-large {
  from {
    transform: translateY(100px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fade-in-up-medium {
  from {
    transform: translateY(150px);
  }
  to {
    transform: translateY(0);
  }
}

/* Base Classes - use CSS animation like instructions.html */
.animate-fade-up {
  animation: fade-in-up-small 1s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

/* Specific Motion Variants matching TipsPage.tsx */
.animate-fade-up-small {
  /* Filters */
  animation: fade-in-up-small 1s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

.animate-fade-up-large {
  /* Title */
  animation: fade-in-up-large 1s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

.animate-fade-up-medium {
  /* Grid */
  animation: fade-in-up-medium 1s cubic-bezier(0.175, 0.885, 0.32, 1.1) forwards;
}

.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}
.delay-300 {
  animation-delay: 0.3s;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

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

/* Tips details: same motion as other pages but no overshoot (no jump) */
.page-tips-details .animate-fade-up {
  animation: fade-in-up-small 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.page-tips-details .reveal-on-scroll {
  transition:
    opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Action Tiles Hover Effects */
.action-tile {
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.3s ease !important;
}

.action-tile:hover,
.tips-card:hover {
  cursor: pointer;
  transform: translateY(-4px);
  border-color: rgba(58, 109, 144, 0.4) !important;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.08);
  background-color: rgba(58, 109, 144, 0.02) !important;
}

.action-tile:active {
  transform: scale(0.98);
}

/* Arrow inside Action Tile */
.action-tile .action-icon,
.action-tile .review-icon,
.tips-card .action-icon {
  transition:
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s ease !important;
}

.action-tile:hover .action-icon,
.action-tile:hover .review-icon,
.tips-card:hover .action-icon {
  transform: translate(3px, -3px);
  background-color: #3a6d90 !important; /* Text brand color */
}

.action-tile:hover .action-icon svg,
.action-tile:hover .review-icon svg,
.tips-card:hover .action-icon svg {
  color: white !important;
}

/* Text inside Action Tile */
.action-tile p,
.action-tile h2,
.action-tile h3 {
  transition: color 0.3s ease !important;
}

.action-tile:hover p,
.action-tile:hover h2,
.action-tile:hover h3 {
  color: #3a6d90 !important;
}

/* --- Global Button & Interactive Elements --- */

/* General Button Scaling */
button:not(.action-tile),
.category-btn,
#hero-map,
.social-icon,
#mobile-menu-btn,
#mobile-menu-close,
[role='button']:not(.action-tile) {
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease !important;
}

button:not(.action-tile):hover,
.category-btn:hover,
#hero-map:hover,
[role='button']:not(.action-tile):hover {
  transform: scale(1.05);
}

button:not(.action-tile):active,
.category-btn:active,
#hero-map:active,
[role='button']:not(.action-tile):active {
  transform: scale(0.95);
}

/* Global Arrow/Icon Animation inside Buttons */
button svg,
.btn svg,
.category-btn svg,
[role='button'] svg {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* Hover effect for icons inside buttons */
button:hover svg,
.category-btn:hover svg,
[role='button']:hover svg {
  transform: translate(2px, -2px);
}

/* Lang button chevron moving down instead of up-right */
#lang-button:hover span svg,
#lang-button-mobile:hover span svg,
#lang-button-footer:hover span svg {
  transform: translateY(2px);
}

/* Slider & Pagination Buttons - Stabilize */
button[id*='prev']:hover,
button[id*='next']:hover,
button[id*='pagination']:hover,
#tips-pagination button:hover,
#slider-prev:hover,
#slider-next:hover {
  transform: none !important;
}

/* Slider Arrow Animation - Horizontal only */
button[id*='next']:hover svg,
#slider-next:hover svg {
  transform: translateX(3px) !important;
}

button[id*='prev']:hover svg,
#slider-prev:hover svg {
  transform: translateX(-3px) !important;
}

/* Newsletter button specific arrow move */
#newsletter-form button:hover svg {
  transform: translateX(4px) scale(1.1);
}

/* FAQ Accordion Icons */
.accordion-trigger:hover svg {
  transform: rotate(90deg) scale(1.2);
}

/* --- Interactive Links & Social --- */
/* Plain text nav links need inline-block for transform - "Our location" has flex, works already */
#header nav a:not(.flex) {
  display: inline-block;
}
nav a,
footer a:not(.text-white\/60),
.social-link,
.interactive-link,
.header-phone-link {
  transition:
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    color 0.2s ease !important;
}

header nav a svg path {
  fill: currentColor !important;
}

nav a:hover,
footer a:not(.text-white\/60):hover,
.social-link:hover,
.interactive-link:hover,
.header-phone-link:hover {
  transform: scale(1.06);
}

nav a:active,
.social-link:active,
.interactive-link:active,
.header-phone-link:active {
  transform: scale(0.94);
}

/* Burger menu – без hover/active анимаций */
#mobile-menu nav a,
#mobile-menu nav a:hover,
#mobile-menu nav a:active {
  transform: none !important;
  transition: none !important;
}

/* Specific icon scale for phone link matching "Our location" */
.header-phone-link:hover svg {
  transform: scale(1.25);
}

/* Animation for links with circles/arrows */
a:hover span[class*='bg-brand'] {
  transform: translate(3px, -3px) scale(1.1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Smart Header */
.header-hidden {
  transform: translateY(-100%) !important;
}