@media (prefers-reduced-motion: no-preference) { .site-header .logo .logo-s {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: strgs-logo-drop 0.9s cubic-bezier(0.3, 1.5, 0.55, 1) 0.2s both;
}
.site-header .logo:hover .logo-s {
animation: strgs-logo-wiggle 0.5s ease-in-out;
}
@keyframes strgs-logo-drop {
0% { transform: translateY(-120%) rotate(-25deg); opacity: 0; }
60% { opacity: 1; }
100% { transform: none; }
}
@keyframes strgs-logo-wiggle {
0%, 100% { transform: none; }
25% { transform: rotate(-8deg); }
75% { transform: rotate(8deg); }
} .typed {
position: relative;
display: inline-block;
}
.typed__ghost {
visibility: hidden;
}
.typed__live {
position: absolute;
left: 0;
top: 0;
white-space: nowrap;
}
.caret {
display: inline-block;
width: 0.09em;
height: 0.82em;
margin-left: 0.04em;
background: var(--wp--preset--color--ink);
vertical-align: -0.04em;
animation: strgs-blink 0.8s steps(1) infinite;
}
.caret.is-gone {
display: none;
}
.pop {
display: inline-block;
opacity: 0;
}
.pop.is-in {
animation: strgs-pop 0.7s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}
@keyframes strgs-blink {
50% { opacity: 0; }
}
@keyframes strgs-pop {
from { transform: translateY(60%) scale(0.6) rotate(-6deg); opacity: 0; }
to { transform: none; opacity: 1; }
} .kb-s.shake {
animation: strgs-shake 0.45s ease-in-out;
}
.kb-s.hint {
animation: strgs-nudge 2.4s ease-in-out 2s infinite;
}
@keyframes strgs-shake {
0%, 100% { transform: none; }
20% { transform: translateX(-7px) rotate(-4deg); }
40% { transform: translateX(7px) rotate(4deg); }
60% { transform: translateX(-5px); }
80% { transform: translateX(5px); }
}
@keyframes strgs-nudge {
0%, 80%, 100% { transform: none; }
86% { transform: translateY(-6px); }
92% { transform: translateY(0); }
96% { transform: translateY(-3px); }
}
.hero__msg.is-new {
animation: strgs-toast-in 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both;
}
@keyframes strgs-toast-in {
from { transform: translateY(14px) scale(0.9); opacity: 0; }
to { transform: none; opacity: 1; }
} .burst {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
pointer-events: none;
z-index: 5;
}
.burst--screen {
position: fixed;
z-index: 9999;
}
.cf {
position: absolute;
left: -15px;
top: -15px;
width: 30px;
height: 30px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: var(--wp--preset--color--paper);
border: 2px solid var(--wp--preset--color--ink);
border-radius: 4px;
font-family: var(--wp--preset--font-family--source-code-pro);
font-size: 13px;
font-weight: 800;
color: var(--wp--preset--color--ink);
animation: strgs-burst 1.5s cubic-bezier(0.15, 0.7, 0.35, 1) both;
}
.cf.lime {
background: var(--wp--preset--color--lime);
border-color: var(--wp--preset--color--lime);
}
@keyframes strgs-burst {
0% { transform: translate(0, 0) scale(0.3) rotate(0); opacity: 1; }
70% { opacity: 1; }
100% { transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); opacity: 0; }
} .k.bigS {
transition: transform 0.1s;
} .ticker .track {
animation: strgs-marquee 38s linear infinite;
}
.ticker:hover .track {
animation-play-state: paused;
}
@keyframes strgs-marquee {
to { transform: translateX(-50%); }
} .svc:hover .k,
.card:hover .k {
animation: strgs-tap 0.4s ease-in-out both;
}
.svc:hover .k + .plus + .k {
animation-delay: 0.14s;
}
.svc:hover .k + .plus + .k + .plus + .k {
animation-delay: 0.28s;
}
@keyframes strgs-tap {
0%, 100% { transform: none; }
45% { transform: translateY(3px) scale(0.92); }
} .partner-badge .spin {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: strgs-spin 22s linear infinite;
}
.partner-badge:hover .spin {
animation-duration: 4s;
}
@keyframes strgs-spin {
to { transform: rotate(360deg); }
} .pkt {
animation: strgs-pkt-r 2.4s ease-in-out infinite;
}
.pkt:nth-child(2) {
animation-delay: 0.8s;
}
.pkt:nth-child(3) {
animation-name: strgs-pkt-l;
animation-delay: 1.6s;
}
@keyframes strgs-pkt-r {
0% { left: 0; opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: calc(100% - 14px); opacity: 0; }
}
@keyframes strgs-pkt-l {
0% { left: calc(100% - 14px); opacity: 0; }
15% { opacity: 1; }
85% { opacity: 1; }
100% { left: 0; opacity: 0; }
} @supports (animation-timeline: view()) {
.trail .draw {
stroke-dasharray: 1 1;
stroke-dashoffset: 1;
animation: strgs-draw linear both;
animation-timeline: view();
animation-range: entry 30% cover 65%;
}
.station .k {
animation: strgs-light-up linear both;
animation-timeline: view();
animation-range: entry 25% cover 55%;
}
@media (max-width: 860px) {
.station:not(:last-child)::before {
transform-origin: top;
animation: strgs-grow linear both;
animation-timeline: view();
animation-range: entry 35% cover 60%;
}
}
.badge {
animation: strgs-badge-pop linear both;
animation-timeline: view();
animation-range: entry 40% cover 35%;
}
.deco {
animation: strgs-deco-float linear both;
animation-timeline: view();
}
}
@keyframes strgs-draw {
to { stroke-dashoffset: 0; }
}
@keyframes strgs-light-up {
0% { background: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--ink); transform: none; }
35% { background: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--ink); transform: none; }
65% { background: var(--wp--preset--color--lime); border-color: var(--wp--preset--color--lime); transform: translateY(-10px) scale(1.15); }
100% { background: var(--wp--preset--color--lime); border-color: var(--wp--preset--color--lime); transform: none; }
}
@keyframes strgs-grow {
0% { transform: scaleY(0); }
100% { transform: scaleY(1); }
}
@keyframes strgs-badge-pop {
0% { transform: scale(0) rotate(-40deg); }
70% { transform: scale(1.18) rotate(8deg); }
100% { transform: none; }
}
@keyframes strgs-deco-float {
from { transform: translateY(70px) rotate(-4deg); }
to { transform: translateY(-70px) rotate(4deg); }
}
} @media (prefers-reduced-motion: no-preference) {
.paw {
animation: strgs-paw 6.5s ease-in-out infinite;
}
.paw-f {
animation: strgs-paw-f 6.5s infinite;
}
.paw-out {
width: 0;
animation: strgs-paw-type 6.5s infinite;
}
@keyframes strgs-paw {
0%, 22% { transform: translateY(0); }
32% { transform: translateY(-122px) rotate(-6deg); }
36%, 46% { transform: translateY(-112px) rotate(-6deg); }
38%, 42% { transform: translateY(-104px) rotate(-4deg); }
58%, 100% { transform: translateY(0); }
}
@keyframes strgs-paw-f {
0%, 35%, 47%, 100% { transform: none; background: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--ink); }
37%, 45% { transform: translateY(3px) scale(0.9); background: var(--wp--preset--color--lime); border-color: var(--wp--preset--color--lime); }
}
@keyframes strgs-paw-type {
0%, 37% { width: 0; animation-timing-function: steps(9, end); }
52% { width: 9ch; }
88% { width: 9ch; animation-timing-function: steps(9, end); }
100% { width: 0; }
}
.balu-sticker,
.deco-balu {
transform-origin: 50% 100%;
animation: strgs-balu-sticker 3.2s ease-in-out infinite;
}
@keyframes strgs-balu-sticker {
0%, 100% { transform: rotate(-3deg); }
50% { transform: rotate(3deg) translateY(-4px); }
}
.munde-pin {
transform-box: fill-box;
transform-origin: 50% 100%;
animation: strgs-pin-bounce 2.6s ease-in-out infinite;
}
.munde-cloud {
animation: strgs-cloud 9s ease-in-out infinite;
}
@keyframes strgs-pin-bounce {
0%, 100% { transform: none; }
50% { transform: translateY(-8px); }
}
@keyframes strgs-cloud {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-26px); }
}
@supports (animation-timeline: view()) {
.munde-line {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: strgs-draw linear both;
animation-timeline: view();
animation-range: entry 10% cover 45%;
}
}
} @media (prefers-reduced-motion: no-preference) {
.entf__key:hover,
.entf__key:focus-visible {
animation: strgs-entf-wobble 0.45s ease-in-out;
}
@keyframes strgs-entf-wobble {
0%, 100% { transform: none; }
20% { transform: rotate(-9deg); }
45% { transform: rotate(7deg); }
70% { transform: rotate(-4deg); }
}
html.entf-on {
overflow-x: hidden;
}
main,
.site-footer__cols {
transition: transform 0.45s ease, filter 0.45s ease, opacity 0.45s ease;
}
html.entf-on main,
html.entf-on .site-footer__cols {
transform: rotate(-3deg) scale(0.97);
transform-origin: 50% 0;
filter: grayscale(1) contrast(1.15);
opacity: 0.6;
}
.entf-drop {
transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) var(--entf-delay, 0s);
}
html.entf-on .entf-drop {
transform: translate(var(--entf-x, 0), 70px) rotate(var(--entf-r, 0deg));
}
.entf-error {
animation: strgs-entf-error 0.5s steps(2, end) 3;
}
@keyframes strgs-entf-error {
50% { background: var(--wp--preset--color--violet); }
}
} @media (prefers-reduced-motion: no-preference) {
.balu-paw {
animation: strgs-paw 1.6s ease-out var(--d) both;
}
@keyframes strgs-paw {
0% { opacity: 0; scale: 0.6; }
15% { opacity: 0.55; scale: 1; }
75% { opacity: 0.55; }
100% { opacity: 0; }
}
.balu-head {
animation: strgs-balu-peek 3s ease-in-out both;
}
@keyframes strgs-balu-peek {
0% { transform: translateY(105%); }
14% { transform: translateY(10%); }
24% { transform: translateY(10%) rotate(-7deg); }
34% { transform: translateY(10%) rotate(6deg); }
44% { transform: translateY(10%) rotate(-4deg); }
54%, 84% { transform: translateY(10%); }
100% { transform: translateY(105%); }
}
}