/* ==========================================================================
   Shah Conseil — animations & small custom styles (Tailwind handles the rest)
   ========================================================================== */

html, body { overflow-x: hidden; }

/* ---------- Header state after scrolling ---------- */
#site-header.scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 4px 30px -10px rgba(15, 31, 77, 0.15);
}
#site-header.scrolled nav > div { height: 4.25rem; }
#site-header nav > div { transition: height .3s ease; }

/* Underline on desktop nav links */
.nav-link::after {
    content: "";
    position: absolute;
    left: 50%; bottom: 4px;
    width: 0; height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: width .3s ease, left .3s ease;
}
.nav-link:hover::after { width: 40%; left: 30%; }

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
    transition-delay: var(--delay, 0ms);
}
.reveal.reveal-left  { transform: translateX(-40px); }
.reveal.reveal-right { transform: translateX(40px); }
.reveal.reveal-zoom  { transform: scale(.92); }
.reveal.is-visible   { opacity: 1; transform: none; }

/* ---------- Keyframes ---------- */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}
@keyframes float-slow {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(20px, -24px) rotate(6deg); }
}
@keyframes blob {
    0%, 100% { border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform: translate(0,0) scale(1); }
    33%      { border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform: translate(30px,-40px) scale(1.08); }
    66%      { border-radius: 30% 70% 70% 30% / 53% 54% 46% 47%; transform: translate(-20px,20px) scale(.95); }
}
@keyframes gradient-pan {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(51, 125, 252, .45); }
    70%  { box-shadow: 0 0 0 14px rgba(51, 125, 252, 0); }
    100% { box-shadow: 0 0 0 0 rgba(51, 125, 252, 0); }
}
@keyframes shine {
    from { left: -100%; }
    to   { left: 150%; }
}
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

/* ---------- Utility classes ---------- */
.animate-float      { animation: float 5s ease-in-out infinite; }
.animate-float-slow { animation: float-slow 9s ease-in-out infinite; }
.animate-blob       { animation: blob 14s ease-in-out infinite; }
.animate-spin-slow  { animation: spin-slow 22s linear infinite; }
.animate-pulse-ring { animation: pulse-ring 2.2s infinite; }
.delay-1 { animation-delay: 1.5s; }
.delay-2 { animation-delay: 3s; }

/* Hero entrance (runs on load, staggered) */
.hero-in { opacity: 0; animation: fade-in-up .9s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--delay, 0ms); }

.text-gradient {
    background: linear-gradient(90deg, #1d5ef1, #8b5cf6, #f59e0b, #1d5ef1);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-pan 8s ease infinite;
}

/* Infinite logo / tag marquee */
.marquee { mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Shine sweep on buttons */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
}
.btn-shine:hover::before { animation: shine .9s ease; }

/* Card lift + icon pop */
.card-hover { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -18px rgba(15, 31, 77, .25); }
.card-hover .card-icon { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.card-hover:hover .card-icon { transform: scale(1.12) rotate(-6deg); }

/* Dotted grid background */
.bg-dots {
    background-image: radial-gradient(rgba(29, 94, 241, .14) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* FAQ accordion */
.faq-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s ease; }
.faq-body > div { overflow: hidden; }
.faq-item.open .faq-body { grid-template-rows: 1fr; }
.faq-item .faq-chevron { transition: transform .3s ease; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }

/* Service filter: hidden cards */
.service-card.is-hidden { display: none; }

/* Hide horizontal scrollbar on the mobile chip bar while keeping it swipeable */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .reveal, .hero-in { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
}