/* The Next Layer of Intelligence — clean cut: the full-bleed video, nothing else.
   Plate geometry and fades per ds handoff spec (1487x1058 reference canvas). */

:root{
  --u:calc(100vh / 1058);
}
@supports (height:100dvh){ :root{ --u:calc(100dvh / 1058); } }
html,body{height:100%;margin:0;padding:0;background:#050505;overflow:hidden;}
*{box-sizing:border-box;}

.stage{position:fixed;inset:0;overflow:hidden;background:#050505;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
.plate{position:absolute;inset:0;overflow:hidden;}
.plate-video{position:absolute;left:50%;top:calc(1 * var(--u));width:calc(1492 * var(--u));height:calc(1054 * var(--u));transform:translateX(calc(-50% - calc(0.5 * var(--u))));object-fit:cover;pointer-events:none;transition:opacity .6s linear;}
.plate-video.v-dark{opacity:0;}
.plate::after{content:"";position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(to bottom, rgba(5,5,5,0) 78.8%, rgba(5,5,5,.23) 79.6%, rgba(5,5,5,.45) 81.4%, rgba(5,5,5,.75) 83.3%, rgba(5,5,5,.84) 85.2%, rgba(5,5,5,.888) 88%, rgba(5,5,5,.905) 91%, rgba(5,5,5,.96) 95%, #050505 100%),
 linear-gradient(to right, #050505 calc(50% - 746 * var(--u)), transparent calc(50% - 676 * var(--u)), transparent calc(50% + 676 * var(--u)), #050505 calc(50% + 746 * var(--u)));}

@media (max-aspect-ratio:11/10){
  .plate-video{inset:0;left:0;top:0;width:100%;height:100%;transform:none;object-position:43% center;}
  .plate::after{background:
    linear-gradient(to right, rgba(5,5,5,.86), rgba(5,5,5,.66) 42%, rgba(5,5,5,.20) 78%, rgba(5,5,5,.10) 100%),
    linear-gradient(to bottom, rgba(5,5,5,.72) 0%, rgba(5,5,5,.34) 24%, rgba(5,5,5,.34) 56%, rgba(5,5,5,.80) 82%, rgba(5,5,5,.97) 94%, #050505 100%);}
}
@media (min-width:600px) and (max-aspect-ratio:11/10){
  .plate-video{object-position:44% center;}
  .plate::after{background:
    linear-gradient(to right, rgba(5,5,5,.84), rgba(5,5,5,.60) 42%, rgba(5,5,5,.16) 78%, rgba(5,5,5,.06) 100%),
    linear-gradient(to bottom, rgba(5,5,5,.66) 0%, rgba(5,5,5,.28) 24%, rgba(5,5,5,.30) 56%, rgba(5,5,5,.78) 82%, rgba(5,5,5,.96) 94%, #050505 100%);}
}