* {
box-sizing: border-box;
}

html, body {
margin: 0;
padding: 0;
background: transparent !important;
}

/* ANA ALAN */

.tiero-collections {
width: 100%;
height: 100px;

position: relative;
overflow: hidden;

display: flex;
align-items: center;
justify-content: center;

background: transparent !important;
cursor: pointer;
}

/* KOLEKSİYONLARIMIZ */

.collection-title {
position: absolute;

left: 50%;
top: 50%;

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

display: flex;

font-family: “Cormorant Garamond”, Georgia, serif;

font-size: 38px;
font-weight: 400;

letter-spacing: .13em;

color: #151515;

white-space: nowrap;
}

/* HER HARF */

.collection-title span {
display: inline-block;

transition:
transform .75s cubic-bezier(.16,1,.3,1),
opacity .45s ease,
filter .55s ease;
}

/* HOVER’DA HARFLER YUKARI AKIYOR */

.tiero-collections:hover .collection-title span {
transform: translateY(-32px);
opacity: 0;
filter: blur(4px);
}

/* HARFLER SIRAYLA */

.collection-title span:nth-child(1) { transition-delay: 0s; }
.collection-title span:nth-child(2) { transition-delay: .025s; }
.collection-title span:nth-child(3) { transition-delay: .05s; }
.collection-title span:nth-child(4) { transition-delay: .075s; }
.collection-title span:nth-child(5) { transition-delay: .10s; }
.collection-title span:nth-child(6) { transition-delay: .125s; }
.collection-title span:nth-child(7) { transition-delay: .15s; }
.collection-title span:nth-child(8) { transition-delay: .175s; }
.collection-title span:nth-child(9) { transition-delay: .20s; }
.collection-title span:nth-child(10) { transition-delay: .225s; }
.collection-title span:nth-child(11) { transition-delay: .25s; }
.collection-title span:nth-child(12) { transition-delay: .275s; }
.collection-title span:nth-child(13) { transition-delay: .30s; }
.collection-title span:nth-child(14) { transition-delay: .325s; }
.collection-title span:nth-child(15) { transition-delay: .35s; }
.collection-title span:nth-child(16) { transition-delay: .375s; }

/* İKİNCİ YAZI */

.reveal {
position: absolute;

left: 50%;
top: 50%;

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

display: flex;
gap: 12px;

font-family: “Manrope”, sans-serif;

font-size: 10px;
font-weight: 300;

letter-spacing: .38em;

color: #151515;

white-space: nowrap;

opacity: 0;

transition: opacity .35s ease .35s;
}

/* KELİMELER */

.reveal span {
display: inline-block;

opacity: 0;

transform: translateY(18px);

filter: blur(5px);

transition:
transform .8s cubic-bezier(.16,1,.3,1),
opacity .6s ease,
filter .7s ease;
}

.reveal span:nth-child(1) {
transition-delay: .36s;
}

.reveal span:nth-child(2) {
transition-delay: .46s;
}

.reveal span:nth-child(3) {
transition-delay: .56s;
}

/* HOVER */

.tiero-collections:hover .reveal {
opacity: 1;
}

.tiero-collections:hover .reveal span {
opacity: 1;

transform: translateY(0);

filter: blur(0);
}

/* MOBILE */

@media (max-width: 600px) {

.tiero-collections {
height: 80px;
}

.collection-title {
font-size: 27px;
letter-spacing: .08em;
}

.reveal {
font-size: 7px;
letter-spacing: .22em;
gap: 7px;
}

}