/* ============================================
   cover.css — Section 01_Cover
   Based on Figma frame: 01_cover (393 x 852)
   Generated from Figma MCP data
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Allura&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* --- Section Wrapper --- */
#cover-section {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Samakan area di luar kanvas cover dengan warna cover tema ini. */
  background-color: var(--cover-bg);
  overflow: hidden;
  z-index: var(--cover-z);
}

/* Cahaya dari kanan: sisi kanan dibiarkan terang, lalu bergradasi menjadi
   bayangan lembut ke arah kiri. Tidak menangkap klik pada elemen cover. */
#cover-section::after {
  content: '';
  position: absolute;
  inset: 0 0 0 0px;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0) 26%,
    rgba(0, 0, 0, 0.08) 58%,
    rgba(0, 0, 0, var(--cover-shadow-opacity)) 100%
  );
  pointer-events: none;
  z-index: 10;
}

/* --- Disable Scroll globally when cover is active --- */
html.cover-active,
body.cover-active {
  overflow: hidden !important;
  height: 100% !important;
}

/* --- Scale Box Container --- */
.cover-scale-box {
  position: relative;
  display: flex;
  justify-content: center;
}

/* --- Mobile Preview Container (393 x 852) --- */
.cover-wrapper {
  position: relative;
  width: var(--cover-width);
  height: var(--cover-height);
  background-color: var(--cover-bg);
  overflow: hidden;
  flex-shrink: 0;
  transform-origin: top center;
}

/* ---- Layer: Teks Atas "A Special Message Awaits.." ---- */
/* Figma: x=81, y=243, w=238, h=87, font: Allura 27px, #000000, center */
.cover-text-top {
  position: absolute;
  left: var(--cover-top-text-x);
  top: var(--cover-top-text-y);
  width: var(--cover-top-text-width);
  height: var(--cover-top-text-height);
  font-family: 'Allura', cursive;
  font-size: var(--cover-top-text-font-size);
  font-weight: 400;
  color: var(--cover-top-text-color);
  text-align: center;
  line-height: var(--cover-top-text-line-height);
  letter-spacing: var(--cover-top-text-letter-spacing);
  opacity: var(--cover-top-text-opacity);
  z-index: var(--cover-top-text-z);
  transform: rotate(var(--cover-top-text-rotate));
  pointer-events: none;
  user-select: none;
}

/* ---- Layer: envelope-body (x=106, y=345, w=182, h=111) ---- */
.cover-envelope-body {
  position: absolute;
  left: var(--cover-envelope-body-x);
  top: var(--cover-envelope-body-y);
  width: var(--cover-envelope-body-width);
  height: var(--cover-envelope-body-height);
  opacity: var(--cover-envelope-body-opacity);
  z-index: var(--cover-envelope-body-z);
  transform: rotate(var(--cover-envelope-body-rotate));
  cursor: pointer;
}

.cover-envelope-body img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Cahaya datang dari kanan, sehingga bayangan jatuh ke kiri-bawah. */
  filter: drop-shadow(-6px 8px 8px rgba(49, 37, 25, 0.28));
}

/* ---- Layer: envelope-flap (x=106, y=345, w=182, h=81) ---- */
/* Flap ditumpuk di atas body, transform-origin dari bawah untuk animasi buka */
.cover-envelope-flap {
  position: absolute;
  left: var(--cover-envelope-flap-x);
  top: var(--cover-envelope-flap-y);
  width: var(--cover-envelope-flap-width);
  height: var(--cover-envelope-flap-height);
  opacity: var(--cover-envelope-flap-opacity);
  z-index: var(--cover-envelope-flap-z);
  cursor: pointer;
  perspective: 400px;
  transform-style: preserve-3d;
}

/* ---- Layer: flower 1 (x=242, y=307, w=92, h=75) ---- */
/* flower 1 = kanan atas amplop */
.cover-flower-1 {
  position: absolute;
  left: var(--cover-flower-1-x);
  top: var(--cover-flower-1-y);
  width: var(--cover-flower-1-width);
  height: var(--cover-flower-1-height);
  opacity: var(--cover-flower-1-opacity);
  z-index: var(--cover-flower-1-z);
  transform: rotate(var(--cover-flower-1-rotate)) scaleX(var(--cover-flower-1-flip-x));
  pointer-events: none;
}

.cover-flower-1 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(-3px 5px 5px rgba(49, 37, 25, 0.2));
}

