/* A little bounce, a little ink. Respect the visitor's motion preference. */
.v-intro{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:var(--yellow);color:var(--ink);pointer-events:none;animation:v-intro-away .6s 1.2s cubic-bezier(.76,0,.24,1) forwards}
.v-intro-center{display:flex;flex-direction:column;align-items:center;gap:27px;padding:24px;text-align:center;animation:v-intro-center .55s .06s both cubic-bezier(.16,1.35,.32,1)}
.v-intro-icon{width:98px;height:98px;background:var(--ink);color:var(--yellow);border-radius:25px;padding:12px;position:relative;rotate:7deg;animation:v-intro-wobble 1.1s ease-in-out both}
.v-intro-icon svg{width:100%;height:100%}.v-intro-icon:after{content:'✦';position:absolute;right:-23px;top:-15px;font:36px var(--display);color:var(--ink);animation:v-intro-star .6s .32s both cubic-bezier(.16,1.5,.3,1)}
.v-intro-center p{font:800 clamp(16px,2.4vw,24px)/1.4 var(--display);letter-spacing:-.5px;rotate:-2deg}
@keyframes v-intro-center{from{opacity:0;translate:0 20px;scale:.8}to{opacity:1;translate:0 0;scale:1}}
@keyframes v-intro-wobble{0%{transform:rotate(-18deg) scale(.65)}40%{transform:rotate(7deg) scale(1.07)}65%{transform:rotate(-4deg) scale(.98)}100%{transform:rotate(0) scale(1)}}
@keyframes v-intro-star{from{opacity:0;transform:scale(0) rotate(-100deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes v-intro-away{to{transform:translateY(-105%);border-radius:0 0 45% 45%;visibility:hidden}}

.v-fun-word{display:inline-block;white-space:nowrap}.v-fun-letter{display:inline-block;transform-origin:50% 85%}
.v-making-word{position:relative;display:inline-block}.v-hero-scribble{position:absolute;left:-2%;width:104%;height:.3em;bottom:-.16em;overflow:visible;pointer-events:none}.v-hero-scribble path{stroke-dasharray:1;stroke-dashoffset:0}
.v-hero-eyes{transition:transform .2s ease-out}.v-eye-lid{transform-box:fill-box;transform-origin:center 80%}
.v-hero.motion-onstage .v-eye-lid{animation:v-blink 5.6s 2.2s infinite}
.v-hero.motion-onstage .v-star-one{animation:v-star-float 6s 2s ease-in-out infinite}
.v-hero.motion-onstage .v-film-sticker{animation:v-sticker-float 5s 2s ease-in-out infinite}
.v-film-sticker:hover{animation-play-state:paused!important}
@keyframes v-blink{0%,41%,47%,100%{scale:1 1}44%{scale:1 .08}}
@keyframes v-star-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:12deg}}
@keyframes v-sticker-float{0%,100%{translate:0 0}50%{translate:0 -5px}}
.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}
.motion-drawn .v-underline:after,.motion-drawn h2 em:after{transform-origin:left center;animation:v-underline-in .55s .15s both cubic-bezier(.22,1,.36,1)}
@keyframes v-underline-in{from{scale:0 1}to{scale:1 1}}

