@layer scenes {
[data-8b-live] #care .ca-list > li { view-timeline: --care-item block; view-timeline-inset: 0; }
[data-8b-live] #care .ca-list > li > .ca-frame { animation-name: care-div-ca-frame-clippath; animation-timeline: --care-item; animation-range: cover 0% cover 100%; animation-timing-function: linear(0, 0.00003, 0.00026, 0.00086, 0.00205, 0.004, 0.00691, 0.01098, 0.01638, 0.02333, 0.032, 0.04259, 0.0553, 0.0703, 0.08781, 0.108, 0.13107, 0.15722, 0.18662, 0.21949, 0.256, 0.29635, 0.34074, 0.38934, 0.44237, 0.5, 0.55763, 0.61066, 0.65926, 0.70365, 0.744, 0.78051, 0.81338, 0.84278, 0.86893, 0.892, 0.91219, 0.9297, 0.9447, 0.95741, 0.968, 0.97667, 0.98362, 0.98902, 0.99309, 0.996, 0.99795, 0.99914, 0.99974, 0.99997, 1); animation-fill-mode: both; }
[data-8b-live] #care .ca-list > li > .ca-frame > img { animation-name: care-div-ca-frame-img-scale; animation-timeline: --care-item; animation-range: cover 0% cover 100%; animation-timing-function: linear; animation-fill-mode: both; transform: none; }
[data-8b-live] #care .ca-list > li > .ca-rule { animation-name: care-span-ca-rule-scale, care-span-ca-rule-backgroundcolor; animation-timeline: --care-item; animation-range: cover 0% cover 36%, cover 0% cover 82%; animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1), linear; animation-fill-mode: both; transform: none; }
@keyframes care-div-ca-frame-clippath { 0% { clip-path: inset(38% 70% 38% 0% round 999px); } 36% { clip-path: inset(0%); } 64% { clip-path: inset(0%); } 100% { clip-path: inset(38% 70% 38% 0% round 999px); } }
@keyframes care-div-ca-frame-img-scale { 0% { scale: 1.3; animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1); } 36% { scale: 1; } 64% { scale: 1; animation-timing-function: cubic-bezier(0.3333, 0, 0.6667, 0); } 100% { scale: 1.3; } }
@keyframes care-span-ca-rule-scale { 0% { scale: 0.08 1; } 100% { scale: 1; } }
@keyframes care-span-ca-rule-backgroundcolor { 0% { background-color: var(--color-2); animation-timing-function: cubic-bezier(0.3333, 1, 0.6667, 1); } 43.9024% { background-color: rgb(var(--care-span-ca-rule-backgroundcolor-at43_9024, 99), var(--care-span-ca-rule-backgroundcolor-at43_9024-2, 164), var(--care-span-ca-rule-backgroundcolor-at43_9024-3, 188)); } 75.6098% { background-color: rgb(var(--care-span-ca-rule-backgroundcolor-at75_6098, 99), var(--care-span-ca-rule-backgroundcolor-at75_6098-2, 164), var(--care-span-ca-rule-backgroundcolor-at75_6098-3, 188)); animation-timing-function: linear(0, 0.0494, 0.0975, 0.1444, 0.19, 0.2344, 0.2775, 0.3194, 0.36, 0.3994, 0.4375, 0.4744, 0.51, 0.5444, 0.5775, 0.6094, 0.64, 0.6694, 0.6975, 0.7244, 0.75, 0.7744, 0.7975, 0.8194, 0.84, 0.8594, 0.8775, 0.8944, 0.91, 0.9244, 0.9375, 0.9494, 0.96, 0.9694, 0.9775, 0.9844, 0.99, 0.9944, 0.9975, 0.9994, 1); } 100% { background-color: var(--color-2); } }
}