/***********************************************************************
 * SANGYAN AI TECHNOLOGIES PRIVATE LIMITED
 * ---------------------------------------------------------------------
 * Project      : SAI-WEB-001
 * Engine       : SAI-X 1.1
 * File         : assets/css/landing-page.css
 *
 * Version      : 1.4.0
 * Sprint       : LP-FINAL-04
 * Build ID     : SAI-X-LPFINAL-004
 * Revision     : R01
 * Generated On : 17-Jul-2026
 * Generated At : IST
 * Status       : Production Candidate
 *
 * Responsibility
 * ---------------------------------------------------------------------
 * Defines the complete visual presentation of the Sangyan AI
 * Landing Experience.
 *
 * Modules
 * ---------------------------------------------------------------------
 * • Global Design System
 * • Layout Engine
 * • Floating Site Header
 * • Hero Presentation
 * • Landing Experience Engine
 * • Background Scene Manager
 * • Drone Animation Engine
 * • Satellite Animation Engine
 * • Capability Rotation Manager
 * • Intelligence Scan Engine
 *
 * Production Notes
 * ---------------------------------------------------------------------
 * ✓ Drone Scan Cone Removed
 * ✓ AI Detection Overlay Removed
 * ✓ Communication Rays Removed
 * ✓ Detection Pulse Engine Removed
 * ✓ Legacy Overlay Engine Removed
 ***********************************************************************/
 
/**********************************************************************
ROOT VARIABLES
**********************************************************************/

:root{

    --color-primary:#FF6A00;

    --color-text:#FFFFFF;

    --color-background:#000000;

    --header-height:90px;

    --content-width:1320px;

    --transition:300ms ease;

    --font-heading:'Poppins',sans-serif;

    --font-body:'Inter',sans-serif;

}



/**********************************************************************
GLOBAL RESET
**********************************************************************/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    background:#000;

    color:#fff;

    font-family:var(--font-body);

    overflow-x:hidden;

}



/**********************************************************************
TYPOGRAPHY
**********************************************************************/

h1,h2,h3,h4,h5,h6{

    font-family:var(--font-heading);

}



a{

    text-decoration:none;

    color:inherit;

}



img{

    display:block;

    max-width:100%;

}



/***********************************************************************
MAIN APPLICATION CONTAINER
***********************************************************************/

.sai-main{

    position:relative;

    width:100%;

    overflow:hidden;

}

/***********************************************************************
FLOATING SITE HEADER
-----------------------------------------------------------------------
Transparent navigation overlay.
Always rendered above the Landing Experience.
***********************************************************************/

.sai-site-header{

    position:absolute;

    top:28px;

    left:0;

    width:100%;

    z-index:1000;

    background:transparent;

}



/**********************************************************************
HEADER WRAPPER
**********************************************************************/

.sai-header-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

}



/**********************************************************************
LOGO
**********************************************************************/

.sai-logo{

    display:flex;

    align-items:center;

}



.sai-logo-image{

    height:68px;

    width:auto;

}



/**********************************************************************
NAVIGATION
**********************************************************************/

.sai-navigation{

    display:flex;

}



.sai-nav-list{

    display:flex;

    list-style:none;

    gap:42px;

}



.sai-nav-link{

    color:#FFFFFF;

    font-family:var(--font-heading);

    font-weight:500;

    font-size:16px;

    transition:var(--transition);

}



.sai-nav-link:hover{

    color:var(--color-primary);

}



/**********************************************************************
RESPONSIVE
**********************************************************************/

@media(max-width:991px){

    .sai-logo-image{

        height:60px;

    }

}



@media(max-width:768px){

    .sai-site-header{

        top:18px;

    }

    .sai-nav-list{

        gap:24px;

    }

}



@media(max-width:576px){

    .sai-nav-link{

        font-size:14px;

    }

}

/***********************************************************************
LANDING HERO
***********************************************************************/

/***********************************************************************
LANDING HERO
***********************************************************************/

.sai-hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:flex-end;

    padding-bottom:110px;

    z-index:20;

}

.sai-hero-content{

    max-width:720px;

    color:#FFFFFF;

    position:relative;

    z-index:20;


}



.sai-hero-title{

    font-family:var(--font-heading);

    font-size:64px;

    font-weight:700;

    line-height:1.1;

    margin-bottom:20px;

}

/**********************************************************************
HERO TITLE LINES
**********************************************************************/

