@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --ff-heading: 'Archivo', sans-serif;
    --ff-body: 'Inter', sans-serif;
    --cl-gold: #b08b40;
}



body { font-size:17px;  font-family:'Inter', sans-serif; }


a {
    text-decoration:none;
    &:hover { color:var(--cl-gold); }
}

button { position:relative; overflow:hidden; transition: all 0.5s ease-in-out; }


.gradient-gold-heading {
    font-size: 48px;
    font-weight: bold;
    background: linear-gradient(45deg, #FFA500, #ecca08, #b08b40);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}



.text-gold { color:var(--cl-gold); }
.hero-text { font-size:4.6rem; font-weight:bold; }

.fullsized {
    width:100%; min-height:100vh;
    & .overlay {
        background-image:linear-gradient(270deg, #000000 0%, #064e66 100%); 
        position:fixed; top:0; left:0; width:100%; height:100%; 
        z-index:1; opacity:.8;
    }
}

.force-center {
    display:flex; justify-content:center; align-items:center;
}


.border-dashed { border:1px dashed rgba(0,0,0,.2); } 


.htmx-indicator { z-index:-100; overflow:hidden; position:relative; right:unset; transition: right 0.5s ease-in-out;
    &.htmx-request { z-index:unset; position:relative; right:unset; }
}





.web-header {
    background:rgba(0,0,0,.8); box-shadow:0 0 10px rgba(0,0,0,.1);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff; position:fixed; top:0; left:0; width:100%; padding:.5rem 0; border-bottom:1px solid rgba(255, 255, 255, .2); z-index:10;
    .web-logo > img { max-height:50px; }
}




.dl-section::before { background:url(images/dl-bg.jpg) no-repeat center center / cover; position:absolute; top:0; left:0; width:100%; height:100%; z-index:-1; opacity:.05; content:''; }



.image-cover { transition:all .3s ease-in-out;
    /* background-image:linear-gradient(160deg, #ffffff70 0%, #eeeeee90 100%); */
    aspect-ratio: 1 / 1.414; width:100%; border-radius:.4em; position:relative; max-width:600px;
    img { 
        width:100%; height:100%; object-fit:fill; 
        object-position:top center; z-index:5; position:relative;
    }
}

.image-cover.landscape { aspect-ratio: 1.414 / 1; }



.image-cover .layers {
    position:absolute; top:0; left:0; width:100%; height:100%;
    display:flex; justify-content:center; align-items:center; z-index:1;
    .layer { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center;
        z-index:1; transition:all .3s ease-in-out;
        .layer-1 { z-index:1; transform-origin:center right; transform:rotate(0deg); }
        .layer-2 { z-index:2; transform-origin:center right; transform:rotate(0deg); transition:all .7s ease-in-out; }
    }

}

.anima-cover:hover .image-cover { transform-origin:center right; transform:translate(0%, -2%); transform:rotate(1deg);
    .layers {
        .layer-1 { /* transform:translate(3%, 0%); z-index:1; */ transform-origin: center right; transform: rotate(12deg); }
        .layer-2 { /* transform:translate(-3%, 0%); z-index:2; */ transform-origin: center right; transform: rotate(6deg); }
    }
}


.report-card { transition:all .3s ease-in-out; 
    &:hover { transform:scale(1.02); box-shadow:0 0 10px rgba(0,0,0,.5); }
}


.report-title a {
    font-size:1.3rem; font-weight:bold; color:#111; line-height:1.5rem; display:block;;
    &:hover { color:var(--cl-gold); }
}

/* .htmx-indicator {
    z-index:-10; position:fixed; left:-1000;
    opacity:0; transition:all .3s ease-in-out;
    &.htmx-request {
        z-index:1; position:relative; left:unset; opacity:1;
    }
} */




.footer { font-size:.9rem; color:#ddd; 
    h4 { color:#fff; }
    li a, a { color:#fff; text-decoration:none;
        &:hover { text-decoration:underline; }
    }
}




.hero {
    background:url('images/IndSight-Report-BG.jpg') no-repeat center center; background-size:cover; padding-top:67px; position:relative;
    min-height:100vh; width:100%; position:relative; overflow:hidden;
    display:flex; justify-content:center; align-items:center; font-family:var(--ff-heading);
    & .overlay {
        background-image:linear-gradient(160deg, #ffffff 0%, #aaaaaa 100%); 
        position:absolute; top:0; left:0; width:100%; height:100%; 
        z-index:1; opacity:.8;
    }
    & .container { z-index:5; }
    h1 { /* color:rgb(173, 127, 47); */ font-size:4rem; line-height:5rem; margin-bottom:2rem; /* text-shadow:0 0 2px rgba(0,0,0,.2); */ }
    h2 { line-height:2rem; font-size:1.275rem; color:#414141; }
}

@media all and (max-width: 768px) {
    .hero { padding-top:50px; min-height:100vh; 
        h1 { font-size:2rem; line-height:2.6rem; margin-bottom:1rem; }
        h2 { line-height:1.5rem; font-size:1.125rem; }
    }
}

.slash { position:absolute; top:-.3em; left:-20%; width:140%; height:40px; background:url(images/slash.svg) no-repeat center center; background-size:contain; z-index:1; opacity:.6; }