/* ==========================================================================
   style.css  |  Website sinh nhật, thiết kế cho điện thoại trước
   Mục lục:
   1. Biến chỉnh sửa nhanh (MÀU, FONT)
   2. Nền tảng
   3. Nút bấm dùng chung
   4. Chặng 1: mở hộp quà
   5. Popup xác nhận
   6. Chuyển cảnh
   7. Chặng 2: trang sinh nhật (chữ, cánh hoa, bóng bay, ảnh, GIF)
   8. Lá thư và phong bì
   9. Tờ thư mở rộng
   10. Giảm chuyển động và màn hình thấp
   ========================================================================== */


/* ==========================================================================
   1. BIẾN CHỈNH SỬA NHANH
   ========================================================================== */
:root {
  /* MÀU CHỦ ĐẠO: đổi các giá trị này để đổi cả bảng màu */
  --bg:        #FFF8FA;   /* nền trắng ngả hồng */
  --pink-100:  #FFE9F0;
  --pink-200:  #FFD3E1;
  --pink-300:  #FFB6CD;   /* hồng pastel */
  --pink-400:  #F79BB9;   /* hồng phấn */
  --pink-500:  #EE7FA6;   /* màu chữ Happy Birthday */
  --pink-600:  #C24773;   /* hồng đậm cho chữ nhỏ, đủ tương phản trên nền trắng */
  --berry:     #5A1F3A;   /* chữ trên nút hồng, đủ tương phản */
  --ink:       #7A3B54;   /* chữ nội dung */
  --cream:     #FFFBF3;   /* màu giấy thư */

  /* FONT: Chewy cho tiêu đề sinh nhật, Baloo 2 cho phần còn lại, Imperial Script cho lời chúc trong lá thư */
  --font-title:  "Chewy", "Baloo 2", ui-rounded, system-ui, sans-serif;
  --font-body:   "Baloo 2", ui-rounded, "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-letter: "Imperial Script", "Segoe Script", cursive;

  /* Vùng an toàn của iPhone (tai thỏ, Dynamic Island, thanh Home) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}


/* ==========================================================================
   2. NỀN TẢNG
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Không có dòng này thì thuộc tính hidden bị các display: flex bên dưới ghi đè */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}
html.is-locked,
html.is-locked body { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Lớp nền cố định: trắng chuyển hồng cực nhẹ. Dùng lớp riêng thay cho background-attachment để iOS không giật */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF6F9 55%, var(--pink-100) 100%);
}

img { display: block; max-width: 100%; }
figure { margin: 0; }
p, h1, h2 { margin: 0; }

:focus-visible {
  outline: 3px solid var(--berry);
  outline-offset: 3px;
}

/* Chữ chỉ dành cho trình đọc màn hình */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ==========================================================================
   3. NÚT BẤM DÙNG CHUNG (cao tối thiểu 54px, đủ lớn cho ngón tay)
   ========================================================================== */
.btn-row {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 320px;
  align-items: center;
}

.btn {
  --s: 1;                          /* JS đổi giá trị này để nút Mở to dần, nút Không nhỏ dần */
  flex: 1 1 0;
  min-width: 0;
  min-height: 54px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font: 700 1.125rem/1 var(--font-body);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transform: scale(var(--s));
  transition: transform .28s cubic-bezier(.3, 1.4, .5, 1), box-shadow .12s ease;
}
.btn--primary {
  background: var(--pink-300);
  color: var(--berry);
  box-shadow: 0 5px 0 var(--pink-400), 0 12px 20px rgba(247, 155, 185, .35);
}
.btn--ghost {
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--pink-200), 0 5px 0 var(--pink-200);
}
.btn:active {
  transform: translateY(4px) scale(calc(var(--s) * .98));
  box-shadow: 0 1px 0 var(--pink-400);
  transition-duration: .06s;
}
.btn--ghost:active { box-shadow: inset 0 0 0 2px var(--pink-200), 0 1px 0 var(--pink-200); }


/* ==========================================================================
   4. CHẶNG 1: MỞ HỘP QUÀ
   ========================================================================== */
