/* ------------------ */
/* RESET */
/* ------------------ */

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

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: #fffbe6;

  color: #fffbe6;

  font-family: "Courier Prime", monospace;

  overflow-y: auto;
}

/* ------------------ */
/* VIDEO */
/* ------------------ */

.background-video{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    object-fit:cover;

    z-index:-3;

    filter:sepia(0.45);

}

.desktop-video{

    display:block;

}

.mobile-video{

    display:none;

}

/* ------------------ */
/* OVERLAY */
/* ------------------ */

.overlay {
  position: fixed;

  inset: 0;

  background: rgba(10, 8, 6, 0.45);

  z-index: -2;

  animation: flicker 0.25s infinite;
}

.overlay::after {
  content: "";

  position: absolute;

  inset: 0;

  background: radial-gradient(
    circle,
    transparent 45%,
    rgba(0, 0, 0, 0.45) 100%
  );

  pointer-events: none;
}

/* ------------------ */
/* FILM GRAIN */
/* ------------------ */

body::after {
  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  opacity: 0.08;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------ */
/* HEADER */
/* ------------------ */

header {
  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 20px 40px;

  background: rgba(15, 12, 8, 0.65);

  backdrop-filter: blur(8px);

  border-bottom: 1px solid rgba(200, 146, 42, 0.35);

  box-shadow: none;

  z-index: 100;
}

header::after {
  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 1px;

  background: linear-gradient(to right, transparent, #c8922a, transparent);

  opacity: 0.6;
}

.logo h1 {
  font-family: "Special Elite", cursive;

  font-size: 2rem;

  letter-spacing: 2px;
}

.logo p {
  margin-top: 8px;

  font-size: 0.75rem;

  letter-spacing: 3px;

  color: #c8922a;

  text-transform: uppercase;
}

/* ------------------ */
/* NAVIGATION */
/* ------------------ */

nav {
  display: flex;

  align-items: center;

  gap: 30px;

  height: 100%;
}

nav a {
  text-decoration: none;

  color: #f2ead3;

  font-size: 0.8rem;

  letter-spacing: 2px;

  text-transform: uppercase;

  transition: 0.25s;
}

nav a:hover {
  color: #c8922a;
}

.menu-toggle{

    display:none;

    background:none;

    border:2px solid #C8922A;

    color:#F2EAD3;

    padding:10px 20px;

    font-family:"Special Elite", cursive;

    cursor:pointer;

}

/* ------------------ */
/* MENU */
/* ------------------ */

.home-main {
  height: 100%;

  display: flex;

  justify-content: flex-start;

  align-items: center;
  padding-left: 120px;

  animation: glitch 10s infinite;
}

.menu {
  display: flex;

  flex-direction: column;

  gap: 25px;

  animation: glitch 15s infinite;
}

.menu:hover a {
  opacity: 0.35;

  transition: 0.25s;
}

.menu:hover a:hover {
  opacity: 1;
}

.menu a {
  display: block;

  position: relative;

  width: 460px;

  padding-top: 18px;

  padding-bottom: 18px;

  padding-left: 70px;

  padding-right: 28px;

  text-decoration: none;

  font-family: "Special Elite", cursive;

  font-size: 1.2rem;

  letter-spacing: 3px;

  color: #fffbe6;

  background: rgba(20, 15, 10, 0.72);

  border: 2px solid #8b5a2b;

  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.45),
    4px 4px 0 rgba(0, 0, 0, 0.45);

  text-transform: uppercase;

  transition: 0.2s;
}

.menu a::before {
  content: ">";

  position: absolute;

  left: 25px;

  top: 50%;

  transform: translateY(-50%);

  color: #c8922a;

  transition: 0.2s;
}

.menu a:hover {
  background: #c8922a;

  color: #111;

  border-color: #f2ead3;

  transform: translateX(10px);

  box-shadow:
    0 0 10px rgba(201, 168, 76, 0.5),
    0 0 35px rgba(201, 168, 76, 0.25),
    8px 8px 0 rgba(0, 0, 0, 0.45);
}

.menu a:hover::before {
  left: 35px;

  color: #ffffff;

  text-shadow:
    -2px 0 rgba(255, 0, 0, 0.5),
    2px 0 rgba(0, 255, 255, 0.5);
}

/* ------------------ */
/* MOBILE */
/* ------------------ */


@keyframes glitch {
  0%,
  94%,
  100% {
    transform: translateX(0);
    filter: none;
  }

  95% {
    transform: translateX(-2px);
    filter: hue-rotate(8deg);
  }

  96% {
    transform: translateX(2px);
    filter: hue-rotate(-8deg);
  }

  97% {
    transform: translateX(-1px);
  }

  98% {
    transform: translateX(1px);
  }
}
@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.97;
  }

  52% {
    opacity: 0.93;
  }

  54% {
    opacity: 1;
  }
}

/* 

===========================================
   PORTFOLIO PAGES
=========================================== */

