html.bine-scroll-locked,
body.bine-scroll-locked { overflow: hidden !important; overscroll-behavior: none; }
.hero-visual { overflow: hidden; }
.hero-visual .bine-birthday-hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; clip-path: polygon(0 0,0 0,0 100%,0 100%); transform: rotate(-2deg) scale(1.06); transition: clip-path 900ms cubic-bezier(.2,.8,.2,1), opacity 180ms linear, transform 900ms cubic-bezier(.2,.8,.2,1); z-index: 3; }
body.bine-hero-reveal-one .hero-visual .bine-birthday-hero { opacity: 1; clip-path: polygon(0 0,31% 0,23% 24%,35% 48%,26% 71%,39% 100%,0 100%); }
body.bine-hero-reveal-two .hero-visual .bine-birthday-hero { opacity: 1; clip-path: polygon(0 0,68% 0,58% 19%,73% 43%,61% 68%,78% 100%,0 100%); }
body.bine-hero-reveal-all .hero-visual .bine-birthday-hero { opacity: 1; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); transform: rotate(0) scale(1); }
.bine-party-stage { position: fixed; inset: 0; z-index: 9999; overflow: hidden; pointer-events: none; }
.bine-party-stage::after { content: ""; position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.bine-party-stage.level-strobe::after { --strobe-opacity: .08; animation: bine-color-strobe 1.4s steps(1,end) infinite; }
.bine-party-stage.level-strobe-medium::after { --strobe-opacity: .15; animation-duration: .9s; }
.bine-party-stage.level-strobe-finale::after { --strobe-opacity: .23; animation-duration: .56s; }
.bine-party-stage[hidden] { display: none; }
.bine-party-stop { position: absolute; top: 18px; right: 18px; z-index: 8; display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: #173f3d; box-shadow: 0 8px 24px rgba(0,0,0,.24); font: 700 27px/1 Arial,sans-serif; cursor: pointer; pointer-events: auto; }
.bine-party-lyrics { position: absolute; z-index: 7; left: 50%; bottom: 24px; width: min(900px,calc(100% - 32px)); transform: translateX(-50%); padding: 13px 24px; border-radius: 8px; color: #fff; background: rgba(23,63,61,.94); box-shadow: 0 12px 34px rgba(0,0,0,.26); text-align: center; font: 800 clamp(20px,4vw,42px)/1.05 Arial,sans-serif; letter-spacing: 0; text-wrap: balance; }
.bine-party-lyrics.is-bamm { color: #172b38; background: #f7db49; animation: bine-lyric-pop 520ms cubic-bezier(.2,.9,.2,1.25); }
.bine-party-character { position: absolute; z-index: 5; display: none; filter: drop-shadow(0 10px 7px rgba(0,0,0,.22)); line-height: 1; will-change: transform; }
.bine-party-character.is-active { display: block; }
.bine-party-cake { bottom: 15%; left: -190px; width: 178px; height: 150px; animation: bine-cake-trip 8s linear infinite; }
.bine-cake-frosting { position:absolute; z-index:2; left:10px; right:10px; top:24px; height:46px; border-radius:25px 25px 18px 18px; background:#f493a9; }
.bine-cake-body { position:absolute; left:0; right:0; bottom:5px; height:92px; border-radius:20px 20px 30px 30px; background:linear-gradient(90deg,#ffc083 0 18%,#ffe77b 18% 35%,#78ccec 35% 52%,#ffc083 52% 69%,#78e4a2 69% 85%,#ffc083 85%); box-shadow:inset 0 -13px rgba(0,0,0,.06); }
.bine-cake-eye { position:absolute; z-index:3; top:82px; width:11px; height:16px; border-radius:50%; background:#fff; }
.bine-cake-eye.left { left:54px; } .bine-cake-eye.right { right:54px; }
.bine-cake-mouth { position:absolute; z-index:3; left:50%; top:96px; width:35px; height:19px; transform:translateX(-50%); border:5px solid #fff; border-top:0; border-radius:0 0 30px 30px; }
.bine-cake-arm,.bine-cake-leg { position:absolute; background:#f3a8a9; border-radius:999px; }
.bine-cake-arm { z-index:1; top:77px; width:58px; height:14px; }
.bine-cake-arm.left { left:-43px; transform-origin:right center; animation:bine-cake-arm-left .48s ease-in-out infinite alternate; } .bine-cake-arm.right { right:-43px; transform-origin:left center; animation:bine-cake-arm-right .48s ease-in-out infinite alternate; }
.bine-cake-leg { bottom:-16px; width:18px; height:38px; background:#ffb47b; }
.bine-cake-leg.left { left:54px; transform-origin:center top; animation:bine-cake-leg-left .34s ease-in-out infinite alternate; } .bine-cake-leg.right { right:54px; transform-origin:center top; animation:bine-cake-leg-right .34s ease-in-out infinite alternate; }
.bine-candle { position:absolute; z-index:4; top:-18px; width:13px; height:48px; border-radius:7px; background:repeating-linear-gradient(135deg,#42b8ec 0 8px,#ffe36e 8px 16px); }
.bine-candle.one { left:45px; } .bine-candle.two { left:82px; } .bine-candle.three { left:119px; }
.bine-flame { position:absolute; left:50%; top:-22px; width:17px; height:24px; transform:translateX(-50%) rotate(8deg); border-radius:70% 45% 60% 45%; background:#ffd941; box-shadow:0 0 16px #ffd941; }
.bine-party-cat { right:-160px; top:18%; width:100px; height:145px; animation:bine-cat-trip 7s linear infinite; }
.bine-cat-head { position:absolute; z-index:3; left:17px; top:0; width:68px; height:62px; border-radius:48%; background:#c697f4; transform-origin:center bottom; animation:bine-cat-head-bop .52s ease-in-out infinite alternate; }
.bine-cat-head:before,.bine-cat-head:after { content:""; position:absolute; top:-17px; width:31px; height:34px; background:#c697f4; clip-path:polygon(50% 0,100% 100%,0 100%); }
.bine-cat-head:before { left:0; transform:rotate(-8deg); } .bine-cat-head:after { right:0; transform:rotate(8deg); }
.bine-cat-eye { position:absolute; z-index:4; top:25px; width:10px; height:14px; border-radius:50%; background:#fff; }
.bine-cat-eye.left { left:17px; } .bine-cat-eye.right { right:17px; }
.bine-cat-nose { position:absolute; z-index:4; left:50%; top:43px; width:13px; height:9px; transform:translateX(-50%); border-radius:50%; background:#ff6c8c; }
.bine-cat-body { position:absolute; left:22px; bottom:4px; width:58px; height:91px; border-radius:48% 48% 38% 38%; background:#bd8cef; transform-origin:center bottom; animation:bine-cat-body-groove .52s ease-in-out infinite alternate; }
.bine-cat-paw { position:absolute; z-index:2; top:69px; width:17px; height:58px; border-radius:999px; background:#bd8cef; }
.bine-cat-paw.left { left:19px; transform-origin:center top; animation:bine-cat-paw-left .38s ease-in-out infinite alternate; } .bine-cat-paw.right { right:16px; transform-origin:center top; animation:bine-cat-paw-right .38s ease-in-out infinite alternate; }
.bine-cat-tail { position:absolute; right:-20px; bottom:10px; width:58px; height:76px; border:13px solid #bd8cef; border-left:0; border-bottom:0; border-radius:0 50px 0 0; transform-origin:left bottom; animation:bine-cat-tail-dance .42s ease-in-out infinite alternate; }
.bine-party-bee { left:44%; top:42%; width:48px; height:30px; border-radius:50%; background:repeating-linear-gradient(90deg,#ffe249 0 12px,#fff 12px 19px); box-shadow:0 4px 0 rgba(0,0,0,.12); animation:bine-bee-loop 3.2s linear infinite; }
.bine-party-bee:before,.bine-party-bee:after { content:""; position:absolute; top:-13px; width:21px; height:17px; border-radius:70%; background:rgba(84,157,216,.72); }
.bine-party-bee:before { left:5px; transform:rotate(-25deg); } .bine-party-bee:after { right:4px; transform:rotate(25deg); }
.bine-party-bee.second { left:18%; top:64%; animation-duration:2.5s; animation-direction:reverse; }
.bine-party-balloon { position:absolute; z-index:3; display:none; width:72px; height:92px; border-radius:50% 50% 46% 46%; box-shadow:inset -14px -15px rgba(0,0,0,.1); }
.bine-party-balloon:after { content:""; position:absolute; left:50%; top:89px; width:3px; height:150px; background:rgba(31,50,60,.48); }
.bine-party-balloon.one { left:5%; bottom:-120px; background:#60c4ed; animation:bine-balloon-rise 7s ease-in-out infinite; }
.bine-party-balloon.two { right:7%; bottom:-140px; background:#72dfa0; animation:bine-balloon-rise 8.2s 1s ease-in-out infinite; }
.bine-party-balloon.three { left:28%; bottom:-160px; background:#c48cf1; animation:bine-balloon-rise 6.4s 2s ease-in-out infinite; }
.bine-party-sign { position:absolute; z-index:6; display:none; padding:13px 17px; border-radius:10px; color:#fff; background:#2463eb; box-shadow:0 7px 0 #173f3d; font:800 clamp(16px,2.3vw,28px)/1 Arial,sans-serif; transform:rotate(var(--turn)); }
.bine-party-sign.tada { --turn:-10deg; left:6%; top:56%; animation:bine-sign-wiggle 1.1s ease-in-out infinite; }
.bine-party-sign.wumm { --turn:8deg; right:8%; top:35%; animation:bine-sign-wiggle .8s .2s ease-in-out infinite; }
.bine-party-sign.ulm { --turn:-5deg; left:38%; top:12%; animation:bine-sign-wiggle .95s .4s ease-in-out infinite; }
.bine-party-sign.salad { --turn:11deg; right:22%; bottom:20%; background:#f05f7b; animation:bine-sign-wiggle .7s ease-in-out infinite; }
.bine-party-disco { position:absolute; z-index:3; display:none; left:50%; top:-95px; width:92px; height:92px; border-radius:50%; background:conic-gradient(#d5f4ff,#8869e8,#fff,#49c9ec,#f7db49,#d5f4ff); box-shadow:0 0 36px #8bdcf5; animation:bine-disco-drop 1.1s ease-out both,bine-disco-spin 2.5s 1.1s linear infinite; }
.bine-party-stage.level-cake .bine-party-cake,.bine-party-stage.level-cat .bine-party-cat,.bine-party-stage.level-bees .bine-party-bee,.bine-party-stage.level-balloons .bine-party-balloon,.bine-party-stage.level-signs .bine-party-sign,.bine-party-stage.level-disco .bine-party-disco { display:block; }
.bine-party-stage.level-chaos .bine-party-cake { animation-duration:4.3s; }
.bine-party-stage.level-chaos .bine-party-cat { animation-duration:3.8s; }
.bine-party-stage.level-chaos .bine-party-bee { animation-duration:1.8s; }
.bine-confetti { position: absolute; inset: 0; z-index: 4; }
.bine-confetti span { position: absolute; top: -30px; left: var(--x); width: var(--w); height: var(--h); border-radius: 2px; background: var(--color); opacity: 0; animation: bine-confetti-fall var(--speed) linear infinite; animation-delay: var(--delay); animation-play-state: paused; }
.bine-party-stage.is-confetti .bine-confetti span { opacity: .95; animation-play-state: running; }
.bine-party-stage.is-intro .bine-party-cat { display: block; left: -150px; right: auto; top: 16%; animation: bine-cat-kick 2.8s cubic-bezier(.25,.7,.2,1) both; }
.bine-photo-storm { position: absolute; inset: 0; z-index: 4; overflow: hidden; }
.bine-flying-photo { display: none; position: absolute; width: clamp(112px,15vw,230px); aspect-ratio: 4 / 3; object-fit: cover; border: 9px solid #fff; border-bottom-width: 25px; box-shadow: 8px 12px 0 rgba(0,0,0,.26); }
.bine-party-stage.level-photos-one .photo-one,.bine-party-stage.level-photos-one .photo-two,.bine-party-stage.level-photos-two .photo-one,.bine-party-stage.level-photos-two .photo-two,.bine-party-stage.level-photos-two .photo-three,.bine-party-stage.level-photos-two .photo-four,.bine-party-stage.level-photos-all .bine-flying-photo { display: block; }
.photo-one { top: 11%; left: -25%; animation: bine-photo-across 8.6s linear infinite; }
.photo-two { top: 52%; right: -25%; animation: bine-photo-back 9.4s 1.1s linear infinite; }
.photo-three { top: 7%; right: -25%; animation: bine-photo-back 7.7s .3s linear infinite; }
.photo-four { bottom: 12%; left: -25%; animation: bine-photo-across 10.2s 1.7s linear infinite; }
.photo-five { top: 31%; left: -25%; animation: bine-photo-across 6.9s .8s linear infinite; }
.photo-six { bottom: 4%; right: -25%; animation: bine-photo-back 8.1s 2.2s linear infinite; }
@keyframes bine-photo-across { 0% { transform: translateX(0) rotate(-18deg) scale(.8); } 45% { transform: translateX(65vw) rotate(12deg) scale(1.08); } 100% { transform: translateX(145vw) rotate(390deg) scale(.86); } }
@keyframes bine-photo-back { 0% { transform: translateX(0) rotate(17deg) scale(.82); } 48% { transform: translateX(-68vw) rotate(-13deg) scale(1.12); } 100% { transform: translateX(-145vw) rotate(-380deg) scale(.84); } }
@keyframes bine-color-strobe { 0%,100% { opacity: 0; background: transparent; } 18% { opacity: var(--strobe-opacity); background: #ff2ca8; } 25% { opacity: 0; } 47% { opacity: var(--strobe-opacity); background: #ffe529; } 54% { opacity: 0; } 76% { opacity: var(--strobe-opacity); background: #00dcff; } 83% { opacity: 0; } }
@media (max-width: 700px) { .bine-flying-photo { width: 118px; border-width: 6px; border-bottom-width: 18px; } }
@media (prefers-reduced-motion: reduce) { .bine-party-stage.level-strobe::after { animation: none; } }
body.bine-headline-kick .hero h1 { animation: bine-headline-kick 720ms cubic-bezier(.3,.7,.2,1) both; }
body.bine-headline-birthday .hero h1 { color: #f7db49; text-shadow: 0 4px 0 #173f3d; animation: bine-headline-arrive 760ms cubic-bezier(.2,.9,.2,1.2) both; }
body.bine-party-copy .hero .eyebrow, body.bine-party-copy .hero-copy, body.bine-party-copy .hero-actions { animation: bine-copy-swap 620ms ease both; }
body.bine-bass-hit main, body.bine-bass-hit .site-footer, body.bine-bass-hit .chapter-dock, body.bine-bass-hit .audio-dock { animation: bine-bass-shake 150ms linear; transform-origin: 50% 50%; }
body.bine-bamm-hit main, body.bine-bamm-hit .site-footer, body.bine-bamm-hit .chapter-dock, body.bine-bamm-hit .audio-dock { animation: bine-bamm-shake 620ms cubic-bezier(.3,.7,.2,1); transform-origin: 50% 50%; }
@keyframes bine-cake-trip { 0%{transform:translateX(0) translateY(0) rotate(-5deg)} 12%{transform:translateX(18vw) translateY(-70px) rotate(7deg)} 25%{transform:translateX(36vw) translateY(10px) rotate(-8deg)} 38%{transform:translateX(54vw) translateY(-95px) rotate(9deg)} 52%{transform:translateX(72vw) translateY(4px) rotate(-7deg)} 68%{transform:translateX(90vw) translateY(-65px) rotate(8deg)} 84%{transform:translateX(108vw) translateY(8px) rotate(-6deg)} 100%{transform:translateX(calc(100vw + 220px)) translateY(-45px) rotate(8deg)} }
@keyframes bine-cat-trip { 0%{transform:translateX(0) translateY(0) rotate(4deg)} 20%{transform:translateX(-22vw) translateY(110px) rotate(-8deg)} 38%{transform:translateX(-43vw) translateY(-25px) rotate(9deg)} 58%{transform:translateX(-65vw) translateY(145px) rotate(-10deg)} 78%{transform:translateX(-86vw) translateY(20px) rotate(8deg)} 100%{transform:translateX(calc(-100vw - 220px)) translateY(105px) rotate(-7deg)} }
@keyframes bine-cake-arm-left { from{transform:rotate(-48deg)} to{transform:rotate(34deg)} }
@keyframes bine-cake-arm-right { from{transform:rotate(48deg)} to{transform:rotate(-34deg)} }
@keyframes bine-cake-leg-left { from{transform:rotate(-24deg) translateY(0)} to{transform:rotate(22deg) translateY(-7px)} }
@keyframes bine-cake-leg-right { from{transform:rotate(24deg) translateY(-7px)} to{transform:rotate(-22deg) translateY(0)} }
@keyframes bine-cat-head-bop { from{transform:translateY(0) rotate(-8deg)} to{transform:translateY(-9px) rotate(9deg)} }
@keyframes bine-cat-body-groove { from{transform:skewX(-6deg) scaleY(.96)} to{transform:skewX(7deg) scaleY(1.04)} }
@keyframes bine-cat-paw-left { from{transform:rotate(34deg) translateY(0)} to{transform:rotate(-22deg) translateY(-13px)} }
@keyframes bine-cat-paw-right { from{transform:rotate(-34deg) translateY(-13px)} to{transform:rotate(22deg) translateY(0)} }
@keyframes bine-cat-tail-dance { from{transform:rotate(-20deg) scaleX(.9)} to{transform:rotate(32deg) scaleX(1.08)} }
@keyframes bine-cat-kick { 0%{transform:translate(-20vw,25vh) rotate(-12deg)} 45%{transform:translate(36vw,17vh) rotate(10deg)} 62%{transform:translate(43vw,12vh) rotate(-28deg) scale(1.18)} 74%{transform:translate(48vw,18vh) rotate(32deg) scale(1.05)} 100%{transform:translate(112vw,5vh) rotate(720deg)} }
@keyframes bine-headline-kick { 0%{transform:translate(0,0) rotate(0);opacity:1} 28%{transform:translate(-16px,4px) rotate(-2deg);opacity:1} 100%{transform:translate(110vw,-20px) rotate(24deg);opacity:0} }
@keyframes bine-headline-arrive { 0%{transform:translateX(-90vw) rotate(-12deg) scale(.7);opacity:0} 68%{transform:translateX(4vw) rotate(2deg) scale(1.08);opacity:1} 100%{transform:translateX(0) rotate(0) scale(1);opacity:1} }
@keyframes bine-copy-swap { 0%{transform:translateY(14px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes bine-bee-loop { 0%{transform:translate(-230px,0) rotate(0)} 25%{transform:translate(0,-190px) rotate(90deg)} 50%{transform:translate(230px,0) rotate(180deg)} 75%{transform:translate(0,190px) rotate(270deg)} 100%{transform:translate(-230px,0) rotate(360deg)} }
@keyframes bine-balloon-rise { 0%{transform:translateY(0) rotate(-5deg)} 50%{transform:translateY(-105vh) rotate(6deg)} 100%{transform:translateY(-125vh) rotate(-4deg)} }
@keyframes bine-sign-wiggle { 0%,100%{transform:rotate(var(--turn)) translateY(0) scale(1)} 50%{transform:rotate(calc(var(--turn) * -1)) translateY(-12px) scale(1.08)} }
@keyframes bine-disco-drop { from{transform:translate(-50%,-100px) scale(.5)} to{transform:translate(-50%,130px) scale(1)} }
@keyframes bine-disco-spin { from{filter:hue-rotate(0)} to{filter:hue-rotate(360deg)} }
@keyframes bine-confetti-fall { from{transform:translateY(-40px) rotate(0)} to{transform:translateY(110vh) rotate(760deg)} }
@keyframes bine-bass-shake { 0%,100%{transform:translate(0,0)} 25%{transform:translate(-3px,2px)} 50%{transform:translate(4px,-2px)} 75%{transform:translate(-2px,-1px)} }
@keyframes bine-bamm-shake { 0%,100%{transform:translate(0,0) rotate(0)} 10%{transform:translate(-10px,5px) rotate(-.7deg)} 22%{transform:translate(12px,-7px) rotate(.8deg)} 36%{transform:translate(-9px,-4px) rotate(-.6deg)} 52%{transform:translate(8px,6px) rotate(.5deg)} 70%{transform:translate(-5px,2px) rotate(-.3deg)} 86%{transform:translate(3px,-2px) rotate(.2deg)} }
@keyframes bine-lyric-pop { 0%{transform:translateX(-50%) scale(.55) rotate(-4deg)} 60%{transform:translateX(-50%) scale(1.12) rotate(2deg)} 100%{transform:translateX(-50%) scale(1) rotate(0)} }
@media (max-width:620px) { .bine-party-lyrics{bottom:14px;padding:12px 16px} .bine-party-stop{top:10px;right:10px} @keyframes bine-bee-loop{0%{transform:translate(-120px,0) rotate(0)}25%{transform:translate(0,-130px) rotate(90deg)}50%{transform:translate(120px,0) rotate(180deg)}75%{transform:translate(0,130px) rotate(270deg)}100%{transform:translate(-120px,0) rotate(360deg)}} }
@media (prefers-reduced-motion:reduce) { .bine-party-character,.bine-confetti span,body.bine-bass-hit main,body.bine-bamm-hit main{animation-duration:1ms!important;animation-iteration-count:1!important} }