@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

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

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

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Inter',sans-serif;
  background:#000;
  color:#fff;
  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;
}

/* =========================
LOADER
========================= */

#loader{
  position:fixed;
  inset:0;

  background:#000;

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

  z-index:99999;

  transition:.6s ease;
}

.loader-text{
  letter-spacing:6px;

  font-size:.8rem;

  animation:blink 1s infinite;
}

@keyframes blink{

  50%{
    opacity:.35;
  }

}

/* =========================
HEADER
========================= */

header{
  position:fixed;
  top:0;
  left:0;

  width:100%;

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

  padding:20px 36px;

  z-index:999;

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

  backdrop-filter:blur(10px);
}

header h1{
  font-size:.95rem;

  letter-spacing:3px;
}

nav{
  display:flex;
  align-items:center;
}

nav a{
  color:white;

  text-decoration:none;

  margin-left:22px;

  font-size:.9rem;

  opacity:.72;

  transition:.3s ease;
}

nav a:hover{
  opacity:1;
}

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

.hero{
  position:relative;

  height:100vh;

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

  text-align:center;

  overflow:hidden;

  background:
  linear-gradient(
    rgba(0,0,0,.38),
    rgba(0,0,0,.7)
  ),
  url('assets/neo.webp');

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

.overlay{
  position:relative;

  z-index:2;

  padding:20px;
}

.hero-mini{
  display:block;

  margin-bottom:16px;

  letter-spacing:4px;

  font-size:.72rem;

  opacity:.45;
}

.hero h2{
  font-size:
  clamp(3rem,8vw,5.8rem);

  margin-bottom:12px;
}

.hero p{
  opacity:.72;

  letter-spacing:2px;
}

.hero-btn{
  display:inline-block;

  margin-top:28px;

  padding:
  13px 26px;

  border-radius:50px;

  text-decoration:none;
  color:white;

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

  border:
  1px solid rgba(255,255,255,.08);

  transition:.3s ease;
}

.hero-btn:hover{

  transform:
  translateY(-3px);

}

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

section{
  width:min(1200px,100%);

  margin:auto;

  padding:
  90px 22px;
}

.section-label{
  display:inline-block;

  margin-bottom:14px;

  font-size:.72rem;

  letter-spacing:3px;

  opacity:.45;
}

section h2{
  font-size:
  clamp(2rem,5vw,4rem);

  margin-bottom:18px;
}

section p{
  line-height:1.8;

  opacity:.72;
}

/* =========================
FADE
========================= */

.fade-section{
  opacity:0;

  transform:
  translateY(30px);

  transition:.7s ease;
}

.fade-section.show{
  opacity:1;

  transform:
  translateY(0);
}

/* =========================
WORK SLIDER
========================= */

.work-slider{
  display:flex;

  gap:18px;

  overflow-x:auto;
  overflow-y:hidden;

  scroll-snap-type:x mandatory;

  padding-top:26px;

  scrollbar-width:none;

  -webkit-overflow-scrolling:touch;
}

.work-slider::-webkit-scrollbar{
  display:none;
}

.work-card{
  position:relative;

  min-width:500px;
  height:620px;

  overflow:hidden;

  border-radius:22px;

  background:#111;

  flex-shrink:0;

  scroll-snap-align:center;

  text-decoration:none;
  color:white;
}

.work-bg{
  width:100%;
  height:100%;
}

.work-bg img,
.work-bg video{
  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transform:translateZ(0);

  transition:
  transform .4s ease;
}

.work-card:hover img,
.work-card:hover video{

  transform:
  scale(1.02);

}

/* OVERLAY */

.work-overlay{
  position:absolute;
  inset:0;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:30px;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.78),
    transparent 60%
  );
}

.work-overlay span{
  margin-bottom:12px;

  font-size:.65rem;

  letter-spacing:3px;

  opacity:.5;
}

.work-overlay h3{
  font-size:2rem;

  margin-bottom:10px;
}

.work-overlay p{
  max-width:320px;

  margin-bottom:18px;
}