.scene--gift {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding:
    calc(24px + var(--safe-top))
    calc(24px + var(--safe-right))
    calc(24px + var(--safe-bottom))
    calc(24px + var(--safe-left));
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(60% 40% at 50% 30%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%),
    linear-gradient(180deg, #FFFFFF 0%, #FFF3F7 60%, #FFE6EE 100%);
}

/* Các ngôi sao lấp lánh rất nhỏ ở nền */
.gift-sparkles span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: var(--s);
  line-height: 1;
  color: var(--pink-300);
  opacity: .2;
  animation: twinkle var(--d) ease-in-out infinite;
  pointer-events: none;
}
@keyframes twinkle {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50%      { opacity: .95; transform: scale(1.15) rotate(18deg); }
}

/* Ba lớp lồng nhau để mỗi lớp giữ một animation riêng, không đè nhau:
   gift-stage: xuất hiện, gift-wrap: rung khi bấm Không, gift: nhún nhẹ liên tục */
.gift-stage { animation: pop-in .8s cubic-bezier(.3, 1.5, .5, 1) both; }
.gift-wrap  { position: relative; }
.gift       { animation: bob 3.2s ease-in-out infinite; }
.gift svg {
  display: block;
  width: min(64vw, 240px);
  width: min(64vw, 240px, 34dvh);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
}
.gift__lid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: lid 3.6s ease-in-out infinite;
}
@keyframes pop-in {
  from { opacity: 0; transform: scale(.55) translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@keyframes lid {
  0%, 68%, 100% { transform: none; }
  76%           { transform: translateY(-7px) rotate(-4deg); }
  84%           { transform: translateY(0) rotate(3deg); }
  92%           { transform: translateY(-3px) rotate(-1deg); }
}

/* Rung khi bấm Không */
.gift-wrap.is-shake { animation: shake .6s ease; }
@keyframes shake {
  0%, 100% { transform: rotate(0) scale(1); }
  15%      { transform: rotate(-7deg) scale(1.04); }
  30%      { transform: rotate(6deg) scale(1.04); }
  45%      { transform: rotate(-5deg); }
  60%      { transform: rotate(4deg); }
  80%      { transform: rotate(-2deg); }
}

/* Biểu tượng nũng nịu bay lên phía trên hộp quà */
.pop {
  position: absolute;
  left: 50%;
  top: 6%;
  font-size: 2rem;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
}
.pop.is-go { animation: pop-emoji 1s ease-out both; }
@keyframes pop-emoji {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.4); }
  25%  { opacity: 1; transform: translate(-50%, -14px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(1); }
}

.gift-title {
  margin-top: 8px;
  max-width: 15em;
  font-size: clamp(1.5rem, 6.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--berry);
  text-wrap: balance;
  animation: fade-up .6s ease .3s both;
}

/* Dòng trả lời: luôn giữ chiều cao để bố cục không nhảy */
.gift-reply {
  min-height: 2.6em;
  max-width: 18em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--pink-600);
  opacity: 0;
}
.gift-reply.is-show { animation: reply-in .5s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes reply-in {
  from { opacity: 0; transform: translateY(8px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

.scene--gift .btn-row { animation: fade-up .6s ease .5s both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   5. POPUP XÁC NHẬN
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(24px + var(--safe-top))
    calc(24px + var(--safe-right))
    calc(24px + var(--safe-bottom))
    calc(24px + var(--safe-left));
}
.modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(255, 226, 236, .74);
  opacity: 0;
  transition: opacity .25s ease;
}
.modal__card {
  position: relative;
  width: min(100%, 340px);
  padding: 30px 20px 24px;
  text-align: center;
  background: #FFFFFF;
  border: 3px solid var(--pink-200);
  border-radius: 30px;
  box-shadow: 0 7px 0 var(--pink-200), 0 22px 36px rgba(238, 127, 166, .25);
  opacity: 0;
  transform: scale(.82) translateY(12px);
  transition: opacity .22s ease, transform .34s cubic-bezier(.3, 1.4, .5, 1);
  outline: none;
}
.modal.is-open .modal__scrim { opacity: 1; }
.modal.is-open .modal__card  { opacity: 1; transform: none; }

.modal__title {
  margin-bottom: 22px;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--berry);
}
.modal__card .btn-row { margin: 0 auto; }

/* Hiệu ứng nhẹ khi đổi từ bước này sang bước khác */
.modal__card.is-swap .modal__title,
.modal__card.is-swap .btn-row { animation: swap .3s ease both; }
@keyframes swap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   6. CHUYỂN CẢNH SANG CHẶNG 2
   ========================================================================== */
.scene--gift.is-leaving { animation: leave .65s ease-in forwards; }
@keyframes leave {
  to { opacity: 0; transform: scale(1.18); filter: blur(6px); }
}

.veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFF3F7 55%, var(--pink-200) 100%);
  transition: opacity .45s ease;
}
.veil.is-on  { opacity: 1; }
.veil.is-off { transition-duration: .9s; }

