/* =========================================================
   20-10 Letter Page — Clean CSS (no image background)
   - CSS-only pink moving clouds (parallax-like)
   - Envelope + hearts/sparkles animations
   - Mobile-friendly + reduced-motion support
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  --color-env:       #ffb7c5;
  --color-env2:      #ff9aad;
  --color-flap:      #ff8da1;
  --color-heart:     #ff85a2;
  --color-sparkle:   #ffffff;
  --page-grad-1:     #fde3eb;
  --page-grad-2:     #ffe6f0;
  --page-grad-3:     #fff0f5;
}

/* ---------- Resets & base ---------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ height:100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  user-select:none;
  cursor:auto;

  /* Soft pink sky */
  background: linear-gradient(to top, var(--page-grad-1) 0%, var(--page-grad-2) 40%, var(--page-grad-3) 100%);
  overflow:hidden; /* tránh thanh cuộn do mây */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Keep content above clouds */
.envlope-wrapper,
.controls{ position:relative; z-index:2; }

/* ---------- Floating clouds (CSS-only) ---------- */
.bg-clouds{
  position:fixed;
  inset:0;
  z-index:1;             /* dưới nội dung, trên nền */
  pointer-events:none;
  overflow:hidden;
}

.cloud{
  position:absolute;
  bottom:0;
  left:-60vw;            /* bắt đầu ngoài khung */
  width:90vw;
  height:22vh;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 35%,
      rgba(255,255,255,.95) 0%,
      rgba(255,192,203,.60) 60%,
      rgba(255,182,193,.30) 100%);
  filter: blur(10px);
  opacity:.85;
  animation: cloud-move 100s linear infinite;
}

.cloud.c1{ bottom:6vh;  height:24vh; animation-duration:120s; opacity:.9; }
.cloud.c2{ bottom:12vh; height:26vh; animation-duration:180s; opacity:.65; transform:scale(1.12); }
.cloud.c3{ bottom:1vh;  height:20vh; animation-duration: 90s; opacity:.55; transform:scale(.92); }

@keyframes cloud-move{
  from{ transform: translateX(0); }
  to  { transform: translateX(180vw); }
}

/* ---------- Envelope ---------- */
.envlope-wrapper{
  height:380px;
  margin-top:50px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-6px); }
}

#envelope{
  position:relative;
  width:380px;
  height:240px;
  margin:0 auto;
  top:150px;
  background-color:var(--color-flap);
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  box-shadow:0 4px 20px rgba(0,0,0,.1);
  cursor:pointer;
}

/* front triangles */
.front{
  position:absolute;
  width:0;
  height:0;
  z-index:3;
}

/* top flap */
.flap{
  border-left:190px solid transparent;
  border-right:190px solid transparent;
  border-bottom:92px solid transparent;
  border-top:150px solid var(--color-flap);
  transform-origin:top;
  pointer-events:none;
}

/* pocket (below) */
.pocket{
  border-left:190px solid var(--color-env);
  border-right:190px solid var(--color-env);
  border-bottom:90px solid var(--color-env2);
  border-top:150px solid transparent;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
}

/* letter sheet */
.letter{
  position:relative;
  width:95%;
  height:95%;
  margin:0 auto;
  top:0%;
  padding:15px;
  background-color:#e0d9dd;
  border-radius:6px;
  box-shadow:0 2px 26px rgba(0,0,0,.08);
  box-sizing:border-box;
  overflow:hidden;
  z-index:1;
}

.letter::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: linear-gradient(180deg,
    rgba(255,255,255,0.00) 25%,
    rgba(255,231,236,0.70) 55%,
    rgba(255,231,236,1.00) 100%);
  pointer-events:none;
}

