@font-face{font-family:"Haps Display";src:url("assets/HapsDisplay-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;background:#fff}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#fff}
body{min-width:280px;text-rendering:geometricPrecision}
.scene{position:relative;width:100%;height:100%;height:100svh;overflow:hidden;isolation:isolate;background:#fff}
.brand{position:absolute;z-index:20;left:50%;top:50%;width:clamp(325px,31vw,560px);margin:0;transform:translate(-50%,-50%);text-align:center}
.brand>img:first-child{display:block;width:100%;height:auto}
.brand .tagline{display:block;width:82%;height:auto;margin:-1.4% auto 0;filter:grayscale(1) contrast(220%) brightness(1.08)}
.object{--x:50%;--y:50%;--w:18vw;--dx1:5px;--dy1:-6px;--dr1:.35deg;--dx2:-4px;--dy2:5px;--dr2:-.3deg;--float-duration:17s;--float-delay:0s;position:absolute;z-index:5;left:var(--x);top:var(--y);width:var(--w);height:auto;transform:translate(-50%,-50%);transform-origin:50% 50%;perspective:1000px;pointer-events:none;user-select:none;will-change:transform;animation:object-hover var(--float-duration) var(--float-delay) ease-in-out infinite}
.object img,.object canvas{display:block;max-width:none;height:auto;object-fit:contain;image-rendering:auto;user-select:none;-webkit-user-drag:none;will-change:transform}
.object-art,.racket-art{width:100%}
.sneaker{--x:14%;--y:19%;--w:clamp(205px,15.2vw,292px);--dx1:7px;--dy1:-7px;--dr1:.45deg;--dx2:-4px;--dy2:5px;--dr2:-.35deg;--float-duration:15.7s;--float-delay:-2.1s}.sneaker .object-art{transform:rotate(-8deg);animation:sneaker-tilt 15s -4s ease-in-out infinite}
.matcha{--x:39.5%;--y:17%;--w:clamp(120px,8.6vw,165px);--dx1:-4px;--dy1:-8px;--dr1:-.6deg;--dx2:6px;--dy2:4px;--dr2:.5deg;--float-duration:17.1s;--float-delay:-6.3s}.matcha .object-art{transform:rotate(7deg);animation:cup-settle 14s -2.5s ease-in-out infinite}
.microphone{--x:63.5%;--y:17%;--w:clamp(140px,10.7vw,205px);--dx1:5px;--dy1:-5px;--dr1:.55deg;--dx2:-6px;--dy2:7px;--dr2:-.45deg;--float-duration:18.3s;--float-delay:-9.2s}.microphone .object-art{transform:rotate(-12deg);transform-origin:28% 84%;animation:microphone-sway 16s -5.5s ease-in-out infinite}
.disco-ball{--x:86%;--y:15.5%;--w:clamp(170px,13vw,250px);--dx1:-5px;--dy1:5px;--dr1:-.3deg;--dx2:6px;--dy2:-7px;--dr2:.35deg;--float-duration:19.4s;--float-delay:-3.8s}.disco-base,.disco-render{width:100%;height:auto}.disco-render{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}.disco-ball.is-rendering .disco-base{opacity:.2}.disco-ball.is-rendering .disco-render{opacity:.96}
.martini{--x:14.5%;--y:50%;--w:clamp(177px,12.8vw,246px);--dx1:5px;--dy1:-6px;--dr1:.45deg;--dx2:-5px;--dy2:5px;--dr2:-.4deg;--float-duration:16.9s;--float-delay:-4.9s}.martini-rig{position:relative;width:100%;transform:rotate(-8deg);transform-origin:51% 88%;animation:drink-sway 15s -6s ease-in-out infinite}.martini-rig .object-art{transform:none}.liquid-ripple{position:absolute;z-index:2;left:25%;top:23%;width:69%;height:31%;overflow:hidden;clip-path:polygon(3% 0,100% 54%,94% 79%,8% 28%);opacity:.72;mix-blend-mode:screen}.liquid-ripple::before{content:"";position:absolute;left:5%;top:22%;width:84%;height:24%;border-top:2px solid rgba(255,226,159,.78);border-radius:50%;filter:blur(.2px);transform:rotate(24deg);animation:liquid-surface 6.4s -1.7s ease-in-out infinite}.liquid-ripple::after{content:"";position:absolute;left:35%;top:37%;width:20%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,242,201,.72),rgba(255,186,74,.08) 65%,transparent 72%);animation:liquid-glint 7.1s -4.2s ease-in-out infinite}
.headphones{--x:87%;--y:49.5%;--w:clamp(145px,10.2vw,196px);--dx1:-6px;--dy1:-4px;--dr1:-.5deg;--dx2:5px;--dy2:7px;--dr2:.4deg;--float-duration:18.8s;--float-delay:-11.1s}.headphones .object-art{transform:rotate(7deg);animation:headphones-nod 17s -3s ease-in-out infinite}
.sushi{--x:7%;--y:87%;--w:clamp(215px,15.5vw,300px);--dx1:6px;--dy1:-5px;--dr1:.25deg;--dx2:-3px;--dy2:6px;--dr2:-.25deg;--float-duration:20.2s;--float-delay:-7.6s}.sushi .object-art{transform:rotate(-5deg);animation:sushi-arrival 28s -5s cubic-bezier(.45,.05,.55,.95) infinite}
.tennis-racket{--x:74%;--y:75%;--w:clamp(250px,17vw,330px);--ball-rise:clamp(24px,2.2vw,34px);--dx1:5px;--dy1:-7px;--dr1:.3deg;--dx2:-5px;--dy2:4px;--dr2:-.35deg;--float-duration:17.7s;--float-delay:-5.4s}.racket-rig{position:relative;width:100%;transform:rotate(-7deg);transform-origin:25% 72%;animation:racket-breathe 17s -4.2s ease-in-out infinite}.racket-art{width:100%}.tennis-ball{position:absolute;z-index:2;left:72%;top:20%;width:18%;transform-origin:50% 50%;animation:ball-bounce 5.8s -1.9s linear infinite}
.wristband{--x:34%;--y:84%;--w:clamp(180px,13vw,250px);--dx1:-5px;--dy1:-6px;--dr1:-.45deg;--dx2:6px;--dy2:5px;--dr2:.45deg;--float-duration:16.3s;--float-delay:-8.5s}.wristband .object-art{transform:rotate(8deg);animation:wristband-flex 18s -8s ease-in-out infinite}
.record{--x:91%;--y:82%;--w:clamp(210px,14.5vw,280px);--dx1:5px;--dy1:6px;--dr1:.25deg;--dx2:-6px;--dy2:-5px;--dr2:-.3deg;--float-duration:19.1s;--float-delay:-12.4s;z-index:4}.record-base{width:100%}.record-surface{position:absolute;inset:0;overflow:hidden;opacity:.66;mix-blend-mode:soft-light;-webkit-mask:url("assets/objects/record.png") center/100% 100% no-repeat;mask:url("assets/objects/record.png") center/100% 100% no-repeat}.record-texture{position:absolute;left:-25%;top:-19%;width:150%;transform-origin:50% 42%;animation:record-spin 26s linear infinite;filter:saturate(1.24) contrast(1.08)}
.text-haps{position:absolute;z-index:30;left:50%;top:71.5%;min-width:148px;height:52px;border:0;border-radius:999px;padding:0 24px;background:#0a0a0a;color:#fff;font:700 14px/1 "Arial Rounded MT Bold","Open Sans",Arial,Helvetica,sans-serif;font-kerning:normal;letter-spacing:-.015em;transform:translate(-50%,-50%);cursor:default;box-shadow:none;outline-offset:5px;transition:transform .45s ease,color .45s ease;background-size:240% 240%}
.text-haps:focus-visible{outline:3px solid #2357ff;transform:translate(-50%,-50%) scale(1.05)}
@media(hover:hover){.text-haps:hover{color:#050505;transform:translate(-50%,-50%) scale(1.06) rotate(-2deg);background-image:conic-gradient(from var(--cta-angle),#0047ff,#ff2b93,#ff7a00,#d8f23d,#0047ff);animation:cta-color 8s linear infinite}}
@keyframes object-hover{0%,100%{transform:translate(-50%,-50%) translate(0,0) rotate(0)}34%{transform:translate(-50%,-50%) translate(var(--dx1),var(--dy1)) rotate(var(--dr1))}69%{transform:translate(-50%,-50%) translate(var(--dx2),var(--dy2)) rotate(var(--dr2))}}
@keyframes sneaker-tilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-6.5deg)}}
@keyframes cup-settle{0%,100%{transform:rotate(7deg)}50%{transform:rotate(5.8deg)}}
@keyframes microphone-sway{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-9.8deg)}}
@keyframes drink-sway{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(-5.8deg)}}
@keyframes headphones-nod{0%,100%{transform:rotate(7deg)}50%{transform:rotate(5.4deg)}}
@keyframes sushi-arrival{0%,100%{transform:translateX(-115%) rotate(-5deg)}13%,78%{transform:translateX(0) rotate(-5deg)}45%{transform:translateX(0) rotate(-3.8deg)}91%{transform:translateX(-115%) rotate(-5deg)}}
@keyframes racket-breathe{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(-5.8deg)}}
@keyframes ball-bounce{0%,100%{transform:translate(-50%,-50%) translateY(2px) scaleX(1.06) scaleY(.94);animation-timing-function:cubic-bezier(.16,.62,.28,1)}47%{transform:translate(-50%,calc(-50% - var(--ball-rise))) scale(1.045);animation-timing-function:cubic-bezier(.66,0,.88,.38)}94%{transform:translate(-50%,-50%) translateY(2px) scaleX(1.06) scaleY(.94)}}
@keyframes liquid-surface{0%,100%{transform:translate(-1px,1px) rotate(23deg) scaleX(.96);opacity:.42}45%{transform:translate(2px,-1px) rotate(25deg) scaleX(1.04);opacity:.78}72%{transform:translate(0,0) rotate(24deg) scaleX(1);opacity:.58}}
@keyframes liquid-glint{0%,100%{transform:translate(-2px,1px) scale(.88);opacity:.2}50%{transform:translate(3px,-2px) scale(1.08);opacity:.72}}
@keyframes wristband-flex{0%,100%{transform:rotate(8deg) scaleX(1)}50%{transform:rotate(7deg) scaleX(1.018) scaleY(.99)}}
@keyframes record-spin{to{transform:rotate(360deg)}}
@property --cta-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes cta-color{to{--cta-angle:360deg}}
@media(max-width:720px){.brand{top:48%;width:min(59vw,270px)}.brand .tagline{width:86%;margin-top:-1%}.sneaker{--x:17%;--y:10.5%;--w:27vw}.matcha{--x:47%;--y:12%;--w:15.5vw}.microphone{--x:61%;--y:27%;--w:18.5vw}.disco-ball{--x:83%;--y:10.5%;--w:21vw}.martini{--x:14%;--y:29%;--w:23.5vw}.headphones{--x:88%;--y:32.5%;--w:18.5vw}.sushi{--x:14%;--y:70%;--w:32vw}.tennis-racket{--x:78%;--y:70%;--w:33vw;--ball-rise:20px}.wristband{--x:20%;--y:87%;--w:27.5vw}.record{--x:72%;--y:87%;--w:31vw}.text-haps{left:50%;top:59.5%;min-width:122px;height:44px;padding:0 18px;font-size:13px;text-align:center}.tennis-ball{width:18%}}
@media(max-height:560px) and (min-width:721px){.brand{width:min(27vw,350px)}.object{max-height:35vh;width:auto}.tennis-racket{max-height:39vh}.record{max-height:34vh}.text-haps{top:72%;min-width:122px;height:42px;font-size:17px}}
@media(prefers-reduced-motion:reduce){.object,.object img,.martini-rig,.liquid-ripple::before,.liquid-ripple::after,.racket-rig,.record-texture,.text-haps{animation:none!important}.text-haps{transition:none}.tennis-ball{transform:translate(-50%,-50%) translateY(2px)}.text-haps:hover{transform:translate(-50%,-50%)}}