/* ART-SoftIT – design polish & animations (GPU-friendly: transform/opacity only) */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 100%;
    transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--brand, #f44), #00a8e8);
    z-index: 2000; pointer-events: none; will-change: transform;
}

/* ---------- Sticky glass navbar after scroll ---------- */
.main-menu { transition: background .35s, box-shadow .35s, margin .35s, padding .35s; }
.main-menu.scrolled {
    position: fixed; margin-top: 0; padding: 6px 0;
    background: rgba(8, 18, 40, .88);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
    animation: navDrop .4s ease both;
}
.main-menu .navbar-brand img { transition: width .3s; }
@keyframes navDrop { from { transform: translateY(-100%); } to { transform: none; } }

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0; transform: translate3d(0, 36px, 0);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--rd, 0ms); will-change: opacity, transform;
}
.reveal.reveal-left  { transform: translate3d(-48px, 0, 0); }
.reveal.reveal-right { transform: translate3d(48px, 0, 0); }
.reveal.reveal-zoom  { transform: scale(.92); }
.reveal.in-view { opacity: 1; transform: none; will-change: auto; }

/* ---------- Hero ---------- */
.banner_text h1 { animation: heroUp .9s .1s both cubic-bezier(.22, .61, .36, 1); }
.banner_text p { animation: heroUp .9s .3s both cubic-bezier(.22, .61, .36, 1); }
.banner_text .banner-btn { animation: heroUp .9s .5s both cubic-bezier(.22, .61, .36, 1); }
.banner-img img { animation: floaty 5s ease-in-out infinite, heroZoom 1s .2s both; }
@keyframes heroUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes heroZoom { from { opacity: 0; } to { opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.banner_text h1 span {
    background: linear-gradient(90deg, var(--brand, #f44), #00a8e8, var(--brand, #f44));
    background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; animation: shine 4s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* ---------- Buttons ---------- */
.banner-btn button, .sub-btn a, .subscribe-form button {
    position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s;
}
.banner-btn button::after {
    content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg); transition: left .6s;
}
.banner-btn button:hover::after { left: 130%; }
.banner-btn button:hover, .sub-btn a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(244, 67, 54, .3); }
.banner-btn button:active { transform: translateY(0) scale(.97); }

/* ---------- Cards ---------- */
.service-inner { transition: transform .35s, box-shadow .35s; overflow: hidden; }
.service-inner:hover { transform: translateY(-10px); box-shadow: 0 22px 40px rgba(0, 0, 0, .15); }
.service-img { overflow: hidden; }
.service-img img { transition: transform .6s; }
.service-inner:hover .service-img img { transform: scale(1.08); }

.experience-inner { transition: transform .3s, box-shadow .3s; }
.experience-inner:hover { transform: translateY(-8px); box-shadow: 0 16px 30px rgba(244, 67, 54, .18); }
.experience-inner i { transition: transform .45s; }
.experience-inner:hover i { transform: scale(1.18) rotate(-6deg); }

.team-inner { transition: transform .35s, box-shadow .35s; }
.team-inner:hover { transform: translateY(-8px); box-shadow: 0 22px 40px rgba(0, 0, 0, .18); }

.about-img img, .why-us-img img { animation: floaty 6s ease-in-out infinite; }

/* ---------- Headings underline sweep ---------- */
.common-heading h4 span, .common-heading-two h4 span, .common-heading-three h4 span { position: relative; }

/* ---------- Testimonial fade ---------- */
.slider .slide.active { animation: fadeSlide .7s both; }
.slider-indicator img { transition: transform .3s, filter .3s; }
.slider-indicator img:not(.active) { filter: grayscale(.7); }
.slider-indicator img:hover { transform: scale(1.1); }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Inputs ---------- */
.contact-form input, .contact-form textarea { transition: box-shadow .3s, border-color .3s; }
.contact-form input:focus, .contact-form textarea:focus {
    outline: none; box-shadow: 0 0 0 3px rgba(244, 67, 54, .18);
}
.contact-details { transition: transform .3s; }
.contact-details:hover { transform: translateX(8px); }

/* ---------- Back to top ---------- */
.back-top {
    position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: var(--brand, #f44); color: #fff; font-size: 18px; cursor: pointer; z-index: 1500;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none;
    transition: opacity .3s, transform .3s;
}
.back-top.show { opacity: 1; transform: none; pointer-events: auto; }
.back-top:hover { transform: translateY(-4px); }

/* ---------- Smart rendering: skip off-screen work ---------- */
/* Content-visibility removed to prevent headless/mobile viewport jumping */

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


/* ---------- Logo ---------- */
.main-menu .navbar-brand { width: 230px; max-width: 60vw; }
.main-menu .navbar-brand img { transition: transform .35s, filter .35s; filter: drop-shadow(0 4px 10px rgba(0, 174, 239, .35)); }
.main-menu .navbar-brand:hover img { transform: scale(1.04); filter: drop-shadow(0 6px 16px rgba(0, 174, 239, .6)); }
.main-menu.scrolled .navbar-brand { width: 190px; }
.footer-logo img { width: 230px; max-width: 100%; height: auto; }