/* ==========================================================================
   site-extra.css
   Additions needed for the vanilla-PHP/JS port of the original React site.
   The original used framer-motion for entrance animations; here the same
   visual effect (fade + slide up/left/right/scale) is done with a
   ".reveal" class toggled by IntersectionObserver in main.js.
   ========================================================================== */

/* ---- Scroll-reveal animation (replaces framer-motion whileInView) ---- */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal="up"]     { transform: translateY(28px); }
[data-reveal="down"]   { transform: translateY(-16px); }
[data-reveal="left"]   { transform: translateX(-40px); }
[data-reveal="right"]  { transform: translateX(40px); }
[data-reveal="scale"]  { transform: scale(0.92); }
[data-reveal="none"]   { transform: none; }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Stagger helper — set --reveal-delay inline per item (e.g. cards, steps) */
[data-reveal] { transition-delay: var(--reveal-delay, 0s); }

/* Gentle floating animation for hero image (replaces the framer-motion y:[0,-14,0] loop) */
.hero-right { animation: hanioo-float 4s ease-in-out 1s infinite; }
@keyframes hanioo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* Floating avatars in the HowItWorks illustration (legacy SVG variant, kept for compatibility) */
.hiw-illustration svg [data-float="a"] { animation: hanioo-float-a 3.4s ease-in-out infinite; }
.hiw-illustration svg [data-float="b"] { animation: hanioo-float-b 3.8s ease-in-out 0.4s infinite; }
@keyframes hanioo-float-a { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hanioo-float-b { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* HowItWorks illustration image: gentle float + a little extra life on hover */
.hiw-illustration {
  perspective: 800px;
}

.hiw-illustration-img {
  transition: transform 0.4s ease;
}

.hiw-illustration:hover .hiw-illustration-img {
  transform: translateY(-6px) scale(1.015);
}

/* Card hover lift (replaces framer-motion whileHover={{ y: -8 }}) */
.services .card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.services .card:hover { transform: translateY(-8px); }

/* ---- Language dropdown: support <a> options (PHP uses links, not JS state) ---- */
.lang-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text, #5b6472);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  text-decoration: none;
}
.lang-menu li a:hover,
.lang-menu li a:focus-visible {
  background: #f3f8ff;
  color: var(--ink, #0b1220);
}
.lang-menu li a.active {
  color: var(--cyan);
  font-weight: 700;
  background: #eaf2fd;
}
.lang-menu li a.active::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--cyan);
  flex-shrink: 0;
}
.lang-menu.open { display: block !important; }

/* ---- Active nav link ---- */
.navbar ul li a.active {
  color: var(--cyan, #3d8bd4);
}

/* ---- Mobile nav open state (menu-toggle JS toggles this) ---- */
.navbar ul.open { display: flex; }

/* ---- Modal overlays shared by Popup / WelcomePopup (JS toggled) ---- */
.popup-overlay[hidden],
.wp-overlay[hidden] {
  display: none;
}

/* ---- Simple fade-in for the install toast (JS adds/removes .show) ---- */
.install-toast {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.install-toast.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---- Form status messages ---- */
.form-success { color: #1f9d55; margin-top: 10px; }
.form-error, .wp-submit-error { color: #d64545; margin-top: 10px; }
.wp-input-error { border-color: #d64545 !important; }
.wp-error { color: #d64545; font-size: 12px; margin-top: 4px; display: block; }

/* ---- Small spinner used in WelcomePopup submit button ---- */
.wp-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hanioo-spin 0.7s linear infinite;
}
@keyframes hanioo-spin { to { transform: rotate(360deg); } }

/* ---- Related-services / service-grid card links use Font Awesome now ---- */
.card-image-icon,
.sd-icon-badge,
.sd-feature-icon,
.footer-service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}