.sai-hero-line-1{

    display:block;

    font-size:36px;

    font-weight:600;

    color:#FFFFFF;

    line-height:1.10;

}



.sai-hero-line-2{

    display:block;

    font-size:48px;

    font-weight:700;

    color:var(--color-primary);

    line-height:1.05;

}


.sai-capability{

    font-family:var(--font-heading);

    font-size:24px;

    font-weight:500;

    color:#FFFFFF;

    margin-bottom:36px;

}



.sai-request-demo{

    display:inline-block;

    font-size:18px;

    font-weight:500;

    color:#FFFFFF;

    transition:var(--transition);

}



.sai-request-demo:hover{

    color:var(--color-primary);

}



@media(max-width:991px){

    .sai-hero-title{

        font-size:48px;

    }

}



@media(max-width:768px){

    .sai-hero-title{

        font-size:40px;

    }

    .sai-capability{

        font-size:22px;

    }

}



@media(max-width:576px){

    .sai-hero-title{

        font-size:34px;

    }

}

/***********************************************************************
LANDING EXPERIENCE ENGINE
-----------------------------------------------------------------------
Purpose
-------
Provides the master layout container for the Sangyan AI cinematic
landing experience.

Responsibilities
----------------
• Full-screen presentation layer
• Parent container for all background scenes
• Hero positioning context
• Animation staging area

Dependencies
------------
background.php
hero.php
overlay.php

Version
-------
Version      : 1.4.0
Sprint       : LP-FINAL-04
Build ID     : SAI-X-LPFINAL-004
Status       : Production Candidate
***********************************************************************/

.sai-landing-experience{

    position:relative;

    width:100%;

    height:100vh;

    min-height:100vh;

    overflow:hidden;

    background:#000;

    isolation:isolate;

}


/***********************************************************************
BACKGROUND SCENE MANAGER
-----------------------------------------------------------------------
Purpose
-------
Manages the full-screen cinematic background and scene transitions.

Responsibilities
----------------
• Maintains the scene stack
• Controls scene visibility
• Provides smooth fade transitions
• Serves as the base layer for the Landing Experience

Dependencies
------------
background.php
landing-page.js

Version
-------
Version      : 1.4.0
Sprint       : LP-FINAL-04
Build ID     : SAI-X-LPFINAL-004
Status       : Production Candidate
***********************************************************************/

/***********************************************************************
BACKGROUND CONTAINER
***********************************************************************/

.sai-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:1;

}

/***********************************************************************
SCENE STACK
***********************************************************************/

.sai-scene{

    position:absolute;

    inset:0;

    opacity:0;

    visibility:hidden;

    transition:
        opacity 1.2s ease-in-out,
        visibility 1.2s ease-in-out;

    z-index:1;

}

/***********************************************************************
ACTIVE SCENE
***********************************************************************/

.sai-scene-active{

    opacity:1;

    visibility:visible;

    z-index:2;

}

/***********************************************************************
SCENE IMAGE
***********************************************************************/

.sai-scene-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    user-select:none;

    -webkit-user-drag:none;

    pointer-events:none;

}

/***********************************************************************
DRONE ENGINE
-----------------------------------------------------------------------
Purpose
-------
Provides a subtle autonomous drone patrol to reinforce the
Intelligent Visual Surveillance theme.

Responsibilities
----------------
• Drone positioning
• Autonomous hover animation
• Smooth mission movement
• Visual ambience only

Dependencies
------------
background.php
landing-page.js

Version
-------
Version      : 1.4.0
Sprint       : LP-FINAL-04
Build ID     : SAI-X-LPFINAL-004
Status       : Production Candidate
***********************************************************************/

/***********************************************************************
DRONE LAYER
***********************************************************************/

.sai-drone-layer{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:6;

}

/***********************************************************************
DRONE SCAN
***********************************************************************/

.sai-drone-scan{

    position:absolute;

    width:340px;

    left:58%;

    top:18%;

    transform:
        translate(-50%,-5%);

    transform-origin:
        top center;

    opacity:0;

    transition:
        left 2.8s ease,
        top 2.8s ease,
        opacity .8s ease;

    will-change:
        left,
        top,
        opacity,
        transform;

    z-index:1;

}

/***********************************************************************
DRONE IMAGE
***********************************************************************/

.sai-drone-image{

    position:absolute;

    width:135px;

    left:58%;

    top:18%;
    
    opacity: 0.68;

    transition:
        left 2.8s ease,
        top 2.8s ease;

    transform-origin:center center;

    animation:
        saiDronePatrol 20s linear infinite;

    will-change:
        transform;

    z-index:2;

}

