/* styles.css */
html, body {
  /* Smooth scrolling for anchor links */
  box-sizing:border-box;
  margin: 0;
  padding:0;
  width:100%;
  height: 100%; /* Ensure full-page sections */
}

body {
  overflow-y: auto;
  font-family: "Open Sans", serif;
  font-variation-settings:"wdth" 75;
  background: #030303;
  color:#d9d9d9;
 }
	body.locked {
	overflow: hidden;
	position: fixed;
    width: 100%;
	height:100dvh;
	min-height:100dvh;
	}
html, .scroll-container {
  scrollbar-width: none; /* Hides scrollbar in Firefox */
}

html::-webkit-scrollbar, .scroll-container::-webkit-scrollbar {
  display: none; /* Hides scrollbar in Chrome/Safari */
}
img {
    display: block;
    max-width: 100%;
}
/* wrappers */
.scroll-container {
  height: 100vh;
  scroll-snap-type: y mandatory; /* Enable vertical snap */
  scroll-behavior: smooth; 
  overflow-y: scroll; 
}

#section1, #section2, #section3, #section4, #section5, #section6, #section7, .content_container { 
	background: #030303;
	/* background: #171717 */
}
#section1 {
	padding:6rem 0 0;
	flex:1
}
#section2, #section3, #section4, #section5, #section6, #section7, .content_container { 
width:100%;
	height:100vh;
	color: white;
	scroll-snap-align: center; 

}
/* intro animation */
/* Name + subtitle container */
    .name {
      position: absolute;
      top: 50%; 
	  left: 50%;
      transform: translate(-50%, -50%) scale(1);
      text-align: center;
      line-height: 1.25;
      transform-origin: top left;
	  z-index:99;
	  /* color:#d9d9d9 */
	  color:#979797;
    }

	.name.animate {
		animation: moveToLogo 3s ease-in-out forwards;
	}
	.name.final, .name.final .main, .name.final .sub {
		animation:none;
		display:none
	}
    .main {
      font-size: clamp(1.8rem, 5vw, 3rem);
      /* color:#d9d9d9; */
	  color:#979797;
      opacity: 0;
	  font-weight:400;
      animation: fadeIn 1s forwards 0.3s;
      white-space: nowrap;
      font-family: "Momo Trust Display", sans-serif;
    }

    .sub {
      font-size: clamp(1rem, 2vw, 1.3rem);
      /* color:#d9d9d9; */
	  color:#979797;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      opacity: 0;
      animation: fadeIn 1s forwards 1.3s;
	  font-family: "Open Sans", sans-serif;
    }
	

    @keyframes fadeIn {
      to { opacity: 1; }
    }
	
	.name-logo {
      text-align: center;
      /* padding-top:calc(1.5rem + 5px); */
      line-height: 1.25;
	  padding-left:calc(1.5rem + 5px);
	  animation:none;
	}
	.name-logo.fadeinlogo {
	  transition:opacity 1s ease
	}
	.invisible {
		opacity:0
	}
	.name-logo .main {
		font-size: clamp(0.81rem, 2.25vw, 1.35rem);
		animation:none;
		opacity:1
	}
	.name-logo .sub {
		font-size: clamp(0.45rem, 0.9vw, 0.585rem);
		letter-spacing: 0.2em;
		/* text-transform:uppercase; */
		animation:none;
		opacity:1
	}
	.logo a, .logo a:hover, .logo a:focus, .logo a:visited {
		text-decoration:none
	}
	.logo a .name-logo .main, .logo a:hover .name-logo .main,  .logo a:focus .name-logo .main,  .logo a:visited .name-logo .main {
		/* color:#d9d9d9; */
		color:#979797
	}
	.logo a .name-logo .sub, .logo a:hover .name-logo .sub, .logo a:focus .name-logo .sub, .logo a:visited .name-logo .sub { 
		/* color:#d9d9d9; */
		color:#979797
	}
	
    /* Move + scale animation */
    @keyframes moveToLogo {
      0%, 65% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
		/* line-height:1.25 */
      }
	  100% {
		top: calc(1.5rem + 5px);
        left: calc(1.5rem + 5px);
        transform: translate(0, 0) scale(0.45);
		/* line-height:1.25   */
	  }
    }
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.stickyfooter {
	/* width:100vw; */
	height:6rem;
	background:#030303;	
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0 calc(1.5rem + 5px)
}
.stickyfooter p {
	margin:0
}
.stickyfooter a, .stickyfooter a:hover, .stickyfooter a:visited, .stickyfooter a:focus {
	font-size: 1.5em;
	/* color:#d9d9d9; */
	color:#979797;
	text-align:center;
	text-decoration:none
}
.stickyfooter a i {
	padding:0 0.5em
}

