/*======================================================
 SAMPAATI ANIMATIONS + BACKGROUND
 Loaded after style.css (and resources.css) on every page.
 Remove this file and animations.js to go back to the
 still version of the site.

 Most effects only switch on when animations.js adds
 the "anim" class to <html>, so the site still shows
 everything if the script is blocked.
======================================================*/

:root{
    --ease-out:cubic-bezier(.2,.7,.2,1);
    /* light tint used for hovers and soft panels: mint to match the background */
    --light:#eef7f2;
}

/*------------------------------------------------------
 1. LIGHT BACKGROUND (mint green tint, #e3f1ea)
 Slowly drifting colour glows with a dot grid on top
 that fades out towards the edges of the screen.
------------------------------------------------------*/

body{
    background-color:#e3f1ea;
}

body::before{
    inset:-15%;
    background:
        radial-gradient(38% 34% at 85% 12%, rgba(0,166,81,.16), transparent 70%),
        radial-gradient(42% 38% at 10% 85%, rgba(0,140,130,.12), transparent 70%),
        radial-gradient(32% 28% at 55% 48%, rgba(37,56,204,.05), transparent 70%),
        linear-gradient(180deg, #eaf5ef 0%, #dcede4 100%);
    animation:aurora 32s ease-in-out infinite alternate;
}

/* this section had its own light-blue fill; let the mint show through */
.eligibility{
    background:transparent;
}

@keyframes aurora{
    50%{ transform:translate(-4%, 3%) scale(1.06); }
    100%{ transform:translate(3%, -2%) scale(1.02); }
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background:radial-gradient(rgba(0,105,70,.17) 1px, transparent 1.6px) 0 0 / 24px 24px;
    -webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 40%, #000 15%, transparent 85%);
            mask-image:radial-gradient(ellipse 85% 75% at 50% 40%, #000 15%, transparent 85%);
}

/*------------------------------------------------------
 2. DARK BANNERS (home hero, page banners, News/Tools)
 Deeper navy, a moving grid, a light beam that sweeps
 down and the network animation from animations.js.
------------------------------------------------------*/

.hero,
.page-banner,
.resource-page{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    overflow:clip;
}

.hero,
.page-banner{
    background:
        radial-gradient(circle at 82% 8%, rgba(0,166,81,.24), transparent 40%),
        radial-gradient(circle at 8% 92%, rgba(37,56,204,.38), transparent 46%),
        linear-gradient(135deg, #041730 0%, #0b3a75 55%, #041730 100%);
}

.resource-page{
    background:
        radial-gradient(900px 600px at 85% 0, rgba(0,166,81,.2), transparent 70%),
        radial-gradient(900px 700px at 0 35%, rgba(37,56,204,.3), transparent 70%),
        linear-gradient(135deg, #041730 0%, #0b3a75 55%, #041730 100%);
}

/* moving grid */
.hero::before,
.page-banner::before,
.resource-page::before{
    content:"";
    position:absolute;
    inset:-48px;
    z-index:-1;
    pointer-events:none;
    background:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 48px 48px;
    -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 35%, #000 25%, transparent 85%);
            mask-image:radial-gradient(ellipse 75% 70% at 50% 35%, #000 25%, transparent 85%);
    animation:gridDrift 20s linear infinite;
}

.resource-page::before{
    -webkit-mask-image:linear-gradient(#000, rgba(0,0,0,.35) 1400px);
            mask-image:linear-gradient(#000, rgba(0,0,0,.35) 1400px);
}

@keyframes gridDrift{
    to{ transform:translate(48px, 48px); }
}

/* light beam sweeping down the banner */
.hero::after,
.page-banner::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-30%;
    height:30%;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(127,179,255,.09) 70%, rgba(127,179,255,.18) 98%, transparent);
    animation:scan 9s ease-in-out infinite;
}

@keyframes scan{
    0%{ top:-30%; opacity:0; }
    10%{ opacity:1; }
    60%,100%{ top:100%; opacity:0; }
}

/* network canvas added by animations.js */
.net-canvas{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-1;
    pointer-events:none;
}

.resource-page .net-canvas{
    height:min(100%, 900px);
    -webkit-mask-image:linear-gradient(#000 60%, transparent);
            mask-image:linear-gradient(#000 60%, transparent);
}

/* Banner text slides in one line after another as the page opens.
   Pure CSS so it starts on the first frame, and it never starts fully
   invisible, so Google still counts the page as loaded straight away. */
.hero-content > *,
.hero-image,
.page-banner-inner > *,
.desk-hero > *,
.kit-hero > *{
    animation:heroIn .8s var(--ease-out) var(--hd, 0ms) both;
}

.hero-content > :nth-child(2),
.page-banner-inner > :nth-child(2),
.desk-hero > :nth-child(2),
.kit-hero > :nth-child(2){ --hd:90ms; }

.hero-content > :nth-child(3),
.page-banner-inner > :nth-child(3),
.kit-hero > :nth-child(3){ --hd:180ms; }

.hero-content > :nth-child(4),
.page-banner-inner > :nth-child(4),
.kit-hero > :nth-child(4){ --hd:270ms; }

.hero-content > :nth-child(5),
.page-banner-inner > :nth-child(5),
.kit-hero > :nth-child(5){ --hd:360ms; }

.hero-image{ --hd:300ms; }

@keyframes heroIn{
    from{ opacity:.01; translate:0 24px; }
}

/* big headings get a slow shine (after their entrance) */
.hero h1,
.page-banner h1,
.desk-hero h1,
.kit-hero h1{
    background:linear-gradient(100deg, #fff 0%, #fff 42%, #9fe3bf 50%, #fff 58%, #fff 100%);
    background-size:250% 100%;
    background-position:0 0;
    -webkit-background-clip:text;
            background-clip:text;
    color:transparent;
    animation:
        heroIn .8s var(--ease-out) var(--hd, 0ms) both,
        shine 7s ease-in-out 1.5s infinite;
}

@keyframes shine{
    0%,35%{ background-position:100% 0; }
    75%,100%{ background-position:0 0; }
}

/* the floating "Our Core Services" card on the home page */
.glass-card{
    animation:float 7s ease-in-out infinite;
}

@keyframes float{
    50%{ translate:0 -10px; }
}

/*------------------------------------------------------
 3. HEADER + SCROLL PROGRESS
------------------------------------------------------*/

header{
    transition:background-color .3s ease, box-shadow .3s ease;
}

header.is-scrolled{
    background:rgba(255,255,255,.82);
    -webkit-backdrop-filter:saturate(1.6) blur(14px);
            backdrop-filter:saturate(1.6) blur(14px);
}

/* the phone menu needs a solid header behind it */
body.menu-open header.is-scrolled{
    background:#fff;
    -webkit-backdrop-filter:none;
            backdrop-filter:none;
}

.scroll-progress{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:3px;
    z-index:1002;
    pointer-events:none;
    transform:scaleX(0);
    transform-origin:0 50%;
    background:linear-gradient(90deg, #00d26a, #2f8cff);
    box-shadow:0 0 10px rgba(47,140,255,.5);
}

/*------------------------------------------------------
 4. SCROLL REVEAL
 animations.js tags elements with data-reveal and adds
 "is-in" when they scroll into view. --d staggers them.
------------------------------------------------------*/

.anim [data-reveal]{
    opacity:0;
    translate:0 28px;
    transition:
        opacity .8s var(--ease-out) var(--d, 0ms),
        translate .8s var(--ease-out) var(--d, 0ms),
        transform .3s ease-out,
        box-shadow .35s ease,
        background-color .3s ease,
        border-color .3s ease;
}

.anim [data-reveal].is-in{
    opacity:1;
    translate:none;
}

/* script.js has an older fade; the new reveal replaces it */
.anim [data-reveal].fade{
    animation:none;
}

/* section headings get a bar that grows in */
.section-title h2::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    margin:14px auto 0;
    border-radius:4px;
    background:linear-gradient(90deg, var(--primary), #00a651);
}

.anim .section-title[data-reveal] h2::after{
    transform:scaleX(0);
    transition:transform .8s var(--ease-out) .35s;
}

.anim .section-title.is-in h2::after{
    transform:scaleX(1);
}

/*------------------------------------------------------
 5. CARDS: tilt towards the mouse and a glow that
 follows the cursor (computers with a mouse only)
------------------------------------------------------*/

.spot{
    position:relative;
    --spot:rgba(11,78,162,.10);
}

.resource-page .spot,
.home-tools .spot,
.glass-card.spot{
    --spot:rgba(127,179,255,.16);
}

.spot::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 65%);
    opacity:0;
    transition:opacity .3s ease;
}

.spot:hover::after{
    opacity:1;
}

.anim .tilt{
    transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
}

.anim .tilt:hover{
    --lift:-8px;
    transform:perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
    box-shadow:0 26px 50px rgba(6,32,65,.18);
}

/* keyboard users still see the card lift */
.anim .tilt:focus-visible{
    --lift:-6px;
    transform:perspective(900px) translateY(var(--lift));
}

/*------------------------------------------------------
 6. BUTTONS: light sweep on hover, small press on click
------------------------------------------------------*/

.anim .btn,
.anim .btn-outline,
.anim .tool-btn{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.anim .btn::after,
.anim .btn-outline::after,
.anim .tool-btn::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-80%;
    width:50%;
    z-index:-1;
    pointer-events:none;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .7s ease;
}

.anim .btn:hover::after,
.anim .btn-outline:hover::after,
.anim .tool-btn:hover::after{
    left:130%;
}

.anim .btn:active,
.anim .btn-outline:active,
.anim .tool-btn:active{
    scale:.97;
}

/*------------------------------------------------------
 7. PHONE MENU: links slide in one after another
------------------------------------------------------*/

@media (max-width:900px){
    .anim .nav-links.active li{
        animation:menuIn .45s var(--ease-out) both;
        animation-delay:calc(var(--i, 0) * 45ms + 80ms);
    }
}

@keyframes menuIn{
    from{ opacity:0; translate:-28px 0; }
}

/*------------------------------------------------------
 8. TOOL WINDOWS: zoom in with a little bounce
------------------------------------------------------*/

.anim .kit-dialog[open]{
    animation:dialogIn .38s cubic-bezier(.2,.9,.3,1.15);
}

.anim .kit-dialog[open]::backdrop{
    animation:backdropIn .3s ease;
}

@keyframes dialogIn{
    from{ opacity:0; transform:translateY(26px) scale(.93); }
}

@keyframes backdropIn{
    from{ opacity:0; }
}

/*------------------------------------------------------
 9. PHONES: keep it light
------------------------------------------------------*/

@media (max-width:768px){
    body::before{
        animation-duration:45s;
    }
    .anim [data-reveal]{
        translate:0 18px;
    }
}

/*------------------------------------------------------
 10. "REDUCE MOTION" visitors get the still site
------------------------------------------------------*/

@media (prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }

    body::before,
    .hero::before,
    .page-banner::before,
    .resource-page::before,
    .hero h1,
    .page-banner h1,
    .desk-hero h1,
    .kit-hero h1,
    .glass-card{
        animation:none !important;
    }

    .hero::after,
    .page-banner::after{
        display:none;
    }

    .anim [data-reveal]{
        opacity:1;
        translate:none;
    }
}