/* =========================================================
   WEDDING INTRO - CLOSED ENVELOPE ONLY
   기존 CSS와 충돌하지 않도록 wedding-intro-* 전용 클래스만 사용
========================================================= */


/* =========================================================
   여기 숫자만 바꾸면 각 PNG 크기/위치 조절 가능
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');

@font-face {
  font-family: "WeddingHand";
  src: url("../../../font/나눔손글씨\ 딸에게\ 엄마가.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

:root {

  /* 전체 카드 */
  --wi-stage-max-width: 460px;


  /* 왼쪽 위 꽃 */
  --wi-flower-tl-width: 55%;
  --wi-flower-tl-left: -10%;
  --wi-flower-tl-top: -5%;
  --wi-flower-tl-rotate: -4deg;


  /* 오른쪽 아래 꽃 */
  --wi-flower-br-width: 55%;
  --wi-flower-br-right: -9%;
  --wi-flower-br-bottom: -4%;
  --wi-flower-br-rotate: 1deg;


  /* 오른쪽 위 리본 */
  --wi-ribbon-tr-width: 50%;
  --wi-ribbon-tr-right: -7%;
  --wi-ribbon-tr-top: -5%;
  --wi-ribbon-tr-rotate: 8deg;


  /* 왼쪽 아래 리본 */
  --wi-ribbon-bl-width: 60%;
  --wi-ribbon-bl-left: -8%;
  --wi-ribbon-bl-bottom: -5%;
  --wi-ribbon-bl-rotate: -8deg;


  /* 닫힌 봉투 */
  --wi-envelope-width: 76%;
  --wi-envelope-left: 50%;
  --wi-envelope-top: 48.5%;


  /* 왁스 */
  --wi-wax-width: 15%;
  --wi-wax-left: 50%;
  --wi-wax-top: 53.6%;


    /* 깨진 왁스 */
  --wi-wax-broken-width: 22%;

  /* 열린 봉투 */
  --wi-open-envelope-width: 80%;
  --wi-open-envelope-left: 50%;
  --wi-open-envelope-top: 42%;


  /* 열린 봉투 왼쪽 날개 */
--wi-flap-left-width: 45%;
--wi-flap-left-left: 31%;
--wi-flap-left-top: 50%;
--wi-flap-left-rotate: 0deg;

/* 열린 봉투 오른쪽 날개 */
--wi-flap-right-width: 42%;
--wi-flap-right-right: 32%;
--wi-flap-right-top: 49%;
--wi-flap-right-rotate: 0deg;


  /* 폴라로이드 */
  --wi-polaroid-width: 42%;
  --wi-polaroid-left: 48%;
  --wi-polaroid-top: 28%;
  --wi-polaroid-rotate: 2deg;

  
}


/* =========================================================
   전체 오버레이
========================================================= */

.wedding-intro-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: auto;

  background: #f3f5f6;
}


/* =========================================================
   메인 청첩장의 아이보리 영역처럼 보이는 카드
   PC/모바일 모두 너무 꽉 차지 않도록 여백 유지
========================================================= */

.wedding-intro-stage {
  position: relative;

  width: min(
    92vw,
    var(--wi-stage-max-width),
    calc((100svh - 28px) * 9 / 16)
  );

  aspect-ratio: 9 / 16;

  overflow: hidden;

  background: #fffdf8;

  box-shadow:
    0 8px 28px rgba(70, 62, 54, 0.08);

  isolation: isolate;
}


/* =========================================================
   아이보리 종이 배경
========================================================= */

.wedding-intro-paper {
  position: absolute;
  inset: 0;
  z-index: 0;

  background:
    radial-gradient(
      circle at 50% 28%,
      #fffefb 0%,
      #fffaf2 62%,
      #faf4e9 100%
    );
}


/* =========================================================
   장식 이미지 공통
========================================================= */

.wedding-intro-deco {
  position: absolute;
  display: block;

  height: auto;
  max-width: none;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}


/* 왼쪽 위 꽃 */
.wedding-intro-flower-tl {
  z-index: 3;

  width: var(--wi-flower-tl-width);
  left: var(--wi-flower-tl-left);
  top: var(--wi-flower-tl-top);

  transform: rotate(var(--wi-flower-tl-rotate));
  transform-origin: top left;
}


/* 오른쪽 아래 꽃 */
.wedding-intro-flower-br {
  z-index: 3;

  width: var(--wi-flower-br-width);
  right: var(--wi-flower-br-right);
  bottom: var(--wi-flower-br-bottom);

  transform: rotate(var(--wi-flower-br-rotate));
  transform-origin: bottom right;
}


