@media(min-width:701px){.trailer-modal{inset:auto;left:50%;top:50%;width:min(96vw,calc(90vh * 1.6964));height:auto;aspect-ratio:950/560;transform:translate(-50%,-50%);overflow:visible;padding:0;background:#080a0e url('./wink-living-room-tv.webp') center/100% 100% no-repeat;box-shadow:0 0 0 100vmax rgba(3,4,7,.9)}.trailer-modal:before{display:none}.trailer-shell{position:absolute;z-index:2;left:21.26%;top:16.79%;width:66%;filter:none}.trailer-stage{border-radius:1px}.trailer-help{position:absolute;z-index:5;left:auto;right:132px;top:-62px;bottom:auto;width:auto;padding:11px 15px;border-color:rgba(255,255,255,.24);border-radius:99px;background:rgba(12,14,18,.94);align-items:center;flex-direction:row}.trailer-help span{display:none}.trailer-help a{text-decoration:none;white-space:nowrap}.trailer-close{position:absolute;z-index:5;left:auto;right:0;top:-62px;bottom:auto;transform:none;padding:11px 15px;border-radius:99px;background:rgba(12,14,18,.94);opacity:1}.trailer-modal:has(.trailer-stage.is-ready) .trailer-help{display:none}.trailer-modal:has(.trailer-stage.is-ready) .trailer-close{position:absolute;left:auto;right:0;top:-62px;bottom:auto;transform:none;opacity:1;border-radius:99px;padding:11px 15px}}
@media(min-width:701px) and (max-height:760px){.trailer-modal{width:min(94vw,calc(82vh * 1.6964))}}
@media(min-width:701px){.trailer-shell{left:21.9%;top:17%;width:65.2%}}
@media(min-width:701px) and (min-height:761px){.trailer-modal{width:min(99vw,calc(96vh * 1.6964))}}
@media(min-width:701px){.trailer-shell{left:22.9%;top:17.7%;width:63.2%}.trailer-stage{box-shadow:0 0 0 2px #090a0d,0 0 18px #000}}

/* A self-contained TV crop keeps the screen and player aligned on portrait phones. */
@media(max-width:700px){
  .trailer-modal{
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:0;
    background:#07090d;
  }
  .trailer-modal:before{
    content:"";
    position:absolute;
    z-index:0;
    left:50%;
    top:50%;
    width:145vw;
    max-width:none;
    aspect-ratio:950/560;
    transform:translate(-50%,-50%);
    background:url('./wink-living-room-tv.webp') center/100% 100% no-repeat;
    pointer-events:none;
  }
  .trailer-modal:after{background:rgba(3,4,7,.28)}
  .trailer-shell{
    position:relative;
    z-index:2;
    left:auto;
    top:auto;
    width:92vw;
    max-width:none;
    padding:0;
    border:0;
    border-radius:2px;
    background:#030407;
    filter:none;
    box-shadow:0 0 0 2px #090a0d,0 12px 34px #000;
  }
  .trailer-stage{width:100%;aspect-ratio:16/9;border-radius:1px}
  .trailer-close{
    position:absolute;
    left:auto;
    right:0;
    top:-58px;
    padding:11px 15px;
    white-space:nowrap;
  }
  .trailer-help{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 12px);
    bottom:auto;
    width:100%;
    padding:10px 12px;
    gap:4px;
    border-radius:10px;
    background:rgba(12,14,18,.94);
  }
  .trailer-modal:has(.trailer-stage.is-ready) .trailer-help{display:none}
}
@media(max-width:380px){.trailer-shell{width:94vw}.trailer-close{top:-54px}}

/* On phones the player itself is the TV screen: one frame, one aspect ratio. */
@media(max-width:700px){
  .trailer-modal{inset:0;width:100vw;height:100dvh;min-height:100dvh;max-height:100dvh;display:grid;place-items:center;overflow:hidden;padding:0 12px;background:linear-gradient(rgba(4,5,8,.38),rgba(4,5,8,.7)),url('./wink-living-room-v1.webp') 66% center/cover no-repeat}
  .trailer-modal:before{display:none}
  .trailer-modal:after{background:rgba(3,4,7,.18)}
  .trailer-shell{position:relative;left:auto;top:auto;width:100%;max-width:680px;padding:9px;border:2px solid #4b4650;border-radius:15px;background:#17151a;box-shadow:0 0 0 7px #242129,0 22px 55px #000;filter:none}
  .trailer-stage{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:7px;background-color:#000;box-shadow:inset 0 0 0 2px #050608}
  .trailer-shell iframe{inset:0;width:100%;height:100%;border-radius:7px}
  .trailer-close{position:absolute;right:0;top:-68px}
  .trailer-help{left:0;right:0;top:calc(100% + 18px);bottom:auto;width:100%}
}
@media(max-width:380px){.trailer-shell{width:100%}.trailer-close{top:-64px}}

/* Map the mobile player onto the television that is painted into the room. */
@media(max-width:700px){
  .trailer-modal{position:fixed;display:block;padding:0;background:#08090c url('./wink-screening-room-mobile-v1.png') center/cover no-repeat}
  .trailer-modal:before{display:none}
  .trailer-modal:after{background:linear-gradient(180deg,rgba(3,4,7,.08),transparent 25%,transparent 70%,rgba(3,4,7,.16))}
  .trailer-shell{position:absolute;z-index:2;left:calc(50% - 15.87dvh);top:29.77dvh;width:34.87dvh;max-width:none;padding:0;border:0;border-radius:1px;background:#030407;box-shadow:0 0 0 2px #090a0d,0 10px 28px #000;filter:none}
  .trailer-shell:before,.trailer-shell:after{display:none}
  .trailer-stage{width:100%;aspect-ratio:16/9;border-radius:1px;box-shadow:none}
  .trailer-shell iframe{border-radius:1px}
  .trailer-close{right:0;top:-56px}
  .trailer-help{top:calc(100% + 12px)}
}
@media(max-width:700px) and (max-aspect-ratio:9/20){
  .trailer-shell{left:10.9vw;top:29.77dvh;width:78.2vw}
}

/* Wide companion to the portrait screening room. */
@media(min-width:701px){
  .trailer-modal{width:min(98vw,calc(95dvh * 1.7768));aspect-ratio:1672/941;background:#08090c url('./wink-screening-room-desktop-v1.png') center/100% 100% no-repeat}
  .trailer-shell{left:33.61%;top:29.61%;width:32.72%;height:32.7%}
  .trailer-stage{width:100%;height:100%;aspect-ratio:auto}
  .trailer-shell iframe{width:100%;height:100%}
  .trailer-help,.trailer-close{top:-56px}
}

/* Wink's dimensional trailer reactions */
.trailer-wink{position:absolute;z-index:7;left:-18px;bottom:7%;display:flex;align-items:center;gap:10px;width:min(390px,42vw);pointer-events:none;opacity:0;transform:perspective(700px) translate3d(-72%,18px,80px) rotateY(34deg) scale(.82);transform-origin:left center;filter:drop-shadow(0 18px 20px rgba(0,0,0,.55));transition:opacity .35s ease,transform .72s cubic-bezier(.2,.9,.25,1.18)}
.trailer-wink.is-visible{opacity:1;transform:perspective(700px) translate3d(0,0,0) rotateY(0) scale(1)}
.trailer-wink.from-right{left:auto;right:-18px;flex-direction:row-reverse;transform-origin:right center;transform:perspective(700px) translate3d(72%,18px,80px) rotateY(-34deg) scale(.82)}
.trailer-wink.from-right.is-visible{transform:perspective(700px) translate3d(0,0,0) rotateY(0) scale(1)}
.trailer-wink img{display:block;width:138px;height:138px;object-fit:contain;animation:wink-float 2.8s ease-in-out infinite}
.trailer-wink-bubble{display:flex;flex-direction:column;gap:3px;max-width:238px;padding:13px 15px;border:1px solid rgba(255,207,96,.5);border-radius:15px;background:rgba(15,16,21,.94);box-shadow:0 12px 30px rgba(0,0,0,.42);backdrop-filter:blur(12px);color:#fff;font:700 13px/1.38 Manrope,sans-serif}
.trailer-wink-bubble b{color:#ffd468;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
@keyframes wink-float{50%{transform:translateY(-5px) rotate(1.5deg)}}
@media(max-width:700px){.trailer-wink{left:-8px;bottom:7%;width:94vw;gap:5px}.trailer-wink.from-right{right:-8px}.trailer-wink img{width:104px;height:104px}.trailer-wink-bubble{max-width:min(235px,62vw);padding:11px 13px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.trailer-wink{display:none}.trailer-wink img{animation:none}}