/* header navigation */
.stickyheader {
	position:fixed;
	top:0;
	left:0;
	height:6rem;
	background:#030303;
	width:100%;
	z-index:10;
	overflow:hidden;
	padding:0;
	display:flex;
	justify-content:space-between;
	align-items:center;
	transition: background 0.3s ease
}
.turnblack {
	background:rgba(20,20,20,0.9)
}
.nav {
    position: fixed;
    background-color: #030303;
    color: #fff;
    top: 0;
    left: 0;
    right: 0;
	bottom:0;
    z-index: 100;
	width:100%;
	margin:0;
    transform: translateX(100%);
    transition: transform 250ms cubic-bezier(.5, 0, .5, 1);
}
.nav__list {
	background-color: #fff;
    list-style: none;
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
	width:100%
}
.nav__list li {
	margin:30px
}
/* nav ul { */
  /* list-style: none; */
  /* display: flex; */
  /* justify-content: center; */
  /* margin: 10px 0 0; */
  /* padding: 0; */
/* } */
nav ul li a {
  text-decoration: none;
  font-size:1em;
  font-weight:300;
  color: #000;
  text-transform: uppercase;
  padding: 10px 20px;
  border: 2px solid transparent;
  transition: border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;
}
nav ul li a:hover {
  color:#999;
}
nav ul li a.active {
	color:#999;
	font-weight:500;
	border-color: #999
}
.nav-toggle {
    background: transparent;
    border: 0;
    cursor: pointer;
    z-index: 1000;
	align-self:center;
	opacity:0;
	transition:opacity 1s ease;
	padding-right:calc(1.5rem + 5px)
}

	
	.nav-toggle.fade-in-delayed {
      animation: fadeIn 1s forwards 3s;
	  
    }
	.nav-toggle.visible {
		/* animation: opacity 1s forwards 3s; */
		opacity: 1;
		animation:none
	}
.hamburger {
    display: block;
    position: relative;
}
.hamburger,
.hamburger::before,
.hamburger::after 
{
    /* background: #d9d9d9; */
	background:#979797;
    width: 32px;
    height: 2px;
    border-radius: 1px;
    transition: transform 250ms ease-in-out;
}
.turngrey.hamburger,
.turngrey.hamburger::before,
.turngrey.hamburger::after 
{
    background: #a6a6a6;
}
.hamburger::before, .hamburger::after 
{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
}
.hamburger::before { top: 5px; }
.hamburger::after { bottom: 5px; }
.nav-open .nav {
    transform: translateX(0);
	color:#000
}
.nav-open .hamburger {
    transform: rotate(.625turn);
	background:#000;
}
.nav-open .hamburger::before {
    transform: rotate(90deg) translate(-6px);
	background:#000;
}

.nav-open .hamburger::after {
    opacity: 0;
}

/* masonry grid */




.grid {
		margin:0 1.5rem
		
	}
    .grid.visible {
      opacity: 1;
    }

    .grid-item {
      width:calc(100%/3);
	  padding:5px;
      opacity: 0;
	  position:relative;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    .grid-item.show {
      opacity: 1;
      transform: translateY(0);
    }

    .grid-item img {
      width:100%;
	  max-width:100%;
	  height:auto;
      display: block;
    }
	/* Overlay */
	.grid-item .overlay {
		position: absolute;
		inset: 0;
		background: rgba(0, 0, 0, 0.7);
		color: #d9d9d9;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1rem;
		opacity: 0;
		z-index:2;
		transition: opacity 0.4s ease;
		text-align: center;
		margin:5px
	}
	.grid-item:hover .overlay {
		opacity: 1;
		cursor:pointer
	}
	.grid-item:hover a, .grid-item:hover a:visited, .grid-item:hover a:hover, .grid-item:hover a:focus {
		color: #fff;      
		text-decoration: none;
	}
	
	@media (max-width: 768px) {
      /* @keyframes moveToLogo { */
        /* 0%, 65% { */
          /* top: 50%; */
          /* left: 50%; */
          /* transform: translate(-50%, -50%) scale(1); */
        /* } */
        /* 100% { */
          /* top: 1.5rem; */
          /* left: calc(1.5rem + 5px); */
          /* transform: translate(0, 0) scale(0.55); */
        /* } */
      /* } */
	  
	  @keyframes moveToLogo {
      0%, 65% {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1);
		
      }
	  100% {
		top: calc(1.5rem + 12px);
        left: calc(1.5rem + 5px);
        transform: translate(0, 0) scale(0.45);
		  
	  }
	  }
    .main {
      font-size: clamp(1.62rem, 4.5vw, 2.7rem);
    }

    .sub {
      font-size: clamp(0.9rem, 1.8vw, 1.17rem);
	}
	
	.name-logo .main {
		font-size: clamp(0.729rem, 2.025vw, 1.215rem);
	}
	.name-logo .sub {
		font-size: clamp(0.405rem, 0.81vw, 0.5265rem);
	}
	
	      .grid-item { 
		width: calc(100%/2);
		/* padding:5px */
	}
	
	
	}	

    @media (max-width: 480px) {
      .grid-item { 
	  width: 100%; 
	  /* padding:5px */
	  }
    }	




