/* =======================================
   RESET
======================================= */

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html,
body{

width:100%;

height:100%;

overflow:hidden;

background:#000;

font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;

}

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

.hero{

position:relative;

width:100%;

height:100vh;

overflow:hidden;

background:#000;

}

/* =======================================
   PHOTO
======================================= */

.hero-image{

position:absolute;

inset:0;

z-index:1;

}

.hero-image img{

width:100%;

height:100%;

object-fit:cover;

display:block;

}

/* =======================================
   DARK GRADIENT
======================================= */

.hero::before{

content:"";

position:absolute;

left:0;
top:0;

width:100%;
height:220px;

pointer-events:none;

background:linear-gradient(

180deg,

rgba(0,0,0,.62),

rgba(0,0,0,0)

);

z-index:2;

}

.hero::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:100%;
height:260px;

pointer-events:none;

background:linear-gradient(

0deg,

rgba(0,0,0,.78),

rgba(0,0,0,0)

);

z-index:2;

}

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

.hero-header{

position:absolute;

top:4px;

left:50%;

transform:translateX(-50%);

z-index:30;

}

.hero-logo{

width:235px;

display:block;

user-select:none;

-webkit-user-drag:none;

}

/* =======================================
   BOTTOM
======================================= */

.hero-bottom{

position:absolute;

left:0;

bottom:90px;

width:100%;

display:flex;

flex-direction:column;

align-items:center;

z-index:5;

}

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

.shop-now{

display:flex;

justify-content:center;

align-items:center;

width:220px;

height:92px;

border:2.5px solid rgba(255,255,255,.92);

border-radius:24px;

background:rgba(0,0,0,.42);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

color:#fff;

text-decoration:none;

font-size:31px;

font-weight:800;

font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif;

transition:.3s;

box-shadow:

0 12px 35px rgba(0,0,0,.35);

opacity:0;

transform:translateY(24px);

}

.shop-now:hover{

transform:translateY(-2px);

}

.shop-now:active{

transform:scale(.96);

}

/* =======================================
   SOCIALS
======================================= */

.hero-socials{

position:absolute;

top:35px;

left:22px;

display:flex;

flex-direction:column;

gap:26px;

z-index:9999;

}

.hero-socials a{

color:#fff;

text-decoration:none;

transition:.25s;

}

.hero-socials a:active{

transform:scale(.88);

}

.hero-socials img{

width:34px;

height:34px;

display:block;

object-fit:contain;

-webkit-user-drag:none;

user-select:none;

transition:.25s ease;

}

.hero-socials a:active img{

transform:scale(.9);

}

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

@media(max-width:768px){

.hero-logo{

width:210px;

}

.shop-now{

width:192px;

height:82px;

font-size:29px;

}

.hero-socials{

gap:30px;

}

}
.shop-now.pressed{

transform:scale(.95);

filter:brightness(.96);

}

.hero-image img{

transition:transform .35s linear;

will-change:transform;

}

.hero-logo{

will-change:transform,opacity;

}

.hero-socials a{

will-change:transform,opacity;

}
/* TikTok */

.hero-socials a:last-child img{

width:45px;

height:45px;

transform:translateX(-8px);

}
.hero{

animation:heroReveal 2.2s cubic-bezier(.22,.61,.36,1);

}

@keyframes heroReveal{

0%{

transform:scale(1.035);

opacity:.92;

}

100%{

transform:scale(1);

opacity:1;

}

}