/* Arc-like button motion for Flowbite / CoBeauty — CSS only, no React.
 * Press feedback, fine-pointer hover, touch targets, reduced-motion. */

:root {
  --btn-press-scale: 0.97;
  --btn-press-scale-icon: 0.96;
  --btn-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --btn-motion-duration: 120ms;
}

/* Shared action surfaces */
.btn-primary,
.btn-corail,
.btn-secondary,
.btn-motion {
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transform: translateZ(0);
  transition:
    transform var(--btn-motion-duration) var(--btn-motion-ease),
    box-shadow var(--btn-motion-duration) var(--btn-motion-ease),
    opacity var(--btn-motion-duration) var(--btn-motion-ease);
}

.btn-primary,
.btn-corail,
.btn-secondary,
.btn-motion--cta {
  min-height: 48px;
}

@media (min-width: 640px) {
  .btn-primary,
  .btn-corail,
  .btn-secondary,
  .btn-motion--cta {
    min-height: 44px;
  }
}

/* Compact pills (Ouvrir / Modifier) — press only, keep dense layout */
.btn-motion--compact {
  min-height: 0;
}

.btn-primary:active,
.btn-corail:active,
.btn-secondary:active,
.btn-motion:active:not([aria-busy="true"]) {
  transform: scale(var(--btn-press-scale));
}

.btn-motion--icon:active:not([aria-busy="true"]) {
  transform: scale(var(--btn-press-scale-icon));
}

.btn-primary.is-pressing,
.btn-corail.is-pressing,
.btn-secondary.is-pressing,
.btn-motion.is-pressing:not([aria-busy="true"]) {
  will-change: transform;
  transform: scale(var(--btn-press-scale));
}

/* Hover only on fine pointers — avoid sticky hover after tap on mobile */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not([aria-busy="true"]),
  .btn-corail:hover:not([aria-busy="true"]),
  .btn-secondary:hover:not([aria-busy="true"]),
  .btn-motion:hover:not([aria-busy="true"]) {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  }

  .btn-corail:hover:not([aria-busy="true"]) {
    box-shadow: 0 6px 16px rgba(255, 140, 105, 0.35);
  }
}

/* Neutralize theme :hover bg/shadow stickiness on touch devices */
@media (hover: none), (pointer: coarse) {
  .btn-primary:hover,
  .btn-corail:hover,
  .btn-secondary:hover,
  .btn-motion:hover {
    box-shadow: none;
    filter: none;
  }
}

/* Label morph shell (optional — used by arc-button controller) */
.btn__label {
  display: inline-grid;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  vertical-align: middle;
}

.btn__label > span {
  grid-area: 1 / 1;
  transition: opacity 140ms var(--btn-motion-ease), filter 140ms var(--btn-motion-ease);
}

.btn__label > span.is-hidden {
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
}

.btn__spinner {
  display: none;
  width: 1.1em;
  height: 1.1em;
  margin-inline-end: 0.4em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 9999px;
  animation: btn-spin 0.65s linear infinite;
  vertical-align: -0.15em;
}

[aria-busy="true"] .btn__spinner {
  display: inline-block;
}

[aria-busy="true"] {
  cursor: wait;
  opacity: 0.85;
  pointer-events: none;
}

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-corail,
  .btn-secondary,
  .btn-motion {
    transition: opacity 120ms ease;
  }

  .btn-primary:active,
  .btn-corail:active,
  .btn-secondary:active,
  .btn-motion:active,
  .btn-primary.is-pressing,
  .btn-corail.is-pressing,
  .btn-secondary.is-pressing,
  .btn-motion.is-pressing {
    transform: none;
  }

  .btn__label > span {
    transition: opacity 120ms ease;
    filter: none;
  }

  .btn__spinner {
    animation: none;
    border-right-color: currentColor;
    opacity: 0.7;
  }
}