/* =========================================
   BRISTOL PRELOADER
========================================= */

#preloader{

    position:fixed;
    inset:0;

    width:100%;
    height:100vh;

    background:transparent;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:999999;

    overflow:hidden;

}

.preloader-background{

    position:absolute;
    inset:0;
    z-index:0;

    background:url("../images/about_background.jpg")
        center center / cover
        no-repeat;

    transform:scale(1.05);

    animation:
        backgroundZoom
        18s
        ease-in-out
        infinite alternate;

}

@keyframes backgroundZoom{

    from{

        transform:scale(1.05);

    }

    to{

        transform:scale(1.12);

    }

}

.preloader-overlay{

    position:absolute;
    inset:0;
    z-index:1;

    background:

        linear-gradient(

            rgba(5,10,18,.45),

            rgba(5,10,18,.60)

        ),

        radial-gradient(

            circle at center,

            rgba(212,175,55,.10),

            transparent 70%

        );

    backdrop-filter:none;

}

@keyframes ambientLight{

    0%,100%{

        transform:scale(1);

        opacity:.8;

    }

    50%{

        transform:scale(1.08);

        opacity:1;

    }

}

.preloader-content{

    position:relative;
    
    isolation:isolate;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:18px;

    width:min(650px,90vw);

    padding:70px 60px;

    border-radius:28px;

    background:rgba(255,255,255,.22);

    backdrop-filter:blur(30px) saturate(180%);
    -webkit-backdrop-filter:blur(30px) saturate(180%);

    border:1px solid rgba(212,175,55,.18);

    box-shadow:

        0 35px 90px rgba(0,0,0,.45),

        inset 0 1px 0 rgba(255,255,255,.15),

        0 0 45px rgba(212,175,55,.12);

    overflow:hidden;

    z-index:3;

}

.preloader-content::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

        120deg,

        transparent 20%,

        rgba(255,255,255,.18) 50%,

        transparent 80%

    );

    transform:translateX(-150%);

    animation:glassSweep 7s linear infinite;

}

@keyframes glassSweep{

    from{

        transform:translateX(-150%);

    }

    to{

        transform:translateX(150%);

    }

}

.preloader-content::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:28px;

    padding:1px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.45),
            rgba(212,175,55,.75),
            rgba(255,255,255,.25),
            rgba(212,175,55,.75)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
            mask-composite:exclude;

    opacity:.45;

    animation:borderGlow 6s linear infinite;

    pointer-events:none;

}

@keyframes borderGlow{

    from{

        filter:hue-rotate(0deg);

    }

    to{

        filter:hue-rotate(25deg);

    }

}

.logo-wrapper{

    width:120px;
    height:120px;

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;

    transform:

        scale(.75)

        translateY(25px);

    animation:

        logoEnter

        1.2s

        cubic-bezier(.16,1,.3,1)

        forwards;

}

@keyframes logoEnter{

    to{

        opacity:1;

        transform:

            scale(1)

            translateY(0);

    }

}

.preloader-logo{

    width:100%;
    height:auto;
    position:relative;
    z-index:1;

    object-fit:contain;

}

.preloader-brand{

    display:flex;
    flex-direction:column;

    align-items:center;

    gap:6px;

    opacity:0;

    transform:translateY(20px);

    animation:

        brandReveal

        .8s

        ease

        .5s

        forwards;

}