.burst {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 61;
  width: 0;
  height: 0;
  pointer-events: none;
}
.burst__p {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--pink-400);
  opacity: 0;
}
.burst.is-go .burst__p { animation: burst-out .95s cubic-bezier(.2, .8, .3, 1) forwards; }
@keyframes burst-out {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(var(--r)); }
}


/* ==========================================================================
   7. CHẶNG 2: TRANG SINH NHẬT
   ========================================================================== */
.scene--birthday {
  position: relative;
  z-index: 3;                       /* nằm trên cánh hoa và bóng bay */
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3.2dvh, 26px);
  padding:
    calc(28px + var(--safe-top))
    calc(24px + var(--safe-right))
    calc(56px + var(--safe-bottom))
    calc(24px + var(--safe-left));
  text-align: center;
}

/* Trạng thái ẩn và hiện dùng chung cho ảnh, GIF, lá thư.
   Phần tử vẫn chiếm chỗ từ đầu nên bố cục không bị nhảy khi hiện ra. */
.reveal {
  opacity: 0;
  transform: translateY(16px) scale(.92);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .9, .3, 1.15);
}
.reveal--pop { transform: scale(.55); }
.reveal.is-in { opacity: 1; transform: none; }

/* --- HAPPY BIRTHDAY (font Chewy) --- */
.title {
  position: relative;
  isolation: isolate;
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(3.4rem, 17vw, 5.6rem);
  line-height: .98;
  color: var(--pink-500);
}
.title::before {                    /* vầng sáng hồng rất nhẹ phía sau chữ */
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 190, 212, .6), rgba(255, 190, 212, 0));
  opacity: 0;
  transition: opacity 1.6s ease;
}
.title.is-in::before { opacity: 1; animation: glow-pulse 4s ease-in-out 1.6s infinite; }
@keyframes glow-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

.title__line { display: block; }
.title__line:nth-child(1) { transform: rotate(-3deg); }
.title__line:nth-child(2) { transform: rotate(2deg); }

.ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(.6);
  text-shadow: 0 3px 0 var(--pink-200), 0 0 22px rgba(247, 155, 185, .5);
  transition:
    opacity .7s ease calc(var(--i) * 70ms),
    transform .8s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i) * 70ms);
}
.ch > span { display: inline-block; }
.title.is-in .ch { opacity: 1; transform: none; }

/* Sau khi hiện xong, từng chữ nhún nhẹ lần lượt như sóng */
.title.is-idle .ch > span { animation: wave 2.8s ease-in-out calc(var(--i) * 110ms) infinite; }
@keyframes wave {
  0%, 55%, 100% { transform: translateY(0); }
  28%           { transform: translateY(-6px); }
}

/* --- CÁNH HOA ANH ĐÀO ---
   Mỗi cánh có hai lớp: lớp ngoài rơi xuống, lớp trong (thẻ i) đung đưa và xoay.
   Chỉ dùng transform nên chạy trên GPU, không tốn CPU. */
.petals {
  position: fixed;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.petal {
  position: absolute;
  left: var(--x);
  top: 0;
  width: var(--s);
  height: calc(var(--s) * 1.25);
  animation: petal-fall var(--dur) linear var(--delay) infinite;
  will-change: transform;
}
.petal > i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #FFE3EC 0%, var(--pink-300) 100%);
  border-radius: 90% 4% 90% 4%;
  opacity: var(--o);
  animation: petal-sway var(--sway) ease-in-out var(--delay) infinite alternate;
}
.petal--b > i { border-radius: 4% 90% 4% 90%; }
@keyframes petal-fall {
  from { transform: translate3d(0, -12vh, 0); }
  to   { transform: translate3d(var(--drift), 112vh, 0); }
}
@keyframes petal-sway {
  from { transform: rotate(-40deg) translateX(-10px); }
  to   { transform: rotate(55deg) translateX(12px); }
}