/* ---- Layer: flower 2 (x=58, y=401, w=96, h=78) ---- */
/* flower 2 = kiri bawah amplop */
.cover-flower-2 {
  position: absolute;
  left: var(--cover-flower-2-x);
  top: var(--cover-flower-2-y);
  width: var(--cover-flower-2-width);
  height: var(--cover-flower-2-height);
  opacity: var(--cover-flower-2-opacity);
  z-index: var(--cover-flower-2-z);
  transform: rotate(var(--cover-flower-2-rotate));
  pointer-events: none;
}

.cover-flower-2 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(-3px 5px 5px rgba(49, 37, 25, 0.2));
}

/* ---- Layer: wax seal (x=176, y=401, w=41, h=33) ---- */
/* Wax seal diletakkan di dalam flap, top = 401 - 345 = 56px */
.cover-wax-seal-group {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--cover-wax-seal-y) - var(--cover-envelope-flap-y));
  pointer-events: none;
  backface-visibility: hidden;
  z-index: var(--cover-wax-seal-z);
}

.cover-wax-seal {
  width: var(--cover-wax-seal-width);
  height: var(--cover-wax-seal-height);
  object-fit: contain;
  display: block;
  filter: drop-shadow(-2px 4px 4px rgba(49, 37, 25, 0.3));
}

/* ---- Layer: Teks Bawah "CLICK TO OPEN" ---- */
/* Figma: x=125, y=494, w=143, h=19, font: Cormorant Garamond 14px, #000000, center */
.cover-text-bottom {
  position: absolute;
  left: var(--cover-bottom-text-x);
  top: var(--cover-bottom-text-y);
  width: var(--cover-bottom-text-width);
  height: var(--cover-bottom-text-height);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--cover-bottom-text-font-size);
  font-weight: 400;
  color: var(--cover-bottom-text-color);
  text-align: center;
  letter-spacing: var(--cover-bottom-text-letter-spacing);
  opacity: var(--cover-bottom-text-opacity);
  z-index: var(--cover-bottom-text-z);
  transform: rotate(var(--cover-bottom-text-rotate));
  cursor: pointer;
  text-transform: uppercase;
}

/* ---- Status loading aset sebelum amplop dapat dibuka ---- */
.cover-assets-loading {
  position: absolute;
  left: 0;
  top: var(--cover-loading-y);
  z-index: calc(var(--cover-bottom-text-z) + 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cover-loading-gap);
  width: 100%;
  min-height: var(--cover-bottom-text-height);
  color: var(--cover-loading-color);
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--cover-loading-font-size);
  font-weight: 600;
  line-height: var(--cover-loading-line-height);
  letter-spacing: 0.06em;
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, visibility 220ms ease;
  pointer-events: none;
}

.cover-loading-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: min(var(--cover-loading-width), calc(100% - 40px));
  text-align: center;
}

.cover-loading-detail {
  font-size: 0.9em;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.cover-loading-spinner {
  width: var(--cover-loading-spinner-size);
  height: var(--cover-loading-spinner-size);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cover-loading-spin var(--cover-loading-speed) linear infinite;
}

/* Tombol pembuka baru terlihat dan aktif setelah aset siap. */
#cover-section:not(.assets-ready) .cover-text-bottom {
  visibility: hidden;
  pointer-events: none;
}

#cover-section:not(.assets-ready) .cover-envelope-body,
#cover-section:not(.assets-ready) .cover-envelope-flap,
#cover-section:not(.assets-ready) .cover-wax-seal {
  cursor: wait;
}

#cover-section.assets-ready .cover-assets-loading {
  opacity: 0;
  visibility: hidden;
}

@keyframes cover-loading-spin {
  to { transform: rotate(360deg); }
}

/* Sembunyikan section setelah selesai */
#cover-section.is-hidden {
  display: none;
}


/* =============================================
   ENTRANCE ANIMATIONS — Cover Staggered Intro
   ============================================= */

/* --- Keyframes --- */

@keyframes fadeUpNormal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* fadeUpFlip: flower-1 kanan atas — flip horizontal saat masuk */
@keyframes fadeUpFlip {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(var(--cover-flower-1-rotate)) scaleX(var(--cover-flower-1-flip-x));
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(var(--cover-flower-1-rotate)) scaleX(var(--cover-flower-1-flip-x));
  }
}

