/* Shared Hero Stage, used by index.html and stage-preview.html. */
#stage .vid{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;max-width:100%}
#stage .vid>img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
/* stage */
#stage{position:relative;width:100%;max-width:1136px;margin:0 auto;height:720px}
#stage .phone{position:absolute;left:50%;top:20px;width:300px;height:640px;margin-left:-150px;background:#211C5C;border-radius:48px;padding:6px;box-shadow:0 50px 80px -40px rgba(33,28,92,.55);z-index:2}
#stage .screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:#fff;display:flex;flex-direction:column;text-align:left}
#stage .sbar{display:flex;justify-content:space-between;padding:14px 22px 4px;font-size:.72rem;font-weight:800}
#stage .tabs{display:flex;align-items:center;gap:14px;padding:6px 16px 4px;font-size:.88rem;font-weight:700;color:var(--soft)}
#stage .tabs b{color:var(--ink);position:relative}
#stage .tabs b::after{content:"";position:absolute;left:30%;right:30%;bottom:-5px;height:3px;border-radius:3px;background:var(--pink)}
#stage .tabs .crown{margin-left:auto;font-size:1rem}
#stage .countries{display:flex;justify-content:space-between;padding:10px 14px 8px;font-size:.58rem;color:var(--muted);font-weight:600}
#stage .countries span{display:grid;justify-items:center;gap:3px}
#stage .countries i{font-style:normal;width:28px;height:28px;border-radius:50%;background:#F3F3F8;display:grid;place-items:center;font-size:.95rem}
#stage .feed{flex:1;overflow:hidden;position:relative;padding:0 8px}
#stage .feed-track{display:grid;grid-template-columns:1fr 1fr;gap:6px;animation:feed 22s linear infinite}
@keyframes feed{to{transform:translateY(-50%)}}
#stage .tile{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;color:#fff}
#stage .tile img{width:100%;height:100%;object-fit:cover}
#stage .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6))}
#stage .tile .on{position:absolute;left:6px;top:6px;z-index:1;background:rgba(0,0,0,.4);border-radius:999px;font-size:.52rem;font-weight:700;padding:2px 7px;display:flex;align-items:center;gap:4px}
#stage .tile .on i{width:5px;height:5px;border-radius:50%;background:var(--green)}
#stage .tile .nm{position:absolute;left:7px;bottom:7px;z-index:1;font-size:.62rem;font-weight:800;line-height:1.2}
#stage .tile .nm small{display:block;font-weight:600;font-size:.52rem}
#stage .tile .cam{position:absolute;right:6px;bottom:6px;z-index:1;width:24px;height:24px;border-radius:8px;background:var(--green);display:grid;place-items:center}
#stage .tile .cam svg{width:13px;height:13px}
#stage .tabbar{display:flex;justify-content:space-around;padding:10px 6px 16px;border-top:1px solid var(--line);font-size:1rem;color:var(--soft);background:#fff;position:relative;z-index:2}
#stage .tabbar span{position:relative}
#stage .tabbar .act{color:var(--ink)}
#stage .tabbar em{position:absolute;top:-6px;right:-10px;background:#FF3B5C;color:#fff;font-style:normal;font-size:.5rem;font-weight:800;border-radius:999px;padding:1px 4px}

