/* ============================================================
   ResinPlan — Liquid Resin Motion System
   Motion-only layer. Use together with colors_and_type.css and glass.css.
   ============================================================ */

:root {
  /* Motion durations */
  --motion-instant: 90ms;
  --motion-fast: var(--dur-fast, 150ms);
  --motion-base: var(--dur-base, 220ms);
  --motion-slow: var(--dur-slow, 400ms);
  --motion-reveal: 520ms;
  --motion-ambient: 18s;

  /* Motion curves */
  --ease-liquid: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --ease-press: cubic-bezier(0.2, 0, 0.2, 1);

  /* Motion distances */
  --lift-sm: -2px;
  --lift-md: -6px;
  --press-scale: 0.975;
}

/* ============================================================
   1. Soft hover lift
   For glass cards, panels, product cards, category cards.
   ============================================================ */

.motion-lift,
.glass.motion-lift,
.glass-strong.motion-lift,
.glass-soft.motion-lift {
  transition:
    transform var(--motion-base) var(--ease-liquid),
    box-shadow var(--motion-base) var(--ease-liquid),
    background var(--motion-base) var(--ease-soft),
    border-color var(--motion-base) var(--ease-soft);
  will-change: transform;
}

.motion-lift:hover,
.glass.motion-lift:hover,
.glass-strong.motion-lift:hover,
.glass-soft.motion-lift:hover {
  transform: translateY(var(--lift-md));
}

.motion-lift-sm:hover {
  transform: translateY(var(--lift-sm));
}

/* ============================================================
   2. Soft press
   For buttons, pills, chips, selectors.
   ============================================================ */

.motion-press,
.btn.motion-press,
.icon-btn.motion-press {
  transition:
    transform var(--motion-fast) var(--ease-press),
    box-shadow var(--motion-fast) var(--ease-press),
    background var(--motion-fast) var(--ease-soft);
  will-change: transform;
}

.motion-press:active,
.btn.motion-press:active,
.icon-btn.motion-press:active {
  transform: scale(var(--press-scale));
}

/* Optional: apply press behavior automatically to existing buttons */
.btn,
.icon-btn {
  will-change: transform;
}

/* ============================================================
   3. Liquid reveal
   For sections/cards appearing on page load.
   ============================================================ */

.motion-reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(10px);
  animation: liquidReveal var(--motion-reveal) var(--ease-liquid) forwards;
}

.motion-reveal-soft {
  opacity: 0;
  transform: translateY(8px);
  animation: liquidRevealSoft var(--motion-slow) var(--ease-liquid) forwards;
}

.motion-delay-1 { animation-delay: 80ms; }
.motion-delay-2 { animation-delay: 160ms; }
.motion-delay-3 { animation-delay: 240ms; }
.motion-delay-4 { animation-delay: 320ms; }
.motion-delay-5 { animation-delay: 420ms; }

/* ============================================================
   4. Light sweep
   Subtle resin-like reflection for CTA, glass panels, product cards.
   Do not use everywhere, unless the goal is casino-banner cosplay.
   ============================================================ */

.motion-light-sweep {
  position: relative;
  overflow: hidden;
}

.motion-light-sweep::after {
  content: "";
  position: absolute;
  top: -45%;
  left: -75%;
  width: 38%;
  height: 190%;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.58),
    rgba(255, 255, 255, 0.18),
    transparent
  );
  transition: opacity var(--motion-base) var(--ease-soft);
}

.motion-light-sweep:hover::after {
  opacity: 1;
  animation: liquidLightSweep 1100ms var(--ease-liquid) forwards;
}

/* ============================================================
   5. Ambient float
   Very slow movement for decorative orbs, floating specs, hero objects.
   ============================================================ */

.motion-float-slow {
  animation: liquidFloatSlow 7s var(--ease-soft) infinite alternate;
}

.motion-float-medium {
  animation: liquidFloatMedium 5s var(--ease-soft) infinite alternate;
}

.motion-float-delay {
  animation-delay: 1.2s;
}

.motion-ambient-drift {
  animation: liquidAmbientDrift var(--motion-ambient) var(--ease-soft) infinite alternate;
}

/* ============================================================
   6. Existing class enhancements
   These lightly enhance your current glass.css classes without replacing them.
   ============================================================ */

.glass,
.glass-strong,
.glass-soft,
.glass-blue,
.glass-ink,
.btn,
.icon-btn {
  transition:
    transform var(--motion-base) var(--ease-liquid),
    box-shadow var(--motion-base) var(--ease-liquid),
    background var(--motion-base) var(--ease-soft),
    border-color var(--motion-base) var(--ease-soft),
    color var(--motion-base) var(--ease-soft);
}

.glass:hover,
.glass-soft:hover {
  border-color: rgba(255, 255, 255, 0.78);
}

.btn:hover,
.icon-btn:hover {
  transform: translateY(var(--lift-sm));
}

.btn:active,
.icon-btn:active {
  transform: scale(var(--press-scale));
}

/* ============================================================
   Keyframes
   ============================================================ */

@keyframes liquidReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes liquidRevealSoft {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes liquidLightSweep {
  from {
    left: -75%;
  }
  to {
    left: 135%;
  }
}

@keyframes liquidFloatSlow {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes liquidFloatMedium {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -6px, 0);
  }
}

@keyframes liquidOrbBL {
  0%   { transform: translate3d(0,     0,    0) scale(1);    }
  25%  { transform: translate3d(80px,  -90px, 0) scale(1.08); }
  50%  { transform: translate3d(40px, -160px, 0) scale(1.04); }
  75%  { transform: translate3d(-60px,-110px, 0) scale(0.94); }
  100% { transform: translate3d(30px, -180px, 0) scale(1.06); }
}

@keyframes liquidOrbTR {
  0%   { transform: translate3d(0,     0,    0) scale(1);    }
  25%  { transform: translate3d(-70px, 85px,  0) scale(1.07); }
  50%  { transform: translate3d(-30px, 150px, 0) scale(0.95); }
  75%  { transform: translate3d(55px,  100px, 0) scale(1.09); }
  100% { transform: translate3d(-20px, 170px, 0) scale(1.03); }
}

@keyframes liquidAmbientDrift {
  from {
    transform: translate3d(-2%, 1%, 0) scale(1);
  }
  to {
    transform: translate3d(3%, -2%, 0) scale(1.04);
  }
}

/* ============================================================
   Accessibility
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}