.page {
  background: #15100c;
  color: #f2ead3;
  overflow-y: auto;
}

/* Content */

.content {
  max-width: 1350px;

  margin: 150px auto 80px;

  padding: 0 60px;
}

.page-title{

    text-align:center;

    max-width:900px;

    margin: 20px auto 70px;

}

.page-title h1{
    font-family:"Special Elite", cursive;
    font-size:4rem;
    letter-spacing:6px;
    margin-bottom:18px;
    text-transform:uppercase;
}

.page-title p{
    max-width:700px;
    margin:0 auto;
    color:#bfa98b;
    line-height:1.9;
    font-size:1rem;
}

/* Projects */

.project {
  padding-bottom: 90px;

  border-bottom: 1px solid rgba(200, 146, 42, 0.25);

  margin-bottom: 90px;
}

.project:first-of-type {
  margin-top: 60px;
}

.project h2 {
  font-family: "Special Elite", cursive;

  font-size: 1.8rem;

  margin-bottom: 8px;
}

.meta {
  color: #c8922a;

  font-size: 0.75rem;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin-bottom: 20px;
}

/* Videos */

.project video {
  width: 100%;

  aspect-ratio: 16/9;

  object-fit: cover;

  display: block;

  border: 2px solid #8b5a2b;

  background: #000;

  margin: 24px 0 30px;
}

/* Description */

.project p {
  color: #c0b39d;

  line-height: 1.8;

  max-width: 700px;
}
/* ==========================================
   STORYBOARD PANELS
========================================== */

.panel-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));

    gap:12px;

    margin-top:20px;

}

.panel-grid img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:8px;

    cursor:pointer;

}

.panel-grid img:hover{

    transform:translateY(-4px);

    border-color:#C8922A;

    box-shadow:0 0 18px rgba(200,146,42,.25);

}

/* ==========================================
   STORYBOARD LIGHTBOX
========================================== */

.lightbox{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

    animation:fadeIn .2s;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

    border:3px solid #C8922A;

    box-shadow:0 0 40px rgba(200,146,42,.3);

}

.lightbox.show{

    display:flex;

}

.close{

    position:absolute;

    top:30px;

    right:40px;

    font-size:3rem;

    color:#F2EAD3;

    cursor:pointer;

    font-family:sans-serif;

}

.panel-grid img{

    cursor:pointer;

    transition:.25s;

}

.panel-grid img:hover{

    transform:translateY(-5px);

    border-color:#C8922A;

    box-shadow:0 0 20px rgba(200,146,42,.25);

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}
.arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    font-size:3rem;

    color:#F2EAD3;

    background:none;

    border:none;

    cursor:pointer;

    padding:20px;

    transition:.2s;

}

.arrow:hover{

    color:#C8922A;

}

.left{

    left:40px;

}

.right{

    right:40px;

}

.gallery-info{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    color:#F2EAD3;

    font-family:"Courier Prime", monospace;

    letter-spacing:2px;

    font-size:.9rem;

    background:rgba(20,15,10,.75);

    padding:10px 18px;

    border:1px solid rgba(200,146,42,.4);

}

/* ==========================================
   ILLUSTRATION PAGE
========================================== */

.hero-image{

    width:100%;

    display:block;

    margin:30px 0;

    border:2px solid #8B5A2B;

    background:#000;

}

.hero-image:hover{

    border-color:#C8922A;

}

.hero-image{

    cursor:pointer;

}

/* ==========================================
   NPC DIALOGUE BOX
========================================== */

.npc-box{

    display:flex;

    align-items:flex-start;

    gap:35px;

    margin-top:80px;

    padding:30px;

    border:2px solid #8B5A2B;

    background:rgba(20,15,10,.65);

}

.npc-avatar{

    width:180px;

    border:2px solid #C8922A;

    image-rendering:pixelated;

    flex-shrink:0;

}

.npc-dialogue{

    flex:1;

}

.npc-dialogue h2{

    font-family:"Special Elite", cursive;

    color:#C8922A;

    margin-bottom:20px;

}

.npc-dialogue p{

    line-height:1.9;

    color:#d5cab7;

}

.quest-button{

    display:inline-block;

    margin-top:25px;

    padding:12px 24px;

    border:2px solid #C8922A;

    text-decoration:none;

    color:#F2EAD3;

    transition:.2s;

}

.quest-button:hover{

    background:#C8922A;

    color:#111;

}

.quest-list{

    margin:18px 0 24px 28px;

    line-height:2;

    color:#F2EAD3;

}

.quest-list li::marker{

    color:#C8922A;

}

/* ==========================================
   ABOUT PAGE
========================================== */

.about-section{

    display:flex;

    gap:60px;

    align-items:flex-start;

    margin-bottom:70px;

}

.about-photo{

    width:260px;

    border:2px solid #8B5A2B;

    background:#111;

    flex-shrink:0;

}

.about-text{

    line-height:2;

    color:#c0b39d;

}

.about-text p{

    margin-bottom:24px;

}