/***********************************************************************
DRONE PATROL ANIMATION
***********************************************************************/

@keyframes saiDronePatrol{

    0%{

        transform:
        translate(-50%,-50%)
        translate(0px,0px)
        rotate(0deg);

    }

    10%{

        transform:
        translate(-50%,-50%)
        translate(-8px,-5px)
        rotate(-1deg);

    }

    22%{

        transform:
        translate(-50%,-50%)
        translate(-14px,-10px)
        rotate(-2deg);

    }

    32%{

        transform:
        translate(-50%,-50%)
        translate(-14px,-10px)
        rotate(-2deg);

    }

    46%{

        transform:
        translate(-50%,-50%)
        translate(2px,-8px)
        rotate(0deg);

    }

    60%{

        transform:
        translate(-50%,-50%)
        translate(15px,-12px)
        rotate(2deg);

    }

    72%{

        transform:
        translate(-50%,-50%)
        translate(15px,-12px)
        rotate(2deg);

    }

    86%{

        transform:
        translate(-50%,-50%)
        translate(4px,-6px)
        rotate(0deg);

    }

    100%{

        transform:
        translate(-50%,-50%)
        translate(0px,0px)
        rotate(0deg);

    }

}

/**********************************************************************
 SANGYAN AI TECHNOLOGIES PRIVATE LIMITED
-----------------------------------------------------------------------
 Project      : SAI-WEB-001
 Engine       : SAI-X 1.1

 Module       : Drone Scan Engine
 Sprint       : D-004B

 Version      : 1.2.0
 Build ID     : SAI-X-D004B-001
 Revision     : R02

 Generated On : 16-Jul-2026
 Generated At : IST
**********************************************************************/

/**********************************************************************
DRONE SCAN ACTIVATION
**********************************************************************/

.sai-drone-scan-active{

    opacity:.82;

    animation:saiDroneScan 5.5s ease-in-out;

}

/**********************************************************************
DRONE SCAN ANIMATION
**********************************************************************/

@keyframes saiDroneScan{

    0%{

        opacity:0;

        transform:
        translate(-50%,-5%)
        rotate(-8deg);

    }

    15%{

        opacity:.82;

    }

    35%{

        transform:
        translate(-50%,-5%)
        rotate(-15deg);

    }

    50%{

        transform:
        translate(-50%,-5%)
        rotate(0deg);

    }

    70%{

        transform:
        translate(-50%,-5%)
        rotate(14deg);

    }

    85%{

        opacity:.82;

    }

    100%{

        opacity:0;

        transform:
        translate(-50%,-5%)
        rotate(8deg);

    }

}



/***********************************************************************
 * SANGYAN AI TECHNOLOGIES PRIVATE LIMITED
 * ---------------------------------------------------------------------
 * Project      : SAI-WEB-001
 * Engine       : SAI-X 1.1
 * File         : assets/css/landing-page.css
 *
 * Module       : Satellite Orbit Engine
 *
 * Version      : 1.4.0
 * Sprint       : LP-FINAL-04
 * Build ID     : SAI-X-LPFINAL-004
 * Revision     : R01
 * Generated On : 17-Jul-2026
 * Generated At : IST
 * Status       : Production Candidate
 *
 * Purpose
 * ---------------------------------------------------------------------
 * Provides a subtle orbital movement representing continuous
 * AI-enabled global surveillance.
 *
 * Responsibilities
 * ---------------------------------------------------------------------
 * • Satellite positioning
 * • Continuous orbital movement
 * • Ambient visual intelligence
 ***********************************************************************/
/***********************************************************************
SATELLITE LAYER
***********************************************************************/

.sai-satellite-layer{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:5;

}

.sai-satellite-image{

    position:absolute;

    width:135px;

    left:-12%;

    top:8%;

    opacity:.70;

    transform-origin:center center;

    animation:saiSatelliteOrbit 40s linear infinite;

    will-change:left,top,transform;

}

/***********************************************************************
SATELLITE ORBIT ANIMATION
***********************************************************************/