/* typewriter: CLICK TO OPEN */
@keyframes typewriter {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

/* cursorBlink: kedip terus setelah typewriter selesai */
@keyframes cursorBlink {

  0%,
  100% {
    border-right-color: currentColor;
  }

  50% {
    border-right-color: transparent;
  }
}


/* --- Title Line Spans --- */
/* span baris 1 dan 2 display block agar each line animates independently */
.cover-title-line-1,
.cover-title-line-2 {
  display: inline-block;
  opacity: 0;
  animation-name: fadeUpNormal;
  animation-duration: var(--cover-fadein-duration);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.cover-title-line-1 {
  animation-delay: var(--cover-delay-title-1);
}

.cover-title-line-2 {
  animation-delay: var(--cover-delay-title-2);
}


/* --- Envelope Body + Flap (animasi masuk bersama) --- */
.cover-envelope-body,
.cover-envelope-flap {
  opacity: 0;
  animation-name: fadeUpNormal;
  animation-duration: var(--cover-fadein-duration);
  animation-delay: var(--cover-delay-envelope);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


/* --- Flower 1 (kanan atas — fadeUpFlip) --- */
.cover-flower-1 {
  opacity: 0;
  animation-name: fadeUpFlip;
  animation-duration: var(--cover-fadein-duration);
  animation-delay: var(--cover-delay-flower-tr);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


/* --- Flower 2 (kiri bawah — fadeUpNormal) --- */
.cover-flower-2 {
  opacity: 0;
  animation-name: fadeUpNormal;
  animation-duration: var(--cover-fadein-duration);
  animation-delay: var(--cover-delay-flower-bl);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


/* --- Wax Seal image --- */
.cover-wax-seal {
  opacity: 0;
  animation-name: fadeUpNormal;
  animation-duration: var(--cover-fadein-duration);
  animation-delay: var(--cover-delay-seal-img);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


/* --- cover-text-bottom wrapper: masuk dulu, baru teks typewriter --- */
.cover-text-bottom {
  opacity: 0;
  animation-name: fadeUpNormal;
  animation-duration: var(--cover-fadein-duration);
  animation-delay: var(--cover-delay-seal-text);
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}


/* --- Typewriter: CLICK TO OPEN --- */
.cover-typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  /* cursor typewriter via border-right */
  border-right: 2px solid currentColor;
  vertical-align: bottom;
  animation:
    typewriter var(--cover-typewriter-duration) steps(13, end) var(--cover-typewriter-delay) forwards,
    cursorBlink var(--cover-typewriter-cursor-blink) step-end var(--cover-typewriter-delay) infinite;
}


/* =============================================
   REDUCED MOTION SUPPORT
   ============================================= */
@media (prefers-reduced-motion: reduce) {

  #cover-section *,
  .cover-section * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    width: auto !important;
  }

  /* Khusus typewriter: pastikan teks tetap terbaca */
  .cover-typewriter {
    width: 100% !important;
    border-right: none !important;
  }

  /* Transition elements — no anim for reduced motion */
  .cover-envelope-flap,
  .cover-zoom-inner,
  .cover-transition-overlay {
    animation: none !important;
    transition: none !important;
  }
}


/* ==================================================
   COVER OPEN TRANSITION
================================================== */

/* Fullscreen white overlay saat pindah ke section 1 */
.cover-transition-overlay {
  position: fixed;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  z-index: 99999;
  transition: opacity 0.6s ease;
}

.cover-transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Zoom inner — tempat zoom animation agar tidak mengganggu
   responsive scale yang diterapkan ke .cover-wrapper */
.cover-zoom-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center 40%;
}

.cover-zoom-inner.zooming {
  animation: zoomToEnvelope 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes zoomToEnvelope {
  from {
    transform: scale(1);
    transform-origin: center 40%;
  }

  to {
    transform: scale(2);
    transform-origin: center 40%;
  }
}

/* Flap open transition */
.cover-envelope-flap-inner {
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 6.5s cubic-bezier(0.4, 0, 0.2, 1);
  backface-visibility: hidden;
}

.cover-envelope-flap-inner.is-open {
  transform: rotateX(-180deg);
}

.cover-envelope-flap-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  backface-visibility: hidden;
  filter: drop-shadow(-5px 7px 7px rgba(49, 37, 25, 0.25));
}

/* Cover section hiding state */
#cover-section.is-hiding {
  opacity: 0;
  pointer-events: none;
}

/* is-hidden tetap ada di atas sebagai display: none */