@font-face{
    font-family:'Violence';
    src:url('fonts/Violence.ttf') format('truetype');
    font-style:normal;
    font-weight:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'Trabuline';
    src:url('fonts/Trabuline.woff2') format('woff2'),
        url('fonts/Trabuline.woff') format('woff'),
        url('fonts/Trabuline.ttf') format('truetype');
    font-style:normal;
    font-weight:normal;
    text-rendering:optimizeLegibility;
    font-display:swap;
  }
  :root{
    --black:#0a0808;
    --near-black:#0f0b0a;
    --maroon-deep:#3a0808;
    --maroon:#5c0f10;
    --red:#a91318;
    --red-bright:#c81f24;
    --paper:#ece6dc;
    --paper-dim:#c9c0b4;
    --muted:#9c8c86;
    --line: rgba(236,230,220,0.14);
  }

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

  html{scroll-behavior:auto;}

  body{
    background:var(--black);
    color:var(--paper);
    font-family:'Roboto', sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  h1,h2,h3{
    font-family:'Trabuline', serif;
    font-weight:400;
    letter-spacing:0.06em;
    text-transform:uppercase;
  }

  em, .italic{font-style:italic; font-weight:400;}

  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}

  .wrap{
    width:90vw;
    margin:0 auto;
    padding:0 6vw;
  }

  ::selection{background:var(--red);color:var(--paper);}

  /* focus visibility */
  a:focus-visible, button:focus-visible{
    outline:2px solid var(--red-bright);
    outline-offset:3px;
  }

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
    html{scroll-behavior:auto;}
  }

  /* ============ NAV ============ */
  header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:clamp(13px, 1.3vw, 24px) 6vw;
    background:linear-gradient(to bottom, rgba(8,5,4,0.85) 0%, rgba(8,5,4,0) 100%);
    transition:background 0.4s ease, padding 0.4s ease;
  }
  header.scrolled{
    background:rgba(8,5,4,0.92);
    backdrop-filter:blur(6px);
    padding:clamp(13px, 1.3vw, 24px) 6vw;
    box-shadow:0 1px 0 var(--line);
  }
  .header-right{
    display:flex;
    align-items:center;
    gap:18px;
  }
  .btn-trailer{
    display:inline-flex;
    align-items:center;
    gap:9px;
    background:var(--red);
    color:var(--paper);
    border:1.5px solid var(--maroon-deep);
    border-radius:3px;
    padding:8px 18px;
    font-size:11px;
    font-weight:500;
    letter-spacing:0.14em;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
    transition:background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  }
  .btn-trailer svg{width:13px; height:13px; flex:none;}
  .btn-trailer:hover{
    background:transparent;
    color:var(--red-bright);
    border-color:var(--red-bright);
    transform:translateY(-1px);
  }
  @media (max-width: 480px){
    .btn-trailer{padding:7px 12px; font-size:10px; gap:6px;}
  }
  nav.links{
    display:flex;
    gap:34px;
    font-size:12.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
  }
  nav.links a{
    position:relative;
    color:var(--paper-dim);
    padding-bottom:6px;
    transition:color 0.25s ease;
  }
  nav.links a::after{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:0; height:1px;
    background:var(--red-bright);
    transition:width 0.3s ease;
  }
  nav.links a:hover, nav.links a.active{color:var(--paper);}
  nav.links a:hover::after, nav.links a.active::after{width:100%;}

  .burger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:1001;
    padding:6px;
  }
  .burger span{
    width:26px; height:1.5px;
    background:var(--paper);
    transition:transform 0.3s ease, opacity 0.3s ease;
  }
  .burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

  .mobile-panel{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw, 340px);
    background:rgba(10,7,6,0.98);
    border-left:1px solid var(--line);
    transform:translateX(100%);
    transition:transform 0.4s ease;
    z-index:999;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:26px;
    padding:0 42px;
  }
  .mobile-panel.open{transform:translateX(0);}
  .mobile-panel a{
    font-size:15px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--paper-dim);
  }
  .mobile-panel a:hover{color:var(--red-bright);}

  @media (max-width: 860px){
    nav.links{display:none;}
    .burger{display:flex;}
  }

  /* ============ HERO ============ */
  .hero{
    position:relative;
    width:100%;
    padding-top:var(--nav-h, 96px);
    background:var(--black);
    box-sizing:border-box;
  }
    
     .hero-flare{
    position:absolute;
    aspect-ratio:1/1;
    border-radius:50%;
    filter:blur(70px);
    mix-blend-mode:screen;
    z-index:2;
    pointer-events:none;
  }
  .hero-flare--1{
    left:10%;
    bottom:-60%;
    width:min(70vw, 780px);
    background:radial-gradient(circle, rgba(169,19,24,0.75) 0%, rgba(169,19,24,0.35) 40%, transparent 70%);
    animation:heroLeakA 4s ease-in-out infinite;
  }
  .hero-flare--2{
    left:50%;
    bottom:-65%;
    width:min(85vw, 980px);
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(200,31,36,0.7) 0%, rgba(200,31,36,0.3) 40%, transparent 72%);
    animation:heroLeakB 5.5s ease-in-out infinite;
    animation-delay:-4s;
  }
  .hero-flare--3{
    left:85%;
    bottom:-55%;
    width:min(60vw, 680px);
    transform:translateX(-50%);
    background:radial-gradient(circle, rgba(146,12,16,0.72) 0%, rgba(146,12,16,0.32) 40%, transparent 70%);
    animation:heroLeakC 3s ease-in-out infinite;
    animation-delay:-2s;
  }
  @keyframes heroLeakA{
    0%   { opacity:0.15; transform:translateY(0) scale(1); }
    20%  { opacity:0.8;  transform:translateY(-3%) scale(1.08); }
    45%  { opacity:0.2;  transform:translateY(0) scale(1); }
    70%  { opacity:0.85; transform:translateY(-4%) scale(1.1); }
    100% { opacity:0.15; transform:translateY(0) scale(1); }
  }
  @keyframes heroLeakB{
    0%   { opacity:0.7;  transform:translateX(-50%) translateY(-3%) scale(1.05); }
    30%  { opacity:0.15; transform:translateX(-50%) translateY(0) scale(1); }
    55%  { opacity:0.85; transform:translateX(-50%) translateY(-4%) scale(1.1); }
    85%  { opacity:0.2;  transform:translateX(-50%) translateY(0) scale(1); }
    100% { opacity:0.7;  transform:translateX(-50%) translateY(-3%) scale(1.05); }
  }
  @keyframes heroLeakC{
    0%   { opacity:0.18; transform:translateX(-50%) translateY(0) scale(1); }
    35%  { opacity:0.75; transform:translateX(-50%) translateY(-3%) scale(1.06); }
    60%  { opacity:0.15; transform:translateX(-50%) translateY(0) scale(1); }
    88%  { opacity:0.78; transform:translateX(-50%) translateY(-3%) scale(1.08); }
    100% { opacity:0.18; transform:translateX(-50%) translateY(0) scale(1); }
  }


  .hero-media{
    position:relative;
    width:100%;
    height:calc(100vh - var(--nav-h, 96px));
    height:calc(100dvh - var(--nav-h, 96px));
    overflow:hidden;
  }
    .hero-bg{
    position:absolute;
    top:-15%; left:0;
    width:100%; height:130%;
    background-image:var(--hero-bg-image);
    background-size:cover;
    background-position:center;
    will-change:transform;
  }
  .hero-media::after{
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(to bottom, rgba(6,4,3,0.25) 0%, rgba(6,4,3,0.1) 30%, rgba(6,4,3,0.65) 82%, var(--black) 100%);
    z-index:1;
  }
  .hero-content{
    position:absolute; inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    text-align:center;
    padding:0 6vw 10vh;
  }
  .hero-logo{
  font-family:'Violence', cursive;
  color:var(--red-bright);
  font-size:clamp(100px, 15vw, 10vw);
  line-height:0.9;
  margin-bottom:50px;
  text-transform:none;
  letter-spacing:-0.02em;
}
  .hero-tagline{
    max-width:820px;
    margin:0 auto;
    font-family:'Roboto', sans-serif;
    font-weight:300;
    line-height:1.85;
    color:#e5dfd6;
    font-size:clamp(16px, 1.9vw, 16px);
    max-width:90ch;
  }

  .hero-tagline strong{
    font-weight:600;
    color:var(--paper);
    letter-spacing:0.04em;
  }

    .hero-tagline strong{
    font-weight:600;
    color:var(--paper);
    letter-spacing:0.04em;
  }

  .hero-cta{
    display:inline-flex;
    align-items:center;
    margin-top:34px;
    padding:20px 34px;
    border:1.5px solid var(--red-bright);
    color:var(--paper);
    background:transparent;
    font-family:'Roboto', sans-serif;
    font-weight:500;
    font-size:13px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    border-radius:3px;
    transition:background 0.3s ease, color 0.3s ease, transform 0.2s ease;
  }
  .hero-cta:hover{
    background:var(--red-bright);
    color:var(--black);
    transform:translateY(-2px);
  }

  .hero-social{
    display:flex;
    align-items:center;
    gap:18px;
    margin-top:26px;
  }
  .hero-social a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px; height:38px;
    border-radius:50%;
    border:1px solid rgba(236,230,220,0.3);
    color:var(--paper-dim);
    transition:border-color 0.3s ease, color 0.3s ease, transform 0.25s ease, background 0.3s ease;
  }
  .hero-social a svg{width:17px; height:17px;}
  .hero-social a:hover{
    border-color:var(--red-bright);
    color:var(--red-bright);
    background:rgba(169,19,24,0.12);
    transform:translateY(-2px);
  }

  /* ============ SECTION SCAFFOLD ============ */
  section{
    position:relative;
    padding:120px 0;
    scroll-margin-top:var(--nav-h, 70px);
  }
  .hero{scroll-margin-top:0;}
  .bg-cover{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:0;
  }
  .bg-tint{
    position:absolute; inset:0;
    z-index:1;
  }
  .section-inner{position:relative; z-index:2;}

  .kicker-title{
    font-size:clamp(28px, 4.4vw, 46px);
    text-align:center;
    color:var(--paper);
    margin-bottom:34px;
    letter-spacing:0.16em;
  }
  .kicker-title.red{color:var(--red-bright);}
  #cast .kicker-title, #crew .kicker-title{margin-bottom:64px;}


  .lede{
    max-width:760px;
    margin:0 auto;
    text-align:center;
    font-size:clamp(15px, 1.6vw, 18px);
    line-height:1.9;
    color:var(--paper-dim);
    font-weight:300;
  }

  .reveal{
    opacity:0;
    transform:translateY(18px);
    transition:opacity 0.9s ease, transform 0.9s ease;
  }
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ============ SYNOPSIS ============ */
  #synopsis{padding:0;}
  .split{
    display:grid;
    grid-template-columns:1.15fr 1fr;
    min-height:1000px;
  }
  .split-text{
    position:relative;
    padding:110px 7vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .split-text .bg-tint{background:linear-gradient(100deg, rgba(58,8,8,0.94) 0%, rgba(20,3,3,0.94) 75%);}
  .split-text h2{
    color:var(--red-bright);
    font-size:clamp(30px, 3.6vw, 42px);
    margin-bottom:28px;
    text-align:center;
  }
  .split-text p{
    font-size:17px;
    line-height:1.85;
    color:#e5dfd6;
    margin-bottom:20px;
    font-weight:300;
    text-align:left;
  }
  .split-img{position:relative; overflow:hidden; min-height:340px;}
  .split-img img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}

  @media (max-width: 900px){
    .split{grid-template-columns:1fr;}
    .split-text{padding:80px 8vw 60px;}
    .split-img{min-height:320px;}
  }

  /* ============ BIO / STATEMENT (centered text over bg) ============ */
  .centered-copy{
    max-width:920px;
    margin:0 auto;
    text-align:center;
  }
  .centered-copy p{
    font-size:17px;
    line-height:1.95;
    color:#e5dfd6;
    margin-bottom:22px;
    font-weight:300;
  }
  #bio .bg-tint{background:linear-gradient(180deg, rgba(58,8,8,0.36) 0%, rgba(35,5,5,0.52) 100%);}
  #statement .bg-tint{background:rgba(6,3,3,0.42);}
  #statement .kicker-title{color:var(--red-bright);}

  /* ============ CAST ============ */
  #cast .bg-tint{background:linear-gradient(180deg, rgba(6,3,3,0.55) 0%, rgba(6,3,3,0.88) 100%);}
  .cast-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
    margin-bottom:96px;
  }
  .cast-row:last-child{margin-bottom:0;}
  .cast-row.rev .cast-media{order:2;}
  .cast-row.rev .cast-copy{order:1;}
  .cast-media{
    overflow:hidden;
    border-radius:2px;
  }
  .cast-media img{
    width:100%;
    transition:transform 0.6s ease;
  }
  .cast-media:hover img{transform:scale(1.035);}
  .cast-media.duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .cast-media.duo img{height:100%; object-fit:cover;}
  .cast-name{
    font-family:'Roboto', sans-serif;
    font-style:italic;
    font-weight:500;
    font-size:24px;
    letter-spacing:0.01em;
    color:var(--paper);
    text-transform:none;
  }
  .cast-role{
    font-family:'Roboto', sans-serif;
    font-style:italic;
    font-weight:400;
    font-size:20px;
    color:var(--red-bright);
    margin:4px 0 16px;
  }
  .cast-copy p{
    font-size:16px;
    line-height:1.85;
    color:var(--paper-dim);
    max-width:100ch;
    font-weight:300;
  }
  @media (max-width: 820px){
    .cast-row, .cast-row.rev{grid-template-columns:1fr; gap:26px;}
    .cast-row.rev .cast-media{order:1;}
    .cast-row.rev .cast-copy{order:2;}
    .cast-row{margin-bottom:60px;}
  }

  /* ============ CREW ============ */
  #crew .bg-tint{background:rgba(10,3,3,0.55);}
  .crew-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:26px;
  }
  .crew-card{
    background:rgba(8,3,3,0.72);
    border:1px solid rgba(200,30,30,0.18);
    overflow:hidden;
    transition:transform 0.35s ease, border-color 0.35s ease;
  }
  .crew-card:hover{transform:translateY(-6px); border-color:rgba(200,30,30,0.5);}
  .crew-photo{aspect-ratio:1/1; overflow:hidden; background:#1a0808;}
  .crew-photo img{width:100%; height:100%; object-fit:cover;}
  .crew-photo.placeholder{
    display:flex; align-items:center; justify-content:center;
    color:var(--red-bright);
    font-family:'Trabuline', serif;
    font-size:44px;
    background:linear-gradient(140deg, #240707, #100404);
  }
  .crew-info{padding:20px 30px 26px;}
  .crew-name{font-family:'Roboto', sans-serif; font-weight:500; font-size:24px; color:var(--paper);}
  .crew-role{font-family:'Roboto', sans-serif; font-weight:400; font-size:18px; color:var(--red-bright); margin:2px 0 12px;}
  .crew-bio{font-size:16px; line-height:1.75; color:var(--paper-dim); font-weight:300;text-wrap:pretty;}

  @media (max-width: 980px){
    .crew-grid{grid-template-columns:repeat(2, 1fr);}
  }
  @media (max-width: 560px){
    .crew-grid{grid-template-columns:1fr;}
  }

  /* ============ CAROUSEL (main, big) ============ */
  .carousel{
    position:relative;
    width:100%;
    aspect-ratio:1080/690;
    max-height:80vh;
    overflow:hidden;
    background:#000;
  }
  .carousel-track{
    display:flex;
    width:1000%;
    height:100%;
    transition:transform 0.75s cubic-bezier(.65,0,.35,1);
  }
  .carousel-slide{
    position:relative;
    width:10%;
    height:100%;
    flex:0 0 10%;
  }
  .carousel-slide img{width:100%; height:100%; object-fit:cover; display:block;}

  .carousel-arrow{
    position:absolute; top:50%;
    transform:translateY(-50%);
    width:46px; height:46px;
    border-radius:50%;
    background:rgba(10,6,5,0.5);
    border:1px solid rgba(236,230,220,0.28);
    color:var(--paper);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    z-index:5;
    transition:background 0.3s ease, border-color 0.3s ease, transform 0.25s ease;
  }
  .carousel-arrow svg{width:19px; height:19px;}
  .carousel-arrow:hover{
    background:var(--red);
    border-color:var(--red-bright);
    transform:translateY(-50%) scale(1.08);
  }
  .carousel-arrow.prev{left:22px;}
  .carousel-arrow.next{right:22px;}
  @media (max-width: 600px){
    .carousel-arrow{width:38px; height:38px;}
    .carousel-arrow svg{width:15px; height:15px;}
    .carousel-arrow.prev{left:12px;}
    .carousel-arrow.next{right:12px;}
  }
  .carousel-slide{cursor:pointer;}

  /* ---- Bottom row: static image + compact EPK side by side ---- */
  .bottom-row{
    display:grid;
    grid-template-columns:1.3fr 1fr;
  }
  .epk-static{
    position:relative;
    overflow:hidden;
    min-height:720px;
    cursor:pointer;
  }
  .epk-static img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transition:transform 0.5s ease;
  }
  .epk-static:hover img{transform:scale(1.035);}

  @media (max-width: 820px){
    .bottom-row{grid-template-columns:1fr;}
    .epk-static{min-height:220px;}
  }

  /* ============ LIGHTBOX ============ */
  .lightbox{
    position:fixed; inset:0;
    background:rgba(4,2,2,0.95);
    z-index:3000;
    display:none;
    align-items:center; justify-content:center;
    padding:6vw;
  }
  .lightbox.open{display:flex;}
  .lightbox img{
    max-width:min(100vw, 100%);
    max-height:88vh;
    object-fit:contain;
    border:1px solid var(--line);
  }
  .lightbox-close{
    position:fixed; top:26px; right:34px;
    font-size:15px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--paper-dim);
    background:none; border:none; cursor:pointer;
    z-index:3002;
    transition:color 0.25s ease;
  }
  .lightbox-close:hover{color:var(--red-bright);}
  .lightbox-arrow{position:fixed; z-index:3001;}

  /* ============ EPK ============ */
  #epk{
    padding:150px 0;
    text-align:center;
  }
  #epk .bg-tint{background:rgba(4,2,2,0.72);}
  .epk-logo{
    font-family:'Violence', cursive;
    color:var(--red-bright);
    font-size:clamp(48px, 8vw, 78px);
    margin-bottom:6px;
  }
  .epk-sub{
    font-size:13px;
    letter-spacing:0.22em;
    text-transform:uppercase;
    color:var(--paper-dim);
    margin-bottom:38px;
  }
  .btn-download{
    display:inline-block;
    padding:15px 44px;
    background:var(--red);
    color:var(--paper);
    font-size:12.5px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    border:1px solid var(--red);
    cursor:pointer;
    transition:background 0.3s ease, color 0.3s ease, transform 0.2s ease;
  }
  .btn-download:hover{background:transparent; color:var(--red-bright); transform:translateY(-2px);}

  #epk.epk-compact{
    padding:40px 6vw;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:280px;
  }
  #epk.epk-compact .epk-logo{font-size:clamp(34px, 6.4vw, 92px); margin-bottom:6px;}
  #epk.epk-compact .epk-sub{font-size:16px; margin-bottom:34px;}
  #epk.epk-compact .btn-download{padding:13px 32px; font-size:12px;}

  @media (max-width: 820px){
    #epk.epk-compact{min-height:220px;}
  }

  .toast{
    position:fixed;
    bottom:30px; left:50%;
    transform:translate(-50%, 20px);
    background:rgba(20,6,6,0.96);
    border:1px solid rgba(200,30,30,0.4);
    color:var(--paper);
    padding:14px 26px;
    font-size:13px;
    letter-spacing:0.06em;
    z-index:3000;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.35s ease, transform 0.35s ease;
  }
  .toast.show{opacity:1; transform:translate(-50%, 0); pointer-events:auto;}

  /* ============ FOOTER ============ */
  footer{
    background:var(--maroon);
    padding:14px 6vw;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
  }
  footer img{height:26px; opacity:0.92;}
  footer p{
    font-size:11.5px;
    letter-spacing:0.1em;
    color:rgba(236,230,220,0.85);
  }