/* ============================================================
   Aujunpeak — Global Interaction Motion v1
   Lightweight click, hover, reveal and page-transition feedback.
   ============================================================ */

:root {
  --fx-motion-rgb: var(--sp-rgb, 108, 92, 231);
  --fx-motion-accent-rgb: var(--sa-rgb, 0, 230, 118);
  --fx-motion-ease: cubic-bezier(.22,.78,.24,1);
}

/* Interactive elements receive tiny physical feedback without replacing
   any component's existing transform/box-shadow declarations. */
.fx-interactive {
  -webkit-tap-highlight-color: transparent;
  transition:
    scale .16s var(--fx-motion-ease),
    translate .20s var(--fx-motion-ease),
    opacity .18s ease;
}

.fx-interactive.fx-pressing {
  scale: .982;
}

.fx-interactive.fx-clicked {
  animation: fx-target-breathe .34s var(--fx-motion-ease) both;
}

.fx-interactive > i,
.fx-interactive > svg,
.fx-interactive .fa,
.fx-interactive [class^="fi"],
.fx-interactive [class*=" fi-"] {
  transition: translate .20s var(--fx-motion-ease), scale .20s var(--fx-motion-ease);
}

@media (hover:hover) and (pointer:fine) {
  .fx-interactive:hover {
    translate: 0 -1px;
  }
  .fx-interactive:hover > i,
  .fx-interactive:hover > svg,
  .fx-interactive:hover .fa,
  .fx-interactive:hover [class^="fi"],
  .fx-interactive:hover [class*=" fi-"] {
    translate: 1px 0;
    scale: 1.035;
  }
  .fx-lift:hover {
    translate: 0 -3px;
  }
}

.fx-interactive:focus-visible {
  outline: 2px solid rgba(var(--fx-motion-rgb), .48);
  outline-offset: 3px;
}

/* Click ripple lives on the viewport, so no existing button/card has to be
   forced to position:relative or overflow:hidden. */
.fx-click-ring,
.fx-click-core,
.fx-click-spark,
.fx-nav-sweep {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 2147483000;
}

.fx-click-ring {
  left: var(--fx-x);
  top: var(--fx-y);
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 999px;
  border: 1px solid rgba(var(--fx-motion-rgb), .72);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 16px rgba(var(--fx-motion-rgb), .24);
  animation: fx-click-ring .50s var(--fx-motion-ease) forwards;
}

.fx-click-core {
  left: var(--fx-x);
  top: var(--fx-y);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  box-shadow:
    0 0 10px rgba(var(--fx-motion-rgb), .62),
    0 0 20px rgba(var(--fx-motion-accent-rgb), .25);
  animation: fx-click-core .36s ease-out forwards;
}

.fx-click-spark {
  left: var(--fx-x);
  top: var(--fx-y);
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  box-shadow: 0 0 8px rgba(var(--fx-motion-rgb), .55);
  animation: fx-click-spark .46s var(--fx-motion-ease) forwards;
  animation-delay: var(--fx-delay, 0ms);
}

/* Page-enter and content reveal. Classes are injected only after JS is ready,
   preventing no-JS content from ever being hidden. */
body.fx-entering .page-content,
body.fx-entering .adm-main {
  animation: fx-page-enter .42s var(--fx-motion-ease) both;
}

body.fx-page-leaving .page-content,
body.fx-page-leaving .adm-main {
  opacity: .68;
  translate: 0 3px;
  transition: opacity .16s ease, translate .16s var(--fx-motion-ease), filter .16s ease;
  filter: saturate(.92) brightness(.94);
}

.fx-nav-sweep {
  top: 0;
  left: 0;
  height: 2px;
  width: min(34vw, 380px);
  border-radius: 999px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--fx-motion-rgb), .30) 18%,
    rgba(255,255,255,.90) 50%,
    rgba(var(--fx-motion-accent-rgb), .45) 78%,
    transparent 100%);
  box-shadow: 0 0 12px rgba(var(--fx-motion-rgb), .25);
  transform: translate3d(-120%,0,0);
  animation: fx-nav-sweep .46s cubic-bezier(.20,.75,.22,1) forwards;
}

.fx-reveal-pending {
  opacity: 0;
  translate: 0 13px;
  scale: .992;
}

.fx-reveal-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition:
    opacity .48s ease var(--fx-reveal-delay, 0ms),
    translate .52s var(--fx-motion-ease) var(--fx-reveal-delay, 0ms),
    scale .52s var(--fx-motion-ease) var(--fx-reveal-delay, 0ms);
}

/* Tiny feedback for fields when the user starts interacting. */
.fx-field-live {
  transition: border-color .20s ease, box-shadow .20s ease, background-color .20s ease;
}
.fx-field-live:focus {
  box-shadow: 0 0 0 3px rgba(var(--fx-motion-rgb), .09);
}

@keyframes fx-click-ring {
  0%   { opacity: .90; scale: .55; }
  60%  { opacity: .44; }
  100% { opacity: 0; scale: 3.10; }
}

@keyframes fx-click-core {
  0%   { opacity: .92; scale: 1; }
  100% { opacity: 0; scale: 2.30; }
}

@keyframes fx-click-spark {
  0%   { opacity: .78; translate: 0 0; scale: .9; }
  100% { opacity: 0; translate: var(--fx-dx) var(--fx-dy); scale: .2; }
}

@keyframes fx-target-breathe {
  0%   { scale: 1; }
  45%  { scale: .985; }
  100% { scale: 1; }
}

@keyframes fx-page-enter {
  0%   { opacity: .60; translate: 0 8px; filter: saturate(.92); }
  100% { opacity: 1; translate: 0 0; filter: saturate(1); }
}

@keyframes fx-nav-sweep {
  0%   { opacity: 0; transform: translate3d(-120%,0,0); }
  15%  { opacity: 1; }
  82%  { opacity: .85; }
  100% { opacity: 0; transform: translate3d(420%,0,0); }
}

/* Keep Admin deliberately quieter than the public shop. */
.adm-body .fx-click-ring { opacity: .72; }
.adm-body .fx-click-spark { display: none; }

@media (max-width: 768px), (hover:none) {
  .fx-lift:hover,
  .fx-interactive:hover {
    translate: 0 0;
  }
  .fx-click-ring {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fx-interactive,
  .fx-interactive > i,
  .fx-interactive > svg,
  .fx-field-live,
  .fx-reveal-visible,
  body.fx-page-leaving .page-content,
  body.fx-page-leaving .adm-main {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .fx-click-ring,
  .fx-click-core,
  .fx-click-spark,
  .fx-nav-sweep {
    display: none !important;
  }
  .fx-reveal-pending,
  .fx-reveal-visible {
    opacity: 1 !important;
    translate: none !important;
    scale: 1 !important;
  }
  body.fx-entering .page-content,
  body.fx-entering .adm-main {
    animation: none !important;
  }
}