/* --- BÓNG BAY ---
   Nằm sát hai mép màn hình, một phần ra ngoài mép, phía sau nội dung nên không che chữ, ảnh hay GIF. */
.balloons {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.balloon {
  position: absolute;
  top: var(--top);
  width: var(--w);
  transform: translate3d(0, 130vh, 0);
  transition: transform 2.8s cubic-bezier(.2, .75, .25, 1) var(--delay);
}
.balloon--left  { left: calc(var(--w) * -.3); }
.balloon--right { right: calc(var(--w) * -.3); }
.balloons.is-in .balloon { transform: translate3d(0, 0, 0); }
.balloon__body {
  display: block;
  animation: balloon-bob var(--bob) ease-in-out infinite alternate;
  transform-origin: 50% 0;
}
.balloon svg { display: block; width: 100%; height: auto; overflow: visible; }
@keyframes balloon-bob {
  from { transform: translate3d(0, -6px, 0) rotate(-3deg); }
  to   { transform: translate3d(0, 8px, 0) rotate(3deg); }
}

/* --- ẢNH BẠN: hình tròn, viền hồng, bóng và vầng sáng nhẹ --- */
.photo { position: relative; width: clamp(132px, min(42vw, 24dvh), 200px); aspect-ratio: 1; }
.photo__ring {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 6px solid var(--pink-300);
  border-radius: 50%;
  background: var(--pink-100);
  box-shadow:
    0 0 0 6px #FFFFFF,
    0 0 0 8px var(--pink-200),
    0 12px 26px rgba(238, 127, 166, .32),
    0 0 34px rgba(255, 182, 205, .7);
}
.photo__ring img { width: 100%; height: 100%; object-fit: cover; }   /* cover: cắt vừa khung, ảnh không bị méo */

/* --- BÓNG BAY QUANH ẢNH: vài quả bay lên từ dưới ảnh rồi mờ dần khi ra khỏi khung --- */
.photo-balloons {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.photo-balloon {
  position: absolute;
  bottom: 4%;
  line-height: 1;
  font-size: 1.5rem;
  opacity: 0;
  transform: translate(-50%, 10%) scale(.5) rotate(-6deg);
  will-change: transform, opacity;
}
.photo-balloon--1 { left: 6%; }
.photo-balloon--2 { left: 50%; font-size: 1.8rem; }
.photo-balloon--3 { left: 92%; }

.photo-balloons.is-in .photo-balloon--1 { animation: photo-balloon-rise 2.3s ease-out .05s forwards; }
.photo-balloons.is-in .photo-balloon--2 { animation: photo-balloon-rise 2.5s ease-out .25s forwards; }
.photo-balloons.is-in .photo-balloon--3 { animation: photo-balloon-rise 2.2s ease-out .45s forwards; }
@keyframes photo-balloon-rise {
  0%   { opacity: 0; transform: translate(-50%, 10%) scale(.5) rotate(-6deg); }
  16%  { opacity: 1; transform: translate(-50%, -30%) scale(1) rotate(2deg); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -210%) scale(1.05) rotate(8deg); }
}

/* --- MŨ SINH NHẬT: bật ra ở góc trên ảnh, như thể được đội lên sau khi bóng bay bay lên --- */
.photo-hat {
  position: absolute;
  top: -16%;
  right: 4%;
  z-index: 4;
  width: 36%;
  opacity: 0;
  transform: rotate(-30deg) scale(0) translateY(-25%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 6px 10px rgba(238, 127, 166, .35));
}
.photo-hat svg { display: block; width: 100%; height: auto; overflow: visible; }
.photo-hat.is-in { animation: photo-hat-pop .75s cubic-bezier(.3, 1.6, .4, 1) forwards; }
@keyframes photo-hat-pop {
  0%   { opacity: 0; transform: rotate(-40deg) scale(0) translateY(-30%); }
  65%  { opacity: 1; transform: rotate(24deg) scale(1.15) translateY(0); }
  100% { opacity: 1; transform: rotate(18deg) scale(1) translateY(0); }
}

/* --- GIF --- */
.gif {
  width: min(52vw, 190px);
  overflow: hidden;
  background: var(--pink-100);
  border: 4px solid #FFFFFF;
  border-radius: 26px;
  box-shadow: 0 0 0 2px var(--pink-200), 0 10px 22px rgba(247, 155, 185, .3);
}
.gif img { width: 100%; height: auto; }
.gif__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 1;
  padding: 14px;
  font-size: .9rem;
  line-height: 1.3;
  color: var(--ink);
}
.gif__placeholder span { font-size: 2rem; }