/* portfolio */
.portfolio_container{
	/* Stretch it out, so that we create room for the horizontal scroll animation */
	overflow: visible; /* To make position sticky work … */
	view-timeline-name: --section-pin-tl;
	view-timeline-axis: block;
	display:flex;
	justify-content:center;
	align-items:center
}
.portfolio_content {
	overflow:hidden
}
.portfolio_box {
	width:100%;
	overflow:hidden;
}
.portfolio {
	display: inline-flex;
	padding: 30px 0;
	width:max-content
	/* background-color: #000; */
}
.portfolio_films {
	height: 100vh;
	width:100%;
}
.portfolio_films .portfolio {
    animation: scroll 15s linear infinite;
    will-change: transform;
	  transform: translateZ(0);

}
.portfolio_films .portfolio_box:hover .portfolio {
	animation-play-state: paused;
}
.portfolio_commercials .portfolio, .portfolio_shorts .portfolio {
	flex-wrap:wrap;
	display:flex;
	width:100%;
	justify-content:center;
}
.portfolio_commercials .portfolio__item, .portfolio_shorts .portfolio__item {
	padding:12px
}
.portfolio__item {
	flex: 0 0 auto;
    padding: 0 12px
}
.portfolio__item a {
	display: block;
    border-radius: 0;
    overflow: hidden;
	transition: transform 0.3s ease;
}
.portfolio_commercials .portfolio__img {
	width: 550px;
}
.portfolio_shorts .portfolio__img {
    width: 450px;
}
.portfolio__img {
    width: 350px;
	height: auto;
    object-fit: cover;
	border-radius:0;
	display:block;
    transition: 
        transform 0.5s cubic-bezier(.5, 0, .5, 1),
        opacity 0.25s linear;
}
.portfolio__item a:hover {
	transform: scale(1.05);
}
.portfolio__img:hover,
.portfolio__item:focus .portfolio__img {
    transform: scale(1.05);
    opacity: .7;
}
@keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
}
.portfolio_content h2 {
	font-weight:700;
	font-size:1em;
	text-transform:uppercase;
	color:#fff;
	font-family: "Open Sans", sans-serif;
	margin:10px 0;
	text-align:center
}
/* .portfolio_title_top { */
	/* display: none */
/* } */
/* .portfolio_title_bottom { */
	/* display: block */
/* } */
/* .portfolio_title_top, .portfolio_title_bottom { */
	/* font-variation-settings:"wdth" 75; */
/* } */
.portfolio_item_text {
	display:none
}


/* individual portfolio items */
.portfolio_iteminfo_container {
	overflow: visible;
	min-height:100vh;
	height:auto
}
.portfolio_iteminfo_box {
	height: auto; 
	width: 100%;
}
.portfolio_iteminfo {
	
	height: auto;
	padding:6rem calc(1.5rem + 5px) 3rem;
}
.portfolio_desc_desktop {
	display:block
}
.portfolio_desc_mobile {
	display:none
}
.portfolio_iteminfo div {
	
	color:#828282;
	/* padding:1rem 0; */
	text-align:center;
	width: 55%;
	margin: auto;
}
.portfolio_iteminfo div p {
	margin:10px 0
}
.portfolio_item_title {
	font-weight:700;
	font-size:1.2em;
	/* color:#979797; */
	color:#d9d9d9;
	/* margin:10px 0 25px */
}
.portfolio_item_subtitle {
	color:#565656;
	font-size:1em;
	/* color:#adadad */
}
.portfolio_item_director {
	color:#777777;
}
.portfolio_item_desc {
	/* margin:10px 0 */
	color:#adadad;
	font-size:1em;
	line-height:1.4
}
.portfolio_item_icons {
	
	/* margin:10px 0 */
}
.portfolio_item_icons a, .portfolio_item_icons a:focus, .portfolio_item_icons a:hover {
	/* font-size:1.5em; */
	/* color:#828282 */
	font-size:1.5em;
	color:#adadad
}
.portfolio_item_icons a i {
	padding:0 0.2em
}
.portfolio_iteminfo img {
	width:100%;
	margin:15px 0;
    max-width: 100%;
	height:auto;
    object-fit: cover;
}

