@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Montserrat:wght@600;800&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  background: #111; color: #eee;
}
body {
  font-family:'Roboto',sans-serif;
  overflow-x:hidden;
}

/* NAVBAR */
.navbar {
  position:fixed; top:0; width:100%;
  background:rgba(17,17,17,0.85); z-index:100;
}
.navbar .container {
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem;
}
.logo { font-family:'Montserrat',sans-serif; font-size:1.6rem; text-decoration:none; color:#fff; }
.logo-red { color:#FF0000; font-weight:400; }
.logo-fx  { font-weight:700; }
.nav-links { list-style:none; display:flex; }
.nav-links li { margin-left:2rem; }
.nav-links a {
  color:#fff; text-decoration:none; font-weight:500;
  position:relative; transition:color .3s;
}
.nav-links a::after {
  content:''; position:absolute; left:0; bottom:-4px;
  width:100%; height:2px; background:#f39c12;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s;
}
.nav-links a:hover { color:#f39c12; }
.nav-links a:hover::after { transform:scaleX(1); }
.hamburger { display:none; flex-direction:column; cursor:pointer; }
.hamburger span { height:3px; width:25px; background:#fff; margin-bottom:5px; border-radius:2px; }

/* HERO */
header#hero {
  position:relative; height:100vh; overflow:hidden; scroll-snap-align:start;
}
.hero-video {
  position:absolute; top:50%; left:50%;
  width:100%; height:100%; object-fit:cover;
  transform:translate(-50%,-50%); z-index:0;
}
.hero-overlay {
  position:absolute; inset:0; background:rgba(0,0,0,0.0); z-index:1;
}
.hero-content {
  position:relative; z-index:2; text-align:center;
  padding:0 1rem; top:50%; transform:translateY(-50%);
}
.hero-content.hidden { display:none; }
.hero-content h1 {
  font-family:'Montserrat',sans-serif; font-size:3rem;
  margin-bottom:1rem; text-shadow:0 2px 10px rgba(0,0,0,0.7);
}
.hero-content p { font-size:1.2rem; margin-bottom:2rem; }
.btn {
  display:inline-block; padding:.75rem 2rem;
  background:#f39c12; color:#111; font-weight:700;
  text-decoration:none; border:none; border-radius:50px;
  transition:background .3s, transform .3s;
}
.btn:hover { background:#e67e22; transform:scale(1.05); }

/* SNAP SECTIONS (except Contact) */
section.snap:not(#contact) {
  position:relative; width:100vw; height:100vh;
  scroll-snap-align:start; overflow:hidden;
}
section.snap::before {
  content:''; position:absolute; inset:0;
  background-image: var(--bg-image);
  background-size: cover; background-repeat: no-repeat;
  z-index:0;
}
section.snap.left::before  { background-position:right center; }
section.snap.right::before { background-position:left center; }

/* Blur edge with fade */
/* BLUR EDGE */
section.snap .blur {
    position: absolute;
    top: 0;
    /* how far into the frame the blur reaches */
    width: 60%;
    height: 100%;
    /* the actual blur */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 1;
  
    /* fade-out mask so the blur tapers off */
    mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
  }
  
  section.snap.right .blur {
    mask-image: linear-gradient(to left,  black 0%, black 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to left,  black 0%, black 70%, transparent 100%);
  }
  
  /* position on left or right */
  section.snap.left  .blur { left:  0; }
  section.snap.right .blur { right: 0; }
  

/* CONTENT PANEL */
section.snap .content {
  position:absolute; top:50%; width:50%; padding:2rem;
  z-index:2; opacity:0;
  transition:transform .6s ease-out, opacity .6s ease-out;
  text-shadow:1px 1px 2px rgba(0,0,0,0.8);
}
section.snap.left .content {
  left:0; transform:translateY(-50%) translateX(-50px); text-align:left;
}
section.snap.right .content {
  right:0; transform:translateY(-50%) translateX(50px); text-align:right;
}
section.snap .content.visible {
  opacity:1; transform:translateY(-50%) translateX(0);
}
section.snap h2 { font-family:'Montserrat',sans-serif; font-size:2.5rem; margin-bottom:1rem; }
section.snap p  { font-size:1.2rem; margin-bottom:1rem; }

/* CONTACT + PORTFOLIO */
section#contact {
  background:#1a1a1a; /* no forced height or overflow */
  scroll-snap-align:start;
}
.carousel-container {
  width:100vw; overflow:hidden; position:relative; margin-bottom:2rem;
}
.carousel-track {
  display:flex; gap:1rem; justify-content:center;
}
.carousel-track img {
  flex:0 0 auto; max-height:300px; width:auto; border-radius:8px;
}

/* CONTACT FORM */
.container.contact-content {
  max-width:800px; margin:auto; text-align:center; padding:2rem 1rem 4rem;
}
.contact-content h2 { font-family:'Montserrat',sans-serif; font-size:2rem; margin-bottom:1rem; }
.contact-content p  { font-size:1.1rem; margin-bottom:2rem; }
.contact-content .fly-in {
  opacity:0; transform:translateY(20px);
  transition:transform .6s ease-out, opacity .6s ease-out;
}
.contact-content .fly-in.visible {
  opacity:1; transform:translateY(0);
}
.contact-content input,
.contact-content textarea {
  width:100%; padding:.75rem; margin-bottom:1rem;
  border:none; border-radius:5px; background:#222; color:#eee;
}
.contact-content button.btn { margin-top:1rem; }

/* FOOTER */
footer {
  background:url('../images/footer-bg.jpg') center/cover no-repeat;
  position:relative; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:2rem 1rem; scroll-snap-align:start;
}
footer::after {
  content:''; position:absolute; inset:0; background:rgba(0,0,0,0.7);
}
footer p {
  position:relative; z-index:1; color:#aaa; font-size:.9rem;
}

/* RESPONSIVE */
@media(max-width:768px) {
  section.snap:not(#contact) { height:auto; overflow:visible; }
  section.snap .blur { display:none; }
  section.snap .content {
    position:static; transform:none; opacity:1; width:100%;
  }
  .hamburger { display:flex; }
  .nav-links {
    position:absolute; top:100%; left:0; right:0;
    background:#111; flex-direction:column; align-items:center;
    max-height:0; overflow:hidden; transition:max-height .3s ease-out;
  }
  .nav-links.open { max-height:300px; }
  .nav-links li { margin:1.5rem 0; }
}