/* 오른쪽 위 리본 */
.wedding-intro-ribbon-tr {
  z-index: 2;

  width: var(--wi-ribbon-tr-width);
  right: var(--wi-ribbon-tr-right);
  top: var(--wi-ribbon-tr-top);

  transform: rotate(var(--wi-ribbon-tr-rotate));
  transform-origin: top right;

  filter:
    drop-shadow(0 10px 16px rgba(85, 115, 150, 0.18));
}


/* 왼쪽 아래 리본 */
.wedding-intro-ribbon-bl {
  z-index: 2;

  width: var(--wi-ribbon-bl-width);
  left: var(--wi-ribbon-bl-left);
  bottom: var(--wi-ribbon-bl-bottom);

  transform: rotate(var(--wi-ribbon-bl-rotate));
  transform-origin: bottom left;

  filter:
    drop-shadow(0 10px 16px rgba(85, 115, 150, 0.18));
}

/* =========================================================
    꽃잎 레이어
========================================================= */
.wedding-intro-petals {
  position: absolute;
  inset: 0;
  z-index: 4;

  overflow: hidden;
  pointer-events: none;
}

.wedding-intro-petals .petal {
  position: absolute;
  top: -12%;

  width: 12px;
  height: 22px;

  background:
    radial-gradient(circle at 35% 35%, #fff7c9 0%, #f6db73 58%, #efc94e 100%);

  border-radius: 70% 15% 70% 15% / 70% 15% 70% 15%;

  opacity: 0.85;

  filter:
    drop-shadow(0 3px 4px rgba(195, 160, 67, 0.18));

  animation-name: weddingIntroPetalFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.wedding-intro-petals .p1 {
  left: 14%;
  animation-duration: 10s;
  animation-delay: 0s;
}

.wedding-intro-petals .p2 {
  left: 28%;
  animation-duration: 12s;
  animation-delay: 1.8s;
}

.wedding-intro-petals .p3 {
  left: 42%;
  animation-duration: 9.5s;
  animation-delay: 0.8s;
}

.wedding-intro-petals .p4 {
  left: 58%;
  animation-duration: 11s;
  animation-delay: 2.4s;
}

.wedding-intro-petals .p5 {
  left: 72%;
  animation-duration: 10.5s;
  animation-delay: 1.1s;
}

.wedding-intro-petals .p6 {
  left: 84%;
  animation-duration: 12.8s;
  animation-delay: 3.1s;
}

.wedding-intro-petals .p7 {
  left: 20%;
  animation-duration: 13s;
  animation-delay: 4.2s;
}

.wedding-intro-petals .p8 {
  left: 66%;
  animation-duration: 9.8s;
  animation-delay: 5s;
}


/* =========================================================
   The Wedding
========================================================= */

.wedding-intro-heading {
  position: absolute;

  left: 50%;
  top: 22%;
  z-index: 10;

  width: 100%;

  transform: translateX(-50%);

  text-align: center;
}

.wedding-intro-title-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.wedding-intro-title-svg text {
  font-family: "Great Vibes", cursive;
  font-size: 108px;

  fill: transparent;
  stroke: #b79a78;
  stroke-width: 1.2;

  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: stroke fill;

  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;

  filter: drop-shadow(0 2px 10px rgba(183, 154, 120, 0.10));

  animation:
    weddingTitleWrite 2.6s ease forwards,
    weddingTitleFill 0.8s ease 2.0s forwards;
}


/* =========================================================
   봉투 영역
========================================================= */

.wedding-intro-envelope-area {
  position: absolute;
  inset: 0;
  z-index: 6;
}

.wedding-intro-envelope-closed {
  position: absolute;

  width: var(--wi-envelope-width);
  height: auto;

  left: var(--wi-envelope-left);
  top: var(--wi-envelope-top);

  transform: translate(-50%, -50%);

  display: block;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;

  filter:
    drop-shadow(0 10px 14px rgba(95, 82, 67, 0.12))
    drop-shadow(0 22px 26px rgba(95, 82, 67, 0.10));
}


/* =========================================================
   왁스
========================================================= */

.wedding-intro-wax {
  position: absolute;

  width: var(--wi-wax-width);
  height: auto;

  left: var(--wi-wax-left);
  top: var(--wi-wax-top);

  z-index: 9;

  transform: translate(-50%, -50%);

  display: block;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;

  animation:
    weddingIntroWaxBreath
    2.2s
    ease-in-out
    infinite;
}


/* =========================================================
   클릭 영역 + 은은한 파동
========================================================= */

.wedding-intro-wax-button {
  position: absolute;

  left: var(--wi-wax-left);
  top: var(--wi-wax-top);

  width: 25%;
  aspect-ratio: 1 / 1;

  z-index: 12;

  transform: translate(-50%, -50%);

  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;

  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

.wedding-intro-wax-button::before,
.wedding-intro-wax-button::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 55%;
  height: 55%;

  border:
    1.4px solid rgba(5, 151, 248, 0.4);

  border-radius: 50%;

  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(0.75);

  pointer-events: none;

  animation:
    weddingIntroRipple
    2s
    ease-out
    infinite;
}

.wedding-intro-wax-button::after {
  animation-delay: 1s;
}


/* =========================================================
   깨진 왁스
   처음에는 보이지 않음
========================================================= */

.wedding-intro-wax-broken {
  position: absolute;

  width: var(--wi-wax-broken-width);
  height: auto;

  left: var(--wi-wax-left);
  top: var(--wi-wax-top);

  z-index: 10;

  display: block;

  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(0.72);

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}


/* =========================================================
   왁스 클릭 직후
   JS에서 wedding-intro-screen에 is-cracked 추가
========================================================= */

.wedding-intro-screen.is-cracked
.wedding-intro-wax {
  opacity: 0;
  animation: none;

  transform:
    translate(-50%, -50%)
    scale(0.88);
}


.wedding-intro-screen.is-cracked
.wedding-intro-wax-broken {
  animation:
    weddingIntroWaxBreak
    0.55s
    cubic-bezier(.2, .8, .2, 1)
    forwards;
}


.wedding-intro-screen.is-cracked
.wedding-intro-wax-button {
  pointer-events: none;
}


.wedding-intro-screen.is-cracked
.wedding-intro-wax-button::before,
.wedding-intro-screen.is-cracked
.wedding-intro-wax-button::after {
  animation: none;
  opacity: 0;
}


/* 클릭 안내 문구만 클릭 후 사라짐 */
.wedding-intro-screen.is-cracked
.wedding-intro-guide {
  opacity: 0;
  animation: none;
}

/* =========================================================
   이름 / 날짜
========================================================= */

.wedding-intro-meta {
  position: absolute;

  left: 50%;
  top: 63%;
  z-index: 10;

  width: 94%;
  margin: 0;

  transform: translateX(-50%);

  text-align: center;

  color: #817a73;

  font-family: "Noto Serif KR", serif;

  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;

  white-space: nowrap;
}


/* =========================================================
   클릭 안내
========================================================= */

.wedding-intro-guide {
  position: absolute;

  left: 50%;
  top: 68%;
  z-index: 10;

  width: 88%;
  margin: 0;

  transform: translateX(-50%);

  text-align: center;

  color: #7696b0;

  font-family:
    "Noto Serif KR",
    serif;

  font-size: clamp(12px, 2.8vw, 16px);
  font-weight: 600;
  line-height: 1.5;

  letter-spacing: 0.03em;

  animation: weddingIntroGuideGlow 1.8s ease-in-out infinite;
  text-shadow: 0 0 8px rgba(118, 150, 176, 0.15);
}


/* =========================================================
   열린 봉투 장면
   HTML에 wedding-intro-open-scene이 있어야 함
========================================================= */

.wedding-intro-open-scene {
  position: absolute;
  inset: 0;

  z-index: 7;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}


/* 열린 봉투 본체 */
.wedding-intro-open-base {
  position: absolute;

  width: var(--wi-open-envelope-width);
  height: auto;

  left: var(--wi-open-envelope-left);
  top: var(--wi-open-envelope-top);

  z-index: 2;

  transform:
    translate(-50%, -50%)
    scale(0.97);

  filter:
    drop-shadow(
      0 12px 22px
      rgba(95, 82, 67, 0.11)
    );

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}


/* =========================================================
   폴라로이드
========================================================= */

.wedding-intro-polaroid {
  position: absolute;

  left: var(--wi-polaroid-left);
  top: var(--wi-polaroid-top);

  width: var(--wi-polaroid-width);

  aspect-ratio: 1020 / 1507;

  z-index: 5;

  /* 처음부터 완성된 위치 */
  opacity: 1;

  transform:
    translate(-50%, 0)
    rotate(var(--wi-polaroid-rotate));

  transform-origin: center bottom;
}



/* =========================================================
   완성된 폴라로이드 이미지
========================================================= */

.wedding-intro-polaroid {
  position: absolute;

  left: var(--wi-polaroid-left);
  top: var(--wi-polaroid-top);

  width: var(--wi-polaroid-width);

  z-index: 5;

  /* 열린 봉투가 나올 때 이미 제자리에 있음 */
  opacity: 1;

  transform:
    translate(-50%, 0)
    rotate(var(--wi-polaroid-rotate));

  transform-origin: center bottom;
}


.wedding-intro-polaroid-image {
  display: block;

  width: 100%;
  height: auto;

  filter:
    drop-shadow(
      0 8px 15px
      rgba(80, 70, 60, 0.12)
    );

  user-select: none;
  -webkit-user-drag: none;
}

.wedding-intro-polaroid-names {
  position: absolute;

  left: 50%;
  bottom: 8%;

  width: 88%;

  transform: translateX(-50%);

  z-index: 10;

  text-align: center;
  white-space: nowrap;

  font-family: "WeddingHand", cursive;

  font-size: 25px;
  font-weight: bold;

  color: #6a6d70b6;

  letter-spacing: 0.03em;
}

.wedding-intro-name-divider {
  color: #b79a78;
  font-size: 0.8em;
}



/* =========================================================
   열린 봉투 앞날개 공통
========================================================= */

.wedding-intro-open-flap {
  position: absolute;

  height: auto;

  z-index: 8;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;

  filter:
    drop-shadow(
      0 6px 10px
      rgba(90, 78, 65, 0.08)
    );
}


/* =========================================================
   왼쪽 날개
========================================================= */

.wedding-intro-open-flap-left {
  width: var(--wi-flap-left-width);

  left: var(--wi-flap-left-left);
  top: var(--wi-flap-left-top);

  transform:
    translate(-50%, -50%)
    rotate(var(--wi-flap-left-rotate));
}


/* =========================================================
   오른쪽 날개
========================================================= */

.wedding-intro-open-flap-right {
  width: var(--wi-flap-right-width);

  right: var(--wi-flap-right-right);
  top: var(--wi-flap-right-top);

  transform:
    translate(50%, -50%)
    rotate(var(--wi-flap-right-rotate));
}


/* =========================================================
   열린 상태
   JS에서 wedding-intro-screen에 is-open 추가
========================================================= */

/* 닫힌 봉투만 사라짐 */
.wedding-intro-screen.is-open
.wedding-intro-envelope-area {
  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.45s ease;
}


/* 이름/날짜/제목도 열린 장면에서는 자연스럽게 숨김 */
.wedding-intro-screen.is-open
.wedding-intro-heading,
.wedding-intro-screen.is-open
.wedding-intro-meta,
.wedding-intro-screen.is-open
.wedding-intro-guide {
  opacity: 0;

  transition:
    opacity 0.4s ease;
}


/* 꽃 / 리본 / 꽃잎은 기존 그대로 유지 */
.wedding-intro-screen.is-open
.wedding-intro-open-scene {
  opacity: 1;
  visibility: visible;

  transition:
    opacity 0.65s ease,
    visibility 0.65s ease;
}






/* =========================================================
   인트로 종료
   JS에서 wedding-intro-screen에 is-finished 추가
========================================================= */

.wedding-intro-screen.is-finished {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}





/* =========================================================
   애니메이션
========================================================= */

@keyframes weddingIntroWaxBreath {
  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  50% {
    transform:
      translate(-50%, -50%)
      scale(1.04);
  }
}

@keyframes weddingIntroRipple {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.75);
  }

  20% {
    opacity: 0.55;
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(1.65);
  }
}