/* about section */
.aboutme {
	display:flex;
	justify-content:center;
	align-items:center
}
.aboutme_container {
	width:90%
}
.aboutme_box {
	display:flex;
	gap:30px
}
.img_aboutme {
	width:500px;
	max-width:100%;
	height:auto;
	object-fit:contain;
}
.aboutme p {
	font-weight:300;
	font-size:1em
}
.aboutme .aboutme_icons {
	margin-bottom:0
}
.finishline {
	width:40%;
	margin:2em auto;
	height:1px;
	background-color:#979797
}
.about_finishline {
	width:100%;
	margin:1em auto 0;
	height:1px;
	background-color:#979797
}
.aboutme_content a, .aboutme_content a:hover, .aboutme_content a:visited, .aboutme_content a:focus {
	font-size: 1.5em;
	color:#d9d9d9;
	text-decoration:none
}
.aboutme_content a i {
	padding:0 0.5em 0 0 
}
/* media queries */

@media all and (max-width:1024px){
	section, #section2, #section3, #section4, #section5, #section6, #section7, .content_container {
		min-height:100%;
		height:auto;
	}
	.home {
		/* height:100vh */
	}
	.portfolio_commercials .portfolio__img {
		width: 450px;
	}
	.portfolio_shorts .portfolio__img {
		width: 350px;
	}
	.portfolio__item img { /* smaller film poster thumbnails, vertical scrolling */
		width: 250px;
		max-width: 100%;
		height: auto
	}

	/* .portfolio_iteminfo p { */
		/* font-size:0.75em; */
	/* } */
	/* .portfolio_item_title {} */
	

	
	.aboutme_container {
		/* padding:100px 0 */
		padding:6rem 0
	}
	.aboutme_box {
		flex-wrap:wrap;
		justify-content:center
	}	
}

@media all and (max-width:768px){ 
	.portfolio_content {
		padding:6rem 0
	}
	.portfolio_films, .portfolio_series {
		height:auto /* allowing vertical scroll through the list of projects */
	}
	.portfolio_films .portfolio, .portfolio_series .portfolio {
		width: 100vw;
		animation:none;
	}
	.portfolio_box {
		padding:0
	}
	.portfolio {
		animation:none;
		height:auto;
		flex-direction:column;
		justify-content:center;
		gap:0;
		padding:0
	}
	.portfolio_title_top {
		display: block
	}
	.portfolio_title_bottom {
		display: none
	}
	.portfolio__item {
		padding:1em
	}
	.portfolio__item_dupe {
		 display:none
	 }
	 /* .portfolio_title_top { */
		 /* display:none */
	 /* } */
	.portfolio__item > a.mobile-disabled {
		/* pointer-events: none; */
		/* cursor: default; */
		/* text-decoration: none; */
		/* color: inherit; */
	}	
	.portfolio_item_text {
		display:flex;
		flex-direction:column;
		justify-content:center;
		text-align:center;
		font-variation-settings:"wdth" 75;
	}
	.portfolio_item_text h1 {
		font-weight:700;
		color:#979797
	}
	.portfolio_item_text h1, .portfolio_item_text p {
		margin:0.5em 0
	}
	.portfolio_item_text p {
		font-size: 14px
	}
	.portfolio_item_text h1 {
		font-size:1.2em
	}
	.portfolio_item_text h1 a, .portfolio_item_text h1 a:focus, .portfolio_item_text h1 a:hover {
		font-size:1.75em;
		display:inline;
		color:white
	}
	.portfolio h2 {
		/* width:100%; */
		/* margin:0 0 1em; */
		/* padding:0; */
		/* text-align:center */
	}
	.portfolio__item img, .portfolio_commercials .portfolio__img, .portfolio_shorts .portfolio__img {
		width:70%;
		margin: 1em auto
	}	
	.portfolio__item .finishline {
		margin:1em auto 0;
		background-color:#979797
	}
	
	.portfolio_desc_desktop {
		display:none
	}
	.portfolio_desc_mobile {
		display:block
	}
	.portfolio_iteminfo {
		padding:6rem calc(1.5em + 5px) 3rem;
		flex-direction:column;
		/* width:100vw !important */
	}
	.portfolio_iteminfo > div {
		width:100%;
		padding:0
	}
	/* .portfolio_iteminfo p { */
		/* font-size:1em; */
	/* } */
	.portfolio_item_icons a {
		/* font-size:1.5em; */
	}
	.portfolio_item_icons a i {
		padding:0 0.5em 0 0
	}
	.portfolio_iteminfo img {
		width:100vw;
		height:auto;
	}
	.portfolio_iteminfo div {
		text-align:left
	}
	.aboutme_container {
		width:100%;
		padding:6rem calc(1.5em + 5px)
	}
	.aboutme h2 {
		font-size:1.2em
	}
	.aboutme h3 {
		font-size:1em
	}
	.aboutme p {
		font-size:1em
	}
	.about_finishline {
		/* margin: 0 auto */
	}
}
@media all and (max-width:1024px) and (orientation: landscape) {
	.portfolio_iteminfo {
		padding:6rem calc(1.5em + 5px) 3rem;
	}
}