
.intro-video{
position:relative;
width:100%;
height:100vh;
overflow:hidden;
background:#000;
}
.intro-video video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
.intro-video::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(to bottom,rgba(0,0,0,.08),rgba(0,0,0,.28));
}
.intro-scroll{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
z-index:2;
color:#fff;
font-family:"Cormorant Garamond",serif;
letter-spacing:.3em;
font-size:.8rem;
opacity:.85;
}


/* =========================================================
   SHOW THE COMPLETE PORTRAIT VIDEO ON DESKTOP
   ========================================================= */

@media (min-width:769px){
  .intro-video{
    height:100vh!important;
    min-height:100vh!important;
    background:#000!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .intro-video video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#000!important;
  }

  .intro-video::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:#000;
  }

  .intro-video::after{
    z-index:1!important;
    background:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.02),
        rgba(0,0,0,.12)
      )!important;
    pointer-events:none;
  }

  .intro-video video{
    z-index:1!important;
  }

  .intro-scroll{
    z-index:3!important;
  }
}

/* Mobile remains immersive and full-screen */
@media (max-width:768px){
  .intro-video video{
    object-fit:cover!important;
    object-position:center center!important;
  }
}