@keyframes brandReveal{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.preloader-stars{

    opacity:0;

    animation:

        starsAppear

        .5s

        ease

        1s

        forwards;

}

@keyframes starsAppear{

    to{

        opacity:1;

    }

}

.preloader-brand h1{

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:38px;

    letter-spacing:8px;

    color:#fff;

    font-weight:700;

}

.preloader-brand span{

    color:#d4af37;

    letter-spacing:8px;

    font-size:18px;

    font-family:Inter,sans-serif;

}

.preloader-stars{

    display:flex;

    gap:10px;

    color:#d4af37;

    font-size:18px;

}

.progress-track{

    width:220px;

    height:3px;

    border-radius:20px;

    overflow:hidden;

    background:rgba(255,255,255,.12);
    
    opacity:0;

    animation:

    progressAppear

    .5s

    ease

    1.2s

    forwards;

}

@keyframes progressAppear{

    to{

        opacity:1;

    }

}

.progress-fill{

    width:0;

    height:100%;

    border-radius:30px;

    background:
        linear-gradient(
            90deg,
            #8a6924,
            #d4af37,
            #fff3bf,
            #d4af37,
            #8a6924
        );

    background-size:250% 100%;

    animation:
        progressMove 4s linear forwards,
        goldFlow 2s linear infinite;

}

@keyframes progressMove{

    from{

        width:0;

    }

    to{

        width:100%;

    }

}

@keyframes goldFlow{

    from{

        background-position:0%;

    }

    to{

        background-position:250%;

    }

}

/* =========================================
   LOGO FLOAT
========================================= */

.preloader-logo{

    animation:
        logoFloat 4s ease-in-out infinite,
        logoGlow 3s ease-in-out infinite;

}

@keyframes logoFloat{

    0%,100%{

        transform:
            translateY(0px)
            scale(1);

    }

    50%{

        transform:
            translateY(-6px)
            scale(1.015);

    }

}

@keyframes logoGlow{

    0%,100%{

        filter:
            drop-shadow(0 0 0 rgba(212,175,55,0));

    }

    50%{

        filter:
            drop-shadow(0 0 18px rgba(212,175,55,.35));

    }

}

.preloader-stars span{

    opacity:.25;

    animation:starGlow 2s infinite;

}

.preloader-stars span:nth-child(1){

    animation-delay:0s;

}

.preloader-stars span:nth-child(2){

    animation-delay:.15s;

}

.preloader-stars span:nth-child(3){

    animation-delay:.12s;

}

.preloader-stars span:nth-child(4){

    animation-delay:.45s;

}

.preloader-stars span:nth-child(5){

    animation-delay:.60s;

}

@keyframes starGlow{

    0%{

        opacity:.25;

        transform:translateY(0);

    }

    25%{

        opacity:1;

        transform:translateY(-2px);

    }

    50%{

        opacity:.45;

    }

    100%{

        opacity:.25;

        transform:translateY(0);

    }

}

/* =========================================
   PRELOADER EXIT
========================================= */

#preloader{

    transition:

        opacity 1.2s ease,

        visibility 1.2s ease;

}

#preloader.preloader-hide{

    opacity:0;

    visibility:hidden;

}

body.preloader-active{

    overflow:hidden;

    height:100vh;

}

/* =========================================
   HERO ENTRANCE
========================================= */

.hero{

    opacity:0;

    transform:translateY(30px);

    transition:

        opacity 1.4s ease,

        transform 1.4s ease;

}

body.loaded .hero{

    opacity:1;

    transform:translateY(0);

}

#preloader{

    transition:
        opacity 1.2s ease,
        visibility 1.2s ease,
        transform 1.2s cubic-bezier(.16,1,.3,1);

}

#preloader.preloader-hide{

    opacity:0;

    visibility:hidden;

    transform:translateY(-40px);

}

#preloader.preloader-hide .preloader-logo{

    transform:
        translateY(-50px)
        scale(.85);

    opacity:0;

    transition:
        transform 1.2s cubic-bezier(.16,1,.3,1),
        opacity 1s ease;

}

#preloader.preloader-hide .preloader-brand{

    opacity:0;

    transform:translateY(-20px);

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

}

#preloader.preloader-hide .preloader-stars{

    opacity:0;

    transition:opacity .5s ease;

}

#preloader.preloader-hide .progress-track{

    opacity:0;

    transition:opacity .4s ease;

}

/* =========================================
   GOLD LIGHT RAYS
========================================= */

.logo-wrapper{

    position:relative;

}

.logo-rays{

    position:absolute;

    width:220px;
    height:220px;

    left:50%;
    top:50%;

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

    border-radius:50%;

    pointer-events:none;

    z-index:-0;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,
            rgba(212,175,55,.14) 18deg,
            transparent 36deg,
            transparent 90deg,
            rgba(212,175,55,.08) 110deg,
            transparent 130deg,
            transparent 200deg,
            rgba(255,255,255,.06) 220deg,
            transparent 240deg,
            transparent 360deg
        );

    filter:blur(18px);

    animation:
    rotateRays 28s linear infinite,
    raysPulse 6s ease-in-out infinite;

}

@keyframes raysPulse{

    0%,100%{

        opacity:.35;
        scale:1;

    }

    50%{

        opacity:.65;
        scale:1.08;

    }

}

@keyframes rotateRays{

    from{

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

    }

    to{

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

    }

}

/* =========================================
   FLOATING GOLD PARTICLES
========================================= */

.preloader-particles{

    position:absolute;
    inset:0;

    pointer-events:none;
    overflow:hidden;

    z-index:2;

}

.preloader-particles span{

    position:absolute;

    width:6px;
    height:6px;

    border-radius:50%;

    background:rgba(212,175,55,.9);

    box-shadow:
        0 0 12px rgba(212,175,55,.9),
        0 0 25px rgba(212,175,55,.5);

    opacity:.8;

    animation:particleFloat linear infinite;

}

