/* Raised controls retain their original colour and scroll transforms. */
[data-interaction-v25-anchor] { position: relative; }
[data-interaction-v26-inline] { display: inline-block; }
[data-interaction-v25="control"][data-interaction-v25-available="true"] {
  cursor: pointer;
  box-shadow: var(--interaction-v26-base-shadow, 0 0 transparent), inset 0 1px 0 #ffffff70, inset 0 -2px 1px #00000045, 0 3px 0 #23352b, 0 7px 16px #00000032;
}
/* Fixed bevel supplies depth without moving the label. */
[data-interaction-v25="control"][data-interaction-v25-available="true"]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; display: block;
  pointer-events: none; border: 1px solid #ffffff32; border-radius: inherit;
  background: linear-gradient(180deg, #ffffff0a, transparent 40%, #0000000d);
}
/* Only the narrow light band moves. Clip this layer, never the control's
   content, focus ring or existing 3D scene. */
[data-interaction-v25="control"] > .interaction-shine-v26 {
  all: unset; position: absolute; inset: 0; display: block; z-index: 2;
  border-radius: inherit; overflow: hidden; pointer-events: none; contain: paint;
}
.interaction-shine-v26::before {
  content: ""; position: absolute; left: 0; top: -50%; width: 48%; height: 200%;
  background: linear-gradient(90deg, transparent, #ffffff06 12%, #ffffff35 40%, #ffffff70 50%, #ffffff35 60%, #ffffff06 88%, transparent);
  transform: translate3d(-240%, 0, 0) skewX(-20deg);
  animation: interaction-v26-sweep 3.2s linear infinite;
  animation-delay: var(--interaction-v25-delay, 0s); animation-play-state: paused; opacity: 0;
}
[data-interaction-v25="control"][data-interaction-v25-active="true"] > .interaction-shine-v26::before {
  opacity: .85; animation-play-state: running;
}
/* Native fields cannot contain a layer. Their own background carries the
   directional light while native input behaviour remains unchanged. */
[data-interaction-v25="native"][data-interaction-v25-available="true"] {
  outline: 1px solid #ffffff32; outline-offset: 1px;
  box-shadow: inset 0 1px 0 #ffffff32, 0 2px 0 #23352b, 0 5px 12px #0002;
  background-image: linear-gradient(110deg, transparent 38%, #ffffff21 47%, #ffffff48 50%, #ffffff21 53%, transparent 62%);
  background-size: 300% 100%; background-repeat: no-repeat;
  animation: interaction-v26-field 3.2s linear infinite;
  animation-delay: var(--interaction-v25-delay, 0s); animation-play-state: paused;
}
[data-interaction-v25="native"][data-interaction-v25-active="true"] { animation-play-state: running; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-interaction-v25="control"][data-interaction-v25-available="true"]:hover {
    translate: 0 -2px;
    box-shadow: var(--interaction-v26-base-shadow, 0 0 transparent), inset 0 1px 0 #ffffff80, inset 0 -2px 1px #00000045, 0 5px 0 #304637, 0 10px 20px #00000045;
  }
}
[data-interaction-v25="control"][data-interaction-v25-available="true"]:active {
  translate: 0 1px; box-shadow: inset 0 1px 4px #0004, 0 1px 0 #23352b;
}
[data-interaction-v25]:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
[data-interaction-v25="native"]:focus { animation: none; background-image: none; }
[data-interaction-v25-available="false"] > .interaction-shine-v26 { display: none; }
html[data-interaction-v25-paused="true"] .interaction-shine-v26::before,
body.no-motion .interaction-shine-v26::before { animation: none; opacity: 0; }
html[data-interaction-v25-paused="true"] [data-interaction-v25="native"],
body.no-motion [data-interaction-v25="native"] { animation: none; background-image: none; }
body.no-motion [data-interaction-v25="control"]:hover { translate: none; }
@keyframes interaction-v26-sweep {
  0% { transform: translate3d(-240%, 0, 0) skewX(-20deg); }
  100% { transform: translate3d(320%, 0, 0) skewX(-20deg); }
}
@keyframes interaction-v26-field {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .interaction-shine-v26::before { animation: none !important; opacity: 0 !important; }
  [data-interaction-v25="native"] { animation: none !important; background-image: none; }
  [data-interaction-v25="control"]:active { translate: none; }
}
@media (forced-colors: active) {
  .interaction-shine-v26, [data-interaction-v25="control"]::after { display: none !important; }
  [data-interaction-v25="native"] { animation: none; background-image: none; outline-color: ButtonText; }
  [data-interaction-v25]:focus-visible { outline: 2px solid Highlight; }
}
