feat(edutainment): refresh baby object match flow
This commit is contained in:
479
src/index.css
479
src/index.css
@@ -2785,6 +2785,8 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
--baby-object-gift-box-image: linear-gradient(180deg, transparent, transparent);
|
||||
--baby-object-basket-image: linear-gradient(180deg, transparent, transparent);
|
||||
--baby-object-smoke-image: radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 68%);
|
||||
--baby-object-left-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-left-hand-v8-transparent.png');
|
||||
--baby-object-right-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-right-hand-v8-transparent.png');
|
||||
--baby-object-sky: #cfefff;
|
||||
--baby-object-ground: #7bc36f;
|
||||
--baby-object-ground-deep: #3f8b48;
|
||||
@@ -2858,7 +2860,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
.baby-object-runtime__back,
|
||||
.baby-object-runtime__counter {
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
z-index: 11;
|
||||
top: max(0.75rem, env(safe-area-inset-top));
|
||||
display: inline-flex;
|
||||
min-height: 2.4rem;
|
||||
@@ -2872,6 +2874,7 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
color: var(--baby-object-text);
|
||||
box-shadow: 0 14px 34px rgba(60, 112, 74, 0.16);
|
||||
backdrop-filter: blur(12px);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.baby-object-runtime__back {
|
||||
@@ -3073,14 +3076,21 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.baby-object-runtime__item {
|
||||
--baby-object-item-size: clamp(6.2rem, 15vw, 9.5rem);
|
||||
position: absolute;
|
||||
z-index: 7;
|
||||
left: 50%;
|
||||
top: 37%;
|
||||
display: grid;
|
||||
width: clamp(6.2rem, 15vw, 9.5rem);
|
||||
width: var(--baby-object-item-size);
|
||||
height: var(--baby-object-item-size);
|
||||
min-width: var(--baby-object-item-size);
|
||||
min-height: var(--baby-object-item-size);
|
||||
max-width: var(--baby-object-item-size);
|
||||
max-height: var(--baby-object-item-size);
|
||||
aspect-ratio: 1;
|
||||
place-items: center;
|
||||
box-sizing: border-box;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 0.2rem solid rgba(255, 255, 255, 0.78);
|
||||
border-radius: 50%;
|
||||
@@ -3089,18 +3099,133 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
0 18px 42px rgba(61, 106, 72, 0.17),
|
||||
inset 0 0 0 0.6rem rgba(255, 255, 255, 0.32);
|
||||
opacity: 0;
|
||||
overflow: visible;
|
||||
pointer-events: none;
|
||||
transition: transform 260ms ease;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
.baby-object-runtime__item--visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.baby-object-runtime__intro-item {
|
||||
--baby-object-intro-target-x: -210%;
|
||||
--baby-object-intro-target-y: 126%;
|
||||
position: absolute;
|
||||
z-index: 8;
|
||||
left: 50%;
|
||||
top: 37%;
|
||||
display: grid;
|
||||
width: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
|
||||
height: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
|
||||
min-width: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
|
||||
min-height: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
|
||||
max-width: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
|
||||
max-height: var(--baby-object-item-size, clamp(6.2rem, 15vw, 9.5rem));
|
||||
aspect-ratio: 1;
|
||||
place-items: center;
|
||||
box-sizing: border-box;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
border: 0.2rem solid rgba(255, 255, 255, 0.78);
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 253, 244, 0.78);
|
||||
box-shadow:
|
||||
0 18px 42px rgba(61, 106, 72, 0.17),
|
||||
inset 0 0 0 0.6rem rgba(255, 255, 255, 0.32);
|
||||
pointer-events: none;
|
||||
animation: baby-object-intro-pop 0.46s ease-out both;
|
||||
contain: layout;
|
||||
}
|
||||
|
||||
.baby-object-runtime__intro-item--right {
|
||||
--baby-object-intro-target-x: 110%;
|
||||
--baby-object-intro-target-y: 126%;
|
||||
}
|
||||
|
||||
.baby-object-runtime__intro-item--flying {
|
||||
animation: baby-object-intro-fly 0.72s cubic-bezier(0.22, 0.82, 0.24, 1)
|
||||
forwards;
|
||||
}
|
||||
|
||||
.baby-object-runtime__intro-item-image {
|
||||
display: block;
|
||||
width: 76%;
|
||||
height: 76%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
max-width: 76%;
|
||||
max-height: 76%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.baby-object-runtime__intro-item-name {
|
||||
position: absolute;
|
||||
bottom: -1.45rem;
|
||||
max-width: 12.5rem;
|
||||
overflow: hidden;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 253, 244, 0.9);
|
||||
padding: 0.32rem 0.95rem;
|
||||
color: var(--baby-object-text);
|
||||
font-size: clamp(1.56rem, 3vw, 2rem);
|
||||
font-weight: 950;
|
||||
line-height: 1.05;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 8px 18px rgba(60, 112, 74, 0.12);
|
||||
}
|
||||
|
||||
.baby-object-runtime__intro-item--flying .baby-object-runtime__intro-item-name {
|
||||
bottom: -0.9rem;
|
||||
max-width: 8rem;
|
||||
padding: 0.22rem 0.7rem;
|
||||
font-size: clamp(0.78rem, 1.5vw, 1rem);
|
||||
transition:
|
||||
bottom 0.72s ease,
|
||||
max-width 0.72s ease,
|
||||
padding 0.72s ease,
|
||||
font-size 0.72s ease;
|
||||
}
|
||||
|
||||
@keyframes baby-object-intro-pop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, -44%) scale(0.78);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes baby-object-intro-fly {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translate(var(--baby-object-intro-target-x), var(--baby-object-intro-target-y))
|
||||
scale(0.68);
|
||||
}
|
||||
}
|
||||
|
||||
.baby-object-runtime__item--appearing {
|
||||
animation: baby-object-item-appear 0.62s cubic-bezier(0.2, 0.86, 0.28, 1.12);
|
||||
}
|
||||
|
||||
.baby-object-runtime__item--held {
|
||||
left: var(--baby-object-held-x, 50%);
|
||||
top: var(--baby-object-held-y, 37%);
|
||||
transform: translate(-50%, -56%) scale(0.88) rotate(-3deg);
|
||||
transition:
|
||||
left 90ms linear,
|
||||
top 90ms linear,
|
||||
transform 120ms ease;
|
||||
}
|
||||
|
||||
@keyframes baby-object-item-appear {
|
||||
0% {
|
||||
opacity: 0;
|
||||
@@ -3145,9 +3270,15 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
|
||||
.baby-object-runtime__item-image {
|
||||
display: block;
|
||||
width: 76%;
|
||||
height: 76%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
max-width: 76%;
|
||||
max-height: 76%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.baby-object-runtime__item-name {
|
||||
@@ -3165,6 +3296,54 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.baby-object-runtime__hands {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.baby-object-runtime__hand {
|
||||
position: absolute;
|
||||
left: var(--baby-object-hand-x, 50%);
|
||||
top: var(--baby-object-hand-y, 50%);
|
||||
width: clamp(4.1rem, 9.4vw, 7.1rem);
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%) rotate(var(--baby-object-hand-rotate, 0deg));
|
||||
border-radius: 48% 48% 54% 54%;
|
||||
background: var(--baby-object-hand-image) center / contain no-repeat;
|
||||
filter: drop-shadow(0 10px 18px rgba(83, 78, 50, 0.16));
|
||||
opacity: 0.92;
|
||||
transition:
|
||||
left 90ms linear,
|
||||
top 90ms linear,
|
||||
transform 120ms ease,
|
||||
opacity 120ms ease;
|
||||
}
|
||||
|
||||
.baby-object-runtime__hand--left {
|
||||
--baby-object-hand-image: var(--baby-object-left-hand-image);
|
||||
--baby-object-hand-rotate: -10deg;
|
||||
}
|
||||
|
||||
.baby-object-runtime__hand--right {
|
||||
--baby-object-hand-image: var(--baby-object-right-hand-image);
|
||||
--baby-object-hand-rotate: 10deg;
|
||||
}
|
||||
|
||||
.baby-object-runtime__hand--holding {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) rotate(var(--baby-object-hand-rotate, 0deg)) scale(1.08);
|
||||
}
|
||||
|
||||
.baby-object-runtime__hand--holding-left-corner {
|
||||
transform: translate(-112%, -6%) rotate(var(--baby-object-hand-rotate, 0deg)) scale(1.02);
|
||||
}
|
||||
|
||||
.baby-object-runtime__hand--holding-right-corner {
|
||||
transform: translate(12%, -6%) rotate(var(--baby-object-hand-rotate, 0deg)) scale(1.02);
|
||||
}
|
||||
|
||||
.baby-object-runtime__feedback {
|
||||
position: absolute;
|
||||
z-index: 9;
|
||||
@@ -3277,31 +3456,82 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
}
|
||||
}
|
||||
|
||||
.baby-object-runtime__basket-icon {
|
||||
.baby-object-runtime__basket-option {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
top: -26%;
|
||||
top: -34%;
|
||||
display: grid;
|
||||
width: 54%;
|
||||
width: 58%;
|
||||
justify-items: center;
|
||||
gap: 0.18rem;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
transition:
|
||||
opacity 180ms ease,
|
||||
transform 180ms ease;
|
||||
}
|
||||
|
||||
.baby-object-runtime__basket-option--ready {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.baby-object-runtime__basket-icon {
|
||||
--baby-object-basket-icon-size: clamp(4.6rem, 9vw, 7.1rem);
|
||||
display: grid;
|
||||
width: var(--baby-object-basket-icon-size);
|
||||
height: var(--baby-object-basket-icon-size);
|
||||
min-width: var(--baby-object-basket-icon-size);
|
||||
min-height: var(--baby-object-basket-icon-size);
|
||||
max-width: var(--baby-object-basket-icon-size);
|
||||
max-height: var(--baby-object-basket-icon-size);
|
||||
aspect-ratio: 1;
|
||||
place-items: center;
|
||||
transform: translateX(-50%);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border: 0.18rem solid rgba(255, 255, 255, 0.78);
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 253, 244, 0.88);
|
||||
box-shadow: 0 10px 22px rgba(60, 112, 74, 0.12);
|
||||
contain: layout paint;
|
||||
}
|
||||
|
||||
.baby-object-runtime__basket-image {
|
||||
display: block;
|
||||
width: 74%;
|
||||
height: 74%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
max-width: 74%;
|
||||
max-height: 74%;
|
||||
object-fit: contain;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.baby-object-runtime__basket-name {
|
||||
display: inline-flex;
|
||||
max-width: min(7.5rem, 92%);
|
||||
min-height: 1.35rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgba(255, 255, 255, 0.74);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 253, 244, 0.9);
|
||||
color: var(--baby-object-text);
|
||||
padding: 0.16rem 0.58rem;
|
||||
font-size: clamp(0.72rem, 1.35vw, 0.92rem);
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
box-shadow: 0 7px 16px rgba(60, 112, 74, 0.1);
|
||||
}
|
||||
|
||||
.baby-object-runtime__basket-body {
|
||||
position: absolute;
|
||||
inset: 20% 0 0;
|
||||
inset: 26% 0 0;
|
||||
border: 0.28rem solid rgba(139, 84, 40, 0.72);
|
||||
border-top-width: 0.42rem;
|
||||
border-radius: 0.8rem 0.8rem 2rem 2rem;
|
||||
@@ -3313,9 +3543,11 @@ html[data-mobile-keyboard-open='true'] .platform-mobile-bottom-dock {
|
||||
|
||||
.baby-object-runtime__basket-shell-image {
|
||||
position: absolute;
|
||||
inset: -24% -18% -8% -18%;
|
||||
width: calc(100% + 36%);
|
||||
height: calc(100% + 32%);
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 142%;
|
||||
height: 136%;
|
||||
transform: translate(-50%, -50%);
|
||||
object-fit: contain;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -7426,13 +7658,17 @@ button {
|
||||
--child-motion-asset-stage: url('/child-motion-demo/picture-book-grass-stage.png');
|
||||
--child-motion-asset-floor: url('/child-motion-demo/picture-book-foreground-grass-v2.png');
|
||||
--child-motion-asset-ring: url('/child-motion-demo/picture-book-ground-ring-v3.png');
|
||||
--child-motion-asset-avatar: url('/child-motion-demo/picture-book-character-outline-v2.png');
|
||||
--child-motion-asset-avatar: url('/child-motion-demo/picture-book-character-outline-v4.png');
|
||||
--child-motion-asset-hud: url('/child-motion-demo/picture-book-hud-strip-v2.png');
|
||||
--child-motion-asset-calibration: url('/child-motion-demo/picture-book-calibration-strip-v2.png');
|
||||
--child-motion-asset-start-panel: url('/child-motion-demo/picture-book-start-panel-v2.png');
|
||||
--child-motion-asset-button: url('/child-motion-demo/picture-book-ui-button-v2.png');
|
||||
--child-motion-asset-wave-cat-body: url('/child-motion-demo/picture-book-wave-cat-body-guide-v6.png');
|
||||
--child-motion-asset-wave-cat-arm: url('/child-motion-demo/picture-book-wave-cat-arm-guide-v6.png');
|
||||
--child-motion-asset-wave-cat-body: url('/child-motion-demo/picture-book-wave-cat-body-guide-v7.png');
|
||||
--child-motion-asset-wave-cat-arm: url('/child-motion-demo/picture-book-wave-cat-arm-guide-v7.png');
|
||||
--child-motion-asset-wave-cat-paw-left: url('/child-motion-demo/picture-book-wave-cat-paw-left-v1.png');
|
||||
--child-motion-asset-wave-cat-paw-right: url('/child-motion-demo/picture-book-wave-cat-paw-right-v1.png');
|
||||
--baby-object-left-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-left-hand-v8-transparent.png');
|
||||
--baby-object-right-hand-image: url('/edutainment-baby-object/image2-picture-book-hands/baby-object-right-hand-v8-transparent.png');
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
@@ -7660,13 +7896,20 @@ button {
|
||||
padding: clamp(0.45rem, 1.2vw, 0.75rem) clamp(0.72rem, 2vw, 1.25rem);
|
||||
}
|
||||
|
||||
.child-motion-hud--top > div {
|
||||
.child-motion-hud__copy {
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
padding: 0 clamp(0.35rem, 1vw, 0.75rem);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.child-motion-hud__copy--subtitle-only {
|
||||
display: flex;
|
||||
min-height: clamp(2.4rem, 6vw, 3.5rem);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.child-motion-hud h1 {
|
||||
margin: 0;
|
||||
color: var(--child-motion-text);
|
||||
@@ -7689,6 +7932,13 @@ button {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.child-motion-hud__copy--subtitle-only p {
|
||||
margin-top: 0;
|
||||
font-size: clamp(0.86rem, 1.85vw, 1.25rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.child-motion-step-count,
|
||||
.child-motion-progress {
|
||||
display: inline-flex;
|
||||
@@ -7782,7 +8032,7 @@ button {
|
||||
position: absolute;
|
||||
bottom: 21.5%;
|
||||
z-index: 5;
|
||||
width: clamp(4.2rem, 8.4vw, 6.8rem);
|
||||
width: clamp(6.3rem, 12.6vw, 10.2rem);
|
||||
aspect-ratio: 2 / 3;
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
isolation: isolate;
|
||||
@@ -7826,6 +8076,10 @@ button {
|
||||
animation: child-motion-guide-appear 0.3s ease-out both;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide--greeting {
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
@keyframes child-motion-guide-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
@@ -7838,58 +8092,40 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__jump {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 38%;
|
||||
display: inline-flex;
|
||||
width: clamp(4.5rem, 11vw, 8rem);
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid rgba(117, 186, 92, 0.56);
|
||||
border-radius: 999px;
|
||||
background: rgba(247, 251, 243, 0.18);
|
||||
color: var(--child-motion-text);
|
||||
font-size: clamp(1rem, 2.4vw, 1.55rem);
|
||||
font-weight: 900;
|
||||
box-shadow: 0 8px 24px rgba(79, 126, 67, 0.12);
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__wave-cat {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 42%;
|
||||
top: clamp(9.8rem, 31vh, 20rem);
|
||||
width: clamp(12.5rem, 25vw, 20.5rem);
|
||||
aspect-ratio: 1.16;
|
||||
transform: translate(-50%, -50%);
|
||||
transform-origin: center 72%;
|
||||
opacity: 0.86;
|
||||
filter: drop-shadow(0 0.65rem 1.2rem rgba(69, 121, 73, 0.16));
|
||||
animation: child-motion-wave-cat-bob 1.38s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__wave-cat-body {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
z-index: 4;
|
||||
z-index: 2;
|
||||
width: 72%;
|
||||
aspect-ratio: 1;
|
||||
transform: translateX(-50%);
|
||||
background: var(--child-motion-asset-wave-cat-body) center bottom / contain
|
||||
no-repeat;
|
||||
animation: child-motion-wave-cat-body 1.38s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__wave-cat-arm {
|
||||
position: absolute;
|
||||
bottom: 16%;
|
||||
z-index: 3;
|
||||
bottom: 9.5%;
|
||||
z-index: 5;
|
||||
width: 34%;
|
||||
aspect-ratio: 1;
|
||||
background: none;
|
||||
transform-origin: var(--child-motion-wave-cat-arm-origin-x) 92%;
|
||||
animation: child-motion-wave-cat-arm 0.7s ease-in-out infinite alternate;
|
||||
transform-origin: var(--child-motion-wave-cat-arm-origin-x) 78%;
|
||||
animation: child-motion-wave-cat-arm 0.47s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__wave-cat-arm::before {
|
||||
@@ -7901,76 +8137,161 @@ button {
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__wave-cat-arm--left {
|
||||
left: 13%;
|
||||
--child-motion-wave-cat-arm-origin-x: 76%;
|
||||
left: 12%;
|
||||
--child-motion-wave-cat-arm-origin-x: 60%;
|
||||
--child-motion-wave-hand-direction: -1;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__wave-cat-arm--left::before {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__wave-cat-arm--right {
|
||||
right: 13%;
|
||||
--child-motion-wave-cat-arm-origin-x: 24%;
|
||||
right: 12%;
|
||||
--child-motion-wave-cat-arm-origin-x: 40%;
|
||||
--child-motion-wave-hand-direction: 1;
|
||||
animation-delay: -0.35s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm {
|
||||
.child-motion-gesture-guide__wave-cat-arm--right::before {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing {
|
||||
--child-motion-arm-swing-origin-x: 18%;
|
||||
--child-motion-arm-swing-radius: clamp(5.2rem, 9.6vw, 7.4rem);
|
||||
--child-motion-arm-swing-angle-from: -43deg;
|
||||
--child-motion-arm-swing-angle-to: 43deg;
|
||||
--child-motion-arm-swing-paw-offset-x: calc(
|
||||
var(--child-motion-arm-swing-radius) * 1
|
||||
);
|
||||
--child-motion-arm-swing-paw-size: clamp(4.6rem, 9vw, 7.4rem);
|
||||
position: absolute;
|
||||
top: 22%;
|
||||
width: clamp(4.6rem, 9vw, 7.4rem);
|
||||
top: 14%;
|
||||
display: block;
|
||||
width: clamp(6.8rem, 15vw, 11rem);
|
||||
aspect-ratio: 0.62;
|
||||
overflow: visible;
|
||||
opacity: 0.86;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing--left {
|
||||
left: 16%;
|
||||
--child-motion-arm-swing-origin-x: 82%;
|
||||
--child-motion-arm-swing-paw-offset-x: calc(
|
||||
var(--child-motion-arm-swing-radius) * -1
|
||||
);
|
||||
--child-motion-arm-swing-angle-from: -90deg;
|
||||
--child-motion-arm-swing-angle-to: 90deg;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing--right {
|
||||
right: 16%;
|
||||
--child-motion-arm-swing-origin-x: 18%;
|
||||
--child-motion-arm-swing-angle-from: 90deg;
|
||||
--child-motion-arm-swing-angle-to: -90deg;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing-track {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--child-motion-arm-swing-origin-x);
|
||||
width: calc(var(--child-motion-arm-swing-radius) * 2);
|
||||
height: calc(var(--child-motion-arm-swing-radius) * 2);
|
||||
transform: translate(-50%, -50%);
|
||||
border: clamp(0.18rem, 0.45vw, 0.34rem) solid rgba(255, 249, 222, 0.92);
|
||||
border-inline-start-color: rgba(255, 221, 124, 0.78);
|
||||
border-inline-end-color: transparent;
|
||||
border-radius: 999px;
|
||||
box-shadow:
|
||||
0 0 0 0.14rem rgba(83, 136, 83, 0.12),
|
||||
0 0.55rem 1.2rem rgba(69, 121, 73, 0.12);
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing--right .child-motion-gesture-guide__arm-swing-track {
|
||||
border-inline-start-color: transparent;
|
||||
border-inline-end-color: rgba(255, 221, 124, 0.78);
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing-track::before,
|
||||
.child-motion-gesture-guide__arm-swing-track::after {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: clamp(0.7rem, 1.6vw, 1rem);
|
||||
aspect-ratio: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 250, 226, 0.94);
|
||||
box-shadow: 0 0 0 0.16rem rgba(255, 206, 104, 0.42);
|
||||
content: '';
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing-track::before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing-track::after {
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing-paw {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: var(--child-motion-arm-swing-origin-x);
|
||||
width: 0;
|
||||
height: 0;
|
||||
filter: drop-shadow(0 0.5rem 1rem rgba(69, 121, 73, 0.13));
|
||||
transform-origin: center;
|
||||
animation: child-motion-arm-swing-guide 0.88s ease-in-out infinite alternate;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm-swing-paw-asset {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: var(--child-motion-arm-swing-paw-size);
|
||||
aspect-ratio: 1;
|
||||
opacity: 0.78;
|
||||
background: var(--child-motion-asset-wave-cat-arm) center bottom / contain
|
||||
no-repeat;
|
||||
filter: drop-shadow(0 0.5rem 1rem rgba(69, 121, 73, 0.13));
|
||||
transform-origin: 44% 86%;
|
||||
animation: child-motion-arm-guide 0.73s ease-in-out infinite alternate;
|
||||
transform: translate(-50%, -50%)
|
||||
translateX(var(--child-motion-arm-swing-paw-offset-x));
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm--left {
|
||||
left: 22%;
|
||||
--child-motion-wave-hand-direction: -1;
|
||||
.child-motion-gesture-guide__arm-swing--left .child-motion-gesture-guide__arm-swing-paw-asset {
|
||||
background-image: var(--child-motion-asset-wave-cat-paw-left);
|
||||
}
|
||||
|
||||
.child-motion-gesture-guide__arm--right {
|
||||
right: 22%;
|
||||
--child-motion-wave-hand-direction: 1;
|
||||
.child-motion-gesture-guide__arm-swing--right .child-motion-gesture-guide__arm-swing-paw-asset {
|
||||
background-image: var(--child-motion-asset-wave-cat-paw-right);
|
||||
}
|
||||
|
||||
@keyframes child-motion-arm-guide {
|
||||
@keyframes child-motion-arm-swing-guide {
|
||||
from {
|
||||
transform: scaleX(var(--child-motion-wave-hand-direction, 1))
|
||||
rotate(calc(var(--child-motion-wave-hand-direction, 1) * -7deg))
|
||||
translateY(2%);
|
||||
transform: rotate(var(--child-motion-arm-swing-angle-from));
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(var(--child-motion-wave-hand-direction, 1))
|
||||
rotate(calc(var(--child-motion-wave-hand-direction, 1) * 15deg))
|
||||
translateY(-9%);
|
||||
transform: rotate(var(--child-motion-arm-swing-angle-to));
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes child-motion-wave-cat-body {
|
||||
@keyframes child-motion-wave-cat-bob {
|
||||
from {
|
||||
transform: translateX(-50%) translateY(1.5%) scale(0.985);
|
||||
transform: translate(-50%, -50%) translateY(1.2%) scale(0.992);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(-50%) translateY(-1.5%) scale(1.015);
|
||||
transform: translate(-50%, -50%) translateY(-1.2%) scale(1.008);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes child-motion-wave-cat-arm {
|
||||
from {
|
||||
transform: rotate(calc(var(--child-motion-wave-hand-direction, 1) * -12deg));
|
||||
transform: rotate(calc(var(--child-motion-wave-hand-direction, 1) * -15deg));
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(calc(var(--child-motion-wave-hand-direction, 1) * 18deg));
|
||||
transform: rotate(calc(var(--child-motion-wave-hand-direction, 1) * 22deg));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7984,6 +8305,14 @@ button {
|
||||
box-shadow: 0 0 16px rgba(119, 194, 111, 0.56);
|
||||
}
|
||||
|
||||
.child-motion-hand-indicators {
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.child-motion-hand-indicator {
|
||||
width: clamp(3.7rem, 7.8vw, 6.4rem);
|
||||
}
|
||||
|
||||
.child-motion-floating-reward {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
||||
Reference in New Issue
Block a user