@keyframes particleFloat{

    0%{
        transform:
            translate(0,40px)
            scale(.4);

        opacity:0;
    }

    15%{
        opacity:.35;
    }

    50%{
        transform:
            translate(15px,-40px)
            scale(.9);

        opacity:.6;
    }

    100%{
        transform:
            translate(-20px,-220px)
            scale(1.3);

        opacity:0;
    }

}

.preloader-particles span:nth-child(1){

    left:12%;
    top:25%;

    animation-duration:4s;
    animation-delay:0s;

}

.preloader-particles span:nth-child(2){

    left:25%;
    top:40%;

    animation-duration:5s;
    animation-delay:1s;

}

.preloader-particles span:nth-child(3){

    left:42%;
    top:62%;

    animation-duration:6s;
    animation-delay:2s;

}

.preloader-particles span:nth-child(4){

    left:57%;
    top:12%;

    animation-duration:5s;
    animation-delay:1s;

}

.preloader-particles span:nth-child(5){

    left:71%;
    top:65%;

    animation-duration:8s;
    animation-delay:2s;

}

.preloader-particles span:nth-child(6){

    left:84%;
    top:80%;

    animation-duration:6s;
    animation-delay:0s;

}

.preloader-particles span:nth-child(7){

    left:18%;
    top:41%;

    animation-duration:7s;
    animation-delay:1s;

}

.preloader-particles span:nth-child(8){

    left:34%;
    top:10%;

    animation-duration:7s;
    animation-delay:0s;

}

.preloader-particles span:nth-child(9){

    left:52%;
    top:20%;

    animation-duration:8s;
    animation-delay:2s;

}

.preloader-particles span:nth-child(10){

    left:68%;
    top:81%;

    animation-duration:6s;
    animation-delay:1s;

}

.preloader-particles span:nth-child(11){

    left:81%;
    top:50%;

    animation-duration:10s;
    animation-delay:3s;

}

.preloader-particles span:nth-child(12){

    left:47%;
    top:50%;

    animation-duration:11s;
    animation-delay:2s;

}

.preloader-ambient{

    position:absolute;
    inset:-20%;

    z-index:1;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 30% 30%,
            rgba(212,175,55,.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 75% 65%,
            rgba(255,255,255,.06),
            transparent 30%
        );

    filter:blur(80px);

    animation:ambientDrift 18s ease-in-out infinite alternate;

}

@keyframes ambientDrift{

    0%{

        transform:
            translate(-30px,-20px)
            scale(1);

    }

    100%{

        transform:
            translate(30px,25px)
            scale(1.15);

    }

}

.preloader-background{
    z-index:0;
}

.preloader-overlay{
    z-index:1;
}

.preloader-ambient{
    z-index:2;
}

.preloader-particles{
    z-index:3;
}

.preloader-content{
    z-index:4;
}

.sparkles{

    position:absolute;
    inset:0;

    pointer-events:none;

    z-index:3;

}

.sparkles span{

    position:absolute;

    width:6px;
    height:6px;

    background:#d4af37;

    border-radius:50%;

    box-shadow:
        0 0 8px #d4af37,
        0 0 18px rgba(212,175,55,.8);

    opacity:0;

    animation:sparkle 5s infinite;

}

.sparkles span:nth-child(1){top:18%;left:24%;animation-delay:0s;}
.sparkles span:nth-child(2){top:28%;right:20%;animation-delay:1s;}
.sparkles span:nth-child(3){bottom:30%;left:18%;animation-delay:2s;}
.sparkles span:nth-child(4){bottom:18%;right:26%;animation-delay:3s;}
.sparkles span:nth-child(5){top:50%;left:12%;animation-delay:4s;}
.sparkles span:nth-child(6){top:60%;right:15%;animation-delay:5s;}

@keyframes sparkle{

    0%,90%,100%{

        opacity:0;

        transform:scale(.2);

    }

    45%{

        opacity:1;

        transform:scale(1.5);

    }

}

.loading-percent{

    margin-top:20px;

    font-size:18px;

    font-weight:600;

    color:#d4af37;

    letter-spacing:2px;

    text-align:center;

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

    text-shadow:
        0 0 10px rgba(212,175,55,.5);

}

/* =========================================
   HERO REVEAL
========================================= */

body{

    overflow-x:hidden;

}

.hero-section{

    opacity:0;

    transform:translateY(40px) scale(.98);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;

}

body.hero-reveal .hero-section{

    opacity:1;

    transform:
        translateY(0)
        scale(1);

}