#stage .float-card{position:absolute;background:var(--card);border-radius:24px;box-shadow:0 30px 60px -28px rgba(33,28,92,.45);z-index:3;text-align:left}
#stage .incoming{left:60px;top:60px;width:250px;background:none;box-shadow:none;animation:bob 5s ease-in-out infinite}
#stage .incoming-surface{position:relative;padding:12px;border-radius:inherit;background:var(--card);box-shadow:0 30px 60px -28px rgba(33,28,92,.45)}
#stage .incoming-surface::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 45%,transparent),0 0 28px 6px color-mix(in srgb,var(--green) 35%,transparent);animation:incoming-glow 2.4s ease-in-out infinite;opacity:0}
@keyframes incoming-glow{0%,80%,100%{opacity:0}90%{opacity:1}}
#stage .incoming .vid{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5}
#stage .incoming .vid img{width:100%;height:100%;object-fit:cover;transition:opacity .4s}
#stage .incoming .vid::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65))}
#stage .incoming .lbl{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;color:#fff;font-weight:800;font-size:.95rem;line-height:1.25}
#stage .incoming .lbl small{display:block;font-weight:600;font-size:.72rem;opacity:.9}
#stage .incoming .ring-badge{position:absolute;left:12px;top:12px;z-index:1;background:rgba(255,255,255,.9);color:var(--ink);border-radius:999px;font-size:.7rem;font-weight:800;padding:4px 10px;display:flex;align-items:center;gap:6px}
#stage .incoming .ring-badge i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
#stage .incoming .acts{display:flex;justify-content:space-between;gap:10px;margin-top:12px}
#stage .incoming .acts span{flex:1;height:42px;border-radius:999px;display:grid;place-items:center;font-weight:800;font-size:.85rem}
#stage .incoming .skip{background:#F1F1F6;color:var(--muted)}
#stage .incoming .take{background:var(--green);color:#fff;animation:shake 2.4s ease-in-out infinite}
@keyframes shake{0%,80%,100%{transform:none}84%{transform:rotate(-4deg)}88%{transform:rotate(4deg)}92%{transform:rotate(-3deg)}96%{transform:rotate(2deg)}}
@keyframes bob{50%{transform:translateY(-12px)}}
#stage .translate{right:20px;top:60px;width:270px;padding:16px;display:grid;gap:10px;animation:bob 5s ease-in-out 1.2s infinite}
#stage .translate .who{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.88rem}
#stage .translate .who img{width:36px;height:36px;border-radius:50%;object-fit:cover}
#stage .translate .who small{display:block;color:var(--soft);font-weight:600;font-size:.72rem}
#stage .msg{background:#F4F2FF;border-radius:16px 16px 16px 4px;padding:10px 12px;font-size:.88rem;font-weight:600;line-height:1.4}
#stage .msg small{display:block;color:var(--purple);font-weight:600;font-size:.74rem;margin-top:4px}
#stage .translate .translation-line{display:grid;align-items:center;min-height:18px}
#stage .translation-line>*{grid-area:1/1}
#stage .translation-loader{display:none;width:18px;height:18px}
#stage .translation-line[data-state="loading"] .translation-loader{display:block;animation:translation-spin 1s linear infinite}
#stage .translation-line[data-state="loading"] .translation-text{visibility:hidden}
@keyframes translation-spin{to{transform:rotate(360deg)}}
#stage .msg.me{background:var(--purple);color:#fff;border-radius:16px 16px 4px 16px;justify-self:end}
#stage .match{right:56px;top:380px;padding:12px 16px;display:flex;align-items:center;gap:12px}
#stage .match .pair{position:relative;display:flex;flex:none}
#stage .match .pair img{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;border:3px solid #fff}
#stage .match .pair img+img{margin-left:-12px}
#stage .match-male{--spread:-7.5px}
#stage .match-female{--spread:7.5px}
#stage .match[data-pair-state="apart"] .pair img{transform:translateX(var(--spread))}
#stage .match[data-pair-state="joining"] .pair img{animation:match-avatar-join .55s cubic-bezier(.22,1.35,.36,1) both}
#stage .match[data-state="entering"]{animation:match-enter .7s ease-out both}
#stage .match[data-state="exiting"]{animation:match-exit .45s ease-in both}
#stage .match[data-state="waiting"]{opacity:0;visibility:hidden;pointer-events:none}
#stage .match-heart{position:absolute;left:50%;top:10px;z-index:2;font-size:16px;line-height:1;opacity:0;pointer-events:none}
#stage .match[data-pair-state="joined"] .match-heart{animation:match-heart-pop .9s ease-out both}
@keyframes match-enter{
  0%{opacity:0;transform:translateY(24px) scale(.94)}
  60%{opacity:1;transform:translateY(-6px) scale(1.025)}
  80%{transform:translateY(2px) scale(.995)}
  100%{opacity:1;transform:none}
}
@keyframes match-exit{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-20px) scale(.98)}}
@keyframes match-avatar-join{from{transform:translateX(var(--spread))}to{transform:translateX(0)}}
@keyframes match-heart-pop{
  0%{opacity:0;transform:translate(-50%,8px) scale(.3)}
  20%{opacity:1;transform:translate(-50%,-3px) scale(1.25)}
  40%{opacity:1;transform:translate(-50%,-7px) scale(1)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-28px) scale(.9)}
}
#stage .match b{display:block;font-size:.9rem}
#stage .match small{color:var(--muted);font-size:.74rem;font-weight:600}
#stage .gift{left:0;top:470px;padding:10px 16px 10px 10px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:.85rem;background:var(--gift-bg,#FF7F3A);color:#fff}
#stage .gift i{flex:none;font-style:normal;width:38px;height:38px;border-radius:12px;background:var(--gift-emoji-bg,#FFA16F);display:grid;place-items:center;font-size:1.2rem}
#stage .gift-copy{white-space:nowrap}
#stage .gift[data-state="entering"]{animation:match-enter .21s ease-out both}
#stage .gift[data-state="exiting"]{animation:match-exit .14s ease-in both}
#stage .gift[data-state="waiting"]{opacity:0;visibility:hidden;pointer-events:none}
#stage .hearts{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}
#stage .heart{position:absolute;bottom:40px;font-size:20px;animation:rise linear forwards}
@keyframes rise{to{transform:translateY(-520px) translateX(var(--dx,0)) rotate(var(--rot,0));opacity:0}}
@media (max-width:960px){
  #stage{display:grid;justify-items:center;gap:16px}
  #stage .phone{position:relative;left:auto;margin:0}
  #stage .float-card{position:relative;left:auto;right:auto;top:auto;animation:none}
  #stage .incoming,#stage .translate,#stage .match,#stage .gift{display:none}
}

