/* ==========================================================================
   Vision in View — Shared Styles
   ========================================================================== */

* { box-sizing: border-box; }

body {
  font-family: 'Inconsolata', monospace;
  font-size: 14px;
  line-height: 20px;
  color: #000;
  margin: 0;
  background-color: #d1bdbc;
}

/* Video background (homepage hero) */
.hero-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Fade-in animation */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nav transitions */
nav a {
  transition: opacity 0.3s ease;
}

/* Portfolio hover overlay */
.portfolio-item .portfolio-overlay {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}
.portfolio-item img,
.portfolio-item video {
  transition: transform 0.4s ease;
}

/* Thumbnail category label */
.thumb-category {
  font-family: 'Inconsolata', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mobile menu overlay */
.mobile-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

/* Hamburger bars */
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Mobile menu close button */
.mobile-menu-close {
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.mobile-menu-close:hover {
  opacity: 0.7;
}