/*
 * USA Ecom Automations — behaviour styles that replace the original
 * Next.js / framer-motion / Swiper runtime. Layout and design tokens live
 * in style.css (the original compiled Tailwind build).
 */

/* ---------- Site font: Urbanist (self-hosted, variable weight 100–900) ---------- */
@font-face {
  font-family: 'Urbanist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/urbanist-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Urbanist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(../fonts/urbanist-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Urbanist'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../fonts/urbanist-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Urbanist'; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url(../fonts/urbanist-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Route every font setting in style.css (body Arial, font-sans, theme default) to Urbanist. */
:root {
  --default-font-family: "Urbanist", sans-serif;
  --font-geist-sans: "Urbanist", sans-serif;
}
body.antialiased {
  --font-geist-sans: "Urbanist", sans-serif;
  font-family: "Urbanist", sans-serif;
}
button, input, select, textarea { font-family: inherit; }

html { scroll-behavior: smooth; }

/* ---------- Scroll reveal (framer-motion "initial" -> "whileInView") ---------- */
.reveal-ready {
  transition-property: opacity, transform;
  transition-duration: .6s, .8s;
  transition-timing-function: ease-out, cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Header dropdown: keyboard access in addition to hover ---------- */
[data-dropdown]:focus-within [data-dropdown-menu] {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}

/* ---------- Services orbit ---------- */
[data-orbit] { transition: opacity .5s ease-out; }
[data-orbit-ring="outer"] { animation: spin 30s linear infinite; }
[data-orbit-ring="inner"] { animation: spin 20s linear infinite reverse; }
[data-orbit-item] {
  transition: opacity 1.2s ease-out, transform 1.2s cubic-bezier(.34, 1.56, .64, 1);
}
[data-orbit-item].is-in:hover {
  transform: scale(1.2) rotate(360deg) !important;
  transition: transform .6s ease-in-out !important;
}
[data-orbit-item].is-in:active { transform: scale(.95) !important; }

/* ---------- Stacked service cards ---------- */
[data-stack-card] { will-change: transform; }

/* ---------- Process path ---------- */
[data-process-step] {
  transition: offset-distance 2.5s ease-out, transform 2.5s ease-out;
}

/* ---------- Case-study collage ---------- */
[data-work-item] {
  transition: opacity .5s ease-out, transform .45s cubic-bezier(.34, 1.4, .64, 1), box-shadow .45s ease;
}
[data-work-item].is-in:hover {
  transform: scale(2) !important;
  z-index: 100;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5);
}

/* ---------- Testimonials: continuous vertical marquee (was Swiper autoplay) ---------- */
.swiper { position: relative; overflow: hidden; }
.swiper-wrapper { display: flex; flex-direction: column; position: relative; width: 100%; }
.swiper-slide { flex-shrink: 0; position: relative; width: 100%; }
[data-marquee].is-running .swiper-wrapper {
  animation: marquee-up var(--marquee-duration, 90s) linear infinite;
}
[data-marquee="down"].is-running .swiper-wrapper { animation-name: marquee-down; }
@keyframes marquee-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes marquee-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* ---------- Accordions ---------- */
.accordion-panel { transition: height .3s ease, opacity .3s ease; }
.faq-chevron { transition: transform .3s ease, background-color .3s ease, color .3s ease; }
[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); }

/* ---------- Buttons with framer-motion hover/tap scaling ---------- */
.btn-press, .btn-press-lg { transition-property: all; }
.btn-press:hover { transform: scale(1.02); }
.btn-press-lg:hover { transform: scale(1.05); }
.btn-press:active, .btn-press-lg:active { transform: scale(.97); }
.btn-press:disabled { cursor: wait; transform: none; }

/* ---------- Form: country dropdown and success state ---------- */
.country-menu { animation: menu-in .15s ease-out; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-5px) scale(.97); } to { opacity: 1; transform: none; } }
.success-pop { animation: pop-in .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.success-pop-delay { animation-delay: .2s; }
@keyframes pop-in { from { transform: scale(0); } to { transform: scale(1); } }

/* Used on the about page but never defined in the original build. */
.animate-spin-slow { animation: spin 20s linear infinite; }
.animate-reverse-spin-slow { animation: spin 15s linear infinite reverse; }

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}