/*=========================================================
GLOBAL REVEAL ANIMATIONS
=========================================================*/

.hidden-element{

opacity:0;

transform:translateY(40px);

transition:

opacity .8s ease,

transform .8s ease;

}

.hidden-element.show{

opacity:1;

transform:translateY(0);

}


/*=========================================================
IMAGES
=========================================================*/

img{

transition:

opacity .6s ease,

transform .4s ease;

}

img.loaded{

opacity:1;

}

img[data-src]{

opacity:0;

}

.image-loaded{

opacity:1;

}
/*=========================================================
 PRIME BRANDS WEBSITE
 animations.css
 PART 1 OF 2
=========================================================*/


/*=========================================================
 BUTTON ANIMATIONS
=========================================================*/

.btn-primary,
.btn-secondary,
.btn-nav{

position:relative;

overflow:hidden;

}

.btn-primary::before,
.btn-secondary::before,
.btn-nav::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:70%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent

);

transform:skewX(-25deg);

transition:.8s;

}

.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-nav:hover::before{

left:160%;

}


/*=========================================================
 CARD FLOAT
=========================================================*/

@keyframes floatCard{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

.hero-stat:hover{

animation:floatCard 2.8s ease infinite;

}


/*=========================================================
 ICON PULSE
=========================================================*/

@keyframes pulseIcon{

0%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

100%{

transform:scale(1);

}

}

.feature-item:hover i,
.highlight:hover i,
.market-card:hover i{

animation:pulseIcon .8s ease;

}


/*=========================================================
 LOGO HOVER
=========================================================*/

.brand-logo{

transition:

transform .45s,

filter .45s;

}

.brand-logo:hover{

transform:scale(1.05);

filter:drop-shadow(0 10px 18px rgba(199,161,90,.28));

}


/*=========================================================
 IMAGE ZOOM
=========================================================*/

.about-image,

.brand-image,

.case-image,

.capability-image{

overflow:hidden;

border-radius:28px;

}

.about-image img,

.brand-image img,

.case-image img,

.capability-image img{

transition:

transform .8s ease,

filter .8s ease;

}

.about-image:hover img,

.brand-image:hover img,

.case-image:hover img,

.capability-image:hover img{

transform:scale(1.08);

filter:brightness(1.04);

}


/*=========================================================
 HERO PARALLAX READY
=========================================================*/

.hero-background{

transition:transform .15s linear;

will-change:transform;

}


/*=========================================================
 TEXT GRADIENT
=========================================================*/

.gradient-text{

background:

linear-gradient(

135deg,

#ffffff,

#d8bc84,

#ffffff

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

}


/*=========================================================
 UNDERLINE EFFECT
=========================================================*/

.fancy-link{

position:relative;

display:inline-block;

}

.fancy-link::after{

content:"";

position:absolute;

left:0;

bottom:-4px;

width:100%;

height:2px;

background:var(--accent);

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.fancy-link:hover::after{

transform:scaleX(1);

}


/*=========================================================
 SECTION DIVIDER
=========================================================*/

.section-divider{

width:120px;

height:4px;

background:

linear-gradient(

90deg,

transparent,

var(--accent),

transparent

);

margin:40px auto;

border-radius:20px;

}


/*=========================================================
 SOFT GLOW
=========================================================*/

.soft-glow{

position:relative;

}

.soft-glow::before{

content:"";

position:absolute;

inset:-20px;

background:

radial-gradient(

circle,

rgba(199,161,90,.18),

transparent 70%

);

opacity:0;

transition:.5s;

z-index:-1;

}

.soft-glow:hover::before{

opacity:1;

}


/*=========================================================
 BADGE
=========================================================*/

.badge{

display:inline-flex;

align-items:center;

padding:8px 18px;

border-radius:100px;

background:rgba(199,161,90,.12);

color:var(--accent);

font-size:13px;

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

}


/*=========================================================
 SHADOW HOVER
=========================================================*/

.shadow-hover{

transition:

box-shadow .35s,

transform .35s;

}

.shadow-hover:hover{

box-shadow:

0 30px 70px rgba(0,0,0,.16);

transform:translateY(-8px);

}


/*=========================================================
 END PART 1
 NEXT:
 PAGE TRANSITIONS
 LOADER
 BACKGROUND EFFECTS
=========================================================*/
/*=========================================================
 PART 2 OF 2
 PREMIUM ANIMATIONS
=========================================================*/


/*=========================================================
STAGGER ANIMATION
=========================================================*/

.hidden-element:nth-child(1){transition-delay:.05s;}
.hidden-element:nth-child(2){transition-delay:.10s;}
.hidden-element:nth-child(3){transition-delay:.15s;}
.hidden-element:nth-child(4){transition-delay:.20s;}
.hidden-element:nth-child(5){transition-delay:.25s;}
.hidden-element:nth-child(6){transition-delay:.30s;}
.hidden-element:nth-child(7){transition-delay:.35s;}
.hidden-element:nth-child(8){transition-delay:.40s;}


/*=========================================================
LOADER
=========================================================*/

#loader{

position:fixed;

inset:0;

display:flex;

justify-content:center;

align-items:center;

background:#0f0f10;

z-index:99999;

transition:.6s;

}

.loader-content{

display:flex;

flex-direction:column;

align-items:center;

}

.loader-logo{

font-size:38px;

font-weight:800;

letter-spacing:4px;

color:white;

margin-bottom:30px;

}

.loader-line{

width:0;

height:4px;

background:linear-gradient(
90deg,
var(--accent),
#f5d79d);

border-radius:20px;

animation:loaderLine 1.8s ease infinite;

}

@keyframes loaderLine{

0%{

width:0;

}

50%{

width:240px;

}

100%{

width:0;

}

}


/*=========================================================
BACK TO TOP
=========================================================*/

#backToTop{

position:fixed;

right:30px;

bottom:30px;

width:56px;

height:56px;

display:flex;

justify-content:center;

align-items:center;

background:var(--accent);

color:white;

border-radius:50%;

box-shadow:0 20px 40px rgba(0,0,0,.25);

opacity:0;

visibility:hidden;

transform:translateY(20px);

transition:.35s;

z-index:900;

}

#backToTop.active{

opacity:1;

visibility:visible;

transform:translateY(0);

}

#backToTop:hover{

transform:translateY(-6px);

background:#d8bc84;

}