@keyframes saiSatelliteOrbit{

    /* Enter Orbit */

    0%{

        left:-12%;
        top:8%;

        transform:
        rotate(-10deg);

    }

    /* Western Sky */

    20%{

        left:10%;
        top:7.5%;

        transform:
        rotate(-5deg);

    }

    /* Mid Orbit */

    40%{

        left:35%;
        top:6.8%;

        transform:
        rotate(-1deg);

    }

    /* Central Surveillance */

    60%{

        left:60%;
        top:6.5%;

        transform:
        rotate(3deg);

    }

    /* Eastern Sky */

    80%{

        left:85%;
        top:7%;

        transform:
        rotate(7deg);

    }

    /* Exit Orbit */

    100%{

        left:112%;
        top:8%;

        transform:
        rotate(10deg);

    }

}

/**********************************************************************
SCENE IMAGE
**********************************************************************/

.sai-scene-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center center;

    display:block;

}

/**********************************************************************
CAPABILITY MANAGER
**********************************************************************/

.sai-capability-container{

    position:relative;

    min-height:42px;

    margin-bottom:36px;

}



.sai-capability{

    position:absolute;

    left:0;

    top:0;

    width:100%;

    margin:0;

    font-family:var(--font-heading);

    font-size:28px;

    font-weight:400;

    color:#FFFFFF;

    opacity:0;

    transition:opacity 0.8s ease;

}


.sai-capability-active{

    opacity:1;

}

/**********************************************************************
SAI-X ORANGE INTELLIGENCE OVERLAY
**********************************************************************/

.sai-overlay{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:8;

}



/* ----------------------------------------------------------
   Ambient Intelligence Glow
---------------------------------------------------------- */

.sai-overlay-glow{

    position:absolute;

    width:900px;

    height:900px;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    background:radial-gradient(circle,
        rgba(255,106,0,0.24) 0%,
        rgba(255,106,0,0.08) 35%,
        rgba(255,106,0,0.00) 75%);

    animation:saiGlowPulse 5s ease-in-out infinite;

}


/* ----------------------------------------------------------
   AI CONTINUOUS SCANNING LINE
---------------------------------------------------------- */

.sai-overlay-scan{

    position:absolute;

    top:0;

    left:-2px;

    width:2px;

    height:100%;

    background:#FF7A00;

    opacity:.32;

    pointer-events:none;

    z-index:4;

    animation:saiScanMove 12s linear infinite;

    will-change:left;

}

/**********************************************************************
KEYFRAMES
**********************************************************************/

@keyframes saiGlowPulse{

    0%{

        opacity:.30;

        transform:translate(-50%,-50%) scale(1);

    }

    50%{

        opacity:.70;

        transform:translate(-50%,-50%) scale(1.05);

    }

    100%{

        opacity:.30;

        transform:translate(-50%,-50%) scale(1);

    }

}

@keyframes saiScanMove{

    from{

        left:-2px;

    }

    to{

        left:100%;

    }

}

/**********************************************************************
SAI-X OVERLAY MANAGER
Overlay Focus Positions
**********************************************************************/


/**********************************************************************
SPRINT D-004C
AI DETECTION ENGINE
**********************************************************************/

/* Detection objects remain hidden until AI scan */

#box-person-01,
#box-person-02,
#box-person-03,
#box-vehicle-01{

    opacity:0;

    transform-box:fill-box;
    transform-origin:center;

}

/* Activated only during scan */

.sai-detection-active{

    animation:detectionPulse 2.2s ease-in-out;

}

@keyframes detectionPulse{

    0%{

        opacity:0;

        filter:drop-shadow(0 0 0 rgba(255,106,0,.20));

    }

    20%{

        opacity:1;

    }

    50%{

        opacity:1;

        filter:
            drop-shadow(0 0 12px rgba(255,106,0,.95))
            drop-shadow(0 0 24px rgba(255,106,0,.60));

    }

    100%{

        opacity:0;

        filter:drop-shadow(0 0 0 rgba(255,106,0,.20));

    }

}

/****************************************************************
SPRINT 4.2B
DRONE HOVER
****************************************************************/

#drone-main{

    transform-box: fill-box;
    transform-origin:center center;

    animation:droneHover 4s ease-in-out infinite;

    will-change:transform;

}

@keyframes droneHover{

    0%{

        transform:translateY(0px);

    }

    25%{

        transform:translateY(-4px);

    }

    50%{

        transform:translateY(-7px);

    }

    75%{

        transform:translateY(-4px);

    }

    100%{

        transform:translateY(0px);

    }

}


