/* ============================================
   video-opening.css — Section 02_Video_Opening
   Based on Figma frame: 02_Video_Opening (393 x 852)
   Generated from Figma MCP data
   ============================================ */

/* --- Section Wrapper --- */
#video-opening-section {
  position: relative;
  width: 100%;
  /* Diisi JS dari visualViewport agar tinggi mengikuti area yang benar-benar
     terlihat saat address bar browser masih tampil. */
  height: var(--vo-viewport-height, 100vh);
  height: var(--vo-viewport-height, 100dvh);
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-color: #000;
  overflow: hidden;
  touch-action: pan-y;
}

/* --- Scale Box Container --- */
.video-opening-scale-box {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

/* --- Mobile Preview Container (393 x 852) --- */
.video-opening-wrapper {
  position: relative;
  width: var(--s1-width);
  height: var(--s1-height);
  background-color: var(--s1-bg);
  overflow: hidden;
  flex-shrink: 0;
  /* Pertahankan bagian bawah video ketika viewport lebih pendek. */
  transform-origin: bottom center;
}

/* --- Video Background --- */
.video-opening-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 1;
  pointer-events: none;
  touch-action: pan-y;
}

/* --- Overlay & Layer Ordering --- */
.vo-overlay {
  position: absolute;
  left: var(--s1-overlay-x);
  top: var(--s1-overlay-y);
  width: var(--s1-overlay-width);
  height: var(--s1-overlay-height);
  background-color: var(--s1-overlay-color);
  opacity: var(--s1-overlay-opacity);
  z-index: var(--s1-overlay-z);
  transform: rotate(var(--s1-overlay-rotate));
}

/* --- Texts --- */
.vo-text-wedding {
  position: absolute;
  left: var(--s1-wedding-x);
  top: var(--s1-wedding-y);
  width: var(--s1-wedding-width);
  height: var(--s1-wedding-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s1-wedding-font-size);
  font-weight: 700;
  color: var(--s1-wedding-color);
  text-align: center;
  line-height: var(--s1-wedding-line-height);
  letter-spacing: var(--s1-wedding-letter-spacing);
  opacity: var(--s1-wedding-opacity);
  z-index: var(--s1-wedding-z);
  transform: rotate(var(--s1-wedding-rotate));
}

.vo-text-umi {
  position: absolute;
  left: var(--s1-umi-x);
  top: var(--s1-umi-y);
  width: var(--s1-umi-width);
  height: var(--s1-umi-height);
  font-family: 'Dancing Script', cursive;
  font-size: var(--s1-umi-font-size);
  font-weight: 400;
  color: var(--s1-umi-color);
  text-align: center;
  line-height: var(--s1-umi-line-height);
  letter-spacing: var(--s1-umi-letter-spacing);
  opacity: var(--s1-umi-opacity);
  z-index: var(--s1-umi-z);
  transform: rotate(var(--s1-umi-rotate));
}

.vo-text-ampersand {
  position: absolute;
  left: var(--s1-ampersand-x);
  top: var(--s1-ampersand-y);
  width: var(--s1-ampersand-width);
  height: var(--s1-ampersand-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s1-ampersand-font-size);
  font-weight: 500;
  color: var(--s1-ampersand-color);
  text-align: center;
  line-height: var(--s1-ampersand-line-height);
  letter-spacing: var(--s1-ampersand-letter-spacing);
  opacity: var(--s1-ampersand-opacity);
  z-index: var(--s1-ampersand-z);
  transform: rotate(var(--s1-ampersand-rotate));
}

.vo-text-ilham {
  position: absolute;
  left: var(--s1-ilham-x);
  top: var(--s1-ilham-y);
  width: var(--s1-ilham-width);
  height: var(--s1-ilham-height);
  font-family: 'Dancing Script', cursive;
  font-size: var(--s1-ilham-font-size);
  font-weight: 400;
  color: var(--s1-ilham-color);
  text-align: center;
  line-height: var(--s1-ilham-line-height);
  letter-spacing: var(--s1-ilham-letter-spacing);
  opacity: var(--s1-ilham-opacity);
  z-index: var(--s1-ilham-z);
  transform: rotate(var(--s1-ilham-rotate));
}

.vo-text-thanks {
  position: absolute;
  left: var(--s1-thanks-x);
  top: var(--s1-thanks-y);
  width: var(--s1-thanks-width);
  height: var(--s1-thanks-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s1-thanks-font-size);
  font-weight: 700;
  color: var(--s1-thanks-color);
  text-align: center;
  line-height: var(--s1-thanks-line-height);
  letter-spacing: var(--s1-thanks-letter-spacing);
  opacity: var(--s1-thanks-opacity);
  z-index: var(--s1-thanks-z);
  transform: rotate(var(--s1-thanks-rotate));
}

.vo-text-date {
  position: absolute;
  left: var(--s1-date-x);
  top: var(--s1-date-y);
  width: var(--s1-date-width);
  height: var(--s1-date-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--s1-date-font-size);
  font-weight: 700;
  color: var(--s1-date-color);
  text-align: center;
  line-height: var(--s1-date-line-height);
  letter-spacing: var(--s1-date-letter-spacing);
  opacity: var(--s1-date-opacity);
  z-index: var(--s1-date-z);
  transform: rotate(var(--s1-date-rotate));
}

/* --- Icons --- */
.section-1-icon-1 {
  position: absolute;
  left: var(--s1-icon1-x);
  top: var(--s1-icon1-y);
  width: var(--s1-icon1-width);
  height: var(--s1-icon1-height);
  opacity: var(--s1-icon1-opacity);
  z-index: var(--s1-icon1-z);
  transform: rotate(var(--s1-icon1-rotate));
  object-fit: contain;
}

.section-1-icon-1-2 {
  position: absolute;
  left: var(--s1-icon1-2-x);
  top: var(--s1-icon1-2-y);
  width: var(--s1-icon1-2-width);
  height: var(--s1-icon1-2-height);
  opacity: var(--s1-icon1-2-opacity);
  z-index: var(--s1-icon1-2-z);
  transform: rotate(var(--s1-icon1-2-rotate));
  object-fit: contain;
}