:root {
  --left-padding: 4rem;
}

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

html, body {
  width:100%; height:100%;
  font-family:'Inter', sans-serif;
  font-size:18px; line-height:1.6;
  background:white; color:#111;
  overflow:hidden;
}

a {text-decoration: none; color: inherit}
h1, h2, h3 {text-transform: uppercase;}

/* ================= Landing ================= */
.landing { position:relative; width:100%; height:100%; overflow:hidden; }

.landing-bg { position:absolute; inset:0; background:#c0cb97; z-index:0; }

.landing-video { position:absolute; inset:0; z-index:1; overflow:hidden; }
.landing-video iframe { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.landing-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; transition:opacity .6s ease; }
.landing-video.loaded .landing-poster { opacity:0; pointer-events:none; }

.landing-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; text-align:center; z-index:2; }
.landing-overlay img { width:100%; height:auto; display:block; margin:0 auto; }

.landing-mask { position:absolute; left:0; width:100%; background:#c0cb97; z-index:3; }
.landing-mask.top { top:0; }
.landing-mask.bottom { bottom:0; }

.nav { position:absolute; inset:0; z-index:4; }
.nav-link { position:absolute; font-size:18px; color:#111; text-decoration:none; transition:color .3s; text-transform: uppercase;}
.nav-link::after { content:""; position:absolute; left:0; bottom:0px; width:0; height:1.5px; background:#111; transition:width .3s ease; }
.nav-link:hover::after { width:100%; }
#nav-about{top:2rem;left:4rem;} #nav-films{top:2rem;right:4rem;}
#nav-press{bottom:2rem;left:4rem;} #nav-contact{bottom:2rem;right:4rem;}
.nav.hidden{display:none;}

/* ================= Panels ================= */
.panel { position:fixed; width:100vw; height:100vh; background:white; z-index:10;
  transition:transform 1s ease, opacity 1s ease; opacity:0;
  pointer-events:none; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.panel.active{display:block; opacity:1; pointer-events:auto;}
.panel h2{font-size:36px;font-weight:500;margin-bottom:1.5rem;}
.panel h3{font-size:28px;font-weight:500;margin-top:2rem;}
.panel p{margin:1rem 0;}

/* Slide directions */
#films-panel{top:0;left:100%;transform:translateX(0);}
#films-panel.active{transform:translateX(-100%);}
#about-panel{top:0;left:-100%;transform:translateX(0);}
#about-panel.active{transform:translateX(100%);}
#press-panel{top:0;left:-100%;transform:translateX(0);}
#press-panel.active{transform:translateX(100%);}
#contact-panel{top:100%;left:0;transform:translateY(0);}
#contact-panel.active{transform:translateY(-100%);}

/* Close buttons */
.close-button{position:fixed;font-size:18px;text-decoration:none;color:#111;z-index:20;display:none;transition:color .3s; text-transform: uppercase;}
.close-button:hover{color:#c0cb97;}
.close-button::after{content:"";position:absolute;left:0;bottom:0px;width:0;height:1.5px;background:#c0cb97;transition:width .3s ease;}
.close-button:hover::after{width:100%;}
.close-button.show{display:block;}
#close-films{top:2rem;right:4rem;} #close-about{top:2rem;left:4rem;}
#close-press{bottom:2rem;left:4rem;} #close-contact{bottom:2rem;right:4rem;}

/* ================= Films Panel ================= */
#films-panel { overflow: hidden; } 
.film-container { position: relative; padding: 10vh var(--left-padding); height: 100%; overflow-y: auto; }
.film-title { font-size: 120px; font-weight: 600; cursor: pointer; line-height: 1.1; transition: color .3s ease; position: relative; z-index: 12; }
.film-title:hover { color: #c0cb97; }

.image-display { position: fixed; top: 20%; right: var(--left-padding); transform: translateY(-50%); width:60vw; max-height: 90vh; z-index:11; pointer-events: none; display: none; }
.image-display.show { display: block; }
.image-display img { position: absolute; top: 0; left: 0; width:100%; height: auto; object-fit: cover; display: none; opacity: 0; filter: blur(20px); transition: opacity .6s ease, filter .8s ease; }
.image-display img.active { display: block; opacity: 1; filter: blur(0); }

/* ================= About Panel ================= */
.about-content { margin: 0 auto; padding: 4rem 4rem 4rem 9rem; font-size: 22px; line-height: 1.8; color: #111; }
.about-content ul { list-style: none; padding: 0; margin: 0; }
.partners-grid { display: grid; grid-template-columns: repeat( auto-fit,minmax(240px,1fr)); gap: 1rem; margin-top: 1rem; }
.partners-grid img { max-width: 100%; }

/* ================= Press Panel ================= */
.press-container { margin: 0 auto; padding: 4rem 4rem 4rem 9rem; font-size: 26px; line-height: 1.8; color: #111; }
.press-container ul { list-style: none; padding: 0; font-size: 22px; line-height: 1; text-decoration: none }
.press-title { font-size: 28px; font-weight: 300; cursor: pointer; line-height: 1.5; transition: color .3s ease; position: relative; z-index: 12; }
.press-title:hover { color:#c0cb97; }

/* ================= Contact Panel ================= */
.contact-container { text-align: center; padding:8rem 2rem; }
.contact-container p { font-size: 26px; margin: 1rem 0; }
.contact-container form { margin-top:1rem; }
.contact-container input [ type="email"] {padding: .5rem 1rem; width: 60%; max-width: 300px; font-size: 22px; }
.contact-container button { margin-left: 1rem; padding: .5rem 1rem; font-size: 22px; background: #111; color: white; border: none; cursor: pointer; }

/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 1024px) {
  /* Bigger fonts for nav + close */
  .nav-link,
  .close-button {
    font-size: 32px;
  }

  /* General text scaling */
  body {
    font-size: 36px;
    line-height: 1.6;
  }

  /* About panel: */
  .about-content {
    padding: 8rem 4rem 10rem 12rem; 
  }

    /* Press panel: */
  .press-container {
    padding: 8rem 4rem 10rem 12rem; 
  }

  .press-title {
    font-size: 36px;
  }

  /* Contact panel: */
  .contact-container {
    padding: 50% 2rem; 
  }

  /* Films panel: switch to stacked layout */
  .film-container {
    display: block;
    padding: 10rem 4rem;
  }

  .film-title {
    display: block;
    margin: 2rem 0 6rem 0;
    text-align: left;
  }

  /* Show images inline with titles
  .image-display {
    position: static;
    display: block;
    margin: 0;
    text-align: center;
    top: 0;
  }
  /* .image-display { position: fixed; top: 20%; right: var(--left-padding); transform: translateY(-50%); width:60vw; max-height: 90vh; z-index:11; pointer-events: none; display: none; } 

  .image-display img {
    display: block;
    width: 90%;
    margin: 1rem 0 4rem 0;
    opacity: 1 !important; /* always visible 
    position: static !important;
    transform: none !important;
    filter: blur(0);
  }
  /* .image-display img { position: absolute; top: 0; left: 0; width:100%; height: auto; object-fit: cover; display: none; opacity: 0; filter: blur(20px); transition: opacity .6s ease, filter .8s ease; } */

}