/* FONTS */

@font-face{
font-family:HeadingFont;
src:url("./fonts/font-heading.otf");
}

@font-face{
font-family:BodyFont;
src:url("./fonts/font-body.ttf");
}


/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}


/* BODY */

body{

font-family:HeadingFont;

min-height:100vh;

display:flex;
flex-direction:column;

}

/* BACKGROUND */

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:url(bg.jpg);
background-size:cover;
background-position:center;

opacity:0.35;

z-index:-1;

}


/* HEADER */

header{

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

padding:40px 60px;

}

.logo{
width:120px;
}

.brand{

letter-spacing:1px;
font-size:18px;

}


/* LAUNCH TEXT */

.launching{

font-family:BodyFont;

text-align:center;

color:#ff5a1f;

font-size:42px;

margin-top:60px;

letter-spacing:2px;

}


/* SERVICES */

.services{

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

gap:140px;

margin-top:120px;

text-align:center;

flex-wrap:wrap;

}


/* SERVICE */

.service{

width:260px;

transition:transform 0.3s ease;

}

.service:hover{

transform:translateY(-5px);

}

/* VISUAL DESIGN LEFT ADJUST */

.service:first-child{
margin-left:0px;
}


/* IMAGE BOX */

.img-box{

position:relative;

width:260px;
height:200px;

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

margin:auto;

}


/* IMAGES */

.img-box img{

position:absolute;

top:0;
left:50%;

transform:translateX(-50%) scale(1.6);

max-width:100%;
max-height:100%;

object-fit:contain;

transition:opacity 0.3s ease, transform 0.3s ease;

}

.service:hover .img-box img{

transform:translateX(-50%) scale(1.7);

}

.bw{
opacity:1;
}

.color{
opacity:0;
}

.service:hover .bw{
opacity:0;
}

.service:hover .color{
opacity:1;
}


/* TEXT */

.service p{

margin-top:20px;

letter-spacing:3px;

font-size:14px;

}

/* VISUAL DESIGN TEXT LEFT ADJUST */

@media (min-width:901px){

.service:first-child p{
margin-left:-150px;
}

}
/* INTERIOR DESIGN LEFT SHIFT DESKTOP */

@media (min-width:901px){

.service:nth-child(2){
margin-left:-100px;
}

}


/* FOOTER */

footer{

margin-top:auto;

display:flex;

justify-content:space-between;

padding:40px 60px;

font-size:14px;

flex-wrap:wrap;

}

footer a{

text-decoration:none;

color:black;

display:inline-block;

transition:transform 0.2s ease;

}

footer a:hover{

transform:scale(1.08);

text-decoration:underline;
text-underline-offset:8px;
text-decoration-thickness:1.5px;

}


/* TABLET */

@media (max-width:900px){

.services{

flex-direction:column;

gap:80px;

margin-top:80px;

align-items:center;

}

.img-box img{

left:50%;

transform:translateX(-50%) scale(1.5);

}

.service{

text-align:center;

}

.service p{

margin-top:30px;

}

footer{
justify-content:center;
text-align:center;
}

.left,
.right{
width:100%;
text-align:center;
margin-bottom:10px;
}

}


/* MOBILE */

@media (max-width:600px){

header{
padding:20px;
}

.logo{
width:90px;
}

.brand{
font-size:14px;
width:100%;
text-align:right;
}

.launching{
font-size:28px;
}

.services{

flex-direction:column;

gap:90px;

margin-top:80px;

align-items:center;

}

.img-box img{

left:50%;

transform:translateX(-50%) scale(1.1);

}

.service{

text-align:center;

}

.service p{

margin-top:0;

letter-spacing:2px;

}

footer{

flex-direction:column;

gap:10px;

padding:20px;

font-size:12px;

align-items:center;

}

.left{

text-align:center;

width:100%;

}

}


/* INTRO MOBILE FIX */

@media (max-width:600px){

.intro{

font-size:12px;
letter-spacing:4px;

}

.intro-text{

text-align:center;
width:100%;
display:flex;
justify-content:center;
flex-wrap:nowrap;

}

}


/* CUSTOM CURSOR */

body{
cursor:none;
}

.cursor-circle{

position:fixed;

width:30px;
height:30px;

border:2px solid black;

border-radius:50%;

pointer-events:none;

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

z-index:9999;

transition:transform 0.15s ease;

}

.cursor-dot{

position:fixed;

width:6px;
height:6px;

background:black;

border-radius:50%;

pointer-events:none;

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

z-index:10000;

}

.service:hover ~ .cursor-circle{

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

}


/* HIDE CUSTOM CURSOR ON MOBILE & TABLET */

@media (max-width:900px){

.cursor-circle,
.cursor-dot{
display:none !important;
}

body{
cursor:auto !important;
}

}


/* INTRO SCREEN */

.intro{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

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

z-index:99999;

font-family:HeadingFont;

font-size:16px;
letter-spacing:8px;

animation:introFade 3.2s ease forwards;

}
.word-space{

display:inline-block;
width:4px;

}

.intro::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:url(bg.jpg);
background-size:cover;
background-position:center;

opacity:0.1;

z-index:-1;

}


/* LETTER ANIMATION */

.intro-text span{

display:inline-block;

opacity:0;

transform:translateY(20px);

animation:letterReveal 0.6s ease forwards;

margin-right:2px;

}


/* LETTER DELAYS */

.intro-text span:nth-child(1){animation-delay:0.05s;}
.intro-text span:nth-child(2){animation-delay:0.1s;}
.intro-text span:nth-child(3){animation-delay:0.15s;}
.intro-text span:nth-child(4){animation-delay:0.2s;}
.intro-text span:nth-child(5){animation-delay:0.25s;}
.intro-text span:nth-child(7){animation-delay:0.35s;}
.intro-text span:nth-child(8){animation-delay:0.4s;}
.intro-text span:nth-child(9){animation-delay:0.45s;}
.intro-text span:nth-child(10){animation-delay:0.5s;}
.intro-text span:nth-child(11){animation-delay:0.55s;}
.intro-text span:nth-child(13){animation-delay:0.65s;}
.intro-text span:nth-child(14){animation-delay:0.7s;}
.intro-text span:nth-child(15){animation-delay:0.75s;}
.intro-text span:nth-child(16){animation-delay:0.8s;}
.intro-text span:nth-child(17){animation-delay:0.85s;}
.intro-text span:nth-child(18){animation-delay:0.9s;}
.intro-text span:nth-child(19){animation-delay:0.95s;}
.intro-text span:nth-child(20){animation-delay:1s;}


/* KEYFRAMES */

@keyframes letterReveal{

to{
opacity:1;
transform:translateY(0);
}

}

@keyframes introFade{

0%{opacity:1;}
85%{opacity:1;}
100%{opacity:0;visibility:hidden;}

}


/* MAIN PAGE REVEAL */

header,
.launching,
.services,
footer{

opacity:0;

animation:mainReveal 1s ease forwards;

animation-delay:3.2s;

}

@keyframes mainReveal{

0%{
opacity:0;
}

100%{
opacity:1;
}

}
/* HIDE CUSTOM CURSOR ON MOBILE & TABLET */

@media (hover: none) and (pointer: coarse) {

.cursor-circle,
.cursor-dot{
display:none;
}

body{
cursor:auto;
}

}

/* MOBILE & TABLET – SHOW COLOR IMAGES */

@media (max-width:900px){

.bw{
display:none;
}

.color{
display:block;
opacity:1;
}

}