/* ============================================================
   styles.css  —  Birthday Website
   Keep this file in the SAME folder as index.html
   ============================================================ */

/* ── VARIABLES ── */
:root {
  --bur:   #9e3a5a;
  --rose:  #c96882;
  --dust:  #d090a8;
  --blush: #f5c0cc;
  --petal: #fde8f0;
  --cream: #fff5f8;
  --gold:  #c8934a;
  --ink:   #3a1a0e;
}

/* ── RESET ── */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--cream);
  font-family: 'Lato', sans-serif;
  overflow-x: hidden;
}

/* ── ANIMATIONS ── */
@keyframes fallDown   { 0%   { transform: translateY(0) rotate(0deg);   opacity: .7; }
                        100% { transform: translateY(110vh) rotate(480deg); opacity: 0; } }
@keyframes twinkle    { 0%,100% { opacity: .15; transform: scale(1);   }
                        50%     { opacity: .7;  transform: scale(1.6); } }
@keyframes floatUp    { 0%,100% { transform: translateY(0);   }
                        50%     { transform: translateY(-7px); } }
@keyframes heartbeat  { 0%,100% { transform: translate(-50%,-50%) scale(1);    }
                        50%     { transform: translate(-50%,-50%) scale(1.2);   } }
@keyframes bloomSpin  { 0%,100% { transform: scale(1)    rotate(0deg);  }
                        50%     { transform: scale(1.15) rotate(15deg); } }
@keyframes gentleFloat{ 0%,100% { transform: translate(-50%,-50%) rotate(-2deg); }
                        50%     { transform: translate(-50%,-50%) rotate(2deg) translateY(-6px); } }
@keyframes orbitSpin  { 0%   { transform: rotate(0deg)   translateX(110px) rotate(0deg);    }
                        100% { transform: rotate(360deg) translateX(110px) rotate(-360deg); } }
@keyframes bloomPulse { 0%   { transform: rotate(var(--r)) translateX(110px) rotate(calc(-1*var(--r))) scale(.85);  }
                        100% { transform: rotate(var(--r)) translateX(110px) rotate(calc(-1*var(--r))) scale(1.15); } }
