/* ========================================================
   ENVELOPE OPENING STAGE (MÀN MỞ PHONG BÌ & LÁ THƯ CANSON)
   ======================================================== */
.envelope-stage {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 100svh;
  padding: 24px 0;
  background: radial-gradient(circle at 50% 46%, #f8fcff 0 25%, #ebf5fe 55%, #d8ebf9 100%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.25, 1), visibility 0.75s ease;
  user-select: none;
}

.envelope-stage::before,
.envelope-stage::after {
  content: "";
  position: absolute;
  width: 35vw;
  height: 120%;
  top: -10%;
  opacity: 0.11;
  filter: blur(14px);
  background: repeating-radial-gradient(ellipse at center, #769fb9 0 4px, transparent 5px 22px);
  transform: rotate(-18deg);
  pointer-events: none;
}

.envelope-stage::before {
  left: -14vw;
}

.envelope-stage::after {
  right: -15vw;
  transform: rotate(18deg);
}

.envelope-stage.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
}

.envelope-stage.is-leaving {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.25, 1), transform 0.75s cubic-bezier(0.2, 0.8, 0.25, 1);
  pointer-events: none;
}

/* Khung chứa Phong Bì & Lá Thư */
.stage-card-wrap {
  position: relative;
  width: min(92vw, 780px, 92svh);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 24px rgba(43, 75, 111, 0.28));
  transform: scale(0.985);
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.envelope-stage.is-active .stage-card-wrap {
  transform: scale(1);
}

/* Dùng trực tiếp phong bì PNG/WebP nền trong suốt do thiết kế cung cấp. */
.stage-envelope-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  object-fit: contain;
  clip-path: inset(0 0 4.2% 0);
  pointer-events: none;
}

/* Vùng chứa riêng ngăn giấy/hoa tràn xuống dưới phong bì khi chuyển động. */
.stage-envelope-contents {
  position: absolute;
  inset: 0 0 5.8%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* Mặt trước phong bì (Clip-path lấy phần túi V phía trước để kẹp lá thư) */
.stage-envelope-front-wrap {
  position: absolute;
  inset: 0;
  z-index: 5;
  filter: drop-shadow(0 -5px 12px rgba(43, 75, 111, 0.16));
  pointer-events: none;
}

.stage-envelope-front {
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: polygon(0 52.8%, 50% 74.5%, 100% 52.8%, 100% 95.8%, 0 95.8%);
}

/* Tờ giấy Canson chất lượng cao */
.canson-card {
  position: absolute;
  z-index: 3;
  top: 14%;
  left: 10%;
  width: 80%;
  aspect-ratio: 1 / 1.06;
  padding: clamp(20px, 3vw, 34px) clamp(22px, 3.6vw, 40px) clamp(16px, 2.5vw, 28px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: center / 100% 100% no-repeat url("../assets/giay-canson-optimized.webp");

  /* Trạng thái ban đầu: nằm sâu trong lòng phong bì */
  transform: translateY(48%);
  opacity: 1;
  transition: transform 3.05s cubic-bezier(0.18, 0.82, 0.25, 1) .2s;
}

/* Khi active: Lá thư trượt mượt mà lên trên */
.envelope-stage.is-active .canson-card {
  transform: translateY(0);
}

/* Logo Badge */
.canson-badge-box {
  margin-top: 1%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease 0.35s, transform 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) 0.35s;
}

.canson-logo-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(56px, 6.8vw, 76px);
  height: clamp(56px, 6.8vw, 76px);
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid #6fa8d5;
  box-shadow: 0 3px 10px rgba(35, 80, 125, 0.12);
  position: relative;
  overflow: hidden;
  padding: 6px;
  box-sizing: border-box;
}

.canson-school-logo {
  position: absolute;
  inset: 6px;
  z-index: 3;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
}

.canson-school-logo:not([hidden]) ~ .canson-logo-svg,
.canson-school-logo:not([hidden]) ~ .canson-logo-text {
  display: none;
}

.canson-logo-svg {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  opacity: 0.35;
}

.canson-logo-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}

.logo-code {
  font-family: "Be Vietnam Pro", sans-serif;
  font-weight: 800;
  font-size: clamp(12.5px, 1.35vw, 16px);
  letter-spacing: 0.04em;
  color: #174e80;
}

