@layer effects;

/* ===== base motion util ===== */
@layer effects {
  .fx-motion-base {
    transition:
      transform var(--motion-normal),
      box-shadow var(--motion-normal),
      background-color var(--motion-normal),
      border-color var(--motion-normal),
      color var(--motion-normal),
      opacity var(--motion-normal);
    will-change: transform, box-shadow;
  }

  /* hover: scale */

  .fx-hover-scale {
    --fx-scale-factor: 1.02;
    transform: scale(1);
    transition: transform var(--motion-normal);
  }

  .fx-hover-scale:hover,
  .fx-hover-scale:focus-visible {
    transform: scale(var(--fx-scale-factor));
  }

  /* hover: raise */

  .fx-hover-raise {
    --fx-raise-amount: -4px;
    transform: translateY(0);
    transition:
      transform var(--motion-normal),
      box-shadow var(--motion-normal);
  }

  .fx-hover-raise:hover,
  .fx-hover-raise:focus-visible {
    transform: translateY(var(--fx-raise-amount));
    box-shadow: var(--shadow-elevated);
  }

  /* hover: outline */

  .fx-hover-outline {
    box-shadow: 0 0 0 0 rgba(56, 189, 248, 0);
    border-color: var(--border-subtle);
    transition:
      box-shadow var(--motion-normal),
      border-color var(--motion-normal);
  }

  .fx-hover-outline:hover,
  .fx-hover-outline:focus-visible {
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25);
    border-color: color-mix(in srgb, var(--accent) 60%, var(--border-subtle) 40%);
  }

  /* press */

  .fx-press-down:active {
    transform: translateY(1px) scale(0.99);
    box-shadow: none;
  }

  /* background glow */

  .fx-bg-glow {
    position: relative;
  }

  .fx-bg-glow::before {
    content: "";
    position: absolute;
    inset: -25%;
    background:
      radial-gradient(circle at 10% 0%, rgba(56, 189, 248, 0.22) 0, rgba(56, 189, 248, 0.0) 55%),
      radial-gradient(circle at 100% 100%, rgba(129, 140, 248, 0.26) 0, rgba(129, 140, 248, 0.0) 60%);
    opacity: 0.55;
    pointer-events: none;
    z-index: -1;
    transition: opacity var(--motion-slow);
  }

  .fx-bg-glow:hover::before,
  .fx-bg-glow:focus-within::before {
    opacity: 0.85;
  }

  /* link underline (smart, bez slajdu) */

  a.fx-link-smart {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, currentColor 50%, transparent 50%);
    text-underline-offset: 0.15em;
    transition:
      text-decoration-color var(--motion-fast),
      text-decoration-thickness var(--motion-fast);
  }

  a.fx-link-smart:hover,
  a.fx-link-smart:focus-visible {
    text-decoration-thickness: 2px;
    text-decoration-color: currentColor;
  }

  /* pseudo-sliding underline (jeśli chcesz jednak to zachować) */

  a.fx-link-underline,
  a.fx-link-underline:hover,
  a.fx-link-underline:focus-visible {
    text-decoration: none;
  }

  .fx-link-underline {
    position: relative;
  }

  .fx-link-underline::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0.05em;
    width: 0;
    height: 1px;
    border-radius: 999px;
    background-color: currentColor;
    transition: width var(--motion-fast);
  }

  .fx-link-underline:hover::after,
  .fx-link-underline:focus-visible::after {
    width: 100%;
  }

  /* appear animations */

  @keyframes fx-appear-up {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fx-appear-right {
    from {
      opacity: 0;
      transform: translateX(16px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fx-appear-left {
    from {
      opacity: 0;
      transform: translateX(-16px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .fx-appear-soft-up {
    opacity: 0;
    animation: fx-appear-up 0.6s var(--motion-normal) forwards;
  }

  .fx-appear-soft-right {
    opacity: 0;
    animation: fx-appear-right 0.6s var(--motion-normal) forwards;
  }

  .fx-appear-soft-left {
    opacity: 0;
    animation: fx-appear-left 0.6s var(--motion-normal) forwards;
  }

  .fx-appear-delay-1 { animation-delay: 0.12s; }
  .fx-appear-delay-2 { animation-delay: 0.22s; }
  .fx-appear-delay-3 { animation-delay: 0.32s; }
}