@keyframes weddingIntroTitleWrite {
  0% {
    max-width: 0;
    opacity: 1;
  }

  1% {
    opacity: 1;
  }

  100% {
    max-width: 12ch;
    opacity: 1;
  }
}

@keyframes weddingIntroTitleCursor {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes weddingIntroTitleCursorHide {
  to {
    opacity: 0;
  }
}

@keyframes weddingIntroGuideGlow {
  0%, 100% {
    opacity: 0.45;
    transform: translateX(-50%) translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) translateY(-1px);
  }
}


@keyframes weddingIntroPetalFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -20px, 0) rotate(0deg) scale(0.9);
  }

  10% {
    opacity: 0.85;
  }

  25% {
    transform: translate3d(14px, 24vh, 0) rotate(90deg) scale(1);
  }

  50% {
    transform: translate3d(-10px, 48vh, 0) rotate(180deg) scale(0.95);
  }

  75% {
    transform: translate3d(18px, 74vh, 0) rotate(280deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(-8px, 110vh, 0) rotate(360deg) scale(0.9);
  }
}

@keyframes weddingTitleWrite {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes weddingTitleFill {
  to {
    fill: #b79a78;
  }
}


@keyframes weddingIntroWaxBreak {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.65);
  }

  45% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1.08);
  }

  100% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1);
  }
}





/* =========================================================
   접근성
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .wedding-intro-wax,
  .wedding-intro-wax-button::before,
  .wedding-intro-wax-button::after { animation: none !important; }
  .wedding-intro-heading h1,
  .wedding-intro-heading h1::after,
  .wedding-intro-guide,
  .wedding-intro-petals .petal { animation: none !important;}
   .wedding-intro-wax-broken,
  .wedding-intro-polaroid { animation: none !important; }
}

@media (max-width: 480px) {
  .wedding-intro-title-svg text {
    font-size: 92px;
    stroke-width: 1.1;
  }
}