.work-button{
  width:fit-content;

  padding:
  11px 20px;

  border-radius:50px;

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

  border:
  1px solid rgba(255,255,255,.08);
}

/* =========================
DOTS
========================= */

.slider-dots{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:8px;

  margin-top:20px;
}

.dot{
  width:7px;
  height:7px;

  border-radius:50%;

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

  transition:.3s ease;
}

.dot.active{
  width:22px;

  border-radius:20px;

  background:white;
}

/* =========================
CONTACT
========================= */

.contact-container{
  display:flex;

  gap:14px;

  overflow-x:auto;

  padding-top:26px;

  scrollbar-width:none;
}

.contact-container::-webkit-scrollbar{
  display:none;
}

.contact-card{
  min-width:220px;

  padding:24px;

  border-radius:16px;

  text-decoration:none;
  color:white;

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

  border:
  1px solid rgba(255,255,255,.06);

  transition:.3s ease;
}

.contact-card:hover{

  transform:
  translateY(-3px);

}

.contact-card i{
  font-size:1.5rem;

  margin-bottom:16px;
}

.contact-card h3{
  margin-bottom:8px;
}

/* =========================
PHOTO & VIDEO GRID
========================= */

.photo-grid,
.tiktok-grid{
  display:grid;

  grid-template-columns:
  repeat(3,1fr);

  gap:6px;

  margin-top:20px;
}

/* ITEM */

.photo-item,
.tiktok-item{
  position:relative;

  width:100%;

  aspect-ratio:9/16;

  overflow:hidden;

  border-radius:10px;

  background:#111;
}

/* IMAGE & VIDEO */

.photo-item img,
.tiktok-item video{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  transform:translateZ(0);

  backface-visibility:hidden;

  transition:
  transform .3s ease;
}

/* HOVER */

.photo-item:hover img,
.tiktok-item:hover video{

  transform:
  scale(1.02);

}

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

.project-hero{
  position:relative;

  width:min(1200px,100%);

  height:78vh;

  margin:auto;

  overflow:hidden;

  border-radius:24px;

  display:flex;
  align-items:flex-end;

  padding:
  clamp(22px,4vw,42px);
}

.project-hero img{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  display:block;

  filter:
  brightness(.7);
}

.project-hero::before{
  content:"";

  position:absolute;
  inset:0;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.82),
    rgba(0,0,0,.18)
  );
}

.project-overlay{
  position:relative;

  z-index:2;
}

.project-label{
  display:inline-block;

  margin-bottom:14px;

  font-size:.68rem;

  letter-spacing:3px;

  opacity:.68;
}

.project-overlay h1{
  font-size:
  clamp(2.5rem,6vw,5rem);

  margin-bottom:12px;
}

.project-overlay p{
  width:min(500px,100%);

  line-height:1.8;

  opacity:.75;
}

/* =========================
PROJECT SWITCH
========================= */

.project-switch{
  display:flex;
  justify-content:center;
  align-items:center;

  gap:10px;

  margin-top:50px;
}

.switch-btn{
  display:flex;
  align-items:center;
  gap:8px;

  padding:
  11px 18px;

  border-radius:50px;

  text-decoration:none;
  color:white;

  font-size:.72rem;

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

  border:
  1px solid rgba(255,255,255,.06);

  transition:.3s ease;
}

.switch-btn:hover{

  transform:
  translateY(-2px);

}

/* =========================
FOOTER
========================= */

footer{
  padding:36px 20px;

  text-align:center;

  opacity:.4;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:768px){

  header{
    padding:18px 20px;
  }

  .work-card{
    min-width:82vw;
    height:540px;
  }

  .contact-card{
    min-width:200px;
  }

  .project-hero{
    height:68vh;

    border-radius:18px;
  }

}

