/* REAL FIX: cherry blossom canvas stays fullscreen WITHOUT breaking video envelopes */

#petalCanvas.petal-canvas,
canvas#petalCanvas{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:auto !important;
  bottom:auto !important;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  display:block !important;
  z-index:3 !important;
  pointer-events:none !important;
  opacity:.88 !important;
  margin:0 !important;
  padding:0 !important;
  transform:none !important;
  background:transparent !important;
  mix-blend-mode:screen;
}

#intro,
#videoPage{
  position:relative !important;
  z-index:1 !important;
}

#intro .stars,
#intro::before{
  z-index:0 !important;
}

#intro .balloons{
  z-index:4 !important;
}

#intro .intro-content{
  position:relative !important;
  z-index:6 !important;
}

/* IMPORTANT: do NOT make .video-envelope position:relative.
   That is what broke the video page. */
#videoPage .card{
  position:relative !important;
  z-index:6 !important;
}

#videoPage .video-wrap,
#videoPage .continue-btn{
  position:relative !important;
  z-index:6 !important;
}

/* Restore the envelope layout on both sides of the video */
#videoPage .video-envelope{
  position:absolute !important;
  top:42% !important;
  transform:translateY(-50%) !important;
  z-index:8 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:6px !important;
}

#videoPage .left-envelope{
  left:clamp(2px, 3vw, 28px) !important;
  right:auto !important;
}

#videoPage .right-envelope{
  right:clamp(2px, 3vw, 28px) !important;
  left:auto !important;
}

/* Keep hidden sections actually hidden above the petal overlay */
.hidden{
  display:none !important;
}

/* Mobile envelope layout stays stacked above video if screen is small */
@media (max-width:760px){
  #videoPage .video-envelope{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
    display:inline-flex !important;
    margin:8px 12px 16px !important;
  }

  #videoPage .left-envelope,
  #videoPage .right-envelope{
    left:auto !important;
    right:auto !important;
  }
}