/* Always-visible HTML sculpture. Motion uses only compositor transforms. */
.seo-kinetic{position:relative;width:100%;aspect-ratio:1;max-width:580px;flex:none;container-type:inline-size}
.seo-kinetic-stack{position:absolute;inset:0;isolation:isolate}
.seo-kinetic-plate{display:block;position:absolute;left:17%;top:37%;width:66%;height:25%;border-radius:24% 29% 25% 28%;background:linear-gradient(145deg,hsl(var(--h) 87% 78%) 0%,hsl(var(--h) 74% 58%) 34%,hsl(calc(var(--h) + 9) 62% 37%) 100%);border:1px solid #c5d6ff65;box-shadow:inset 0 2px 1px #ffffffa0,inset 0 -7px 10px #19225948,0 7px 10px #25224e22;transform:translateY(calc(var(--n)*3.1cqw)) rotate(-26deg) skewX(-15deg);animation:seo-plate-wave 7s cubic-bezier(.45,0,.25,1) infinite;animation-delay:calc(var(--i)*-.13s);will-change:transform}
.seo-kinetic-plate::after{content:"";position:absolute;inset:10% 8%;border-top:1px solid #ffffff45;border-radius:inherit}
@keyframes seo-plate-wave{0%,100%{transform:translateY(calc(var(--n)*3.1cqw)) rotate(-26deg) skewX(-15deg)}45%,60%{transform:translate(calc(var(--n)*1.1cqw),calc(var(--n)*4.5cqw)) rotate(calc(-14deg + var(--n)*4deg)) skewX(-15deg)}}
html[data-theme=dark] .seo-kinetic-plate{box-shadow:inset 0 2px 1px #ffffffa0,inset 0 -7px 10px #19225948,0 8px 16px #080b2448}
@media(prefers-reduced-motion:reduce){.seo-kinetic-plate{animation:none;will-change:auto}}
@media(max-width:700px){.seo-kinetic{max-width:340px}.seo-kinetic-plate{box-shadow:inset 0 2px 1px #ffffff80,inset 0 -5px 8px #19225948,0 4px 8px #25224e22}}