/* ==========================================================
   Animations: scroll reveals + hover effects.
   Only transform / opacity / colour / shadow are animated,
   so the layout never shifts.
   ========================================================== */

/* ---------- Scroll reveal ---------- */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.js .reveal[data-reveal="left"]  { transform: translate3d(-60px, 0, 0); }
.js .reveal[data-reveal="right"] { transform: translate3d(60px, 0, 0); }
.js .reveal[data-reveal="zoom"]  { transform: scale(.92); }
.js .reveal[data-reveal="fade"]  { transform: none; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Buttons ---------- */
.btn-pill, .news-form button, .lang-btn, .search-box, .city-list a, .social a, .dot, .to-top {
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}
.btn-pill { position: relative; overflow: hidden; isolation: isolate; }
.btn-pill::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, #e0218a, #8b2be2); opacity: 0; transition: opacity .3s ease; }
.btn-pill:hover { color: #fff; background: var(--purple, #6c0dc5); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(224, 33, 138, .42); }
.btn-pill:hover::before { opacity: 1; }
.btn-pill:hover .btn-icon { background: rgba(0, 0, 0, .28); }
.btn-pill:active { transform: translateY(-1px); }
.btn-icon img { transition: transform .3s ease; }
.btn-pill:hover .btn-icon img { transform: translateX(4px); }
.btn-icon { transition: background-color .25s ease; }
.news-form button:hover { transform: scale(1.05); background: linear-gradient(90deg, #e0218a, #8b2be2); box-shadow: 0 8px 18px rgba(224, 33, 138, .4); }

/* ---------- Top bar & nav ---------- */
.lang-btn:hover { border-color: #fff; }
.topbar-link { position: relative; transition: opacity .25s; }
.topbar-link:hover { opacity: .8; }
.search-box { transition: background-color .25s, box-shadow .25s; }
.search-box:hover, .search-box:focus-within { background: rgba(255, 255, 255, .15); box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
.main-nav .nav-link { position: relative; transition: color .25s; }
.main-nav .nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -8px; width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #f6492c, #f99331); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.main-nav .nav-link:hover::after { transform: scaleX(1); }
.logo { transition: transform .35s ease, filter .35s ease; }
.navbar-brand:hover .logo { transform: scale(1.04); filter: drop-shadow(0 0 10px rgba(249, 144, 49, .45)); }

/* ---------- Hero ---------- */
.hero-swirl { animation: swirl 14s ease-in-out infinite alternate; }
@keyframes swirl { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(14px, -18px, 0) rotate(1.5deg); } }
.hero-photo { transition: transform .8s ease, opacity .8s ease; }
.search-card { transition: box-shadow .3s ease; }
.search-card:hover { box-shadow: 0 -8px 40px rgba(0, 0, 0, .12); }
.field .form-select { transition: border-color .25s, box-shadow .25s, background-color .25s; }
.field .form-select:hover { border-color: #c9a3f0; background-color: #fff; }
.field .form-select:focus { border-color: #6c0dc5; box-shadow: 0 0 0 3px rgba(108, 13, 197, .15); }

/* ---------- About ---------- */
.about-photo > img { transition: transform .5s ease, box-shadow .5s ease; }
.about-photo:hover > img { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 0, 0, .18); }

/* ---------- Profiles ---------- */
.profile { transition: transform .35s ease, filter .35s ease; }
.profile:hover { transform: translateY(-8px); filter: drop-shadow(0 16px 20px rgba(108, 13, 197, .22)); }
.profile-photo { transition: filter .35s ease; }
.profile:hover .profile-photo { filter: brightness(1.05) saturate(1.1); }

/* ---------- How it works ---------- */
.how-card { transition: transform .35s ease, box-shadow .35s ease; }
.how-card:hover { transform: translateY(-10px); box-shadow: 0 22px 40px rgba(60, 20, 110, .22); }
.how-icon { transition: transform .4s ease; }
.how-card:hover .how-icon { transform: scale(1.1) rotate(-4deg); }
.learn-more svg, .all-cities svg { transition: transform .25s ease; }
.learn-more:hover svg, .all-cities:hover svg { transform: translateX(5px); }

/* ---------- Why choose us ---------- */
.why-list li { transition: transform .3s ease; }
.why-list li:hover { transform: translateX(8px); }
.why-ico { transition: transform .35s ease, box-shadow .35s ease; }
.why-list li:hover .why-ico { transform: rotate(-8deg) scale(1.1); box-shadow: 0 8px 18px rgba(249, 144, 49, .5); }
.collage img { transition: transform .4s ease, filter .4s ease; }
.collage img:hover { transform: scale(1.04) rotate(-1deg); z-index: 5; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .3)); }

/* ---------- Testimonials ---------- */
.testi-card { transition: transform .35s ease, box-shadow .35s ease; }
.testi-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.testi-avatar { transition: transform .4s ease; }
.testi-card:hover .testi-avatar { transform: scale(1.08); }
.testi-mark { transition: transform .5s ease; }
.testi-card:hover .testi-mark { transform: rotate(-10deg) scale(1.12); }
.dot:hover { background: #8f3ed8; }
.dot.active:hover { background: #6c0dc5; }

/* ---------- FAQ ---------- */
.faq-accordion .accordion-item { transition: background-color .25s ease; }
.faq-accordion .accordion-item:hover { background: rgba(245, 233, 255, .55); }
.faq-accordion .accordion-button { transition: color .25s ease, padding-left .3s ease; }
.faq-accordion .accordion-button:hover { color: #f77a2f; padding-left: 38px; }
.faq-accordion .accordion-button::after { transition: transform .3s ease; }
.faq-accordion .accordion-button:hover::after { transform: rotate(90deg); }
.faq-accordion .accordion-button:not(.collapsed)::after { transform: none; }
.faq-cta { transition: transform .4s ease, box-shadow .4s ease; }
.faq-cta:hover { transform: translateY(-6px); box-shadow: 0 40px 70px rgba(0, 0, 0, .2); }
.faq-cta > img { transition: filter .4s ease; }
.faq-cta:hover > img { filter: saturate(1.15); }

/* ---------- Cities ---------- */
.city-list a:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 20px rgba(248, 114, 48, .4); }

/* ---------- CTA ---------- */
.cta-card { transition: box-shadow .4s ease; }
.cta-card:hover { box-shadow: 0 24px 50px rgba(108, 13, 197, .18); }
.cta-photo img { transition: transform .8s ease; }
.cta-card:hover .cta-photo img { transform: scale(1.05); }
.cta-ring { animation: ring-pulse 4s ease-in-out infinite; }
@keyframes ring-pulse { 0%, 100% { filter: hue-rotate(0deg); } 50% { filter: hue-rotate(25deg); } }

/* ---------- Blog ---------- */
.post { transition: transform .35s ease, box-shadow .35s ease; }
.post:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(58, 17, 124, .2); }
.post:hover .post-body h3 { color: #6c0dc5; }

/* ---------- Footer ---------- */
.social a:hover { transform: translateY(-4px) scale(1.1); background: #f87230; }
.social--footer a:hover { background: #f87230; }
.footer-links a { display: inline-block; transition: transform .25s ease, color .25s ease; }
.footer-links a:hover { transform: translateX(6px); }
.news-form { transition: box-shadow .3s ease, border-color .3s ease; }
.news-form:focus-within { box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); border-color: #f99331; }
.copyright { transition: filter .3s ease; }
.copyright:hover { filter: brightness(1.08); }
.footer-brand img { transition: transform .35s ease; transform-origin: left center; }
.footer-brand a:hover img { transform: scale(1.04); }

/* ---------- Marquee ---------- */
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 50; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #6c0dc5; box-shadow: 0 8px 20px rgba(108, 13, 197, .4);
  opacity: 0; visibility: hidden; transform: translateY(16px);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: #f87230; transform: translateY(-4px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-swirl, .cta-ring { animation: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Touch devices: skip hover lifts that would "stick" */
@media (hover: none) {
  .how-card:hover, .profile:hover, .post:hover, .testi-card:hover, .faq-cta:hover, .btn-pill:hover { transform: none; }
}

/* ---------- Toast (used on every page) ---------- */
.toast-x { position: fixed; left: 50%; bottom: 40px; z-index: 100; display: flex; align-items: center; gap: 12px; padding: 16px 26px; border-radius: 40px; color: #fff; font-family: 'Mulish', sans-serif; font-weight: 700; background: #17121f; box-shadow: 0 20px 40px rgba(0, 0, 0, .3); transform: translate(-50%, 30px); opacity: 0; visibility: hidden; transition: all .4s ease; max-width: calc(100% - 32px); }
.toast-x.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
.toast-x .ico { width: 22px; height: 22px; flex: none; fill: none; stroke: #3cb043; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast-x.is-error .ico { stroke: #ff5a6e; }