.logo-sub {
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: clamp(5.2px, .55vw, 7.2px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #3b7ab0;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tên Trường */
.canson-school-name {
  margin: clamp(8px, 1.3vw, 15px) 0 0;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-size: clamp(13px, 1.45vw, 17.5px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #1a4d79;
  max-width: 90%;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease 0.55s, transform 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) 0.55s;
}

/* Vạch ngăn kèm hoa trang trí */
.canson-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(55%, 195px);
  margin: clamp(7px, 1.1vw, 13px) auto clamp(9px, 1.4vw, 16px);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.7s ease 0.72s, transform 0.7s cubic-bezier(0.2, 0.8, 0.25, 1) 0.72s;
}

.canson-divider span {
  flex: 1;
  height: 1.2px;
  background: linear-gradient(90deg, transparent, #5f99ca, transparent);
}

.canson-divider b {
  font-size: clamp(10px, 1.2vw, 14px);
  color: #245e93;
  font-style: normal;
}

/* Tên Học Sinh Uốn Lượn Sang Trọng */
.canson-student-name {
  margin: clamp(4px, 1.1vw, 12px) 0 clamp(10px, 1.5vw, 18px);
  font-family: "Great Vibes", "Charm", cursive;
  font-size: clamp(34px, 4.2vw, 50px);
  line-height: 1.15;
  font-weight: 400;
  color: #174b7c;
  max-width: 90%;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.85s ease 0.90s, transform 0.85s cubic-bezier(0.2, 0.8, 0.25, 1) 0.90s;
}

/* Lời Trích Dẫn Thanh Xuân */
.canson-quote {
  margin: 0 auto;
  font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(13px, 1.45vw, 17.5px);
  line-height: 1.55;
  font-weight: 500;
  color: #23527d;
  width: 100%;
  max-width: 58%;
  white-space: pre-line;
  word-break: normal;
  overflow-wrap: break-word;
  text-wrap: balance;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.85s ease 1.12s, transform 0.85s cubic-bezier(0.2, 0.8, 0.25, 1) 1.12s;
}

.canson-heart-icon {
  margin-top: clamp(10px, 1.5vw, 20px);
  padding-bottom: 2%;
  font-size: clamp(12px, 1.4vw, 16px);
  color: #2b6da5;
  opacity: 0;
  transition: opacity 0.8s ease 1.32s;
}

/* Kích hoạt hiển thị tuần tự khi active */
.envelope-stage.is-active .canson-badge-box,
.envelope-stage.is-active .canson-school-name,
.envelope-stage.is-active .canson-divider,
.envelope-stage.is-active .canson-student-name,
.envelope-stage.is-active .canson-quote,
.envelope-stage.is-active .canson-heart-icon {
  opacity: 1;
  transform: translateY(0);
}

/* 2 Cành Hoa 2 Bên Góc Dưới */
.stage-flower {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(25, 60, 95, 0.18));
  backface-visibility: hidden;
  will-change: transform;
}

.stage-flower--left {
  left: 10%;
  bottom: 27.5%;
  width: 27%;
  transform-origin: 15% 90%;
  animation: branch-sway-l 3.4s ease-in-out infinite alternate;
}

.stage-flower--right {
  right: 10%;
  bottom: 27.5%;
  width: 27%;
  transform-origin: 85% 90%;
  animation: branch-sway-r 3.6s ease-in-out 0.4s infinite alternate;
}

@keyframes branch-sway-l {
  0% {
    transform: rotate(-3.5deg) translate3d(0, 0, 0) scale(0.99);
  }
  50% {
    transform: rotate(1.8deg) translate3d(2px, -2px, 0) scale(1.01);
  }
  100% {
    transform: rotate(5deg) translate3d(3px, -3px, 0) scale(1.02);
  }
}

@keyframes branch-sway-r {
  0% {
    transform: rotate(3.5deg) translate3d(0, 0, 0) scale(0.99);
  }
  50% {
    transform: rotate(-1.8deg) translate3d(-2px, -2px, 0) scale(1.01);
  }
  100% {
    transform: rotate(-5deg) translate3d(-3px, -3px, 0) scale(1.02);
  }
}

/* Dòng gợi ý nhẹ ở đáy */
.stage-hint {
  position: absolute;
  bottom: 16px;
  z-index: 10;
  color: #407ba9;
  font: 500 12px "Be Vietnam Pro", sans-serif;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 0.8s ease 2.4s;
  pointer-events: none;
}

.envelope-stage.is-active .stage-hint {
  opacity: 0.85;
}

/* Responsive cho màn hình nhỏ và di động */
@media (max-width: 620px) {
  .stage-card-wrap {
    width: min(100vw, 500px, 92svh);
  }
  .canson-card {
    top: 9%;
    left: 10%;
    width: 80%;
    aspect-ratio: 1 / 1.06;
    padding: 16px 16px 14px;
  }
  .envelope-stage.is-active .canson-card {
    transform: translateY(0);
  }
  .canson-badge-box {
    margin-top: 2px;
  }
  .canson-logo-circle {
    width: 48px;
    height: 48px;
    padding: 5px;
  }
  .canson-school-logo {
    inset: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
  }
  .logo-code {
    font-size: 11px;
  }
  .logo-sub {
    font-size: 4.8px;
    max-width: 40px;
    letter-spacing: 0.04em;
  }
  .canson-school-name {
    font-size: 10px;
    margin-top: 4px;
    letter-spacing: .09em;
    max-width: 90%;
  }
  .canson-divider {
    width: 52%;
    margin: 4px auto 3px;
    gap: 5px;
  }
  .canson-student-name {
    font-size: clamp(25px, 6.6vw, 28px);
    line-height: 1.08;
    margin: 2px 0 5px;
    white-space: nowrap;
    max-width: 88%;
  }
  .canson-quote {
    font-size: clamp(12px, 3.3vw, 13.5px);
    line-height: 1.48;
    font-weight: 500;
    color: #174b76;
    white-space: pre-line;
    width: 100%;
    max-width: 62%;
    margin: 0 auto;
    text-wrap: balance;
  }
  .canson-heart-icon {
    margin-top: 5px;
    font-size: 12px;
    padding-bottom: 2px;
  }
  .stage-flower--left {
    left: 9.5%;
    bottom: 25.5%;
    width: 28%;
  }
  .stage-flower--right {
    right: 9.5%;
    bottom: 25.5%;
    width: 28%;
  }
}