/* Optional web-only 1.2 draft. Import after the existing theme/button styles. */
@import './motion-presets.css';
@import './motion-tokens.css';
@import './motion-optional.css';
:root {
  --blu-motion-duration: var(--blu-motion-normal);
  --blu-motion-delay: 0ms;
  --blu-motion-distance: 12px;
  --blu-motion-ease: cubic-bezier(.2, .8, .2, 1);
}
.blu-motion-fast { --blu-motion-duration: var(--blu-motion-fast); }
.blu-motion-slow { --blu-motion-duration: var(--blu-motion-slow); }
.blu-motion-delay-1 { --blu-motion-delay: 60ms; }
.blu-motion-delay-2 { --blu-motion-delay: 120ms; }
.blu-motion-delay-3 { --blu-motion-delay: 180ms; }
.blu-motion-spin { animation: blu-motion-spin 800ms linear infinite; }
.blu-motion-pulse { animation: blu-motion-pulse 900ms ease-in-out 3; }
.blu-motion-hover-lift { transition: transform var(--blu-motion-duration) var(--blu-motion-ease), box-shadow var(--blu-motion-duration) var(--blu-motion-ease); }
@media (hover: hover) { .blu-motion-hover-lift:hover { transform: translateY(calc(-1 * var(--blu-motion-lift-distance, 4px))); box-shadow: 0 8px 20px #28334b12; } }
.blu-motion-hover-lift:is(:focus-visible, [data-blu-lifted="true"]) { transform: translateY(calc(-1 * var(--blu-motion-lift-distance, 4px))); box-shadow: 0 8px 20px #28334b12; }
/* Requires one inner wrapper. Content remains in the DOM; the owner manages inert/hidden and focus. */
.blu-motion-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--blu-motion-duration) var(--blu-motion-ease); }
.blu-motion-expand[data-open="true"] { grid-template-rows: 1fr; }
.blu-motion-expand > * { min-height: 0; overflow: hidden; }
@keyframes blu-motion-spin { to { transform: rotate(360deg); } }
@keyframes blu-motion-pulse { 50% { opacity: .45; } }

.blu-motion-button.blu-button { display: inline-grid; gap: 0; transition-duration: var(--blu-motion-duration); }
.blu-motion-button__face, .blu-motion-button__reserve { grid-area: 1 / 1; padding-inline: 24px; }
.blu-motion-button__face { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.blu-motion-button__reserve { visibility: hidden; pointer-events: none; }
.blu-motion-button .blu-button__spinner { position: absolute; inset-inline-start: 0; }
.blu-motion-button[data-spinner-position="Trailing"] .blu-button__spinner { inset-inline-start: auto; inset-inline-end: 0; }
.blu-motion-button .blu-button__spinner[hidden] { display: none; }
.blu-motion-button.blu-button--loading { pointer-events: auto; }
.blu-motion-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.blu-loading { display: flex; align-items: center; gap: 10px; font: inherit; color: inherit; }
.blu-loading [hidden] { display: none !important; }
.blu-loading__visual { width: 20px; height: 20px; flex-shrink: 0; }
.blu-loading[data-variant="Spinner"] .blu-loading__visual { border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: blu-motion-spin 800ms linear infinite; }
.blu-loading[data-variant="Spinner"] i { display: none; }
.blu-loading[data-variant="Dots"] .blu-loading__visual { display: flex; align-items: center; width: 32px; gap: 3px; }
.blu-loading[data-variant="Dots"] i { width: 7px; height: 7px; background: currentColor; border-radius: 50%; animation: blu-motion-pulse 900ms ease-in-out infinite; }
.blu-loading[data-variant="Dots"] i:nth-child(2) { animation-delay: 150ms; }
.blu-loading[data-variant="Dots"] i:nth-child(3) { animation-delay: 300ms; }
.blu-loading progress { width: 100%; height: 8px; accent-color: var(--bluui-primary, #5145e5); border: 0; border-radius: 8px; background: #e7e8f1; overflow: hidden; }
.blu-loading progress::-webkit-progress-bar { background: #e7e8f1; border-radius: 8px; }
.blu-loading progress::-webkit-progress-value { background: var(--bluui-primary, #5145e5); border-radius: 8px; }
.blu-loading progress::-moz-progress-bar { background: var(--bluui-primary, #5145e5); }
.blu-loading[data-variant="Bar"] { flex-direction: column; align-items: stretch; }
.blu-loading__bar { height: 8px; overflow: hidden; border-radius: 8px; background: #e7e8f1; }
.blu-loading__bar::after { content: ''; display: block; width: 35%; height: 100%; background: var(--bluui-primary, #5145e5); border-radius: inherit; animation: blu-motion-progress 1.2s ease-in-out infinite alternate; }
@keyframes blu-motion-progress { to { transform: translateX(185%); } }

/* Explicit off/reduced scopes and per-element opt-out; never hide useful content. */
:is([data-blu-motion="off"], [data-blu-motion="reduced"], .blu-motion-off),
:is([data-blu-motion="off"], [data-blu-motion="reduced"], .blu-motion-off) * {
  --blu-motion-duration: 0ms;
  --blu-motion-delay: 0ms;
}
:is([data-blu-motion="off"], [data-blu-motion="reduced"], .blu-motion-off) :is([class*="blu-motion-"], .blu-button__spinner, .blu-loading__visual, .blu-loading i),
:is([data-blu-motion="off"], [data-blu-motion="reduced"], .blu-motion-off)[class*="blu-motion-"],
.blu-motion-off { animation: none !important; transition: none !important; }
:is([data-blu-motion="off"], [data-blu-motion="reduced"], .blu-motion-off) .blu-loading__bar::after { animation: none !important; }
:is([data-blu-motion="off"], [data-blu-motion="reduced"], .blu-motion-off) .blu-motion-hover-lift:is(:hover, :focus-visible, [data-blu-lifted="true"]) { transform: none; }
@media (prefers-reduced-motion: reduce) {
  [class*="blu-motion-"], .blu-button__spinner, .blu-loading__visual, .blu-loading i, .blu-loading__bar::after { animation: none !important; transition: none !important; }
  .blu-motion-hover-lift:is(:hover, :focus-visible, [data-blu-lifted="true"]) { transform: none; }
}

/* Press state is finite and never changes a control's activation semantics. */
.blu-motion-press[data-blu-pressed="true"] { transform: scale(.97); }
.blu-motion-highlight { animation: blu-motion-highlight 1400ms ease-in-out 1; }
.blu-motion-nudge { animation: blu-motion-nudge 280ms var(--blu-motion-ease) 1; }
@keyframes blu-motion-highlight { 45% { box-shadow: 0 0 0 4px var(--blu-motion-highlight, #7770ed40); } }
@keyframes blu-motion-nudge { 25% { transform: translateX(-3px); } 60% { transform: translateX(3px); } }
:is([data-blu-motion="off"], [data-blu-motion="reduced"], .blu-motion-off) .blu-motion-press[data-blu-pressed="true"],
.blu-motion-press.blu-motion-off[data-blu-pressed="true"] { transform: none; }
@media (prefers-reduced-motion: reduce) { .blu-motion-press[data-blu-pressed="true"] { transform: none; } }

.blu-motion-photo-frame { position:relative;overflow:hidden;isolation:isolate; }
.blu-motion-photo-frame > img { display:block;width:100%;height:100%;object-fit:cover; }

/* A masked border, not an overlay on the content. The inner square rotates;
   the outer mask and soft halo stay aligned to the original rounded box. */
.blu-motion-border-glow{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none!important;z-index:1;filter:drop-shadow(0 0 4px var(--blu-glow-halo,#9b85ee80))}
.blu-motion-border-glow__rim{position:absolute;inset:0;padding:var(--blu-glow-width,2px);border-radius:inherit;overflow:hidden;pointer-events:none!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.blu-motion-border-glow__beam{position:absolute;left:50%;top:50%;width:var(--blu-glow-size,1800px);height:var(--blu-glow-size,1800px);background:conic-gradient(transparent 0deg,transparent 240deg,var(--blu-glow-tail,#b5a4ef60) 265deg,var(--blu-glow-color,#8060dd) 295deg,var(--blu-glow-tip,#d7c6ff) 315deg,transparent 340deg);transform:translate(-50%,-50%) rotate(0turn);animation:blu-border-orbit var(--blu-glow-duration,12s) linear infinite}
.blu-motion-border-glow[data-paused=true] .blu-motion-border-glow__beam{animation-play-state:paused}
@keyframes blu-border-orbit{from{transform:translate(-50%,-50%) rotate(0turn)}to{transform:translate(-50%,-50%) rotate(1turn)}}
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) .blu-motion-border-glow{filter:none}
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) .blu-motion-border-glow__rim{background:var(--blu-glow-static,#b5a4ef80)}
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) .blu-motion-border-glow__beam{animation:none!important;display:none}
@media(prefers-reduced-motion:reduce){.blu-motion-border-glow{filter:none}.blu-motion-border-glow__rim{background:var(--blu-glow-static,#b5a4ef80)}.blu-motion-border-glow__beam{animation:none!important;display:none}}
@media(forced-colors:active){.blu-motion-border-glow{display:none}}

/* Opt-in content adapters. Hover/focus lift composes with collection positioning. */
[data-blu-content-motion] .blu-profile-card{transition:translate var(--blu-component-motion-duration,450ms) var(--blu-component-motion-ease,ease-in-out)}
[data-blu-content-motion] .blu-profile-card:is(:hover,:focus-within){translate:0 -4px}
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-content-motion] .blu-profile-card,
[data-blu-content-motion]:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) .blu-profile-card{translate:none;transition:none}
[data-blu-content-motion] :is(.blu-tree-select__check,.blu-video-player__heatmap){transition-duration:var(--blu-component-motion-duration,450ms);transition-timing-function:var(--blu-component-motion-ease,ease-in-out)}
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-content-motion] :is(.blu-tree-select__check,.blu-video-player__heatmap){transition:none}
@media(prefers-reduced-motion:reduce){[data-blu-content-motion] .blu-profile-card{translate:none;transition:none}}

/* Optional ripple stays clipped to the selectable part of a chip. */
[data-blu-content-motion=chip] .blu-chip__select{border-radius:inherit}
[data-blu-content-motion=skeleton] .blu-skeleton--animated::after{animation-duration:1800ms;animation-iteration-count:2}
[data-blu-component-motion=statistic] .blu-statistic__loading{animation-duration:1800ms;animation-iteration-count:2}
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-content-motion=skeleton] .blu-skeleton--animated::after{animation:none!important;display:none}
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-component-motion=statistic] .blu-statistic__loading{animation:none!important}
@media(prefers-reduced-motion:reduce){[data-blu-content-motion=skeleton] .blu-skeleton--animated::after{animation:none!important;display:none}[data-blu-component-motion=statistic] .blu-statistic__loading{animation:none!important}}

/* Rich media hover must obey the same scope as its lightbox. */
[data-blu-content-motion=media-image] img{transition-duration:var(--blu-component-motion-duration,650ms);transition-timing-function:var(--blu-component-motion-ease,ease-in-out)}
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-content-motion=media-image] img{transition:none!important;transform:none!important}
/* Legacy content CSS follows the opt-in controller as well as system preference. */
[data-blu-content-motion] .blu-button{transition-duration:var(--blu-component-motion-duration,280ms)}
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-content-motion] *,
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-content-motion] *::before,
:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) [data-blu-content-motion] *::after,
[data-blu-content-motion]:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) *,
[data-blu-content-motion]:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) *::before,
[data-blu-content-motion]:is([data-blu-motion=reduced],[data-blu-motion=off],.blu-motion-off) *::after{transition:none!important;animation:none!important}