/* ============================================================================
   SCROLL REVEAL & HOVER POLISH
   Subtle scroll-triggered reveals and refined hover micro-interactions.
   Theme-aware with reduced-motion support.
   ============================================================================ */

/* === SCROLL REVEAL BASE === */

.scroll-reveal {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.scroll-reveal.visible {
  opacity: 1;
  transform: none;
}

/* Directional variants */
.scroll-reveal-up {
  transform: translateY(24px);
}

.scroll-reveal-down {
  transform: translateY(-24px);
}

.scroll-reveal-left {
  transform: translateX(-24px);
}

.scroll-reveal-right {
  transform: translateX(24px);
}

.scroll-reveal-scale {
  transform: scale(0.96);
}

/* Stagger delays — apply to children of a reveal container */
.scroll-reveal-stagger > .scroll-reveal:nth-child(1) { transition-delay: 0s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(2) { transition-delay: 0.08s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(3) { transition-delay: 0.16s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(4) { transition-delay: 0.24s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(5) { transition-delay: 0.32s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(6) { transition-delay: 0.40s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(7) { transition-delay: 0.48s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(8) { transition-delay: 0.56s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(9) { transition-delay: 0.64s; }
.scroll-reveal-stagger > .scroll-reveal:nth-child(10) { transition-delay: 0.72s; }

/* === HOVER POLISH === */

/* Refined card hover — softer lift with subtle glow */
.card {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

/* Feature cards — glow line from top instead of plain lift */
.feature-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(37, 99, 235, 0.1),
              0 4px 8px rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .feature-card:hover {
  box-shadow: 0 12px 32px rgba(59, 130, 246, 0.15),
              0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Stat cards — accent border highlight */
.stat-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08);
}

[data-theme="dark"] .stat-card:hover {
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
}

/* Pricing cards — stronger presence on hover */
.pricing-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(37, 99, 235, 0.1);
}

[data-theme="dark"] .pricing-card:hover {
  box-shadow: 0 16px 40px rgba(59, 130, 246, 0.12);
}

/* Buttons — refined spring feedback */
button {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.2s ease,
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

button:hover:not(.primary) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] button:hover:not(.primary) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

button:active:not(.primary) {
  transform: translateY(0);
}

button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] button.primary:hover {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

button.primary:active {
  transform: translateY(0);
}

/* CTA buttons — extra lift on hover */
.cta-button {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease,
              background-color 0.2s ease;
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .cta-button:hover {
  box-shadow: 0 12px 28px rgba(59, 130, 246, 0.25);
}

.cta-button:active {
  transform: translateY(0);
}

/* Link underline animation — expands from center */
a.link-underline {
  position: relative;
  text-decoration: none;
  color: var(--accent);
}

a.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: var(--accent);
  transform: translateX(-50%);
  transition: width 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

a.link-underline:hover::after {
  width: 100%;
}

/* Nav icon buttons — smooth icon pop */
.nav-icon-button svg,
.nav-icon-button i {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease;
}

.nav-icon-button:hover svg,
.nav-icon-button:hover i {
  transform: scale(1.18);
  color: var(--accent);
}

/* Menu trigger icon pop */
.menu-trigger .menu-trigger-icon {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.2s ease;
}

.menu-trigger:hover .menu-trigger-icon {
  transform: scale(1.12);
  color: var(--accent);
}

/* Tool category list items — arrow slides in */
.tool-category li::before {
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Menu options — subtle background sweep */
.menu-option {
  transition: background-color 0.15s ease,
              color 0.15s ease,
              padding-left 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.menu-option:hover {
  padding-left: 20px;
}

/* Bottom tab bar items — gentle pop */
.bottom-tab-item {
  transition: color 0.2s ease,
              transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.bottom-tab-item:active {
  transform: scale(0.92);
}

/* Theme toggle — subtle rotation on hover */
.theme-toggle svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.2s ease;
}

.theme-toggle:hover svg {
  transform: rotate(12deg) scale(1.1);
}

/* Class cards — accent bar slides up */
.class-card::before {
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.class-card:hover {
  transform: translateY(-6px);
}

.class-card .class-code {
  transition: color 0.3s ease;
}

.class-card:hover .class-code {
  color: var(--accent);
}

/* Progress cards — gentle border glow */
.progress-cta {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.3s ease;
}

.progress-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12);
}

/* Empty states — soft hover */
.empty-state {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.3s ease;
}

.empty-state:hover {
  transform: scale(1.01);
  border-color: var(--accent);
}

/* === REDUCED MOTION === */

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .scroll-reveal-up,
  .scroll-reveal-down,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}