@media(max-width:480px){

  nav a{
    margin-left:12px;

    font-size:.75rem;
  }

  .hero h2{
    font-size:2.8rem;
  }

  .work-card{
    min-width:86vw;
    height:500px;
  }

  .work-overlay{
    padding:22px;
  }

  .work-overlay h3{
    font-size:1.6rem;
  }

  .photo-grid,
  .tiktok-grid{
    gap:4px;
  }

  .photo-item,
  .tiktok-item{
    border-radius:8px;
  }

  .project-hero{
    height:58vh;

    border-radius:14px;

    padding:18px;
  }

  .project-overlay h1{
    font-size:2rem;
  }

  .project-overlay p{
    font-size:.76rem;
  }

}

/* =========================
WORK CARD CINEMATIC
========================= */

.work-card{
  position:relative;

  min-width:500px;
  height:620px;

  overflow:hidden;

  border-radius:28px;

  flex-shrink:0;

  scroll-snap-align:center;

  text-decoration:none;
  color:white;

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

  border:
  1px solid rgba(255,255,255,.06);

  box-shadow:
  0 20px 80px rgba(0,0,0,.45);

  transition:
  transform .5s cubic-bezier(.19,1,.22,1),
  box-shadow .5s ease,
  border .5s ease;
}

/* IMAGE */

.work-bg{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;
}

.work-bg img,
.work-bg video{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
  transform 1.2s cubic-bezier(.19,1,.22,1),
  filter .8s ease;

  filter:
  brightness(.72)
  contrast(1.05)
  saturate(.95);
}

/* DARK OVERLAY */

.work-overlay{
  position:absolute;
  inset:0;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;

  padding:34px;

  background:
  linear-gradient(
    to top,
    rgba(0,0,0,.92),
    rgba(0,0,0,.35),
    transparent 70%
  );

  z-index:2;
}

/* TOP LIGHT */

.work-card::before{
  content:"";

  position:absolute;
  top:0;
  left:50%;

  transform:translateX(-50%);

  width:70%;
  height:1px;

  background:
  linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.25),
    transparent
  );

  z-index:3;
}

/* AMBIENT GLOW */

.work-card::after{
  content:"";

  position:absolute;

  width:400px;
  height:400px;

  top:-30%;
  right:-20%;

  background:
  radial-gradient(
    circle,
    rgba(255,255,255,.12),
    transparent 70%
  );

  filter:blur(100px);

  opacity:0;

  transition:.6s ease;

  z-index:1;
}

/* HOVER */

.work-card:hover{

  transform:
  translateY(-10px);

  border:
  1px solid rgba(255,255,255,.12);

  box-shadow:
    0 30px 120px rgba(0,0,0,.55),
    0 0 40px rgba(255,255,255,.05);
}

/* IMAGE HOVER */

.work-card:hover img,
.work-card:hover video{

  transform:
  scale(1.06);

  filter:
  brightness(.82)
  contrast(1.08);
}

/* GLOW APPEAR */

.work-card:hover::after{
  opacity:1;
}

/* TEXT */

.work-overlay span{
  margin-bottom:14px;

  font-size:.68rem;

  letter-spacing:4px;

  opacity:.58;
}

.work-overlay h3{
  font-size:
  clamp(1.8rem,3vw,2.5rem);

  margin-bottom:12px;

  font-weight:700;

  line-height:1;
}

.work-overlay p{
  max-width:320px;

  margin-bottom:22px;

  line-height:1.7;

  opacity:.72;
}

/* BUTTON */

.work-button{
  width:fit-content;

  padding:
  12px 22px;

  border-radius:999px;

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

  border:
  1px solid rgba(255,255,255,.08);

  backdrop-filter:blur(10px);

  transition:.35s ease;
}

.work-card:hover .work-button{

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

  transform:
  translateY(-2px);
}

@media(max-width:768px){

  .work-card{
    min-width:84vw;
    height:540px;

    border-radius:22px;
  }

}

@media(max-width:480px){

  .work-card{
    min-width:88vw;
    height:500px;
  }

  .work-overlay{
    padding:24px;
  }

  .work-overlay h3{
    font-size:1.7rem;
  }

}