*{box-sizing:border-box}
:root{
  --pink:#f7b4ce;--pink2:#fde8f1;--deep:#8c3157;--line:#dba8bd;
  --paper:#fffafd;--shadow:0 12px 35px rgba(107,35,66,.12)
}
html,body{margin:0;min-height:100%;background:#eadde3;font-family:"Cairo",Arial,sans-serif;color:#78324e}
body{display:flex;justify-content:center}
button,input,textarea{font:inherit}
button{cursor:pointer}
.phone{width:min(100vw,520px);min-height:100vh;background:var(--paper);position:relative;overflow:hidden;box-shadow:0 0 50px rgba(0,0,0,.12)}
.topbar{height:58px;background:linear-gradient(180deg,#e98caf,#f5b0ca);display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:white;position:sticky;top:0;z-index:20}
.reels{font-weight:800;font-size:17px}
.icon-btn{border:0;background:transparent;color:white;font-size:31px;width:42px;height:42px;line-height:1}
.screen{min-height:calc(100vh - 58px);padding:18px 20px 45px;background:
 radial-gradient(circle at 10% 20%,rgba(255,255,255,.8),transparent 25%),
 linear-gradient(145deg,#fffafd 0%,#fff6fa 60%,#fde5ef 100%)}
.progress{text-align:center;color:#8d5a70;font-size:13px;margin:2px 0 14px}
.intro-note{text-align:center;font-size:13px;color:#a15d7c;margin-bottom:26px}
.quiz-question{font-size:22px;font-weight:800;line-height:1.45;text-align:center;margin:25px 0 20px;color:#813454}
.answers{display:grid;gap:11px}
.answer{border:1.5px solid #d9a9bd;background:rgba(255,255,255,.75);border-radius:10px;padding:13px 15px;text-align:center;color:#8b5870;transition:.2s}
.answer:hover,.answer.selected{background:#f5b1cb;color:#71304c;transform:translateY(-1px)}
.hero{text-align:center;padding-top:10px}
.heart{width:66px;height:58px;margin:0 auto 8px;color:#d52f5c;font-size:62px;line-height:.8;text-shadow:0 5px 13px rgba(200,35,80,.22)}
.hero h1{font-size:37px;line-height:1.1;margin:10px 0 6px;color:#9a355d}
.hero p{margin:0;color:#9a5c78;font-size:16px}
.balloon-stage{min-height:390px;position:relative;margin:15px 0 4px}
.balloon{position:absolute;width:92px;height:118px;border-radius:52% 52% 48% 48%;border:0;filter:drop-shadow(0 9px 8px rgba(73,32,49,.16));transition:transform .2s}
.balloon:hover{transform:translateY(-7px) rotate(2deg)}
.balloon::after{content:"";position:absolute;left:50%;bottom:-42px;width:1.5px;height:48px;background:#555;transform:translateX(-50%) rotate(3deg)}
.balloon::before{content:"";position:absolute;left:19px;top:16px;width:24px;height:15px;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(-25deg)}
.knot{position:absolute;bottom:-7px;left:50%;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);z-index:-1}
.balloon.pop{animation:pop .42s forwards}
@keyframes pop{0%{transform:scale(1)}55%{transform:scale(1.22);opacity:1}100%{transform:scale(.05);opacity:0}}
.b1{left:7%;top:70px;background:#ec4774}.b2{right:8%;top:42px;background:#a45ae2}.b3{left:42%;top:150px;background:#55b7df}.b4{left:13%;top:235px;background:#f3c44e}.b5{right:13%;top:245px;background:#ee7ca7}
.photo-card{position:absolute;width:112px;height:145px;border-radius:15px;overflow:hidden;background:#fff;box-shadow:var(--shadow);animation:photoIn .55s cubic-bezier(.2,.8,.2,1)}
.photo-card img{width:100%;height:100%;object-fit:cover}
@keyframes photoIn{from{opacity:0;transform:scale(.4) translateY(20px) rotate(-8deg)}to{opacity:1;transform:none}}
.reveal-area{text-align:center;min-height:45px;color:#a15d7c;font-size:13px}
.final-card{background:rgba(255,255,255,.8);border:1px solid #e7bfd0;border-radius:18px;padding:20px;text-align:center;box-shadow:var(--shadow);margin-top:8px}
.final-card h2{margin:0 0 9px;font-size:22px;color:#8d3155}
.final-card p{line-height:1.8;margin:0 0 16px}
.primary,.secondary{border:0;border-radius:10px;padding:12px 18px}
.primary{background:#ee9fbe;color:#fff;box-shadow:0 5px 14px rgba(187,74,116,.2)}
.secondary{background:#f6e8ee;color:#8a4662}
.hidden{display:none!important}

.settings{position:fixed;inset:0;background:rgba(62,25,43,.35);z-index:50;padding:18px;overflow:auto}
.settings-card{max-width:480px;margin:10px auto;background:#fffafd;border-radius:20px;padding:20px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.settings-head{display:flex;align-items:center;justify-content:space-between}
.settings-head h2{margin:0}
.close{border:0;background:#f5e6ed;width:38px;height:38px;border-radius:50%;font-size:24px;color:#81405b}
.settings label{display:block;font-weight:700;font-size:13px;margin:14px 0}
.settings input,.settings textarea{display:block;width:100%;margin-top:6px;border:1px solid #ddb5c6;border-radius:10px;padding:10px;background:#fff}
.hint{font-size:12px;color:#996b80}
.upload-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.upload-box{border:1px dashed #d39ab3;border-radius:13px;padding:10px;background:#fff5f9}
.upload-box label{margin:0;font-size:12px}
.upload-box input{border:0;padding:5px 0}
.preview{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px;margin-bottom:6px;background:#f6e7ee}
.settings-actions{display:flex;gap:10px;margin-top:18px}
.settings-actions>*{flex:1}

@media(max-width:380px){
 .balloon{width:82px;height:106px}.balloon-stage{min-height:365px}
 .hero h1{font-size:32px}.quiz-question{font-size:20px}
}


/* ===== Cinematic / video-style motion effects ===== */
.screen{animation:screenIn .75s cubic-bezier(.22,.8,.25,1)}
@keyframes screenIn{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}

.topbar{animation:barDrop .55s ease-out}
@keyframes barDrop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

.hero{animation:heroReveal 1s cubic-bezier(.16,1,.3,1) both}
.hero .heart{animation:heartBeat 1.7s ease-in-out infinite}
@keyframes heroReveal{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}
@keyframes heartBeat{0%,100%{transform:scale(1) rotate(-3deg)}12%{transform:scale(1.12) rotate(3deg)}22%{transform:scale(1) rotate(-2deg)}}

.intro-note{animation:fadeUp .7s .15s both}
.quiz-question{animation:questionIn .6s cubic-bezier(.2,.9,.25,1) both}
.answers .answer{animation:answerIn .48s cubic-bezier(.2,.8,.2,1) both}
.answers .answer:nth-child(1){animation-delay:.05s}
.answers .answer:nth-child(2){animation-delay:.11s}
.answers .answer:nth-child(3){animation-delay:.17s}
.answers .answer:nth-child(4){animation-delay:.23s}
@keyframes questionIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes answerIn{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.answer{position:relative;overflow:hidden}
.answer::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);transform:translateX(-120%);transition:transform .55s}
.answer:hover::after{transform:translateX(120%)}
.answer.selected{animation:answerTap .35s ease-out}
@keyframes answerTap{40%{transform:scale(.96)}100%{transform:scale(1)}}

.balloon-stage{perspective:900px}
.balloon{transform-origin:50% 100%;animation:balloonFloat 3.2s ease-in-out infinite}
.balloon.b2{animation-delay:-.9s}.balloon.b3{animation-delay:-1.7s}.balloon.b4{animation-delay:-2.3s}.balloon.b5{animation-delay:-.4s}
@keyframes balloonFloat{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(3deg)}
}
.balloon:hover{animation-play-state:paused;transform:translateY(-13px) scale(1.05) rotate(4deg)}
.balloon.pop{animation:popCinematic .5s cubic-bezier(.2,.8,.2,1) forwards!important}
@keyframes popCinematic{
  0%{transform:scale(1) rotate(0);filter:drop-shadow(0 9px 8px rgba(73,32,49,.16))}
  18%{transform:scale(1.12) rotate(-5deg)}
  36%{transform:scale(1.24) rotate(5deg)}
  55%{transform:scale(1.05);opacity:1}
  100%{transform:scale(.03);opacity:0;filter:blur(3px)}
}

.photo-card{animation:photoCinematic .72s cubic-bezier(.16,1,.3,1) both}
@keyframes photoCinematic{
  0%{opacity:0;transform:translateY(40px) scale(.35) rotate(-14deg)}
  60%{opacity:1;transform:translateY(-8px) scale(1.06) rotate(3deg)}
  100%{opacity:1;transform:none}
}
.photo-card::after{content:"";position:absolute;inset:0;border-radius:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);pointer-events:none}
.photo-card img{transition:transform 1.2s ease}
.photo-card:hover img{transform:scale(1.07)}

.reveal-area{animation:fadeUp .8s .3s both}
.final-card{animation:finalReveal 1s cubic-bezier(.16,1,.3,1) both}
@keyframes finalReveal{
  from{opacity:0;transform:translateY(35px) scale(.92);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}
.final-card h2{animation:glowText 2.2s ease-in-out infinite alternate}
@keyframes glowText{from{text-shadow:0 0 0 rgba(213,47,92,0)}to{text-shadow:0 0 16px rgba(213,47,92,.25)}}

.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.particle{position:absolute;width:6px;height:10px;border-radius:2px;opacity:0;animation:confettiFall var(--dur) cubic-bezier(.2,.65,.35,1) forwards;transform:rotate(var(--rot))}
@keyframes confettiFall{
  0%{opacity:1;transform:translate3d(0,0,0) rotate(0) scale(1)}
  75%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--x),var(--y),0) rotate(var(--spin)) scale(.7)}
}
.pop-ring{position:absolute;width:25px;height:25px;border:3px solid rgba(239,159,190,.95);border-radius:50%;transform:translate(-50%,-50%);animation:ring .55s ease-out forwards;pointer-events:none}
@keyframes ring{from{opacity:1;width:25px;height:25px}to{opacity:0;width:180px;height:180px}}
.flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none;animation:flash .24s ease-out}
@keyframes flash{0%{opacity:0}25%{opacity:.55}100%{opacity:0}}

.screen.page-transition-out{animation:pageOut .28s ease-in forwards}
.screen.page-transition-in{animation:pageIn .55s cubic-bezier(.2,.9,.25,1) both}
@keyframes pageOut{to{opacity:0;transform:translateX(-28px)}}
@keyframes pageIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition:none!important}
}

.video-card{
  margin:18px 0 30px; padding:16px; border-radius:24px;
  background:rgba(255,255,255,.84); border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 45px rgba(128,48,90,.14);
  animation:cardReveal .8s cubic-bezier(.2,.8,.2,1) both;
}
.video-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;font-weight:800;color:#6d3152}
.video-badge{font-size:11px;padding:5px 9px;border-radius:999px;background:#fff0f6;color:#b34c79}
.video-card video{width:100%;display:block;max-height:55vh;border-radius:18px;background:#1b1020;object-fit:contain;box-shadow:0 12px 28px rgba(54,24,42,.18);}
.video-card .primary{width:100%;margin-top:14px}
.video-upload-box{padding:14px;border-radius:18px;background:#fff5f9;border:1px dashed #e9a8c2;margin-top:8px}
.settings-video-preview{width:100%;max-height:190px;border-radius:14px;background:#20131a;margin-bottom:10px}
.video-upload-label{display:flex;align-items:center;justify-content:center;min-height:54px;border-radius:14px;background:#fff;border:1px solid #edc1d3;color:#8b3c60;font-weight:800;cursor:pointer}
.video-upload-label input{display:none}
.small-btn{margin-top:9px;width:100%}
@keyframes cardReveal{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}


/* Separate final video page */
.video-screen{min-height:calc(100vh - 58px);display:flex;align-items:center;justify-content:center;padding:28px 20px 50px;background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.95),transparent 35%),linear-gradient(145deg,#fffafd 0%,#fff1f7 58%,#f9dbe9 100%)}
.video-page-content{width:100%;max-width:470px;text-align:center;animation:videoPageReveal .85s cubic-bezier(.16,1,.3,1) both}
.video-page-icon{width:74px;height:74px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.8);box-shadow:0 12px 35px rgba(128,48,90,.12);font-size:34px;animation:videoIconFloat 2.8s ease-in-out infinite}
.video-page-content h1{margin:0 0 7px;font-size:31px;color:#8f3157}.video-page-content>p{margin:0 0 22px;color:#9a5c78;font-size:14px}.video-screen .video-card{margin:0;width:100%}.video-screen .video-card video{max-height:62vh}.video-restart{width:100%;margin-top:16px}
@keyframes videoPageReveal{from{opacity:0;transform:translateY(35px) scale(.96)}to{opacity:1;transform:none}}
@keyframes videoIconFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(2deg)}}
.video-screen.page-transition-out{animation:pageOut .28s ease-in forwards}.video-screen.page-transition-in{animation:pageIn .55s cubic-bezier(.2,.9,.25,1) both}

.video-status{margin:10px 0 0;color:#9a5c78;font-size:12px}
.video-screen .video-card{overflow:hidden}
.video-screen .video-card video{min-height:180px}

.video-card video{min-height:220px;}
.video-error{margin:10px 0 0;padding:10px;border-radius:12px;background:#fff0f4;color:#9a355d;font-size:12px;text-align:center;}