@keyframes burstIn    { 0%   { transform: translate(var(--sx),var(--sy)) scale(0); opacity: 0; }
                        60%  { opacity: 1; }
                        100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes scrollFilm { 0%   { transform: translateX(0);    }
                        100% { transform: translateX(-50%); } }
@keyframes blink      { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

/* ── FALLING PETALS ── */
.petals-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.petal     { position: absolute; top: -50px; animation: fallDown linear infinite; user-select: none; }

/* ── SCROLL REVEAL ── */
.reveal    { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   ENVELOPE SCREEN
   ============================================================ */
#env-screen {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(160deg, #fff0f5, #fde8f0 50%, #fff5f0);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 1s ease, visibility 1s;
  overflow: hidden;
}
#env-screen.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.env-stars { position: absolute; inset: 0; pointer-events: none; }
.s-dot     { position: absolute; border-radius: 50%; background: var(--rose); animation: twinkle ease-in-out infinite; }

.env-hint {
  font-family: 'Playfair Display', serif; font-style: italic;
  color: var(--bur); font-size: 1rem; margin-bottom: 2rem; letter-spacing: .05em;
  animation: floatUp 3s ease-in-out infinite; position: relative; z-index: 2;
}
.env-scene { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }

/* baby photo that rises from envelope */
#baby-rising {
  position: absolute; bottom: -180px; left: 50%; transform: translateX(-50%);
  width: 165px; height: 205px; border-radius: 6px; overflow: hidden;
  background: var(--petal); border: 3px solid var(--blush);
  box-shadow: 0 4px 20px rgba(200,100,130,.25); opacity: 0; z-index: 1;
}
#baby-rising img               { width: 100%; height: 100%; object-fit: cover; display: block; }
#baby-rising .bp-ph            { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--dust); font-size: .65rem; text-align: center; padding: 10px; line-height: 1.4; }
#baby-rising input[type=file]  { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 9; }

/* envelope shape */
.env-wrap                               { cursor: pointer; position: relative; z-index: 3; margin-top: 10px; }
.env-wrap:hover .envelope               { transform: scale(1.05) rotate(-1deg); }
.envelope                               { width: 210px; height: 140px; position: relative; transition: transform .35s ease; filter: drop-shadow(0 10px 30px rgba(210,100,140,.2)); }
.env-body                               { width: 210px; height: 140px; background: linear-gradient(145deg,#fff0f5,#fde0eb); border: 2px solid var(--blush); border-radius: 6px; position: absolute; bottom: 0; }
.env-btm                                { position: absolute; bottom: 0; left: 0; width: 0; height: 0; border-left: 107px solid transparent; border-right: 107px solid transparent; border-bottom: 76px solid #f5c8d8; }
.env-l                                  { position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 70px solid transparent; border-bottom: 70px solid transparent; border-left: 84px solid #fad4e0; }
.env-r                                  { position: absolute; right: 0; top: 0; width: 0; height: 0; border-top: 70px solid transparent; border-bottom: 70px solid transparent; border-right: 84px solid #fad4e0; }
.env-flap                               { position: absolute; top: -1px; left: -1px; width: 0; height: 0; border-left: 107px solid transparent; border-right: 107px solid transparent; border-top: 76px solid #f9c8d8; z-index: 4; transform-origin: top center; transition: transform .85s cubic-bezier(.4,0,.2,1); }
.env-flap-b                             { position: absolute; top: -1px; left: -1px; width: 0; height: 0; border-left: 107px solid transparent; border-right: 107px solid transparent; border-top: 78px solid var(--blush); z-index: 3; transform-origin: top center; transition: transform .85s cubic-bezier(.4,0,.2,1); opacity: .5; }
.env-wrap.open .env-flap,
.env-wrap.open .env-flap-b             { transform: rotateX(180deg); }
.heart-seal                             { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 2rem; z-index: 3; animation: heartbeat 1.5s ease-in-out infinite; pointer-events: none; }
.tap-hint                               { margin-top: 22px; font-size: .72rem; color: var(--dust); letter-spacing: .16em; text-transform: uppercase; z-index: 2; position: relative; transition: opacity .4s; }

/* ============================================================
   MAIN PAGE
   ============================================================ */
#main         { display: none; }
#main.visible { display: block; }

/* ── HERO ── */
.hero          { background: linear-gradient(160deg,#fff0f5 0%,var(--petal) 50%,#fff5f0 100%); text-align: center; padding: 80px 20px 60px; position: relative; overflow: hidden; }
.hero-eyebrow  { font-size: .65rem; letter-spacing: .22em; color: var(--rose); text-transform: uppercase; margin-bottom: 12px; position: relative; z-index: 1; }
.hero-title    { font-family: 'Playfair Display', serif; font-size: clamp(2rem,9vw,4rem); color: var(--bur); line-height: 1.1; margin-bottom: 10px; position: relative; z-index: 1; }
.hero-title em { font-style: italic; color: var(--rose); }
.hero-sub      { font-size: .9rem; color: var(--dust); letter-spacing: .06em; position: relative; z-index: 1; }
.hero-divider  { display: flex; align-items: center; gap: 14px; max-width: 240px; margin: 28px auto 0; position: relative; z-index: 1; }
.hero-divider hr   { flex: 1; border: none; border-top: 1px solid var(--blush); }
.hero-divider span { color: var(--rose); font-size: 1.1rem; }

/* ── COUNTDOWN ── */
.countdown-section { background: #fff; padding: 48px 20px; text-align: center; border-top: 1px solid var(--petal); border-bottom: 1px solid var(--petal); }
.countdown-label   { font-family: 'Playfair Display', serif; font-style: italic; color: var(--bur); font-size: 1.1rem; margin-bottom: 24px; }
.countdown-boxes   { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cbox     { background: var(--petal); border: 1px solid var(--blush); border-radius: 16px; padding: 16px 20px; min-width: 72px; }
.cbox-num { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--bur); line-height: 1; }
.cbox-lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .14em; color: var(--dust); margin-top: 4px; }

/* ── FLOWER DIVIDER ── */
.flower-divider { display: flex; align-items: center; justify-content: center; padding: 32px 20px; overflow: hidden; background: var(--cream); }
.fdiv-stem      { height: 2px; background: linear-gradient(to right,transparent,var(--blush),transparent); flex: 1; max-width: 120px; }
.fdiv-flowers   { display: flex; gap: 12px; align-items: center; }
.fdiv-flower    { font-size: 1.4rem; animation: bloomSpin 4s ease-in-out infinite; transform-origin: center; }

/* ── BABY + ORBITING FLOWERS ── */
.baby-section       { background: #fff; padding: 60px 20px 80px; text-align: center; position: relative; overflow: hidden; }
.baby-section-title { font-family: 'Playfair Display', serif; font-style: italic; color: var(--bur); font-size: 1.4rem; margin-bottom: 48px; }
.baby-universe      { position: relative; display: inline-block; width: 310px; height: 310px; margin: 0 auto; }

.baby-polaroid     { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; padding: 8px 8px 36px; box-shadow: 0 8px 40px rgba(200,100,130,.18); border: 1px solid #f0e0e8; z-index: 5; animation: gentleFloat 4s ease-in-out infinite; }
.baby-polaroid-img { width: 170px; height: 195px; background: var(--petal); overflow: hidden; position: relative; }
.baby-polaroid-img img    { width: 100%; height: 100%; object-fit: cover; display: block; }
.baby-polaroid-img .bp2-ph{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--dust); font-size: .65rem; text-align: center; padding: 8px; }
.baby-polaroid-img input  { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.baby-polaroid-cap        { text-align: center; font-family: 'Special Elite', serif; font-size: .75rem; color: #a08060; margin-top: 6px; }

.orbit-flower  { position: absolute; animation: orbitSpin linear infinite, bloomPulse 2s ease-in-out infinite alternate; transform-origin: 130px 130px; top: 0; left: 0; }
.burst-flower  { position: absolute; opacity: 0; animation: burstIn .8s ease-out forwards; }
.baby-caption  { margin-top: 36px; font-family: 'Playfair Display', serif; font-style: italic; color: var(--rose); font-size: 1rem; line-height: 1.6; }

/* ── LETTER + BABY ASIDE ── */
.letter-outer  { background: #fff; padding: 56px 20px 80px; }
.letter-inner  { max-width: 900px; margin: 0 auto; display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; }

.baby-aside       { flex: 0 0 auto; width: 210px; display: flex; flex-direction: column; align-items: center; padding-top: 0; margin-bottom: 24px; opacity: 0; transform: translateX(-30px); transition: opacity .9s ease .3s, transform .9s ease .3s; }
.baby-aside.show  { opacity: 1; transform: translateX(0); }
.aside-polar      { background: #fff; padding: 7px 7px 34px; box-shadow: 0 6px 28px rgba(200,100,130,.14); border: 1px solid #f0e8e0; transform: rotate(-3deg); transition: transform .3s; position: relative; }
.aside-polar:hover{ transform: rotate(0deg) scale(1.04); }
.aside-polar-img  { width: 194px; height: 230px; background: var(--petal); overflow: hidden; position: relative; }
.aside-polar-img img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.aside-polar-img input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.aside-ph         { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--dust); font-size: .65rem; text-align: center; padding: 10px; height: 100%; justify-content: center; }
.aside-ph span    { font-size: 1.6rem; }
.aside-polar-cap  { text-align: center; font-family: 'Special Elite', serif; font-size: .72rem; color: #a08060; position: absolute; bottom: 8px; left: 0; right: 0; }
.aside-label      { margin-top: 14px; font-family: 'Playfair Display', serif; font-style: italic; font-size: .78rem; color: var(--dust); text-align: center; line-height: 1.6; }

/* paper letter card */
.letter-section       { flex: 1; min-width: 260px; }
.paper-stack          { position: relative; }
.paper-stack::before  { content: ''; position: absolute; top: 9px; left: 12px; right: -9px; bottom: -9px; background: var(--blush); border-radius: 16px; z-index: 0; transform: rotate(1.4deg); opacity: .35; }
.paper-stack::after   { content: ''; position: absolute; top: 4px; left: 6px; right: -4px; bottom: -4px; background: var(--petal); border-radius: 16px; z-index: 0; transform: rotate(-.7deg); opacity: .5; }
.paper-card           { position: relative; z-index: 1; border-radius: 16px; padding: 44px 36px; background: #fff; border: 1px solid var(--blush); box-shadow: 0 4px 40px rgba(200,100,130,.08); }
.paper-card::before   { content: '½D'; position: absolute; top: 18px; left: 22px; font-size: 3rem; color: var(--petal); line-height: 1; font-family: 'Playfair Display', serif; }
.ph-line              { width: 100px; height: 1px; background: linear-gradient(to right,transparent,var(--blush),transparent); margin: 0 auto; }
.ph-date              { font-family: 'Special Elite', serif; font-size: .72rem; color: var(--dust); letter-spacing: .14em; padding: 7px 0; text-align: center; }
.letter-body          { font-family: 'Special Elite', serif; font-size: .9rem; color: var(--ink); line-height: 1.95; position: relative; z-index: 3; min-height: 220px; }
.letter-para          { margin-bottom: 1.6em; }
.tw-cursor            { display: inline-block; width: 2px; height: 1em; background: var(--ink); vertical-align: text-bottom; margin-left: 1px; animation: blink .65s step-end infinite; }
.tw-hl                { color: var(--rose); font-style: italic; text-decoration: underline; text-decoration-color: rgba(201,104,130,.3); text-underline-offset: 3px; }
.letter-sign-area     { margin-top: 28px; text-align: right; position: relative; z-index: 3; }
.letter-sign-line     { width: 120px; height: 1px; background: var(--blush); margin-left: auto; margin-bottom: 7px; }
.letter-sign          { font-family: 'Special Elite', serif; font-size: 1rem; color: var(--dust); font-style: italic; opacity: 0; transition: opacity 1.2s ease; }
.letter-sign.show     { opacity: 1; }
.wax-seal             { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 38% 34%,var(--rose),var(--bur)); border: 2px solid rgba(245,192,204,.5); display: flex; align-items: center; justify-content: center; font-size: 1rem; z-index: 4; box-shadow: 0 2px 10px rgba(158,58,90,.3); }

/* ── FILM STRIP ── */
.film-section               { padding: 56px 0 48px; background: linear-gradient(160deg,#3d0a20,#5a1030); overflow: hidden; }
.film-header                { text-align: center; margin-bottom: 32px; padding: 0 20px; }
.film-header h2             { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--blush); margin-bottom: 4px; }
.film-header p              { color: var(--dust); font-size: .82rem; letter-spacing: .06em; }
.film-strip-outer           { background: #200010; padding: 5px 0; margin-bottom: 14px; }
.film-strip-outer:last-child{ margin-bottom: 0; }
.sprocket-bar               { display: flex; align-items: center; height: 18px; overflow: hidden; background: #160008; padding: 0 5px; }
.sprocket-hole              { width: 18px; height: 12px; background: var(--blush); border: 1px solid var(--dust); border-radius: 3px; margin: 0 8px; flex-shrink: 0; opacity: .4; }
.film-track                 { display: flex; width: max-content; animation: scrollFilm 28s linear infinite; }
.film-track:hover           { animation-play-state: paused; }
.film-strip-outer:nth-child(3) .film-track { animation-direction: reverse; animation-duration: 36s; }
.film-frame                 { width: 150px; height: 150px; background: #300018; border-left: 4px solid #160008; border-right: 4px solid #160008; flex-shrink: 0; position: relative; overflow: hidden; cursor: pointer; transition: filter .3s; }
.film-frame:hover           { filter: brightness(1.2); }
.film-frame img             { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-ph                   { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--blush); opacity: .5; }
.frame-ph .phi              { font-size: 1.6rem; }
.frame-ph .pht              { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.film-frame input[type=file]{ position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ── CHECKLIST UNIVERSE ── */
.cl-universe   { position: relative; padding: 72px 0 90px; background: linear-gradient(160deg,var(--cream),#fff0f5 50%,var(--petal)); overflow: hidden; min-height: 600px; }
.float-photo   { position: absolute; cursor: pointer; z-index: 2; will-change: transform; display: none; }
.fp-inner      { background: #fff; padding: 7px 7px 30px; box-shadow: 0 5px 24px rgba(158,58,90,.14); position: relative; transition: transform .3s, box-shadow .3s; }
.float-photo:hover .fp-inner { transform: scale(1.05) !important; box-shadow: 0 12px 40px rgba(158,58,90,.22); }
.fp-inner img  { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
.fp-ph         { width: 100%; height: 100%; background: linear-gradient(135deg,var(--petal),#f5dde8); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.fp-ph .fpi   { font-size: 1.3rem; opacity: .6; }
.fp-ph .fpl   { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); opacity: .8; }
.fp-inner input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 5; }
.fp-cap        { position: absolute; bottom: 6px; left: 0; right: 0; text-align: center; font-family: 'Special Elite', serif; font-size: .64rem; color: var(--dust); }
.fp-pin        { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 38% 32%,var(--rose),var(--bur)); box-shadow: 0 2px 5px rgba(0,0,0,.2); z-index: 3; }

.cl-wrap  { position: relative; z-index: 3; max-width: 460px; margin: 0 auto; padding: 0 16px; }
.cl-card  { background: #fff; border: 1px solid var(--blush); border-radius: 20px; padding: 32px 24px; box-shadow: 0 4px 40px rgba(200,100,130,.09); }
.cl-header{ text-align: center; margin-bottom: 28px; }
.date-badge { display: inline-block; background: var(--petal); border: 1px solid var(--blush); border-radius: 100px; padding: 7px 20px; font-size: .68rem; letter-spacing: .14em; color: var(--bur); text-transform: uppercase; margin-bottom: 14px; }
.cl-title   { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--bur); margin-bottom: 4px; }
.cl-sub     { font-size: .8rem; color: var(--dust); }
.cl-divider { border: none; border-top: 1px dashed var(--blush); margin: 16px 0; }
.grp-lbl    { font-size: .62rem; text-transform: uppercase; letter-spacing: .2em; color: var(--dust); margin-bottom: 11px; margin-top: 4px; }
.check-item       { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; cursor: pointer; padding: 6px 7px; border-radius: 10px; transition: background .2s; }
.check-item:hover { background: #fff5f8; }
.check-box        { width: 25px; height: 25px; flex-shrink: 0; border: 2px solid var(--blush); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all .3s; background: #fff; margin-top: 2px; }
.tick             { display: none; font-size: .75rem; color: #fff; }
.check-item.checked .check-box  { background: linear-gradient(135deg,var(--rose),var(--bur)); border-color: var(--rose); }
.check-item.checked .tick       { display: block; }
.check-item.checked .cl-label   { text-decoration: line-through; color: #c9a0b8; }
.cl-label { font-size: .88rem; color: #7a3a50; display: flex; align-items: center; gap: 8px; line-height: 1.5; }
.em       { font-size: 1rem; }
.prog-wrap{ margin-top: 24px; }
.prog-bg  { background: var(--petal); border-radius: 100px; height: 7px; overflow: hidden; }
.prog-fill{ height: 100%; background: linear-gradient(90deg,var(--rose),var(--bur)); border-radius: 100px; transition: width .6s cubic-bezier(.4,0,.2,1); width: 0%; }
.prog-txt { text-align: center; font-size: .75rem; color: var(--dust); margin-top: 8px; font-style: italic; font-family: 'Special Elite', serif; }

/* ── FOOTER ── */
.footer       { text-align: center; padding: 56px 20px 72px; background: linear-gradient(160deg,#fff0f5,var(--petal) 50%,#fff5f0); position: relative; overflow: hidden; }
.footer-emoji { font-size: 2rem; letter-spacing: 8px; margin-bottom: 18px; position: relative; z-index: 1; }
.footer-quote { font-family: 'Playfair Display', serif; font-style: italic; color: var(--bur); font-size: 1.1rem; line-height: 1.7; position: relative; z-index: 1; }
.footer-sub   { font-size: .82rem; color: var(--dust); letter-spacing: .06em; margin-top: 10px; position: relative; z-index: 1; }

/* ── RESPONSIVE — mobile first, desktop enhances ── */
@media (min-width: 640px) {
  .letter-inner { flex-direction: row; align-items: flex-start; }
  .baby-aside   { flex: 0 0 210px; padding-top: 32px; margin-bottom: 0; }
  .float-photo  { display: block; }
}
@media (max-width: 380px) {
  .hero-title  { font-size: 1.85rem; }
  .cbox-num    { font-size: 1.6rem; }
  .baby-universe { width: 220px; height: 220px; }
}
/* ── MUSIC TOGGLE BUTTON ── */
.music-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--blush);
  box-shadow: 0 4px 15px rgba(200,100,130,.2);
  cursor: pointer;
  z-index: 300;
  display: none; /* Injected by JS once main area is unlocked */
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: transform 0.2s ease, background 0.2s ease;
}

.music-btn:hover {
  transform: scale(1.1);
  background: var(--petal);
}

.music-btn.playing {
  animation: bloomPulse 2s ease-in-out infinite alternate;
}