/* message text */
.message{
  position:relative;
  z-index:2;
  font-family:'Pacifico', cursive;
  color:#d46a84;
  text-align:center;
  line-height:1.4;
  padding:5px;
  height:100%;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#f3c2cf transparent;
}
.message::-webkit-scrollbar{ width:8px; }
.message::-webkit-scrollbar-thumb{ background:#f3c2cf; border-radius:999px; }

.message p{
  margin:10px 0;
  font-size:1.4em;
  text-shadow:0 2px 3px rgba(0,0,0,0.1);
}

.lyrics{
  display:none;
  font-size:1em;
  line-height:1.5;
  text-align:center;
  opacity:0;
  transition:opacity 1s ease-in;
  max-height:130px;
  overflow-y:auto;
}
.lyric-page{ display:none; opacity:0; transition:opacity .5s ease; }
.lyric-page.active{ display:block; opacity:1; }

/* open/close states */
.open .flap{
  transform:rotateX(180deg);
  transition:transform .4s ease, z-index .6s;
  z-index:1;
}
.close .flap{
  transform:rotateX(0deg);
  transition:transform .4s .6s ease, z-index 1s;
  z-index:5;
}
.close .letter{
  transform:translateY(0);
  transition:transform .4s ease, z-index 1s;
  z-index:1;
}
.open .letter{
  transform:translateY(-60px) rotate(-2deg);
  transition:transform .4s .6s ease, z-index .6s;
  z-index:2;
}

/* letter corners */
.letter-corner{
  position:absolute;
  width:20px; height:20px;
  border:2px solid #ffd1dc;
  border-radius:5px;
  z-index:3;
}
.corner-tl{ top:10px; left:10px;   border-right:none; border-bottom:none; }
.corner-br{ bottom:10px; right:10px; border-left:none;  border-top:none;  }

/* ---------- Hearts & sparkles ---------- */
.hearts, .sparkles{
  position:absolute;
  top:90px; left:0; right:0;
  z-index:2;
}

.heart, .sparkle{
  position:absolute;
  bottom:0;
  pointer-events:none;
}

/* heart shape */
.heart::before,
.heart::after{
  content:"";
  position:absolute;
  left:25px; top:0;
  width:25px; height:40px;
  background:var(--color-heart);
  border-radius:25px 25px 0 0;
  transform:rotate(-45deg);
  transform-origin:0 100%;
}
.heart::after{
  left:0;
  transform:rotate(45deg);
  transform-origin:100% 100%;
}

/* sparkles */
.sparkle{
  width:8px; height:8px;
  background:var(--color-sparkle);
  border-radius:50%;
  animation: sparkleTwinkle 1s infinite;
}

/* hidden while closed */
.close .heart, .close .sparkle{
  opacity:0;
  animation:none;
}

/* individual paths */
.a1{ left:20%; transform:scale(.6); animation: slideUp 4s linear infinite, sideSway 2s ease-in-out infinite alternate; }
.a2{ left:55%;                          animation: slideUp 5s linear infinite, sideSway 4s ease-in-out infinite alternate; }
.a3{ left:10%; transform:scale(.8);  animation: slideUp 7s linear infinite, sideSway 2s ease-in-out infinite alternate; }

.s1{ left:30%; animation: sparkleUp 3s linear infinite; }
.s2{ left:60%; animation: sparkleUp 4s linear infinite; }
.s3{ left:45%; animation: sparkleUp 5s linear infinite; }

/* motions */
@keyframes slideUp{
  0%{ top:0; }
  100%{ top:-600px; }
}
@keyframes sideSway{
  0%{ margin-left:0; }
  50%{ margin-left:50px; }
  100%{ margin-left:0; }
}
@keyframes sparkleUp{
  0%{ transform:translateY(0); opacity:1; }
  100%{ transform:translateY(-500px) rotate(360deg); opacity:0; }
}
@keyframes sparkleTwinkle{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.5); }
}

/* ---------- Controls ---------- */
.controls{
  text-align:center;
  margin-top:50px;
}
.controls button{
  font: 600 16px/1 Arial, sans-serif;
  transition: all .3s ease;
  background-color: var(--color-env);
  border: 2px solid var(--color-env2);
  border-radius: 20px;
  color: #fff;
  padding: 12px 25px;
  margin: 10px;
  cursor: pointer;
  box-shadow: 0 5px 20px rgba(0,0,0,.15);
}
.controls button:hover{
  background-color: var(--color-env2);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 7px 25px rgba(0,0,0,.2);
}

/* show lyrics when open */
.open .lyrics{ display:block; opacity:1; }

.page-indicator{
  position:absolute;
  bottom:5px; left:0; right:0;
  text-align:center;
  font-size:.8em;
  color:#d46a84;
  opacity:.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  #envelope{ transform: scale(.9); top:120px; }
  .envlope-wrapper{ margin-top:36px; }
  .cloud{ height:20vh; }
  .cloud.c2{ height:24vh; }
}

/* ---------- Accessibility: reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .envlope-wrapper,
  .cloud,
  .heart,
  .sparkle{ animation: none !important; }
}