/* =======================================================
VIBRATIX V2
COMPONENTS.CSS
======================================================= */

/* =======================================================
BUTTONS
======================================================= */

.btn-primary,
.btn-secondary{


display:inline-flex;

align-items:center;

justify-content:center;

min-height:58px;

padding:
0 2rem;

border-radius:
999px;

font-weight:
600;

transition:
all .4s ease;

position:relative;

overflow:hidden;


}

/* =======================================================
PRIMARY
======================================================= */

.btn-primary{


background:
linear-gradient(

    135deg,

    var(--gold-dark),

    var(--gold),

    var(--gold-light)

);

color:
var(--black);

box-shadow:
var(--shadow-gold);


}

.btn-primary:hover{


transform:
translateY(-4px);

box-shadow:

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


}

/* =======================================================
SECONDARY
======================================================= */

.btn-secondary{


border:
1px solid var(--border);

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

backdrop-filter:
blur(15px);

color:
white;


}

.btn-secondary:hover{


border-color:
var(--gold);

transform:
translateY(-4px);


}

/* =======================================================
GLASS CARD
======================================================= */

.glass-card{


position:relative;

padding:
clamp(
    2rem,
    3vw,
    3rem
);

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

border:
1px solid var(--border);

border-radius:
var(--radius-lg);

backdrop-filter:
blur(20px);

overflow:hidden;

transition:
all .5s ease;

box-shadow:
var(--shadow-md);


}

/* GOLD TOP LINE */

.glass-card::before{


content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:1px;

background:
linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

);


}

/* LIGHT EFFECT */

.glass-card::after{


content:"";

position:absolute;

inset:0;

background:

linear-gradient(

    130deg,

    transparent,

    rgba(255,255,255,.03),

    transparent

);

opacity:0;

transition:
.6s ease;


}

/* HOVER */

.glass-card:hover{


transform:

translateY(-8px)

scale(1.01);

border-color:
var(--border-strong);

box-shadow:

0 30px 80px
rgba(0,0,0,.55),

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


}

.glass-card:hover::after{


opacity:1;


}

/* =======================================================
CARD CONTENT
======================================================= */

.glass-card h3{


color:
white;

margin-bottom:
1rem;

font-size:
1.4rem;


}

.glass-card p{


color:
var(--muted);


}

/* =======================================================
SECTION TAG
======================================================= */

.section-tag{


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

backdrop-filter:
blur(10px);


}

/* =======================================================
TIMELINE
======================================================= */

.timeline-item{


position:relative;

transition:
.5s ease;


}

.timeline-item:hover{


transform:
translateY(-5px);

border-color:
var(--gold);


}

.timeline-item h3{


margin-bottom:
.75rem;


}

.timeline-item span{


font-family:
var(--font-title);


}


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

.loader-logo{


text-shadow:

0 0 20px
rgba(212,175,55,.4),

0 0 60px
rgba(212,175,55,.15);


}

.loader-progress{


animation:
loaderGlow 2s infinite;


}

@keyframes loaderGlow{


0%{

    filter:
    brightness(1);

}

50%{

    filter:
    brightness(1.6);

}

100%{

    filter:
    brightness(1);

}


}

/* =======================================================
FOOTER
======================================================= */

footer{


background:

linear-gradient(

    180deg,

    transparent,

    rgba(255,255,255,.02)

);


}

/* =======================================================
HERO EFFECTS
======================================================= */

.hero-title{


background:

linear-gradient(

    180deg,

    #ffffff,

    #d8d8d8

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;


}

.hero-subtitle{


text-shadow:

0 0 30px
rgba(212,175,55,.15);


}

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

.gold-glow{


box-shadow:

0 0 40px
rgba(212,175,55,.15);


}

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

.reveal{


opacity:0;

transform:
translateY(40px);

transition:
1s ease;


}

.reveal.active{


opacity:1;

transform:
translateY(0);


}