/* Optional effects. Transforms apply to the visual, keeping the occupied cell stable. */
[data-floating-effects] :is(.ecos-floating-button,[data-floating-native]){isolation:isolate}
[data-floating-effects] :is(.ecos-floating-icon,[data-floating-native-icon]){transform:translate(var(--eco-fx-x,0px),var(--eco-fx-y,0px)) perspective(400px) rotateX(var(--eco-fx-rx,0deg)) rotateY(var(--eco-fx-ry,0deg));transform-origin:center;transition:transform 160ms ease;will-change:auto}
[data-floating-effects~="liquid"]:is(:hover,:focus-within) :is(.ecos-floating-button,[data-floating-native]){animation:eco-fx-liquid 2.4s ease-in-out infinite}
[data-floating-effects~="neon"]:is(:hover,:focus-within) :is(.ecos-floating-button,[data-floating-native]){filter:drop-shadow(0 0 7px currentColor) drop-shadow(0 0 14px currentColor)}
[data-floating-effects~="elastic"]:is(:hover,:focus-within) :is(.ecos-floating-icon,[data-floating-native-icon]){animation:eco-fx-elastic 650ms cubic-bezier(.2,.8,.3,1)}
[data-floating-effects~="rotating-border"] :is(.ecos-floating-button,[data-floating-native])::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--eco-fx-angle,0deg),transparent 15%,currentColor 45%,transparent 70%);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:0}
[data-floating-effects~="rotating-border"]:is(:hover,:focus-within) :is(.ecos-floating-button,[data-floating-native])::before{opacity:1;animation:eco-fx-border 2s linear infinite}
[data-floating-effects~="gradient"]:is(:hover,:focus-within) :is(.ecos-floating-button,[data-floating-native])::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 25%,rgb(255 255 255 / .5) 50%,transparent 75%);background-size:300% 100%;animation:eco-fx-sweep 850ms ease-out}
[data-floating-effects~="pulse-ring"] :is(.ecos-floating-button,[data-floating-native])::after{content:"";position:absolute;inset:1px;border:2px solid currentColor;border-radius:inherit;pointer-events:none;animation:eco-fx-pulse 2s ease-out infinite}
[data-floating-effects~="pulse-ring"][data-floating-effects~="gradient"]:is(:hover,:focus-within) :is(.ecos-floating-button,[data-floating-native])::after{animation:eco-fx-sweep 850ms ease-out}
[data-floating-effects~="icon-floating"] :is(.ecos-floating-icon,[data-floating-native-icon]){animation:eco-fx-float 2.8s ease-in-out infinite}
[data-floating-effects~="icon-floating"][data-floating-effects~="elastic"]:is(:hover,:focus-within) :is(.ecos-floating-icon,[data-floating-native-icon]){animation:eco-fx-float 2.8s ease-in-out infinite,eco-fx-elastic 650ms cubic-bezier(.2,.8,.3,1)}
[data-floating-effects~="glass"] :is(.ecos-floating-button,[data-floating-native]){background:rgb(255 255 255 / .14);backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .45)}
.eco-fx-surface{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:1}
.eco-fx-ripple{position:absolute;width:12px;height:12px;border-radius:50%;background:currentColor;pointer-events:none;opacity:.35;transform:translate(-50%,-50%)}
.eco-fx-particle{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:currentColor;pointer-events:none}
@property --eco-fx-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes eco-fx-liquid{0%,100%{border-radius:45% 55% 60% 40% / 50% 45% 55% 50%}50%{border-radius:60% 40% 45% 55% / 40% 60% 40% 60%}}
@keyframes eco-fx-border{to{--eco-fx-angle:360deg}}
@keyframes eco-fx-sweep{from{background-position:100% 0}to{background-position:0 0}}
@keyframes eco-fx-elastic{0%,100%{scale:1}35%{scale:1.14 .84}65%{scale:.9 1.08}85%{scale:1.04 .97}}
@keyframes eco-fx-pulse{0%{opacity:.6;scale:.72}80%,100%{opacity:0;scale:1}}
@keyframes eco-fx-float{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media(prefers-reduced-motion:reduce){[data-floating-effects] *,[data-floating-effects] ::before,[data-floating-effects] ::after{animation:none!important;transition:none!important;translate:none!important;scale:none!important;filter:none!important}.eco-fx-surface{display:none!important}}