/*=========================================================
HAMBURGER
=========================================================*/

#mobileButton{

width:48px;

height:48px;

display:none;

position:relative;

cursor:pointer;

border:none;

background:none;

}

#mobileButton span{

position:absolute;

left:8px;

width:32px;

height:3px;

background:white;

border-radius:20px;

transition:.35s;

}

#mobileButton span:nth-child(1){

top:14px;

}

#mobileButton span:nth-child(2){

top:22px;

}

#mobileButton span:nth-child(3){

top:30px;

}


/*=========================================================
HERO OVERLAY
=========================================================*/

.hero::before{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(circle at top right,

rgba(199,161,90,.18),

transparent 55%);

pointer-events:none;

}


/*=========================================================
FLOATING GLOW
=========================================================*/

@keyframes glowFloat{

0%{

transform:translateY(0);

opacity:.5;

}

50%{

transform:translateY(-20px);

opacity:1;

}

100%{

transform:translateY(0);

opacity:.5;

}

}

.hero-glow{

position:absolute;

width:420px;

height:420px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(199,161,90,.12),

transparent 70%);

filter:blur(20px);

animation:glowFloat 8s ease infinite;

pointer-events:none;

}

.hero-glow.left{

left:-180px;

top:100px;

}

.hero-glow.right{

right:-180px;

bottom:80px;

animation-delay:4s;

}


/*=========================================================
BUTTON PRESS
=========================================================*/

.btn-primary:active,
.btn-secondary:active,
.btn-nav:active{

transform:scale(.97);

}


/*=========================================================
IMAGE SHADOW
=========================================================*/

.brand-image:hover,
.case-image:hover,
.about-image:hover{

box-shadow:

0 40px 90px rgba(0,0,0,.20);

}


/*=========================================================
SOCIAL ICONS
=========================================================*/

.social-links a{

overflow:hidden;

position:relative;

}

.social-links a::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
135deg,

transparent,

rgba(255,255,255,.25),

transparent);

transform:translateX(-120%);

transition:.6s;

}

.social-links a:hover::before{

transform:translateX(120%);

}


/*=========================================================
PARTNER LOGOS
=========================================================*/

.partner-logo img{

transition:

transform .4s,

filter .4s;

}

.partner-logo:hover img{

transform:scale(1.08);

}


/*=========================================================
SMOOTH PAGE
=========================================================*/

html{

scroll-behavior:smooth;

}


/*=========================================================
SELECTION
=========================================================*/

::selection{

background:var(--accent);

color:white;

}


/*=========================================================
SCROLLBAR
=========================================================*/

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#161616;

}

::-webkit-scrollbar-thumb{

background:var(--accent);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#d8bc84;

}

/*=========================================================
READING PROGRESS
=========================================================*/

#progressBar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:linear-gradient(

90deg,

var(--accent),

#f2d397

);

z-index:999999;

transition:width .12s linear;

}

/*=========================================================
REDUCED MOTION
=========================================================*/

.reduce-motion *{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

/*=========================================================
END animations.css
=========================================================*/