/* ==========================================
FLOATING BOOK
========================================== */

@keyframes float{

0%{

transform:translateY(0px);

}

25%{

transform:translateY(-12px) rotate(-1deg);

}

50%{

transform:translateY(-25px);

}

75%{

transform:translateY(-10px) rotate(1deg);

}

100%{

transform:translateY(0px);

}

}

/* ==========================================
AURORA BACKGROUND
========================================== */

.bg1,
.bg2{

position:fixed;

border-radius:50%;

filter:blur(140px);

pointer-events:none;

z-index:-5;

animation:aurora 16s linear infinite alternate;

}

.bg1{

width:600px;

height:600px;

background:#0673FF;

top:-250px;

right:-180px;

opacity:.15;

}

.bg2{

width:520px;

height:520px;

background:#4CE688;

left:-150px;

bottom:-200px;

opacity:.12;

animation-delay:6s;

}

@keyframes aurora{

0%{

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

}

50%{

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

}

100%{

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

}

}

/* ==========================================
FADE UP
========================================== */

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(60px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.fade-up{

animation:fadeUp .9s ease forwards;

}

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

@keyframes zoomIn{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}

.zoom{

animation:zoomIn .8s ease forwards;

}

/* ==========================================
SLIDE RIGHT
========================================== */

@keyframes slideRight{

0%{

opacity:0;

transform:translateX(-80px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/* ==========================================
SLIDE LEFT
========================================== */

@keyframes slideLeft{

0%{

opacity:0;

transform:translateX(80px);

}

100%{

opacity:1;

transform:translateX(0);

}

}

/* ==========================================
BUTTON GLOW
========================================== */

@keyframes glow{

0%{

box-shadow:0 0 10px rgba(6,115,255,.25);

}

50%{

box-shadow:

0 0 30px rgba(6,115,255,.45),

0 0 60px rgba(76,230,136,.30);

}

100%{

box-shadow:0 0 10px rgba(6,115,255,.25);

}

}

.buy-btn{

animation:glow 3s infinite;

}

/* ==========================================
SHIMMER EFFECT
========================================== */

.buy-btn::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transition:.8s;

}

.buy-btn{

position:relative;

overflow:hidden;

}

.buy-btn:hover::before{

left:130%;

}

/* ==========================================
CARD HOVER
========================================== */

.card{

transform-style:preserve-3d;

}

.card:hover{

transform:

translateY(-15px)

rotateX(4deg)

rotateY(-4deg);

}

/* ==========================================
IMAGE HOVER
========================================== */

.hero-image img{

transition:.5s;

}

.hero-image img:hover{

transform:

scale(1.05)

rotate(-2deg);

}

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

.hero h1{

background:linear-gradient(

135deg,

#ffffff,

#4CE688

);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* ==========================================
PRICE PULSE
========================================== */

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

.new{

animation:pulse 2s infinite;

}

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

.badge{

animation:

fadeUp 1s ease,

pulse 4s infinite;

}

/* ==========================================
SCROLL INDICATOR
========================================== */

@keyframes scroll{

0%{

transform:translateY(0);

opacity:1;

}

100%{

transform:translateY(18px);

opacity:0;

}

}

.scroll-indicator{

position:absolute;

bottom:25px;

left:50%;

transform:translateX(-50%);

width:30px;

height:55px;

border:2px solid rgba(255,255,255,.4);

border-radius:30px;

}

.scroll-indicator::before{

content:"";

position:absolute;

left:50%;

top:10px;

transform:translateX(-50%);

width:6px;

height:10px;

border-radius:50px;

background:white;

animation:scroll 1.6s infinite;

}

/* ==========================================
LOADING BAR
========================================== */

.progress{

background:

linear-gradient(

90deg,

#0673FF,

#4CE688

);

box-shadow:

0 0 20px rgba(6,115,255,.4);

}

/* ==========================================
HOVER LINKS
========================================== */

a{

transition:.3s;

}

a:hover{

filter:brightness(1.08);

}