/* ==========================================================================
   8. LÁ THƯ VÀ PHONG BÌ
   ========================================================================== */
.letter-block {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  scroll-margin-bottom: 24px;
}
.letter-caption {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--pink-600);
}

.letter {
  position: relative;
  display: block;
  width: min(230px, 66vw);
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

/* Vầng sáng thở nhẹ phía sau phong bì (chỉ đổi opacity nên rất nhẹ) */
.letter__glow {
  position: absolute;
  inset: -34%;
  background: radial-gradient(closest-side, rgba(255, 182, 205, .7), rgba(255, 182, 205, 0));
  animation: letter-glow 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes letter-glow {
  0%, 100% { opacity: .45; transform: scale(.94); }
  50%      { opacity: 1; transform: scale(1.06); }
}

.letter__float {
  position: absolute;
  inset: 0;
  display: block;
  animation: letter-float 3.4s ease-in-out infinite;
}
@keyframes letter-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-8px) rotate(1deg); }
}
.letter.is-flap .letter__float,
.letter.is-flap .letter__glow { animation-play-state: paused; }

/* Phong bì gồm: mặt sau, nắp, tờ giấy, mặt trước dạng túi, và con dấu hình tim.
   Thứ tự chồng lớp: mặt sau 1, nắp mở 2, giấy 3, mặt trước 5, nắp đóng 6, dấu 7. */
.env { position: absolute; inset: 0; display: block; }
.env > span { position: absolute; display: block; }

.env__back {
  inset: 0;
  z-index: 1;
  background: #F49CBC;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(238, 127, 166, .35);
}

.env__paper {
  z-index: 3;
  left: 8%;
  right: 8%;
  top: 10%;
  height: 84%;
  background: var(--cream);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--pink-100);
  transition: transform .85s cubic-bezier(.22, .9, .28, 1);
}
/* Vài nét gạch hồng nhạt gợi ý là giấy có chữ */
.env__paper::before {
  content: "";
  position: absolute;
  left: 16%; right: 16%; top: 16%; height: 46%;
  background:
    linear-gradient(var(--pink-200), var(--pink-200)) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--pink-200), var(--pink-200)) 0 45% / 76% 3px no-repeat,
    linear-gradient(var(--pink-200), var(--pink-200)) 0 90% / 88% 3px no-repeat;
  border-radius: 3px;
}

.env__front {
  inset: 0;
  z-index: 5;
  background: #FFC6D9;
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  border-radius: 0 0 12px 12px;
}
.env__front::after {                /* nếp gấp sáng ở phía dưới túi */
  content: "";
  position: absolute;
  inset: 0;
  background: #FFD3E1;
  clip-path: polygon(0 100%, 50% 46%, 100% 100%);
}

.env__flap {
  z-index: 6;
  left: 0;
  right: 0;
  top: 0;
  height: 58%;
  background: #F58FB0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transform: perspective(520px) rotateX(0deg);
  transition: transform .65s cubic-bezier(.4, .1, .3, 1), z-index 0s linear .28s;
}

.env__seal {
  z-index: 7;
  left: 50%;
  top: 58%;
  font-size: 1.5rem;
  line-height: 1;
  transform: translate(-50%, -62%);
  transition: opacity .3s ease, transform .3s ease;
}

/* Bước 1: rung */
.env.is-shake { animation: env-shake .6s ease; }
@keyframes env-shake {
  0%, 100% { transform: rotate(0); }
  15%      { transform: rotate(-5deg); }
  30%      { transform: rotate(4deg); }
  45%      { transform: rotate(-3deg); }
  60%      { transform: rotate(2.5deg); }
  80%      { transform: rotate(-1deg); }
}
/* Bước 2: mở nắp */
.letter.is-flap .env__flap {
  z-index: 2;
  transform: perspective(520px) rotateX(180deg);
}
.letter.is-flap .env__seal { opacity: 0; transform: translate(-50%, -62%) scale(.4); }
/* Bước 3: giấy trượt lên */
.letter.is-paper .env__paper { transform: translateY(-80%); }
/* Khi tờ thư lớn đang hiện, tờ giấy nhỏ ẩn đi để hai tờ khớp nhau */
.letter.is-paper-hidden .env__paper { visibility: hidden; }


