/*
 * Application Custom Styles
 *
 * This file loads AFTER Tailwind CSS (loaded in layout as "tailwind")
 * Use this for custom styles that extend or override Tailwind.
 *
 * The Rubik font is configured in app/assets/tailwind/application.css
 * and is automatically used as Tailwind's default sans-serif font.
 *
 * You can use Tailwind's font utilities:
 * - font-sans (uses Rubik)
 * - font-light (300), font-normal (400), font-medium (500)
 * - font-semibold (600), font-bold (700), font-extrabold (800), font-black (900)
 */

/* ============================================
   Custom Styles
   ============================================ */

/* Tap/hover tooltip for mobile-friendly tooltips */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  background-color: var(--color-surface-alt, #374151);
  color: var(--color-body, #d1d5db);
  border: 1px solid var(--color-default, #4b5563);
  z-index: 60;
}

[data-tooltip]:hover::after,
[data-tooltip]:active::after,
[data-tooltip]:focus::after {
  opacity: 1;
}

/* Fade-in animation for Turbo Stream prepends (activity feed) */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.4s ease-out;
}

/* ============================================
   Trainer Background Pattern
   ============================================ */

.trainer-bg {
  background-color: var(--color-page);
  background-image: url("/assets/trainer-bg-4485b5e9.jpg");
  background-size: 360px 360px;
}

@media (prefers-color-scheme: dark) {
  .trainer-bg {
    background-image: url("/assets/trainer-bg-dark-9bc08e7f.jpg");
  }
}

/* ============================================
   Trainer Set Stack
   ============================================ */

.set-stack {
  position: relative;
}

/* Peek card edges below the active card */
.set-stack__peek {
  position: absolute;
  bottom: 0;
  height: 16px;
  background-color: var(--color-surface);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
  border: 1px solid var(--color-default, rgb(0 0 0 / 0.06));
  border-top: none;
  transition: opacity 0.3s ease, bottom 0.3s ease;
  pointer-events: none;
}

/* Active card — enters from behind (forward) */
.set-stack__active--entering {
  animation: stack-enter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}


@keyframes stack-enter {
  from {
    opacity: 0.5;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


/* Active card — slides in from right (backward/previous) */
.set-stack__active--slide-in {
  animation: stack-slide-in 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

@keyframes stack-slide-in {
  from {
    transform: translateX(105%);
  }
  to {
    transform: translateX(0);
  }
}

/* Stationary card underneath (backward/previous) */
.set-stack__underneath {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

/* Leaving card — slides out left (forward) */
.set-stack__leaving {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  animation: stack-leave 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  will-change: transform, opacity;
  pointer-events: none;
}


@keyframes stack-leave {
  0% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translateX(-35%) rotate(-2deg);
  }
  100% {
    opacity: 0;
    transform: translateX(-105%) rotate(-5deg);
  }
}


/* Background scroll on exercise transitions */
.trainer-bg {
  overflow: hidden;
  transition: background-position-y 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}