/* =========================================================
   GÖKÇE & YALÇIN
   FINAL LUXURY EFFECTS V3
========================================================= */

/* =========================================================
   GLOBAL PERFORMANCE
========================================================= */

html{

scroll-behavior:smooth;

}

body{

overflow-x:hidden;

-webkit-font-smoothing:
antialiased;

text-rendering:
optimizeLegibility;

}

/* =========================================================
   CURSOR GLOW
========================================================= */

.cursor-glow{

position:fixed;

width:320px;
height:320px;

border-radius:50%;

pointer-events:none;

z-index:1;

background:
radial-gradient(
circle,
rgba(212,176,123,.16),
rgba(212,176,123,.08),
transparent 72%
);

filter:blur(48px);

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

transition:
transform .08s linear;

mix-blend-mode:screen;

opacity:.85;

will-change:
transform;

}

/* =========================================================
   GOLD ATMOSPHERE
========================================================= */

.gold-light{

position:fixed;

top:-20%;
left:-20%;

width:70vw;
height:70vw;

border-radius:50%;

pointer-events:none;

z-index:0;

background:
radial-gradient(
circle,
rgba(212,176,123,.07),
transparent 70%
);

filter:blur(100px);

animation:
goldPulse 16s ease-in-out infinite;

will-change:
transform;

}

@keyframes goldPulse{

0%{

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

opacity:.32;

}

50%{

transform:
scale(1.12)
translate(4%,3%);

opacity:.5;

}

100%{

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

opacity:.32;

}

}

/* =========================================================
   BLUR ORBS
========================================================= */

.blur-orb{

position:fixed;

border-radius:50%;

pointer-events:none;

filter:blur(100px);

z-index:0;

opacity:.18;

animation:
orbFloat 18s ease-in-out infinite;

will-change:
transform;

}

.blur-orb.one{

width:320px;
height:320px;

top:10%;
left:-120px;

background:
rgba(212,176,123,.30);

}

.blur-orb.two{

width:260px;
height:260px;

bottom:5%;
right:-80px;

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

animation-delay:4s;

}

@keyframes orbFloat{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-28px);

}

100%{

transform:
translateY(0px);

}

}

/* =========================================================
   PARTICLE SYSTEM
========================================================= */

.luxury-particles{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:1;

}

.luxury-particle{

position:absolute;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(255,255,255,.95),
rgba(212,176,123,.45),
transparent
);

filter:blur(1px);

animation:
luxuryFloat linear infinite;

opacity:.75;

will-change:
transform;

}

.luxury-particle.small{

width:4px;
height:4px;

}

.luxury-particle.medium{

width:8px;
height:8px;

}

.luxury-particle.large{

width:14px;
height:14px;

}

@keyframes luxuryFloat{

from{

transform:
translateY(110vh)
translateX(0px)
scale(.8);

opacity:0;

}

10%{

opacity:1;

}

90%{

opacity:1;

}

to{

transform:
translateY(-120vh)
translateX(60px)
scale(1.2);

opacity:0;

}

}

/* =========================================================
   CINEMATIC REVEAL
========================================================= */

.reveal{

opacity:0;

transform:
translateY(70px)
scale(.985);

filter:
blur(12px);

transition:

opacity 1.2s ease,
transform 1.2s ease,
filter 1.2s ease;

will-change:
transform,
opacity,
filter;

}

.reveal.active,
.reveal.visible,
.reveal.reveal-active{

opacity:1;

transform:
translateY(0)
scale(1);

filter:none;

}

/* =========================================================
   HERO FLOAT
========================================================= */

.hero-content{

position:relative;

animation:
heroFloat 8s ease-in-out infinite;

will-change:
transform;

}

@keyframes heroFloat{

0%{

transform:
translateY(0px);

}

50%{

transform:
translateY(-8px);

}

100%{

transform:
translateY(0px);

}

}

/* =========================================================
   GLASS SHIMMER
========================================================= */

.hero-content::after,
.card::before,
.memory-box::after,
.time-box::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:70%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.04),
transparent
);

transform:
skewX(-20deg);

animation:
glassShine 10s linear infinite;

pointer-events:none;

}

@keyframes glassShine{

0%{

left:-120%;

}

100%{

left:160%;

}

}

/* =========================================================
   IMAGE DEPTH
========================================================= */

.gallery img{

position:relative;

transform-style:
preserve-3d;

perspective:1200px;

overflow:hidden;

transition:

transform .45s ease,
box-shadow .45s ease,
filter .45s ease,
opacity .6s ease;

will-change:
transform;

}

.gallery img:hover{

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

box-shadow:
0 25px 70px rgba(212,176,123,.16);

filter:
brightness(1.03)
saturate(1.02);

}

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

.btn,
.btn-gold,
.send-btn,
.floating-memory{

position:relative;

overflow:hidden;

isolation:isolate;

will-change:
transform;

}

.btn::before,
.btn-gold::before,
.send-btn::before,
.floating-memory::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.18),
transparent
);

transform:
skewX(-20deg);

transition:
left .8s ease;

z-index:-1;

}

.btn:hover::before,
.btn-gold:hover::before,
.send-btn:hover::before,
.floating-memory:hover::before{

left:160%;

}

/* =========================================================
   SECTION ATMOSPHERE
========================================================= */

section{

position:relative;

z-index:2;

}

section::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:
radial-gradient(
circle at top,
rgba(255,255,255,.03),
transparent 42%
);

opacity:.8;

}

/* =========================================================
   HERO ATMOSPHERE
========================================================= */

.hero::after{

content:"";

position:absolute;

inset:0;

background:
radial-gradient(
circle at center,
rgba(255,255,255,.04),
transparent 55%
);

pointer-events:none;

}

/* =========================================================
   IOS FIX
========================================================= */

.hero-content,
.card,
.memory-box,
.gallery img,
.time-box{

backface-visibility:hidden;

transform:
translateZ(0);

}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

.cursor-glow{

display:none;

}

.gold-light{

opacity:.45;

}

.blur-orb{

opacity:.12;

}

.luxury-particles{

opacity:.55;

}

.luxury-particle.large{

width:10px;
height:10px;

}

.hero-content{

animation:none;

}

.gallery img:hover{

transform:none;

}

.reveal{

transition:

opacity .9s ease,
transform .9s ease,
filter .9s ease;

}

}

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

@media(prefers-reduced-motion:reduce){

*{

animation:none !important;
transition:none !important;

}

}