*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:Quicksand,system-ui,sans-serif;background:#120a1c;overflow:hidden}:root{--band: clamp(70px, 15vmin, 180px);--tile: clamp(120px, 20vmin, 180px);--kraft: #b98a5a}.scene{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;overflow:clip;perspective:1100px}.flaps{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d}.flap{position:absolute;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.45,0,.25,1)}.face{position:absolute;top:0;right:0;bottom:0;left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}.face-front{background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.35) 100%),var(--lid-pattern) 0 0 / var(--tile) var(--tile),#2a1640}.face-back{background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 9px),linear-gradient(135deg,#c99b6a,var(--kraft) 50%,#9c7246)}.flap-left,.flap-right{top:0;bottom:0;width:50%}.flap-left{left:0;transform-origin:left center;transform:translateZ(1px)}.flap-right{right:0;transform-origin:right center;transform:translateZ(1px)}.flap-left .face-front{box-shadow:inset -3px 0 5px #0009}.flap-right .face-front{box-shadow:inset 3px 0 5px #0009}.flap-left .face-back,.flap-right .face-back{transform:rotateY(180deg)}.flap-top,.flap-bottom{left:0;right:0;height:50%}.flap-top{top:0;transform-origin:center top}.flap-bottom{bottom:0;transform-origin:center bottom}.flap-top .face-front{box-shadow:inset 0 -3px 5px #0009}.flap-bottom .face-front{box-shadow:inset 0 3px 5px #0009}.flap-top .face-back,.flap-bottom .face-back{transform:rotateX(180deg)}.band{position:absolute;box-shadow:0 0 14px #0000008c;transition:transform .85s cubic-bezier(.6,0,.8,.4)}.band-v{top:0;bottom:0;left:calc(50% - var(--band) / 2);width:var(--band);background:linear-gradient(90deg,#b9500b,#e8701a 18%,#ff9a3f,#e8701a 82%,#b9500b)}.band-h{left:0;right:0;top:calc(50% - var(--band) / 2);height:var(--band);background:linear-gradient(180deg,#b9500b,#e8701a 18%,#ff9a3f,#e8701a 82%,#b9500b)}.bow-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:visible;touch-action:none;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}.handle{cursor:grab}.is-dragging .handle{cursor:grabbing}.tag-text{font-family:Quicksand,sans-serif;font-weight:700;font-size:25px;fill:#2a1640}.tag{transform-box:fill-box;transform-origin:50% 0%}.stage-tied:not(.is-dragging) .tag{animation:tag-swing 1.8s ease-in-out infinite}@keyframes tag-swing{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.bow{transition:opacity .4s ease}.stage-open .bow{opacity:0}.stage-unwrapped .band-v,.stage-open .band-v{transform:translateY(110vh)}.stage-unwrapped .band-h,.stage-open .band-h{transform:translate(110vw);transition-delay:.15s}.stage-open .band{visibility:hidden}.stage-open .flap-left{transform:translateZ(1px) rotateY(-180deg)}.stage-open .flap-right{transform:translateZ(1px) rotateY(180deg)}.stage-open .flap-top{transform:rotateX(180deg);transition-delay:.75s}.stage-open .flap-bottom{transform:rotateX(-180deg);transition-delay:.75s}.inside{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#3d1a66,#1d0d33 55%,#2f1450)}.inside-floor{position:absolute;top:5vmin;right:5vmin;bottom:5vmin;left:5vmin;display:flex;align-items:center;justify-content:center;padding:16px;background:var(--inside-pattern) 0 0 / clamp(150px,24vmin,220px),radial-gradient(ellipse at 20% 25%,#8f4fd6,transparent 45%),radial-gradient(ellipse at 80% 70%,#c05fd9,transparent 40%),radial-gradient(ellipse at 70% 15%,#5b2a9e,transparent 45%),radial-gradient(ellipse at 25% 85%,#3f1d78,transparent 50%),linear-gradient(160deg,#6a32b5,#4a2285 50%,#2e1257);box-shadow:inset 0 0 6vmin #0a0019cc}.inside-glow{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at center,rgba(220,190,255,.45),transparent 55%);opacity:0}.stage-open .inside-glow{animation:glow 2s ease 1.2s forwards}@keyframes glow{to{opacity:1}}.gifts{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vmin,48px);width:100%;max-height:100%;margin-bottom:calc(var(--pw) * .95)}.inside-floor{--pw: clamp(200px, 36vmin, 340px)}.loot{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;pointer-events:none}.pile{position:relative;width:var(--pw);height:calc(var(--pw) * 1.1);opacity:0;transform:translateY(30px) scale(.85)}.loot.is-shown .pile{animation:pumpkin-in .6s cubic-bezier(.2,1.4,.4,1) .3s forwards}@keyframes pumpkin-in{to{opacity:1;transform:none}}.pile:before{content:"";position:absolute;left:-15%;right:-15%;bottom:calc(var(--pw) * .35);height:calc(var(--pw) * .85);background:radial-gradient(ellipse at 50% 75%,rgba(255,180,70,.75),rgba(255,120,30,.25) 45%,transparent 70%);z-index:1}.pumpkin{position:absolute;left:0;bottom:0;width:100%;height:calc(var(--pw) * 230 / 300)}.pumpkin-front{z-index:20;filter:drop-shadow(0 8px 10px rgba(10,0,25,.6))}.pumpkin-face{animation:candle 2.5s ease-in-out infinite}@keyframes candle{0%,to{opacity:1}40%{opacity:.85}60%{opacity:.95}}.pile img{position:absolute;width:calc(var(--pw) * .17);height:calc(var(--pw) * .17);margin-left:calc(var(--pw) * -.085);filter:drop-shadow(0 0 5px rgba(255,230,160,.9)) drop-shadow(0 3px 3px rgba(60,20,0,.5));opacity:0;transform:translateY(-60vh) rotate(var(--rot))}.loot.is-shown .pile img{animation:loot-drop .9s ease-in forwards}@keyframes loot-drop{0%{opacity:1;transform:translateY(-60vh) rotate(calc(var(--rot) - 180deg))}78%{opacity:1;transform:translateY(0) rotate(var(--rot));animation-timing-function:ease-out}89%{opacity:1;transform:translateY(-10px) rotate(var(--rot));animation-timing-function:ease-in}to{opacity:1;transform:translateY(0) rotate(var(--rot))}}.photo{display:block;width:min(48vw,640px);max-height:70vh;object-fit:cover;border:clamp(6px,1.2vmin,12px) solid #fffaf0;border-radius:4px;box-shadow:0 18px 40px #3c140073;opacity:0;transform:scale(.6) rotate(6deg)}.stage-open .gifts.is-shown .photo{animation:photo-up 1s cubic-bezier(.2,1.4,.4,1) .9s forwards}@keyframes photo-up{to{opacity:1;transform:scale(1) rotate(2deg)}}@media (orientation: portrait){.gifts{flex-direction:column}.photo{width:min(88vw,560px);max-height:42vh}}.card{position:relative;flex:0 1 460px;min-width:0;max-width:560px;padding:clamp(20px,4vmin,40px);text-align:center;color:#2a1640;background:#fffaf0;border-radius:6px;box-shadow:0 18px 40px #3c140073;opacity:0;transform:scale(.6) rotate(-6deg)}.stage-open .gifts.is-shown .card{animation:card-up 1s cubic-bezier(.2,1.4,.4,1) .5s forwards}@keyframes card-up{to{opacity:1;transform:scale(1) rotate(-2deg)}}.card h2{font-family:Rubik Glitch,system-ui,sans-serif;font-weight:400;font-size:clamp(1.7rem,5.5vmin,2.8rem);line-height:1.15;margin:calc(clamp(20px,4vmin,40px)*-1) calc(clamp(20px,4vmin,40px)*-1) 16px;padding:18px 16px 16px;color:#d6ffd0;background:radial-gradient(ellipse at 50% 0%,#2c1a48,#140a24 75%);border-radius:6px 6px 0 0;text-shadow:0 0 4px #b8ffb0,0 0 10px #39ff14,0 0 22px #39ff14,0 0 40px rgba(57,255,20,.6);animation:neon 4s linear infinite}@keyframes neon{0%,to{opacity:1;filter:brightness(1)}25%{opacity:.92;filter:brightness(.9)}50%{opacity:1;filter:brightness(1.12)}70%{opacity:.95;filter:brightness(.95)}72%{opacity:.6;filter:brightness(.7)}73%{opacity:1;filter:brightness(1.1)}74.5%{opacity:.75;filter:brightness(.8)}76%{opacity:1;filter:brightness(1.05)}}.card p{font-size:clamp(1rem,2.4vmin,1.15rem);line-height:1.5;margin:0 0 8px}.card p:last-child{margin-bottom:0}.video-wrap{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:flex;align-items:center;justify-content:center;background:#000;opacity:0;pointer-events:none;transition:opacity .6s ease}.stage-open .video-wrap{opacity:1;pointer-events:auto;transition-delay:1.1s}.stage-open .video-wrap.is-done{opacity:0;pointer-events:none;transition-delay:0s}.video{width:100%;height:100%;object-fit:contain}.skip{position:absolute;right:16px;bottom:16px;padding:8px 16px;font:700 .95rem Quicksand,sans-serif;color:#fffaf0;background:#00000073;border:1px solid rgba(255,250,240,.5);border-radius:999px;cursor:pointer}.skip:hover{background:#000000b3}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:5}.confetti span{position:absolute;top:-20px;animation-name:fall;animation-timing-function:linear;animation-iteration-count:infinite;animation-fill-mode:backwards}@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translate(var(--drift),105vh) rotate(720deg);opacity:.8}}@media (orientation: portrait){.card{flex-basis:auto}}