/*==================================================
ACCESS HOLIDAYS

LUXURY EFFECTS ENGINE V1.0

==================================================*/

/*==================================================
ROOT VARIABLES
==================================================*/

:root{

    --luxury-gold:#D4AF37;

    --luxury-blue:#071B45;

    --luxury-glow:rgba(212,175,55,.18);

}

/*==================================================
GLOBAL GPU OPTIMIZATION
==================================================*/

.effect-layer,
.effect-layer *{

    transform:translateZ(0);

    will-change:transform,opacity;

}

/*==================================================
SECTION ISOLATION
==================================================*/

.hero,
.flexi-plan{

    isolation:isolate;

}

/*==================================================
AMBIENT GLOW
==================================================*/

.ambient-glow{

    position:absolute;

    inset:-25%;

    pointer-events:none;

    z-index:0;

    overflow:hidden;

}

.ambient-glow::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    top:-180px;

    right:-220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.18),
            transparent 70%
        );

    filter:blur(70px);

    animation:
        glowMove 22s ease-in-out infinite alternate;

}

.ambient-glow::after{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    bottom:-220px;

    left:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(7,27,69,.10),
            transparent 70%
        );

    filter:blur(80px);

    animation:
        glowMove2 28s ease-in-out infinite alternate;

}

/*==================================================
KEYFRAMES
==================================================*/

@keyframes glowMove{

    from{

        transform:
            translate(0,0)
            scale(1);

    }

    to{

        transform:
            translate(-60px,40px)
            scale(1.15);

    }

}

@keyframes glowMove2{

    from{

        transform:
            translate(0,0)
            scale(1);

    }

    to{

        transform:
            translate(80px,-40px)
            scale(1.1);

    }

}

@keyframes borderFlow{

    0%{

        background-position:0% 50%;

    }

    100%{

        background-position:300% 50%;

    }

}

/*==================================================
LUXURY DUST ENGINE
==================================================*/

.luxury-dust{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:1;

}

.luxury-dust span{

    position:absolute;

    border-radius:50%;

    background:rgba(255,230,170,.65);

    box-shadow:

        0 0 8px rgba(255,215,0,.35);

    animation:

        dustFloat linear infinite;

}

/*==================================================
DUST FLOAT
==================================================*/

@keyframes dustFloat{

    0%{

        transform:
            translateY(30px)
            translateX(0)
            scale(.3);

        opacity:0;

    }

    10%{

        opacity:.3;

    }

    50%{

        transform:
            translateY(-120px)
            translateX(25px)
            scale(1);

        opacity:.7;

    }

    100%{

        transform:
            translateY(-260px)
            translateX(-20px)
            scale(.2);

        opacity:0;

    }

}

/*==================================================
GLASS REFLECTION
==================================================*/

.glass-effect{

    position:relative;

    overflow:hidden;

}

.glass-effect::before{

    content:"";

    position:absolute;

    top:-30%;

    left:-150%;

    width:70%;

    height:160%;

    background:

        linear-gradient(

            120deg,

            transparent,

            rgba(255,255,255,.10),

            rgba(255,255,255,.28),

            rgba(255,255,255,.10),

            transparent

        );

    transform:rotate(18deg);

    transition:left 1.4s ease;

    pointer-events:none;

}

.glass-effect:hover::before{

    left:170%;

}

/*==================================================
CURSOR SPOTLIGHT
==================================================*/

.cursor-light{

    position:absolute;

    left:var(--x);

    top:var(--y);

    width:420px;

    height:420px;

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

    border-radius:50%;

    pointer-events:none;

    opacity:0;

    z-index:1;

    transition:

        opacity .35s ease;

    background:

        radial-gradient(

            circle,

            rgba(212,175,55,.16) 0%,

            rgba(212,175,55,.08) 35%,

            rgba(212,175,55,.03) 60%,

            transparent 75%

        );

    filter:blur(55px);

}

/*==================================================
LUXURY MESH
==================================================*/

.flexi-plan::selection{
    background:transparent;
}

.flexi-plan::before,
.flexi-plan::after{

    will-change:transform;

}

.luxury-mesh{

    position:absolute;

    inset:0;

    pointer-events:none;

    opacity:.18;

    background-image:

        radial-gradient(circle at 20% 20%, rgba(212,175,55,.25) 1px, transparent 1px),

        radial-gradient(circle at 80% 70%, rgba(7,27,69,.18) 1px, transparent 1px);

    background-size:180px 180px;

    animation:meshMove 35s linear infinite;

    z-index:1;

}

@keyframes meshMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(-180px);

    }

}

/*==========================================
SIGNATURE REVEAL
==========================================*/

.journey-gallery{

    position:relative;

    width:100%;

    aspect-ratio:4/5;

    border-radius:28px;

    overflow:hidden;

    background:#000;

    isolation:isolate;

}

.reveal-image{

    position:absolute;

    inset:0;

}

.reveal-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:scale(1.05);

}

.image-a{

    z-index:1;

}

.image-b{

    z-index:2;

    clip-path:polygon(
    0 50%,
    100% 50%,
    100% 100%,
    0 100%
    );

}

.reveal-mask{

    position:absolute;

    inset:0;

    z-index:20;

    pointer-events:none;

}

.reveal-divider{

    position:absolute;

    top:50%;

    left:50%;

    width:150%;

    height:4px;

    background:

    linear-gradient(
    90deg,
    transparent,
    #e7c46d 20%,
    #fff5bf 50%,
    #d6aa39 80%,
    transparent
    );

    transform-origin:center;

    transform:

    translate(-50%,-50%)

    rotate(0deg);

}

.reveal-center{

    position:absolute;

    left:50%;

    top:50%;

    width:22px;

    height:22px;

    border-radius:50%;

    background:#D4AF37;

    border:5px solid white;

    transform:

    translate(-50%,-50%);

    box-shadow:

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

}

@keyframes dividerRotate{

0%{

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

}

45%{

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

}

55%{

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

}

100%{

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

}

}

.reveal-divider{

    animation:

    dividerRotate

    12s

    ease-in-out

    infinite;

}

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s ease;

}

.fade-up.active{

    opacity:1;

    transform:none;

}