/* style.css */

:root{

  --blue:#484C6B;
  --cream:#E9E4D9;
  --gold:#B17F49;
  --dark:#0E1016;

}

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

html{
  scroll-behavior:smooth;
}

body{

  font-family:'Source Sans 3', sans-serif;
  background:var(--blue);
  color:var(--cream);
  overflow-x:hidden;

}

/* Loader */

.loader{

  position:fixed;
  inset:0;
  background:#111;
  z-index:99999;

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

  transition:1s;

}

.loader-line{

  width:200px;
  height:1px;
  background:var(--gold);

  animation:loading 1.8s infinite;

}

@keyframes loading{

  0%{
    transform:scaleX(0);
  }

  100%{
    transform:scaleX(1);
  }

}

/* Navbar */

.navbar{

  position:fixed;
  top:0;
  width:100%;

  padding:22px 5%;

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

  z-index:999;

  transition:0.5s;

}

.navbar.scrolled{

  background:rgba(15,15,20,0.5);
  backdrop-filter:blur(16px);

}

.nav-logo img{

  width:110px;

}

.navbar ul{

  display:flex;
  gap:32px;
  list-style:none;

}

.navbar a{

  text-decoration:none;
  color:var(--cream);

  font-size:13px;
  letter-spacing:2px;

  transition:0.4s;

}

.navbar a:hover{
  color:var(--gold);
}

/* HERO */

.hero{

  height:100vh;
  position:relative;

  overflow:hidden;

}

.hero-slider{

  position:absolute;
  inset:0;

}

.slide{

  position:absolute;
  inset:0;

  background-size:cover;
  background-position:center;

  opacity:0;

  transition:opacity 3s ease;

  transform:scale(1.03);

}

.slide.active{
  opacity:1;
}

.hero-overlay{

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    rgba(20,20,25,0.55),
    rgba(20,20,25,0.7)
  ),
  rgba(72,76,107,0.45);

}

.hero-content{

  position:relative;
  z-index:2;

  height:100%;

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

  text-align:center;

  padding:20px;

}

.hero-logo{

  width:280px;
  margin-bottom:20px;

}

.hero-subtitle{

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

  margin-bottom:24px;

}

.hero-text{

  font-size:1rem;
  margin-bottom:38px;

  opacity:0.9;

}

.hero-button{

  text-decoration:none;
  color:var(--cream);

  border:1px solid rgba(233,228,217,0.25);

  padding:16px 36px;

  transition:0.5s;

}

.hero-button:hover{

  background:var(--gold);

}

/* GENERAL */

.section{

  padding:120px 8%;

}

.section-label{

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

  color:var(--gold);

}

.section-heading{

  text-align:center;
  margin-bottom:60px;

}

/* INTRO */

.intro{

  background:var(--cream);
  color:var(--blue);

}

.intro-container{

  max-width:1000px;
  margin:auto;
  text-align:center;

}

.intro h2{

  margin-top:40px;

  font-size:clamp(2rem,4vw,4rem);
  font-weight:200;
  line-height:1.2;

}

/* PORTFOLIO */

.portfolio{

  background:var(--cream);

}

.portfolio-grid{

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;

}

.portfolio-item{

  position:relative;
  overflow:hidden;

}

.portfolio-item img{

  width:100%;
  display:block;

  transition:1s;

}

.portfolio-item:hover img{

  transform:scale(1.04);

}

.portfolio-overlay{

  position:absolute;
  inset:0;

  background:rgba(72,76,107,0.25);

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

}

.portfolio-overlay h3{

  font-size:3rem;
  font-weight:200;

  letter-spacing:4px;

}

/* COLLECTIONS */

.collections{

  background:var(--blue);

}

.collection-group{

  margin-top:70px;

}

.group-title{

  text-align:center;
  margin-bottom:40px;

  letter-spacing:3px;
  color:var(--cream);

}

.collection-grid{

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;

}

.collection-card{

  text-align:center;

}

.collection-card img{

  width:100%;
  margin-bottom:24px;

}

.collection-card h3{

  font-family:'Playfair Display', serif;

  font-size:2rem;
  font-weight:400;

  margin-bottom:12px;

}

.collection-card p{

  opacity:0.8;
  line-height:1.7;

}

/* ORIGIN */

.origin{

  background:#050505;

  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;

  gap:80px;

}

.origin-content{

  max-width:600px;

}

.origin-content h2{

  font-size:3rem;
  font-weight:200;

  margin:26px 0;

}

.origin-content p{

  line-height:1.9;
  opacity:0.9;

  margin-bottom:20px;

}

.origin-image img{

  width:100%;

}

/* PRE */

.pre-section{

  background:var(--cream);
  color:var(--blue);

}

.pre-grid{

  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;

}

.pre-card{

  border:1px solid rgba(72,76,107,0.1);

  padding:80px;

  text-align:center;

}

.pre-card h3{

  font-size:3rem;
  font-weight:200;

}

/* CONTACT */

.contact{

  background:var(--cream);
  color:var(--blue);

}

.contact-container{

  max-width:900px;
  margin:auto;

}

.contact h2{

  margin:40px 0 60px;

  font-size:clamp(2rem,4vw,4rem);
  font-weight:200;

}

form{

  display:flex;
  flex-direction:column;
  gap:26px;

}

input,
textarea{

  background:transparent;
  border:none;

  border-bottom:1px solid rgba(72,76,107,0.2);

  padding:18px 0;

  outline:none;

}

textarea{

  min-height:140px;

}

button{

  width:max-content;

  border:none;

  background:var(--blue);
  color:var(--cream);

  padding:18px 38px;

  cursor:pointer;

  transition:0.4s;

}

button:hover{

  background:var(--gold);

}

/* FOOTER */

.footer{

  background:var(--blue);

  padding:80px 8%;

  text-align:center;

}

.footer-menu{

  display:flex;
  justify-content:center;
  gap:30px;

  margin-bottom:50px;

}

.footer-menu a{

  color:var(--cream);
  text-decoration:none;

  font-size:13px;
  letter-spacing:2px;

}

.footer-brand img{

  width:180px;
  margin-bottom:16px;

}

.footer-brand span{

  display:block;
  letter-spacing:6px;

}

.footer-social{

  margin:40px 0;

}

.footer-social p{

  margin-bottom:10px;

}

.footer small{

  opacity:0.7;

}

/* REVEAL */

.reveal{

  opacity:0;
  transform:translateY(70px);

  transition:1.4s;

}

.reveal.active{

  opacity:1;
  transform:translateY(0);

}

/* RESPONSIVE */

@media(max-width:900px){

  .navbar ul{
    display:none;
  }

  .portfolio-grid,
  .collection-grid,
  .pre-grid,
  .origin{

    grid-template-columns:1fr;

  }

  .hero-logo{

    width:210px;

  }

  .portfolio-overlay h3{

    font-size:2rem;

  }

}