/* ===========================
   GLOBAL MOTION VARIABLES
=========================== */
:root {
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 180ms;
  --normal: 320ms;
  --slow: 600ms;
}

/* ===========================
   PAGE TRANSITIONS
=========================== */
body {
  opacity: 0;
  transform: translateY(6px);
  animation: pageIn var(--normal) var(--ease) forwards;
}

@keyframes pageIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.page-exit {
  animation: pageOut var(--fast) var(--ease) forwards;
}

@keyframes pageOut {
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ===========================
   CARD HOVER FX
=========================== */
.panel,
.tool-card,
.card {
  transition:
    transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}

.panel:hover,
.tool-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 30px 60px rgba(0,0,0,.45),
    0 0 0 1px rgba(145,70,255,.35);
}

/* ===========================
   BUTTON FX
=========================== */
button {
  transition:
    transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease),
    filter var(--fast) var(--ease);
}

button:hover {
  filter: brightness(1.1);
  box-shadow: 0 12px 40px rgba(145,70,255,.45);
}

button:active {
  transform: scale(.96);
}

/* ===========================
   INPUT FOCUS FX
=========================== */
input, select {
  transition:
    box-shadow var(--fast) var(--ease),
    border-color var(--fast) var(--ease);
}

input:focus, select:focus {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(145,70,255,.6),
    0 0 30px rgba(145,70,255,.25);
}

/* ===========================
   RESULT REVEAL
=========================== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
}

.reveal.show {
  animation: revealIn var(--normal) var(--ease) forwards;
}

@keyframes revealIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================
   ACCESSIBILITY
=========================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none!important;
    transition: none!important;
  }
}