.fun-site .header-inner nav.motion-nav{position:relative;isolation:isolate}
.v-nav-glider{position:absolute;left:0;top:0;background:var(--ink);border-radius:9px;z-index:-1;pointer-events:none;opacity:0;transition:transform .48s cubic-bezier(.22,1.18,.36,1),width .38s cubic-bezier(.22,1,.36,1),height .3s,opacity .15s}
.fun-site .header-inner nav.motion-nav a.active{background:transparent;color:var(--yellow)}
.fun-site .header-inner nav.motion-nav a:not(.active):hover{background:#1617140c;color:var(--ink)}
.v-route-transition{position:fixed;inset:0;z-index:1000;background:var(--yellow);color:var(--ink);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:24px;pointer-events:auto;will-change:transform}
.v-route-transition .v-brand-face{width:64px;height:64px;rotate:8deg;border-radius:17px}.v-route-transition svg{width:52px;height:52px}
.v-route-label{font:800 clamp(35px,6vw,76px)/1 var(--display);letter-spacing:-2px;text-align:center;padding:0 22px}
.v-rule-card{transition:transform .3s cubic-bezier(.16,1.4,.32,1),border-color .2s,background .2s,box-shadow .2s}
.v-rule-card:hover .v-rule-art{rotate:-5deg;scale:1.06}.v-rule-art{transform-origin:35% 75%;transition:rotate .35s cubic-bezier(.16,1.4,.32,1),scale .35s cubic-bezier(.16,1.4,.32,1)}
.v-next-plus{transition:transform .45s cubic-bezier(.16,1.35,.32,1)}.v-next-card:hover .v-next-plus{transform:rotate(90deg)}
.v-token,.v-video-card,.v-film-sticker{transition:transform .35s cubic-bezier(.16,1.25,.32,1),box-shadow .25s}
.fun-site .button>span,.v-text-link>span{display:inline-block;transition:translate .3s cubic-bezier(.22,1,.36,1)}.fun-site .button:hover>span,.v-text-link:hover>span{translate:3px -2px}
.fun-site .brand:hover .v-brand-face{rotate:-8deg}.v-brand-face{transition:rotate .35s cubic-bezier(.16,1.35,.32,1)}
.v-search-button:hover svg{rotate:-12deg}.v-search-button svg{transition:rotate .25s}
.v-video-card:hover .v-video-play{scale:1.08}.v-video-play{transition:scale .3s}
.detail-dialog[open],.launch-shell[open]{animation:v-dialog-in .42s cubic-bezier(.22,1,.36,1)}
.detail-dialog[open]::backdrop,.launch-shell[open]::backdrop{animation:v-backdrop-in .3s ease-out}
@keyframes v-dialog-in{from{opacity:0;translate:0 30px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes v-backdrop-in{from{opacity:0}to{opacity:1}}
.fun-site .faq-list details[open]>p{animation:v-answer-in .3s cubic-bezier(.22,1,.36,1)}
.fun-site .faq-list summary>span{transition:transform .25s}
@keyframes v-answer-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
.builder-steps [aria-current=step]{animation:v-step-tap .3s cubic-bezier(.16,1.2,.32,1)}
@keyframes v-step-tap{from{scale:.95}to{scale:1}}
.v-click-effects{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden}
.v-ink-burst{position:absolute;width:0;height:0;pointer-events:none}
.v-ink-burst i{position:absolute;display:block;width:4px;height:4px;background:var(--ink);outline:1px solid #f8f7ef80;border-radius:50%;pointer-events:none}
.v-ink-burst i.dash{width:3px;height:8px;border-radius:3px}.v-ink-burst i.spark{width:10px;height:10px;background:none;border-radius:0;outline:none}
.v-ink-burst i.spark:before,.v-ink-burst i.spark:after{content:'';position:absolute;left:4px;top:0;width:2px;height:10px;border-radius:2px;background:var(--ink);box-shadow:0 0 1px var(--paper)}.v-ink-burst i.spark:after{rotate:90deg}
@media(max-width:620px){
 .fun-site .header-inner nav.motion-nav{position:absolute}
 .fun-site .header-inner nav.open{animation:v-menu-in .28s cubic-bezier(.22,1,.36,1)}
 .v-nav-glider{display:none}.fun-site .header-inner nav.motion-nav a.active{background:var(--ink);color:var(--yellow)}
 .v-intro-icon{width:80px;height:80px;border-radius:21px;padding:10px}.v-intro-center{gap:23px}
 .v-route-label{font-size:40px;letter-spacing:-1.5px}
 @keyframes v-menu-in{from{opacity:0;translate:0 -10px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
}
@media(prefers-reduced-motion:reduce){
 .v-intro,.v-route-transition,.v-click-effects{display:none!important}
 .fun-site *,.fun-site *:before,.fun-site *:after{animation:none!important;transition:none!important}
 .v-hero-eyes{transform:none!important}
 .v-rule-card:hover .v-rule-art,.v-video-card:hover .v-video-play{rotate:none;scale:none}
 .v-next-card:hover .v-next-plus{transform:rotate(-8deg)}
}