:root{--bg:#2a0a14;--bg2:#4a1024;--gold:#f2c879;--rose:#ff5c8a;--ink:#fff4ee;--muted:#e9c9cf;--card:rgba(255,255,255,.07);--line:rgba(242,200,121,.35)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden}
button,a{touch-action:manipulation}
body{margin:0;font-family:Heebo,system-ui,sans-serif;color:var(--ink);background:radial-gradient(120% 80% at 50% 0,var(--bg2),var(--bg) 70%) fixed;line-height:1.6;overflow-x:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;inset-inline-start:8px;top:-60px;background:var(--gold);color:#000;padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{top:8px}
#bg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
main,footer{position:relative;z-index:1}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
section{max-width:960px;margin:0 auto;padding:72px max(20px,env(safe-area-inset-right)) 72px max(20px,env(safe-area-inset-left));text-align:center}
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center}
.eyebrow{color:var(--gold);letter-spacing:.12em;font-weight:500;margin:0 0 12px}
h1,h2{font-family:'Secular One',Heebo,sans-serif;font-weight:400;margin:0}
h1{font-size:clamp(2.4rem,9vw,5.2rem);line-height:1.15}
h1 em{font-style:normal;color:var(--rose);text-shadow:0 0 30px rgba(255,92,138,.6)}
h2{font-size:clamp(1.8rem,6vw,3rem)}
.lead{font-size:clamp(1.1rem,3.5vw,1.5rem);color:var(--muted);margin:20px 0}
.lead strong{color:var(--gold);font-size:1.3em}
.clock{margin:28px 0;padding:16px 28px;border:1px solid var(--line);border-radius:20px;background:var(--card);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.clock-label{display:block;color:var(--muted);font-size:.95rem}
.clock-time{display:block;font-size:clamp(2rem,8vw,3.4rem);font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;direction:ltr}
.scroll{color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--gold);padding:6px 2px;animation:bob 2s infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.sub{color:var(--muted);margin:8px 0 32px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;max-width:640px;margin:0 auto}
.card{position:relative;text-align:start;padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font:inherit;transition:transform .25s,border-color .25s,background .25s}
.card:hover{transform:translateY(-4px)}
.card:focus-visible,.btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.card[aria-checked=true]{border-color:var(--rose);background:rgba(255,92,138,.18);box-shadow:0 0 0 2px var(--rose),0 12px 40px rgba(255,92,138,.3)}
.card .emoji{font-size:2.4rem;display:block}
.card .t{font-family:'Secular One',Heebo;font-size:1.35rem;display:block;margin:6px 0 2px}
.card .d{color:var(--muted);font-size:.95rem}
.card .tick{position:absolute;inset-block-start:12px;inset-inline-end:14px;opacity:0;transition:.2s}
.card[aria-checked=true] .tick{opacity:1}
.status{font-size:1.2rem;color:var(--gold);min-height:2em}
.buttons{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;min-height:120px;position:relative}
.btn{font:inherit;font-weight:800;font-size:1.25rem;border:0;border-radius:999px;padding:16px 36px;cursor:pointer;text-decoration:none;display:inline-block;transition:transform .2s,opacity .2s}
.yes{background:linear-gradient(135deg,var(--rose),#ff8a5c);color:#fff;box-shadow:0 10px 30px rgba(255,92,138,.45)}
.yes:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.yes:not(:disabled):hover{transform:scale(1.06)}
.no{touch-action:manipulation;transition:left .55s cubic-bezier(.34,1.7,.55,1),top .55s cubic-bezier(.34,1.7,.55,1),font-size .35s!important;background:rgba(42,10,20,.9);color:var(--muted);border:1px solid var(--line);font-weight:500;font-size:1.7rem;padding:.6em 1.5em;will-change:transform}
.done{padding-top:24px}
.ticket{border:2px dashed var(--gold);border-radius:28px;padding:36px 22px;background:var(--card);animation:pop .6s both}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.checklist{list-style:none;padding:0;margin:20px 0 28px;font-size:1.15rem;display:grid;gap:6px}
footer{text-align:center;color:var(--muted);padding:32px 20px calc(48px + env(safe-area-inset-bottom));font-size:.9rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.no.flying{position:fixed;z-index:8}
.no.gave-up{background:linear-gradient(135deg,var(--rose),#ff8a5c);color:#fff;border:0;font-size:1.25rem!important;font-weight:800;padding:16px 36px}

.photo{margin:26px 0 6px;width:min(92vw,560px);position:relative;transform:rotate(-1.5deg)}
.photo::before{content:"";position:absolute;inset:-10px;border-radius:34px;background:linear-gradient(135deg,var(--gold),var(--rose));opacity:.85;filter:blur(.5px)}
.photo img{position:relative;display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:26px;border:4px solid #fff4ee;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.card .ico{display:block;width:56px;height:56px;color:var(--gold);margin-bottom:6px;transition:transform .3s,color .3s}
.card .ico svg{width:100%;height:100%}
.card:hover .ico{transform:rotate(-8deg) scale(1.1)}
.card[aria-checked=true] .ico{color:var(--rose)}
.ticket .mini{width:110px;height:110px;border-radius:50%;object-fit:cover;object-position:60% 30%;border:3px solid var(--gold);margin:-70px auto 14px;display:block;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.done{padding-top:80px}

.no.hop{animation:hop .55s cubic-bezier(.3,.7,.4,1)}
@keyframes hop{0%{transform:scale(1,1)}15%{transform:scale(1.25,.7)}45%{transform:scale(.8,1.35) rotate(-12deg)}75%{transform:scale(1.15,.85) rotate(8deg)}100%{transform:scale(1,1)}}
.yes.wiggle{animation:wiggle .5s}
@keyframes wiggle{20%{rotate:-6deg}40%{rotate:6deg}60%{rotate:-4deg}80%{rotate:3deg}}

.answer{min-height:90vh;min-height:90svh;display:flex;flex-direction:column;justify-content:center;align-items:center}
.answer h2{font-size:clamp(2.2rem,8vw,3.6rem)}
.answer .status{margin:14px 0 8px}
@media (max-width:480px){.cards{gap:10px}.card{padding:16px 12px}.card .ico{width:44px;height:44px}.card .t{font-size:1.1rem}.card .d{font-size:.85rem}}

.yes{transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.us{padding-bottom:24px}
.gallery{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;margin-top:28px}
.polaroid{margin:0;background:#fff4ee;padding:12px 12px 10px;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.5);transform:rotate(var(--tilt,0deg));width:min(82vw,330px);transition:transform .3s}
.polaroid:hover{transform:rotate(0) scale(1.03)}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.polaroid figcaption{color:#3a1420;font-family:'Secular One',Heebo;font-size:1.1rem;padding:12px 4px 4px}
.polaroid.reveal{opacity:0;translate:0 40px;transition:opacity .7s,translate .7s,transform .3s}
.polaroid.reveal.in{opacity:1;translate:0 0}

.twist-done{font-family:'Secular One',Heebo;color:var(--gold);font-size:1.25rem;margin:0 0 18px}

.twist{display:inline-block;margin:6px 0 10px;padding:10px 20px;border:2px dashed var(--gold);border-radius:14px;color:var(--gold);background:rgba(242,200,121,.08);font-size:1.05rem;animation:pop .5s .35s both}
.twist span{display:inline-block;animation:bob 1.6s infinite}
.card[aria-checked=true] .t,.card[aria-checked=true] .d{opacity:.45;text-decoration:line-through;text-decoration-color:var(--rose);text-decoration-thickness:2px}
.card[aria-checked=true]::after{content:"לא משנה 😏";position:absolute;inset-inline:0;top:42%;margin-inline:auto;width:max-content;padding:4px 14px;font-family:'Secular One',Heebo;font-size:1.35rem;color:var(--rose);border:3px solid var(--rose);border-radius:10px;background:rgba(42,10,20,.92);rotate:-11deg;animation:slam .5s cubic-bezier(.2,.9,.3,1.2) both;pointer-events:none}
@keyframes slam{from{scale:3.2;opacity:0}55%{scale:.88;opacity:1}to{scale:1;opacity:1}}
