/* BL Studios V22 — final Chroma hero, approved menu and native project players. */

/* Hero: the canvas owns the image; no extra circles or pointer effects. */
.hero--reel{
  background:#010204!important;
}
.hero__field{
  z-index:1!important;
  background:#010204!important;
  filter:saturate(1.04) contrast(1.04)!important;
  transform:translateZ(0);
}
.hero__depth{
  z-index:2!important;
  opacity:1!important;
  background:linear-gradient(90deg,rgba(0,0,0,.19),transparent 46%,rgba(2,3,12,.08))!important;
}
.hero__depth:before,.hero__depth:after{display:none!important}
.hero--reel:before{
  z-index:3!important;
  background:linear-gradient(180deg,rgba(1,2,4,.1),transparent 43%,rgba(1,2,5,.54))!important;
}
.hero--reel:after{z-index:4!important;opacity:.035!important}
.hero__content,.hero__scroll{z-index:6!important}

/* Approved menu: one language, one baseline and a numbered editorial grid. */
.menu{
  z-index:65!important;
  padding:clamp(132px,13vh,176px) var(--pad) clamp(42px,6vh,76px)!important;
  display:block!important;
  background:
    radial-gradient(ellipse at 83% 17%,rgba(47,51,255,.94) 0,rgba(31,35,218,.56) 25%,rgba(11,15,67,.22) 50%,transparent 72%),
    linear-gradient(118deg,#07090e 0,#080a13 47%,#10114a 100%)!important;
}
.menu nav{
  width:100%!important;
  display:block!important;
  border-top:1px solid rgba(255,255,255,.2)!important;
}
.menu nav a{
  width:100%!important;
  min-height:clamp(92px,13.2vh,148px)!important;
  padding:.055em 0 .075em!important;
  display:grid!important;
  grid-template-columns:clamp(54px,5.2vw,88px) minmax(0,1fr)!important;
  align-items:start!important;
  gap:0!important;
  border-bottom:1px solid rgba(255,255,255,.2)!important;
  font-size:clamp(56px,7.25vw,124px)!important;
  font-weight:300!important;
  line-height:.86!important;
  letter-spacing:-.066em!important;
  transition:color .32s ease,padding-left .5s cubic-bezier(.16,1,.3,1)!important;
}
.menu nav a:hover,.menu nav a:focus-visible{
  color:#aeb6ff!important;
  padding-left:clamp(7px,.7vw,14px)!important;
}
.menu nav small{
  width:auto!important;
  margin:.72em 0 0!important;
  color:#9ea9ff!important;
  font:10px/1 var(--mono)!important;
  letter-spacing:.08em!important;
  font-variant-numeric:tabular-nums!important;
}
.menu>p{
  position:absolute!important;
  right:var(--pad)!important;
  bottom:clamp(30px,5vh,60px)!important;
  margin:0!important;
  color:rgba(255,255,255,.82)!important;
  text-align:right!important;
  font:11px/1.55 var(--mono)!important;
  letter-spacing:.08em!important;
}
body.menu-open .nav{
  z-index:72!important;
  mix-blend-mode:normal!important;
  border-bottom-color:transparent!important;
}
body.menu-open .nav .brand,body.menu-open .nav .brand img{
  width:clamp(178px,13vw,248px)!important;
  height:58px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
body.menu-open .menu-button{
  min-width:112px;
  justify-content:center;
  padding:12px 17px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(7,9,18,.12);
}
body.menu-open .menu-button i{
  font-size:19px!important;
}

/* Internal project viewer: native video, correct aspect ratio and fullscreen. */
.project-modal{
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
.modal__media{
  position:relative!important;
  width:100%!important;
  height:clamp(520px,78svh,960px)!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  background:#000!important;
}
.modal__video,.modal__frame{
  display:none!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  background:#000!important;
}
.modal__video{
  object-fit:contain!important;
  object-position:center!important;
}
.modal__video.is-active,.modal__frame.is-active{display:block!important}
.project-modal[data-orientation="vertical"] .modal__video{
  width:min(100%,calc(78svh * .5625))!important;
  margin:auto!important;
}
.modal__fullscreen{
  position:absolute!important;
  z-index:4!important;
  right:20px!important;
  bottom:20px!important;
  padding:11px 14px!important;
  border:1px solid rgba(255,255,255,.42)!important;
  border-radius:999px!important;
  background:rgba(4,5,9,.72)!important;
  color:#fff!important;
  backdrop-filter:blur(12px)!important;
  font:9px/1 var(--mono)!important;
  letter-spacing:.1em!important;
}
.modal__info{
  min-height:22svh!important;
  align-items:start!important;
}

@media(max-width:800px){
  .hero__field{filter:saturate(1.03) contrast(1.035)!important}
  .menu{padding:102px 20px 34px!important}
  .menu nav a{
    min-height:clamp(70px,11.6vh,98px)!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    font-size:clamp(43px,13vw,72px)!important;
    line-height:.9!important;
  }
  .menu nav small{margin:.65em 0 0!important;font-size:8px!important}
  .menu>p{right:20px!important;bottom:24px!important;font-size:8px!important}
  body.menu-open .menu-button{min-width:92px;padding:10px 13px}
  body.menu-open .nav .brand,body.menu-open .nav .brand img{width:146px!important;height:46px!important}
  .modal__media{height:76svh!important;min-height:420px!important}
  .project-modal[data-orientation="vertical"] .modal__video{
    width:min(100%,calc(76svh * .5625))!important;
  }
  .modal__fullscreen{right:12px!important;bottom:12px!important}
}

@media(prefers-reduced-motion:reduce){
  .menu nav a{transition:none!important}
}