.about-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

}

.about-grid h2{

    font-family:"Special Elite", cursive;

    color:#C8922A;

    margin-bottom:20px;

}

.about-grid ul{

    margin-left:24px;

    line-height:2;

    color:#F2EAD3;

}

.about-grid li::marker{

    color:#C8922A;

}

.cv-section{

    text-align:center;

    margin: top 30px;

}

.cv-section h2{

    font-family:"Special Elite", cursive;

    color:#C8922A;

    margin-bottom:20px;

}

.cv-section p{

    color:#c0b39d;

    margin-bottom:30px;

    line-height:1.8;

}

.divider{

    margin:120px 0 90px;

}

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

.contact-intro{

    max-width:700px;

    margin:0 auto;

    text-align:center;

    line-height:2;

    color:#c0b39d;

}

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    max-width:900px;

    margin: 60px auto 0;

}

.contact-links,
.availability{

    text-align:left;

}

.contact-links h2,
.availability h2{

    font-family:"Special Elite", cursive;

    color:#C8922A;

    margin-bottom:24px;

}

.contact-links{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-links a{

    text-decoration:none;

    color:#F2EAD3;

    transition:.2s;

}

.contact-links a:hover{

    color:#C8922A;

}

.availability ul{

    margin-left:22px;

    line-height:2;

    color:#F2EAD3;

}

/* STORYBOARD EXPAND */

.hidden-panels{

    display:none;

}

.hidden-panels.show{

    display:grid;

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:900px){

header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 20px;

}

.logo{

    text-align:left;

}

.logo h1{
    font-size:1.3rem;
}

.logo p{
    font-size:.65rem;
}

header{
    padding:15px 20px;
}

.menu-toggle{

    display:block;

    margin:0;

    font-size:1.2rem;

}
nav{

    display:none;

    flex-direction:column;

    align-items:flex-end;

    width:100%;

    gap:12px;

}

nav.show{

    display:flex;

}

.content{

    margin:220px auto 60px;

    padding:0 20px;

}

.page-title h1{

    font-size:2.3rem;

    letter-spacing:2px;

}

.about-section{

    flex-direction:column;

    align-items:center;

    gap:35px;

}

.about-photo{

    width:220px;

}

.about-text{

    text-align:left;

}

.about-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.contact-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.npc-box{

    flex-direction:column;

    align-items:center;

}

.npc-avatar{

    width:150px;

}

img{

    max-width:100%;

    height:auto;

}

video{

    width:100%;
    height:auto;
    object-fit:contain;

}

.home-main{

    min-height:calc(100vh - 170px);

    display:flex;

    justify-content:center;

    flex-direction:column;

    align-items:flex-start;

    padding:90px 20px 40px;

    box-sizing:border-box;

}



.menu{

    width:100%;

    align-items:flex-start;

    gap:15px;

}

.menu a{

    width:250px;

    padding:12px 16px 12px 50px;

    font-size:0.9rem;

    letter-spacing:1px;

}
}
@media (max-width: 900px) {

  .home-main{

    min-height:calc(100vh - 170px);

    display:flex;

    justify-content:center;

    flex-direction:column;

    align-items:flex-start;

    padding:90px 20px 40px;

    box-sizing:border-box;

}

    .menu{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:12px;

}

.menu a{

    width:250px;

    padding:12px 16px 12px 50px;

    font-size:0.9rem;

    letter-spacing:1px;

    text-align:left;

    border-radius:10px;

}

.menu a::before {
  content: ">";

  position: absolute;

  left: 25px;

  top: 50%;

  transform: translateY(-50%);

  color: #c8922a;

  transition: 0.2s;
}

.menu a:hover {
  background: #c8922a;

  color: #111;

  border-color: #f2ead3;

  transform: translateX(10px);

  box-shadow:
    0 0 10px rgba(201, 168, 76, 0.5),
    0 0 35px rgba(201, 168, 76, 0.25),
    8px 8px 0 rgba(0, 0, 0, 0.45);
}

.menu a:hover::before {
  left: 35px;

  color: #ffffff;

  text-shadow:
    -2px 0 rgba(255, 0, 0, 0.5),
    2px 0 rgba(0, 255, 255, 0.5);
}

.desktop-video{

    display:none;

}

.mobile-video{

    display:block;

}

}

.menu a{

    position:relative;

    padding:14px 18px 14px 42px;

}

.menu a::before{

    left:20px;

    content:"▸";

    font-size:1rem;

}



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

.page-footer{

    margin-top:120px;
    padding:60px 20px;

    text-align:center;

    border-top:1px solid rgba(200,146,42,.25);

}

.footer-title{

    font-family:"Special Elite", cursive;
    font-size:1.4rem;
    color:#C8922A;

    margin-bottom:18px;

}

.footer-message{

    color:#C0B39D;

    margin-bottom:28px;

    line-height:1.8;

}

.footer-credit{

    font-size:.8rem;

    color:#8B7C69;

    letter-spacing:1px;

}