.holo{perspective:var(--motion-holo-perspective);position:relative;container-type:inline-size}.holo__tilt{transform-style:preserve-3d;touch-action:pan-y;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--sc,1));transition:transform var(--motion-holo-return) var(--motion-ease-out);position:relative}.holo__tilt[data-hot]{transition:transform var(--motion-holo-follow) linear}.holo[data-live=true] .holo__tilt{will-change:transform}.holo[data-mode=pointer] .holo__tilt{transform-style:flat}.holo__layer{pointer-events:none;opacity:0;border-radius:calc(var(--c-frame-r) * 100cqw / var(--c-ref-w));transition:opacity var(--motion-holo-fade) var(--motion-ease-out);display:block;position:absolute;inset:0}.holo__layer--foil{background:var(--motion-holo-foil);background-size:320% 320%;background-position:calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%);mix-blend-mode:color-dodge}.holo__layer--gold{background:var(--motion-holo-gold);background-size:260% 260%;background-position:calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%);mix-blend-mode:overlay}.holo__layer--glare{background:radial-gradient(circle at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%), var(--motion-holo-glare), transparent 55%);mix-blend-mode:overlay}.holo__layer--spark{background-image:var(--motion-holo-spark);background-size:var(--motion-holo-spark-size);background-position:calc(var(--mx,.5) * var(--motion-holo-spark-a)) calc(var(--my,.5) * var(--motion-holo-spark-a)), calc(var(--mx,.5) * var(--motion-holo-spark-b) * -1) calc(var(--my,.5) * var(--motion-holo-spark-b));mix-blend-mode:color-dodge;-webkit-mask-image:radial-gradient(circle at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%), var(--color-surface-ink) 0, transparent 55%);-webkit-mask-image:radial-gradient(circle at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%), var(--color-surface-ink) 0, transparent 55%);mask-image:radial-gradient(circle at calc(var(--mx,.5) * 100%) calc(var(--my,.5) * 100%), var(--color-surface-ink) 0, transparent 55%)}.holo[data-live=true][data-holo="1"] .holo__layer--glare{opacity:.55}.holo[data-live=true][data-holo="2"] .holo__layer--foil{opacity:.25}.holo[data-live=true][data-holo="2"] .holo__layer--glare{opacity:.5}.holo[data-live=true][data-holo="3"] .holo__layer--gold{opacity:.85}.holo[data-live=true][data-holo="3"] .holo__layer--glare{opacity:.55}.holo[data-live=true][data-holo="3"] .holo__layer--spark{opacity:.7}.holo[data-live=true][data-holo="4"] .holo__layer--foil{opacity:.6}.holo[data-live=true][data-holo="4"] .holo__layer--glare{opacity:.65}.holo[data-live=true][data-holo="4"] .holo__layer--spark{opacity:1}.holo[data-holo="5"] .holo__layer--foil{background-image:var(--motion-holo-foil-u)}.holo[data-live=true][data-holo="5"] .holo__layer--foil{opacity:var(--motion-holo-u-foil)}.holo[data-live=true][data-holo="5"] .holo__layer--gold{opacity:var(--motion-holo-u-gold)}.holo[data-live=true][data-holo="5"] .holo__layer--glare{opacity:var(--motion-holo-u-glare)}.holo[data-live=true][data-holo="5"] .holo__layer--spark{opacity:var(--motion-holo-u-spark)}.holo__halo{pointer-events:none;position:absolute;inset:0}.holo__halo>b{opacity:0;border-radius:calc(var(--c-frame-r) * 100cqw / var(--c-ref-w));box-shadow:0 0 var(--motion-halo-blur) var(--halo,var(--motion-halo-pink));transition:opacity var(--motion-holo-fade) var(--motion-ease-out);display:block;position:absolute;inset:0}.holo__halo>b:first-child{--halo:var(--motion-halo-pink);--i:0}.holo__halo>b:nth-child(2){--halo:var(--motion-halo-yellow);--i:1}.holo__halo>b:nth-child(3){--halo:var(--motion-halo-green);--i:2}.holo__halo>b:nth-child(4){--halo:var(--motion-halo-blue);--i:3}.holo__halo[data-halo=gold]>b:first-child{--halo:var(--motion-halo-gold)}.holo[data-live=true] .holo__halo[data-halo=gold]>b:first-child{opacity:1}.holo[data-live=true] .holo__halo[data-halo=cycle]>b{animation:holo-halo var(--motion-holo-halo) linear infinite;animation-delay:calc(var(--i) * var(--motion-holo-halo) / -4)}.holo[data-holo="5"] .holo__halo[data-halo=cycle]>b:nth-child(3){--halo:var(--motion-halo-blue)}.holo[data-holo="5"] .holo__halo[data-halo=cycle]>b:nth-child(4){--halo:var(--motion-halo-violet)}.holo[data-live=true][data-holo="5"] .holo__halo[data-halo=cycle]>b{animation-duration:var(--motion-holo-halo-u);animation-delay:calc(var(--i) * var(--motion-holo-halo-u) / -4)}@keyframes holo-halo{0%{opacity:0}12.5%{opacity:1}25%,to{opacity:0}}@media (prefers-reduced-motion:reduce){.holo__layer,.holo__halo{display:none}.holo__tilt{transform:none}}.holo-gyro{margin-top:var(--space-2)}