.vw { position: relative; }

body { background:#a242cf; }

/* TEASER */
.vw .video-teaser{
  position:fixed;
  left:18px;
  bottom:18px;
  width:92px;
  height:92px;
  z-index:9999;
}

.vw .video-teaser__bubble{
  width: 82px;
  height: 82px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;           /* vigtig */
  padding: 0;
    box-shadow:
	    0 12px 30px rgba(0,0,0,0.7), /* “løfter” boblen */
	    0 2px 8px rgba(0,0,0,.2);   /* ekstra blød skygge */
}


.vw .video-teaser__thumb{
  width: 100%;
  height: 100%;
  display: block;             /* vigtig (fjerner “mellemrum”) */
  object-fit: cover;          /* vigtig (fylder uden hvide kanter) */
  object-position: center;    /* centrer motivet */
}

.vw .video-teaser__close{
  position:absolute;
  top:0px;
  right:0px;
  width:28px;
  height:28px;
  border:none;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
}

/* Modal er altid “til stede”, men skjult */
.vw .vid-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;              /* vigtigt: aldrig display:none */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s; /* langsomt + delay */
}

/* Når den er åben */
.vw .vid-modal[aria-hidden="false"]{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 1.2s ease, visibility 0.3s; /* visibility med det samme */
}

/* Drawer start-tilstand (tydeligt fra hjørnet) */
.vw .vid-drawer{
  transform-origin: left bottom;
  transform: translate(-10px, 140px) scale(.35);
  opacity: 0;
  transition: transform .6s ease, opacity 1.0s ease;
  will-change: transform, opacity;
}

/* Drawer slut-tilstand */
.vw .vid-modal[aria-hidden="false"] .vid-drawer{
  transform: translate(0, 0) scale(1);
  opacity: 1;
}
.vw .vid-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.2); }

.vw .vid-drawer{
  position:absolute;
  left:14px;
  top:78px;
  bottom:14px;
  width:min(430px, calc(100vw - 28px));
  border-radius:14px;
  overflow:hidden;
  background:#000;
}

.vw .vid-progress{
  position:absolute;
  top:10px; left:14px; right:14px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.35);
  z-index:3;
  overflow:hidden;
}

.vw .vid-progress__bar{
  height:100%;
  width:0%;
  background:#fff;
}

.vw .vid-top{
  position:absolute;
  top:22px; left:14px; right:14px;
  display:flex;
  justify-content:space-between;
  z-index:4;
  pointer-events:none;
}

.vw .vid-top__left{ display:flex; gap:10px; pointer-events:auto; }

.vw .vid-btn{
  pointer-events:auto;
  width:40px; height:40px;
  border:none;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  cursor:pointer;
}

.vw .vid-stage{
  position:absolute;
  inset:0;
  overflow:hidden; /* vigtig: klipper så den glider “ud af vinduet” */
  background:#000;
}

.vw .vid-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform: translateY(0);
  transition: transform .7s cubic-bezier(.2,.9,.3,0.9);
  will-change: transform;
}

/* startpositioner vi bruger ved skift */
.vw .is-next-in   { transform: translateY(100%); }   /* kommer nedefra */
.vw .is-prev-in   { transform: translateY(-100%); }  /* kommer oppefra */
.vw .is-next-out  { transform: translateY(-100%); }  /* ryger op */
.vw .is-prev-out  { transform: translateY(100%); }   /* ryger ned */

.vw .vid-video.is-fading{ opacity:0; }

@media (max-width: 768px){
  .vw .vid-modal{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
  }

  .vw .vid-stage,
  .vw .vid-video{
    width: 100% !important;
    height: 100% !important;
  }

  .vw .vid-video{ object-fit: cover; display:block; }
}

.vw .vid-video { z-index: 1; }
.vw .vid-video.is-top { z-index: 2; }
/* så vi kan sætte start-position uden at animere */
.vw .no-trans { transition: none !important; }

.vw .vid-video.is-hidden{
  visibility: hidden;
}
.vw .vid-video.is-hidden.is-top{
  visibility: visible; /* sikkerhed: top skal kunne vises */
}



@media (max-width: 768px){
  .vw .vid-modal{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
  }

  /* VIGTIGT: gør drawer fullscreen (ellers bliver den ved med at være 430px) */
  .vw .vid-drawer{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-width: none;
    border-radius: 0;
    left: 0; top: 0; right: 0; bottom: 0; /* sikkerhed */
  }

  .vw .vid-stage{
    position: absolute;
    inset: 0;
  }

  .vw .vid-video{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* lidt luft til UI */
  .vw .vid-progress{ left: 16px; right: 16px; top: 14px; }
  .vw .vid-top{ left: 16px; right: 16px; top: 26px; }
}


/* Når modalen er åben: undgå scroll/overscroll og gør touch-gestures “app-agtige” */
.vw .vid-modal[aria-hidden="false"],
.vw .vid-stage,
.vw .vid-video{
  overscroll-behavior: contain;
  touch-action: none; /* vigtigt: ingen browser-gestures */
}


/* Når modalen er åben, vil vi selv styre vertikale swipes */
.vw .vid-modal[aria-hidden="false"] [data-role="stage"]{
  touch-action: pan-x;          /* bloker vertikal scroll/gesture */
  overscroll-behavior: contain; /* undgå “rubber band” */
}