/* =========================================
   SAN ENGINEERING
   CLEAN ANIMATIONS
========================================= */


/* =========================================
   01. HERO CONTENT
========================================= */

.hero-content {

    animation:
        heroContent 0.9s ease-out forwards;
}


/* =========================================
   02. HERO CONTENT ANIMATION
========================================= */

@keyframes heroContent {

    from {

        opacity: 0;

        transform:
            translateY(25px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================
   03. SECTION CONTENT
========================================= */

.section-heading,
.intro-text,
.intro-stat,
.capability-card,
.cta-container {

    animation:
        sectionReveal 0.7s ease-out both;
}


@keyframes sectionReveal {

    from {

        opacity: 0;

        transform:
            translateY(20px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* =========================================
   04. BUTTON HOVER
========================================= */

.btn {

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.btn:hover {

    transform:
        translateY(-3px);
}


/* =========================================
   05. TEXT LINK
========================================= */

.text-link,
.capability-card a {

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.text-link:hover,
.capability-card a:hover {

    transform:
        translateX(5px);
}


/* =========================================
   06. CAPABILITY CARD
========================================= */

.capability-card {

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.capability-card:hover {

    transform:
        translateY(-8px);
}


/* =========================================
   07. NAVIGATION
========================================= */

.navigation a {

    transition:
        color 0.3s ease;
}


.navigation a::after {

    transition:
        width 0.3s ease;
}


/* =========================================
   08. LOGO
========================================= */

.logo {

    transition:
        opacity 0.3s ease;
}


.logo:hover {

    opacity:
        0.85;
}


/* =========================================
   09. MOBILE MENU
========================================= */

.menu-button span {

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}


/* =========================================
   10. ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

        scroll-behavior:
            auto !important;
    }
}

/* =========================================================
   SAN ENGINEERING
   PREMIUM HERO MAIN HEADING ANIMATION
   ADD-ON ONLY — DOES NOT MODIFY EXISTING DESIGN
========================================================= */

/* Main hero heading entrance */

.hero h1 {
    animation:
        sanHeroHeadingIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* Highlighted heading line */

.hero h1 span {
    display: inline-block;

    animation:
        sanHeroHighlightIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;

    position: relative;
}


/* =========================================================
   PRECISION LINE UNDER MAIN HEADING
========================================================= */

.hero h1 span::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -10px;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(87, 236, 212, 0.9),
            transparent
        );

    transform: scaleX(0);
    transform-origin: left center;

    animation:
        sanEngineeringLine 1s ease-out 0.7s forwards;

    opacity: 0.8;
}


/* =========================================================
   MAIN HEADING ENTRANCE
========================================================= */

@keyframes sanHeroHeadingIn {

    0% {
        opacity: 0;
        transform: translateY(28px);
        filter: blur(5px);
    }

    60% {
        opacity: 0.9;
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

}


/* =========================================================
   HIGHLIGHTED LINE ENTRANCE
========================================================= */

@keyframes sanHeroHighlightIn {

    0% {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

}


/* =========================================================
   PRECISION LINE SWEEP
========================================================= */

@keyframes sanEngineeringLine {

    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: scaleX(1);
        opacity: 0.75;
    }

}


/* =========================================================
   ACCESSIBILITY
   Respect reduced-motion preference
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero h1,
    .hero h1 span,
    .hero h1 span::after {
        animation: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

}



/* =========================================================
   SAN ENGINEERING
   PROFESSIONAL IMAGE REVEAL SYSTEM
   CSS ONLY
   EXISTING JAVASCRIPT UNCHANGED
========================================================= */


/* =========================================================
   ALL IMAGE CARDS
========================================================= */

.capability-card img,
.product-card img,
.feature-card img,
.project-card img,
.industry-card img,
.service-card img {

    opacity: 0;

    will-change:
        transform,
        opacity,
        clip-path;

    transition:
        opacity 0.65s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   HOME
   CINEMATIC REVEAL
   Fade + gentle scale
========================================================= */

body.page-home
.capability-card img,
body.page-home
.product-card img,
body.page-home
.feature-card img,
body.page-home
.project-card img,
body.page-home
.industry-card img,
body.page-home
.service-card img {

    opacity: 0;

    transform:
        scale(1.06);

    clip-path:
        inset(0 0 0 0);
}


body.page-home
.capability-card.image-visible img,
body.page-home
.product-card.image-visible img,
body.page-home
.feature-card.image-visible img,
body.page-home
.project-card.image-visible img,
body.page-home
.industry-card.image-visible img,
body.page-home
.service-card.image-visible img {

    opacity: 1;

    transform:
        scale(1);
}


/* =========================================================
   TECHNICAL PAGES
   BOTTOM-UP MASK
========================================================= */

body.page-technical
.capability-card img,
body.page-technical
.product-card img,
body.page-technical
.feature-card img,
body.page-technical
.project-card img,
body.page-technical
.industry-card img,
body.page-technical
.service-card img {

    opacity: 1;

    transform:
        translateY(18px);

    clip-path:
        inset(100% 0 0 0);
}


body.page-technical
.capability-card.image-visible img,
body.page-technical
.product-card.image-visible img,
body.page-technical
.feature-card.image-visible img,
body.page-technical
.project-card.image-visible img,
body.page-technical
.industry-card.image-visible img,
body.page-technical
.service-card.image-visible img {

    opacity: 1;

    transform:
        translateY(0);

    clip-path:
        inset(0 0 0 0);
}


/* =========================================================
   DEPTH PAGES
   CENTER EXPANSION
========================================================= */

body.page-depth
.capability-card img,
body.page-depth
.product-card img,
body.page-depth
.feature-card img,
body.page-depth
.project-card img,
body.page-depth
.industry-card img,
body.page-depth
.service-card img {

    opacity: 0;

    transform:
        scale(0.94);

    clip-path:
        inset(12% 12% 12% 12%);
}


body.page-depth
.capability-card.image-visible img,
body.page-depth
.product-card.image-visible img,
body.page-depth
.feature-card.image-visible img,
body.page-depth
.project-card.image-visible img,
body.page-depth
.industry-card.image-visible img,
body.page-depth
.service-card.image-visible img {

    opacity: 1;

    transform:
        scale(1);

    clip-path:
        inset(0 0 0 0);
}


/* =========================================================
   PRECISION PAGES
   RIGHT-SIDE MASK
========================================================= */

body.page-precision
.capability-card img,
body.page-precision
.product-card img,
body.page-precision
.feature-card img,
body.page-precision
.project-card img,
body.page-precision
.industry-card img,
body.page-precision
.service-card img {

    opacity: 1;

    transform:
        translateX(18px);

    clip-path:
        inset(0 0 0 100%);
}


body.page-precision
.capability-card.image-visible img,
body.page-precision
.product-card.image-visible img,
body.page-precision
.feature-card.image-visible img,
body.page-precision
.project-card.image-visible img,
body.page-precision
.industry-card.image-visible img,
body.page-precision
.service-card.image-visible img {

    opacity: 1;

    transform:
        translateX(0);

    clip-path:
        inset(0 0 0 0);
}


/* =========================================================
   PROFESSIONAL CARD HOVER
   Very subtle
========================================================= */

.capability-card.image-visible:hover img,
.product-card.image-visible:hover img,
.feature-card.image-visible:hover img,
.project-card.image-visible:hover img,
.industry-card.image-visible:hover img,
.service-card.image-visible:hover img {

    transform:
        scale(1.018);

    transition:
        transform 0.4s ease;
}


/* =========================================================
   ABOUT IMAGE
   about.jpg
   Separate from card system
========================================================= */

.intro-image img {

    opacity: 0;

    transform:
        scale(1.035);

    clip-path:
        inset(0 0 100% 0);

    transition:
        opacity 0.65s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* About page has already loaded */

.page-loaded .intro-image img {

    opacity: 1;

    transform:
        scale(1);

    clip-path:
        inset(0 0 0 0);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .capability-card.image-visible:hover img,
    .product-card.image-visible:hover img,
    .feature-card.image-visible:hover img,
    .project-card.image-visible:hover img,
    .industry-card.image-visible:hover img,
    .service-card.image-visible:hover img {

        transform:
            scale(1);
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .capability-card img,
    .product-card img,
    .feature-card img,
    .project-card img,
    .industry-card img,
    .service-card img,
    .intro-image img {

        opacity: 1 !important;

        transform: none !important;

        clip-path: none !important;

        transition: none !important;
    }

}







/* =========================================================
   SAN ENGINEERING
   INDUSTRIES PAGE
   IMAGE + HEADING REVEAL
   CSS ONLY
========================================================= */


/* Card stays in its original position */
body.page-depth .industry-card {

    overflow: hidden;
}


/* Image starts slightly masked */
body.page-depth .industry-card img {

    opacity: 0;

    transform:
        scale(1.04);

    clip-path:
        inset(0 0 100% 0);

    transition:
        opacity 0.6s ease,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Heading/content starts hidden */
body.page-depth .industry-card h2,
body.page-depth .industry-card h3,
body.page-depth .industry-card .card-title,
body.page-depth .industry-card .card-description {

    opacity: 0;

    transform:
        translateY(15px);

    transition:
        opacity 0.55s ease,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   WHEN JS REVEALS THE CARD
========================================================= */

body.page-depth .industry-card.image-visible img {

    opacity: 1;

    transform:
        scale(1);

    clip-path:
        inset(0 0 0 0);
}


/* Heading appears shortly after image */
body.page-depth .industry-card.image-visible h2,
body.page-depth .industry-card.image-visible h3,
body.page-depth .industry-card.image-visible .card-title,
body.page-depth .industry-card.image-visible .card-description {

    opacity: 1;

    transform:
        translateY(0);

    transition-delay:
        0.18s;
}


/* =========================================================
   INDUSTRY CARD HOVER
   Very subtle
========================================================= */

body.page-depth .industry-card:hover img {

    transform:
        scale(1.02);

    transition:
        transform 0.45s ease;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    body.page-depth .industry-card:hover img {

        transform:
            scale(1);
    }

}