/* ==========================================================================
   9. TỜ THƯ MỞ RỘNG (bước 4 và 5 của animation mở thư)
   ========================================================================== */
.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(16px + var(--safe-top))
    calc(16px + var(--safe-right))
    calc(16px + var(--safe-bottom))
    calc(16px + var(--safe-left));
}
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgba(255, 232, 240, .84);
  opacity: 0;
  transition: opacity .4s ease;
}
.sheet-layer.is-on .sheet-scrim { opacity: 1; }

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 380px);
  max-height: 100%;
  background: var(--cream);
  border: 3px solid var(--pink-200);
  border-radius: 26px;
  box-shadow: 0 7px 0 var(--pink-200), 0 24px 44px rgba(238, 127, 166, .28);
}
.sheet::before {                    /* viền nét đứt kiểu giấy viết thư */
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px dashed var(--pink-200);
  border-radius: 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.sheet.is-open::before { opacity: 1; }

.sheet__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 36px 30px 30px;
  text-align: center;
}

/* Câu chúc hiện dần từng câu. Dùng font Imperial Script (chữ viết tay trang trọng, có đủ dấu tiếng Việt) */
.sheet__text {
  font-family: var(--font-letter);
  font-size: clamp(1.6rem, 7.4vw, 2.05rem);
  font-weight: 400;
  line-height: 1.9;
  color: var(--ink);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.sentence {
  opacity: 0;
  transition: opacity .8s ease calc(var(--i) * .6s + .15s);
}
.sheet.is-open .sentence { opacity: 1; }

.sheet__close {
  display: block;
  width: 100%;
  max-width: 220px;
  margin: 22px auto 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity .5s ease 1.7s, visibility 0s linear 1.7s, transform .28s cubic-bezier(.3, 1.4, .5, 1);
}
.sheet.is-open .sheet__close { visibility: visible; opacity: 1; }

.sheet.is-closing {
  opacity: 0;
  transform: translateY(14px) scale(.96);
  transition: opacity .3s ease, transform .3s ease;
}


/* ==========================================================================
   10. GIẢM CHUYỂN ĐỘNG, MÀN HÌNH THẤP, TẮT ANIMATION TỪ CONFIG
   ========================================================================== */

/* Điện thoại màn hình thấp (ví dụ iPhone SE, 360x640): thu gọn khoảng cách */
@media (max-height: 640px) {
  .gift-title { font-size: 1.45rem; }
  .modal__title { font-size: 1.5rem; }
}

/* Người dùng bật "giảm chuyển động" trong hệ thống: bỏ các animation lặp, giữ hiệu ứng hiện dần */
@media (prefers-reduced-motion: reduce) {
  .gift, .gift__lid, .gift-sparkles span, .letter__float, .letter__glow,
  .balloon__body, .title.is-idle .ch > span, .title.is-in::before,
  .photo-balloon, .photo-hat.is-in { animation: none !important; }
  .petal { animation-duration: calc(var(--dur) * 1.8); }
  .petal > i { animation: none; }
  .reveal, .ch, .balloon, .sentence { transition-duration: .25s !important; transition-delay: 0s !important; }
  .photo-balloon { opacity: 0; }
  .photo-hat.is-in { opacity: 1; transform: rotate(18deg) scale(1); }
}

/* Công tắc bật tắt trong script.js (CONFIG.animations): script gắn thuộc tính lên thẻ html */
[data-anim-gift="off"] .gift,
[data-anim-gift="off"] .gift__lid,
[data-anim-gift="off"] .gift-sparkles span { animation: none; }
[data-anim-letter="off"] .letter__float,
[data-anim-letter="off"] .letter__glow { animation: none; }
[data-anim-title="off"] .title.is-idle .ch > span,
[data-anim-title="off"] .title.is-in::before { animation: none; }
[data-anim-photo-decor="off"] .photo-balloons,
[data-anim-photo-decor="off"] .photo-hat { display: none; }