/* =========================================================================
   Repare — custom animations & utilities that layer on top of Tailwind CDN.
   Keep this small: Tailwind handles layout/spacing/color; this file only
   holds keyframes and effects the utility classes can't express.
   ========================================================================= */

:root { --brand: #2563EB; --ink: #0F172A; }

/* Smooth base + nicer heading rendering */
body { text-rendering: optimizeLegibility; }

/* Guard against horizontal scroll from decorative transforms (reveal offsets,
   ken-burns scale, marquee track). No content needs a horizontal scrollbar. */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video { max-width: 100%; }
.font-display { letter-spacing: -0.02em; }

/* ---- Scroll-reveal ------------------------------------------------------
   Elements tagged .reveal start hidden and animate in when JS adds .in.
   Stagger children with inline style="--d: 80ms" (transition-delay).       */
.reveal      { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0ms); }
.reveal.in   { opacity: 1; transform: none; }
.reveal-left { transform: translateX(-36px); }
.reveal-right{ transform: translateX(36px); }

/* ---- Infinite marquee ticker -------------------------------------------- */
.marquee            { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee__track     { display: flex; flex: none; align-items: center; gap: 0; animation: marquee 26s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- Hero slider --------------------------------------------------------- */
.slide            { opacity: 0; visibility: hidden; transition: opacity .9s ease; }
.slide.is-active  { opacity: 1; visibility: visible; }
.slide__img       { transform: scale(1.08); transition: transform 7s ease-out; }
.slide.is-active .slide__img { transform: scale(1); }         /* slow ken-burns */
.slide__copy > *  { opacity: 0; transform: translateY(22px); }
.slide.is-active .slide__copy > * { animation: slideUp .8s cubic-bezier(.22,.61,.36,1) forwards; }
.slide.is-active .slide__copy > *:nth-child(1) { animation-delay: .15s; }
.slide.is-active .slide__copy > *:nth-child(2) { animation-delay: .30s; }
.slide.is-active .slide__copy > *:nth-child(3) { animation-delay: .45s; }
.slide.is-active .slide__copy > *:nth-child(4) { animation-delay: .60s; }
@keyframes slideUp { to { opacity: 1; transform: none; } }

/* ---- Misc ---------------------------------------------------------------- */
.text-stroke { -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.hover-tilt  { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.hover-tilt:hover { transform: translateY(-6px) rotate(-1deg); }
.no-scroll   { overflow: hidden; }

/* Floating pulse for the WhatsApp button */
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 14px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.pulse-ring  { animation: pulse-ring 2.4s infinite; }

/* Same pulse in brand teal, for the floating call button. Offset so the two
   floating buttons do not pulse in lockstep. */
@keyframes pulse-ring-brand { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,.5); } 70% { box-shadow: 0 0 0 14px rgba(37,99,235,0); } 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0); } }
.pulse-ring-brand { animation: pulse-ring-brand 2.4s infinite 1.2s; }

/* ---- Mobile Services Accordion ------------------------------------------ */
#mobileServicesList {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobileServicesList.is-expanded {
    max-height: 600px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, .reveal, .slide__img, .marquee__track, .slide.is-active .slide__copy > * {
        animation: none !important;
        transition-duration: .01ms !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}