/* the intro film: plays only when asked, with sound */

/* the box: square corners like everything on the site, and a hairline edge,
   so the film still reads as a box when its own background is as light as the page */
.vwrap{ overflow:hidden; background:transparent !important }
.vplay{ position:relative; width:100%; height:100%; overflow:hidden; background:#2D120D }
.vplay::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  border:.5px solid rgba(45,18,13,.38) }
.vplay video{ display:block; width:100%; height:100%; object-fit:cover; cursor:pointer }

/* the big button: play, play again after a pause, replay at the end */
.vp-big{ position:absolute; left:50%; top:74%; z-index:3; transform:translate(-50%,-50%);   /* low, over the sweater, never over the face */
  background:#CDE3E8; color:#2D120D; font-size:28px; line-height:40px; font-weight:500; letter-spacing:0;
  padding:6px 18px 6px; white-space:nowrap; cursor:pointer;
  transition:background .25s ease, color .25s ease, opacity .3s ease }
.vp-big:hover, .vp-big:focus-visible{ background:#2D120D; color:#FFFAD8 }
.vplay[data-state="playing"] .vp-big{ opacity:0; pointer-events:none }

/* the small controls along the top (the titles sit at the bottom), shown while playing */
.vp-bar{ position:absolute; left:16px; right:16px; top:16px; z-index:3; display:flex; justify-content:space-between;
  align-items:flex-start; gap:6px; opacity:0; pointer-events:none; transition:opacity .3s ease }
.vp-bar .r{ display:flex; gap:6px }
.vplay.show .vp-bar, .vplay[data-state="paused"] .vp-bar{ opacity:1; pointer-events:auto }
.vp-bar button, .vp-time{ background:#2D120D; color:#FFFAD8; font-size:12px; line-height:15px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; padding:4px 7px 3px 8px; white-space:nowrap }
.vp-bar button{ cursor:pointer }
.vp-bar button:hover, .vp-bar button:focus-visible{ background:#CDE3E8; color:#2D120D }
.vp-time{ font-variant-numeric:tabular-nums; letter-spacing:.08em }

/* the timeline along the bottom edge: a hairline that thickens under the
   pointer and can be dragged to go back or forward */
.vp-prog{ position:absolute; left:0; right:0; bottom:0; height:22px; z-index:5; cursor:pointer; touch-action:none;
  opacity:0; pointer-events:none; transition:opacity .3s ease }
.vplay.show .vp-prog, .vplay[data-state="paused"] .vp-prog, .vplay.drag .vp-prog{ opacity:1; pointer-events:auto }
.vp-prog i{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,250,216,.32); transition:height .2s ease }
.vp-prog b{ position:absolute; left:0; bottom:0; height:3px; width:0; background:#FFFAD8; transition:height .2s ease }
.vp-prog s{ position:absolute; bottom:0; width:3px; height:13px; margin-left:-1px; background:#FFFAD8;
  box-shadow:0 0 0 .5px rgba(45,18,13,.45); transform:scaleY(0); transform-origin:50% 100%; transition:transform .2s ease; text-decoration:none }
.vp-prog:hover i, .vp-prog:hover b, .vplay.drag .vp-prog i, .vplay.drag .vp-prog b{ height:5px }
.vp-prog:hover s, .vplay.drag .vp-prog s{ transform:scaleY(1) }

/* full screen: the whole box, the picture letterboxed on black */
.vplay:fullscreen{ background:#000 }
.vplay:fullscreen::after{ display:none }
.vplay:fullscreen video{ object-fit:contain }
.vplay:-webkit-full-screen{ background:#000 }
.vplay:-webkit-full-screen::after{ display:none }
.vplay:-webkit-full-screen video{ object-fit:contain }

@media (max-width:899px){
  .vp-big{ font-size:18px; line-height:26px; padding:4px 12px 4px }
  .vp-bar{ left:8px; right:8px; top:8px; gap:4px }
  .vp-bar .r{ gap:4px }
  .vp-bar button, .vp-time{ font-size:9px; line-height:12px; padding:3px 5px 2px 6px; letter-spacing:.12em }
  .vp-time{ display:none }
  .vp-prog{ height:26px }
  .vp-prog s{ transform:scaleY(1) }
}