/***********************************************************************
 * SANGYAN AI TECHNOLOGIES PRIVATE LIMITED
 * ---------------------------------------------------------------------
 * Project : SAI-WEB-001
 * Engine  : SAI-X 1.1
 * Sprint  : D-004A
 * Module  : Satellite Mission Pulse
 * Status  : Production
 *
 * Description
 * ---------------------------------------------------------------------
 * • Creates a brief mission acknowledgement.
 * • Does NOT interrupt the satellite orbit.
 ***********************************************************************/


/***********************************************************************
SATELLITE MISSION PULSE
***********************************************************************/

.sai-satellite-mission{

    transition:none;

}
/**********************************************************************
 * SANGYAN AI TECHNOLOGIES PRIVATE LIMITED
 * --------------------------------------------------------------------
 * Project      : SAI-WEB-001
 * Engine       : SAI-X 1.1
 *
 * File         : landing-page.css
 *
 * Version      : 1.3.0
 * Sprint       : D-004C
 * Build ID     : SAI-X-D004C-001
 * Revision     : R01
 *
 * Generated On : 16-Jul-2026
 * Generated At : IST
 *
 * Responsibility
 * --------------------------------------------------------------------
 * AI Intelligence Overlay Engine
 * Detection Box Engine
 * Communication Ray Engine
 * Overlay Animation Engine
 *********************************************************************/


/**********************************************************************
AI INTELLIGENCE OVERLAY
**********************************************************************/

.sai-ai-overlay{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:5;

}


/**********************************************************************
DETECTION BOX BASE
**********************************************************************/

.sai-detect{

    position:absolute;

    width:34px;

    height:34px;

    border:3px solid #FF7A00;

    border-radius:4px;

    opacity:0;

    transform:translate(-50%,-50%) scale(.75);

    transition:
        opacity .45s ease,
        transform .45s ease;

    box-shadow:
        0 0 12px rgba(255,122,0,.85);

}


/**********************************************************************
ACTIVE DETECTION
**********************************************************************/

.sai-ai-overlay.active .sai-detect{

    opacity:1;

    transform:
        translate(-50%,-50%)
        scale(1);

}


/**********************************************************************
DETECTION POSITIONS
**********************************************************************/

/* Person 01 */

.person01{

    left:30%;

    top:60%;

}

/* Person 02 */

.person02{

    left:48%;

    top:77%;

}

/* Vehicle */

.vehicle01{

    left:66%;

    top:67%;

}

/* Person 03 */

.person03{

    left:73%;

    top:60%;

}


/**********************************************************************
COMMUNICATION RAYS
**********************************************************************/

.sai-ray{

    position:absolute;

    height:2px;

    background:#FF7A00;

    opacity:0;

    transform-origin:left center;

    transition:opacity .35s ease;

}


/**********************************************************************
ACTIVE RAYS
**********************************************************************/

.sai-ai-overlay.active .sai-ray{

    opacity:1;

}


/**********************************************************************
CAMERA → PERSON
**********************************************************************/

.ray-camera{

    left:12%;

    top:19%;

    width:320px;

    transform:rotate(58deg);

}


/**********************************************************************
DRONE → PERSON
**********************************************************************/

.ray-drone{

    left:50%;

    top:18%;

    width:315px;

    transform:rotate(96deg);

}


/**********************************************************************
SATELLITE → PERSON
**********************************************************************/

.ray-satellite{

    right:16%;

    top:18%;

    width:305px;

    transform:rotate(112deg);

}


/**********************************************************************
OVERLAY GLOW
**********************************************************************/

.sai-ai-overlay.active{

    animation:saiOverlayGlow 5.4s ease;

}


@keyframes saiOverlayGlow{

    0%{

        opacity:0;

    }

    15%{

        opacity:1;

    }

    85%{

        opacity:1;

    }

    100%{

        opacity:0;

    }

}


/**********************************************************************
DETECTION PULSE
**********************************************************************/

.sai-ai-overlay.active .sai-detect{

    animation:saiDetectionPulse 1.4s infinite;

}


@keyframes saiDetectionPulse{

    0%{

        box-shadow:
            0 0 8px rgba(255,122,0,.50);

    }

    50%{

        box-shadow:
            0 0 20px rgba(255,122,0,1);

    }

    100%{

        box-shadow:
            0 0 8px rgba(255,122,0,.50);

    }

}


/**********************************************************************
COMMUNICATION RAY PULSE
**********************************************************************/

.sai-ai-overlay.active .sai-ray{

    animation:saiRayPulse .9s linear infinite;

}


@keyframes saiRayPulse{

    0%{

        opacity:.25;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.25;

    }

}