/* VS dark redesign of the homepage "OUR LATEST PRODUCTION" section (2026).
   Additive layer — injected on the homepage only by inject_dark_production.py.
   Everything dark-dependent is gated on .vs-dark-on (set by
   vs-dark-production.js) so JS-off degrades to the original light section
   instead of white-on-white text.
   NOTE: the ut_* ids below come from the theme's render of the front page;
   if a future re-export changes them, update them here and in the JS. */

/* Dark stage: the row also holds the Showreel intro (stays light), so the
   panel is anchored to the row BOTTOM with a height measured from the
   section's own blocks (--vs-dark-h, set by the JS). Full-bleed via 100vw
   so it works even if WPBakery row stretching hasn't initialised. */
#ut-row-6a2a1090d2040{position:relative;z-index:0;padding-bottom:clamp(96px,10vw,160px);}
#ut-row-6a2a1090d2040.vs-dark-on::before{
  content:"";position:absolute;left:calc(50% - 50vw);width:100vw;bottom:0;height:var(--vs-dark-h,0px);z-index:-1;
  background:
    radial-gradient(60% 44% at 50% 0%, rgba(72,96,255,.08), transparent 70%),
    radial-gradient(52% 40% at 50% 100%, rgba(210,0,0,.06), transparent 72%),
    #070709;
  pointer-events:none;
}

/* Typography: white on dark */
.vs-dark-on #ut_header_6a2a1090d4011 h1.section-title,
.vs-dark-on #ut_header_6a2a1090d4011 h1.section-title span{color:#ffffff !important;}
.vs-dark-on #ut_header_6a2a1090d4011 .lead,
.vs-dark-on #ut_header_6a2a1090d4011 .lead p{color:rgba(255,255,255,.68) !important;}

/* Backlight: blurred copy of the still glows behind the frame */
#ut_am_wrap_6a2a1090d50fc{position:relative;overflow:visible !important;}
.vs-dark-on #ut_am_wrap_6a2a1090d50fc::before{
  content:"";position:absolute;left:-5%;right:-5%;top:-5%;bottom:-5%;
  background:url('/wp-content/uploads/2025/10/firstpage.jpeg') center/cover no-repeat;
  filter:blur(52px) saturate(1.7) brightness(1.27);
  opacity:.51;border-radius:56px;pointer-events:none;z-index:0;
}

/* Frame: 2px glass bezel + inner hairline */
#ut_reveal_6a2a1090d50fd{
  display:block;position:relative;z-index:1;
  padding:2px;border-radius:26px;
  background:linear-gradient(140deg,rgba(255,255,255,.34),rgba(255,255,255,.08) 30%,rgba(255,255,255,.03) 55%,rgba(255,255,255,.2) 100%);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.75);
}
#ut_reveal_6a2a1090d50fd .ut-animated-image-zoom{position:relative;border-radius:24px;overflow:hidden;background:#0d0d12;}
#ut_reveal_6a2a1090d50fd .ut-animated-image-zoom::after{
  content:"";position:absolute;inset:0;border-radius:24px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.05);
  pointer-events:none;
}
#ut_am_6a2a1090d50fb{display:block;width:100%;height:auto;}

/* CTA: brand red, soft glow */
#bklyn_btn_6a2a1090d5187{margin-top:clamp(44px,6vw,72px);}
#bklyn_btn_6a2a1090d5187 a.bklyn-btn{
  background-color:#d20000 !important;color:#fff !important;
  border-radius:10px !important;
  box-shadow:0 12px 40px -10px rgba(210,0,0,.5),0 2px 8px rgba(210,0,0,.25);
  transition:transform .35s cubic-bezier(.22,.68,.26,1),box-shadow .35s ease,background-color .35s ease;
}
#bklyn_btn_6a2a1090d5187 a.bklyn-btn:hover{
  background-color:#e80000 !important;transform:translateY(-2px);
  box-shadow:0 18px 54px -12px rgba(210,0,0,.65),0 4px 12px rgba(210,0,0,.3);
}

#ut_am_wrap_6a2a1090d50fc,#ut_header_6a2a1090d4011{will-change:transform;}

@media (max-width:767px){
  .vs-dark-on #ut_am_wrap_6a2a1090d50fc::before{left:-3%;right:-3%;top:-3%;bottom:-3%;filter:blur(30px) saturate(1.6) brightness(1.24);opacity:.44;border-radius:28px;}
  #ut_reveal_6a2a1090d50fd{border-radius:16px;}
  #ut_reveal_6a2a1090d50fd .ut-animated-image-zoom,
  #ut_reveal_6a2a1090d50fd .ut-animated-image-zoom::after{border-radius:14px;}
}
@media (prefers-reduced-motion: reduce){
  #ut_am_wrap_6a2a1090d50fc,#ut_header_6a2a1090d4011{will-change:auto;}
}