/* The two halves share the Stage stacking context so the phone occludes the rear. */
#stage .orbit{position:absolute;inset:0;pointer-events:none}
#stage .orbit svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-width:1.25}
#stage .orbit .orbit-back{z-index:1;stroke:#E8E3F6;stroke-dasharray:3 5}
#stage .orbit .orbit-front{z-index:3;stroke:#CFC3EF;stroke-dasharray:3 5}
#stage .orbit.o1 .orbit-back{stroke:#EEEAF8}
#stage .orbit.o1 .orbit-front{stroke:#DED5F2}
#stage .orbit .o{position:absolute;left:0;top:0;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;box-shadow:0 0 0 4px #fff,0 10px 22px -8px rgba(33,28,92,.35);will-change:transform;z-index:1}
#stage .orbit .o img{width:100%;height:100%;border-radius:50%;object-fit:cover}
#stage .orbit .o i{position:absolute;right:0;bottom:2px;width:14px;height:14px;border-radius:50%;background:var(--green);border:2.5px solid #fff}
#stage .orbit.o2 .o{width:46px;height:46px;margin:-23px 0 0 -23px}

#stage .hello{position:absolute;z-index:4;background:#fff;color:var(--ink);font-weight:800;font-size:.92rem;padding:9px 15px;border-radius:18px 18px 18px 4px;box-shadow:0 14px 30px -12px rgba(33,28,92,.4);white-space:nowrap;animation:popb-f05 6s ease-in-out infinite;opacity:0}
#stage .hello small{display:block;font-weight:600;color:var(--soft);font-size:.68rem}
#stage .hello.c1{left:368px;top:46px;background:#A79FFF;animation-delay:0s}
#stage .hello.c1 small{color:#6B6E86}
#stage .hello.c2{right:230px;top:320px;animation-delay:1.2s;animation-name:popb-f06;background:var(--purple);color:#fff;border-radius:18px 18px 4px 18px}
#stage .hello.c2 small{color:#E5D6FF}
#stage .hello.c3{left:280px;top:430px;animation-delay:2.4s;animation-name:popb-f07}
#stage .hello.c4{right:340px;top:490px;animation-delay:3.6s;animation-name:popb-f08;background:var(--blob-yellow)}
#stage .hello.c4 small{color:#7A5B00}
#stage .hello.c5{left:320px;top:590px;animation-delay:4.8s;animation-name:popb-f09;background:#FFE3F6}
/* Each hold starts after the 360ms entrance; exit lasts 480ms, total cycle stays 6s. */
@keyframes popb-f05{0%{opacity:0;transform:scale(.5) translateY(14px)}6%{opacity:1;transform:none}14.000000%,100%{opacity:0;transform:scale(.9) translateY(-14px)}}
@keyframes popb-f06{0%{opacity:0;transform:scale(.5) translateY(14px)}6%,22.666667%{opacity:1;transform:none}30.666667%,100%{opacity:0;transform:scale(.9) translateY(-14px)}}
@keyframes popb-f07{0%{opacity:0;transform:scale(.5) translateY(14px)}6%,31.000000%{opacity:1;transform:none}39.000000%,100%{opacity:0;transform:scale(.9) translateY(-14px)}}
@keyframes popb-f08{0%{opacity:0;transform:scale(.5) translateY(14px)}6%,39.333333%{opacity:1;transform:none}47.333333%,100%{opacity:0;transform:scale(.9) translateY(-14px)}}
@keyframes popb-f09{0%{opacity:0;transform:scale(.5) translateY(14px)}6%,47.666667%{opacity:1;transform:none}55.666667%,100%{opacity:0;transform:scale(.9) translateY(-14px)}}
#stage[data-orbit-moving="true"] .hello:is(.c1,.c2,.c3,.c4){animation-play-state:paused}

