:root{
  --bg1: linear-gradient(180deg,#fff7fb,#fff1f6);
  --accent:#ff6f98;
  --muted:#8b6f7d;
  --card-shadow: 0 18px 50px rgba(200,120,150,0.08);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;font-family:'Poppins',sans-serif;background:var(--bg1);color:#2b1f2a;overflow-x:hidden;}
.page{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(6%);transition:all .56s cubic-bezier(.18,.9,.3,1);overflow:auto;-webkit-overflow-scrolling:touch;}
.page.show{opacity:1;pointer-events:auto;transform:none;}
.container{max-width:1100px;padding:20px;width:100%;text-align:center;}
.brand{font-size:28px;color:var(--accent);margin:0;}
.tag{color:var(--muted);margin-top:6px;}
.cards{display:flex;gap:28px;justify-content:center;margin-top:18px;flex-wrap:wrap;}
.card{width:220px;height:280px;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,250,252,0.98));backdrop-filter: blur(6px);box-shadow:var(--card-shadow);border:1px solid rgba(255,255,255,0.6);cursor:pointer;overflow:hidden;transition:transform .36s;}
.card-inner{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;position:relative;}
.card-art{width:160px;height:120px;border-radius:14px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.card .seal{position:absolute;right:8px;bottom:8px;font-size:20px;}
.card-title{margin-top:14px;font-weight:600;color:#3a2a2f;}
.card:hover{transform:translateY(-12px) scale(1.03);box-shadow:0 36px 80px rgba(200,120,150,0.12);}
.hint{margin-top:18px;color:var(--muted);}
.back{position:fixed;left:18px;top:18px;background:transparent;border:none;font-weight:700;color:var(--accent);cursor:pointer;padding:8px 10px;border-radius:8px;display:none;}
.page:not(#home) .back{display:block;}
.env-wrap{position:relative;width:90%;max-width:680px;height:250px;margin:auto;}
.env{position:absolute;width:100%;height:auto;transition:transform .7s, opacity .4s;}
.env-closed{z-index:40;}
.env-base{z-index:10;}
.flap{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:30;transform-origin:50% 10%;transition:transform .7s ease;backface-visibility:hidden;}
.hidden{display:none;}
.letter{position:absolute;top:50%;left:50%;width:auto;min-width:280px;max-width:520px;max-height:calc(100% - 40px);background:linear-gradient(180deg,#fff,#fffdfc);border-radius:12px;padding:28px 30px;overflow-x:auto;overflow-y:auto;white-space:normal;opacity:0;transform:translate(-50%, -50%) translateY(30px);transition:all .8s ease;-webkit-overflow-scrolling:touch;border:1px solid rgba(45,30,35,0.04);box-shadow:0 12px 40px rgba(30,20,30,0.06), inset 0 1px 0 rgba(255,255,255,0.6);text-align:left;}
.letter.visible{opacity:1;transform:translate(-50%, -50%) translateY(0);}
.letter-inner{font-family:'Poppins',sans-serif;font-size:18px;color:#4a2b3a;line-height:1.7;}
.letter-inner p{margin:0 0 14px 0;text-align:left;max-width:100%;}
.letter-inner p:last-child{margin-bottom:0}
.letter-inner{word-wrap:break-word;white-space:pre-wrap}
.typing-cursor{display:inline-block;vertical-align:bottom;width:2px;height:1.05em;background:rgba(74,43,58,0.95);margin-left:6px;animation:blink 1s steps(2) infinite;}
@keyframes blink{50%{opacity:0}} 
.cta{background:linear-gradient(90deg,#ff7faa,#ff5f97);border:none;color:white;padding:12px 20px;border-radius:999px;cursor:pointer;box-shadow:0 12px 30px rgba(255,95,151,0.14);}
#stage{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}
.party-confetti{position:absolute;font-size:20px;animation:fall 4s linear forwards;}
/* balloon SVG layer */
.balloon-layer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

.balloon-layer g{transition:transform 10s linear;will-change:transform}

/* confetti pieces (div) */
.confetti{border-radius:2px;z-index:40}
@keyframes fall{0%{transform:translateY(0);}100%{transform:translateY(100vh);}}
.flower{width:220px;animation:float 5s ease-in-out infinite;margin:auto;}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-18px)}100%{transform:translateY(0)}}
/* flower petals sway */
.flower .petals{transform-origin:50% 50%;transform-box:fill-box;animation:sway 6s ease-in-out infinite;}
@keyframes sway{0%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}100%{transform:rotate(-3deg)}}

/* Content layout (used on message and video pages) */
.content{width:100%;max-width:1100px;padding:20px;display:flex;gap:28px;align-items:flex-start;justify-content:center;box-sizing:border-box;margin:0 auto;}

/* Video page specific layout */
.content.video-page{align-items:center;}
.video-page .left{flex:0 0 240px;display:flex;justify-content:center;align-items:center;padding:6px;}
.video-page .right{flex:1 1 420px;max-width:760px;min-width:260px;padding:6px;text-align:left}
.player-wrap{width:100%;max-width:100%;position:relative;padding-top:56.25%;/* 16:9 fallback for older browsers */}
/* iframe fills the padded container (works on all browsers) */
.player-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:#000;display:block}
/* keep aspect-ratio for modern browsers too */
.player-wrap iframe[style], .player-wrap iframe{aspect-ratio:16/9}

@media(max-width:768px){
  .content{flex-direction:column;align-items:center;padding:12px;}
  .video-page .left{flex:0 0 auto;margin-bottom:12px}
  .video-page .right{width:100%;}
  .player-wrap iframe{aspect-ratio:16/9;height:auto}
}

/* Broader mobile support: collapse fixed-page layout for small and mid-size devices */
@media(max-width:900px){
  .page{position:relative;inset:auto;height:auto;min-height:unset;align-items:flex-start;justify-content:flex-start;transform:none;padding-top:14px;padding-bottom:40px;overflow:visible;display:none}
  /* only show the active page to avoid stacked full-page sections creating large blank space */
  .page.show{display:flex}
  .content{gap:16px;padding:12px}
  .env-wrap{height:auto;padding:10px 0}
  .cards{gap:18px}
  .card{width:180px;height:240px}
  .card{width:180px;height:240px}
}
@media(max-width:768px){
  /* On small screens, let pages flow (not fixed) so the document can scroll naturally */
  .page{position:relative;inset:auto;height:auto;min-height:100vh;align-items:flex-start;justify-content:flex-start;transform:none;padding-top:18px;overflow:visible}
  .cards{flex-direction:column;align-items:center;}
  .env-wrap{height:200px;}
  .letter{max-width:92%;max-height:calc(100% - 24px);padding:18px 16px;font-size:16px;}
  .flower{width:160px;}
}

/* Extra small screens - make cards smaller and add breathing room */
@media(max-width:420px){
  .container{padding:12px}
  .brand{font-size:22px}
  .cards{gap:16px}
  .card{width:170px;height:230px;border-radius:16px}
  .card-art{width:140px;height:100px}
  .card-title{font-size:15px}
  .page{padding-top:12px}
  .content{padding:12px}
  .video-page .left{flex:0 0 180px}
  .video-page .right{min-width:200px}
  .player-wrap{padding-top:56.25%}
}

/* Make pages flow and scroll normally on small devices so users can reach the Video card */
@media (max-width:900px){
  .page{position:relative;inset:auto;height:auto;min-height:100vh;align-items:flex-start;justify-content:flex-start;transform:none;padding-top:12px;padding-bottom:40px;overflow:visible}
  /* ensure the active page is fully visible at top when shown */
  .page.show{align-items:flex-start}
}