#stage{--px:0;--py:0}
#stage .phone{transform:perspective(1100px) rotateY(calc(var(--px)*12deg)) rotateX(calc(var(--py)*-9deg));transition:transform .25s ease-out}
#stage .float-card,#stage .hello{translate:calc(var(--px)*var(--d,24px)) calc(var(--py)*var(--d,24px))}
#stage .incoming{--d:-34px}#stage .translate{--d:30px}#stage .match{--d:42px}#stage .gift{--d:-26px}
#stage .hello.c1,#stage .hello.c3,#stage .hello.c5{--d:-18px}#stage .hello.c2,#stage .hello.c4{--d:20px}

#stage .incoming-surface{transition:transform .45s cubic-bezier(.5,0,.3,1),opacity .45s}
#stage .incoming-surface.out{transform:translateX(-120%) rotate(-14deg);opacity:0;pointer-events:none}
#stage .incoming-surface.pre{transform:none;opacity:0;transition:none}
#stage .incoming-surface.is-overlay{position:absolute;inset:0}
#stage .incoming-surface.is-hidden{visibility:hidden;opacity:0;transform:none;transition:none;pointer-events:none}

[data-stage-host] > .burst{position:absolute;z-index:6;pointer-events:none;font-size:22px;animation:burst .9s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) scale(1.1) rotate(var(--br));opacity:0}}
#stage .tile .cam{animation:camp 2.4s ease-in-out infinite}
@keyframes camp{50%{transform:scale(1.15)}}
@media(max-width:960px){
  #stage .hello{display:none}
}
@media(prefers-reduced-motion:reduce){
  #stage .hello{display:none}
  #stage *,#stage *::before,#stage *::after{animation:none!important;transition:none!important}
}