/* ── E5: Micro-interactions ── */

/* Nav link draw-on underline */
.nav-links a {
  position: relative;
  text-decoration: none;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0%; height: 2px;
  background: oklch(93% 0.27 122);
  border-radius: 2px;
  transition: width 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
.nav-links a:hover::after { width: 100%; }

/* Button press states */
.btn-primary, .btn-ghost, .waitlist-submit {
  transition: transform 120ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 120ms cubic-bezier(0.23, 1, 0.32, 1),
              background 180ms ease,
              color 180ms ease;
  will-change: transform;
}
.btn-primary:active, .btn-ghost:active, .waitlist-submit:active {
  transform: scale(0.96);
}

/* Event card lift */
.ev-card {
  transition: transform 280ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 280ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.ev-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow:
    0 8px 32px oklch(74% 0.20 246 / 0.15),
    0 2px 8px oklch(74% 0.20 246 / 0.08);
}
.ev-card:active {
  transform: translateY(-2px) scale(0.985);
}

/* Pick card lift */
.pick-card {
  transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 300ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}
.pick-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 60px oklch(3.5% 0.015 265 / 0.5),
    0 4px 16px oklch(74% 0.20 246 / 0.12);
}

/* Category tile click pop */
.cat-tile {
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 180ms ease;
  cursor: pointer;
}
.cat-tile:hover { transform: scale(1.06); }
.cat-tile:active { transform: scale(0.94); }
.cat-tile.pop-flash {
  animation: cat-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes cat-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  70%  { transform: scale(0.93); }
  100% { transform: scale(1); }
}

/* Phone tab sliding indicator */
.phone-tabs {
  position: relative;
}
.phone-tab-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: oklch(93% 0.27 122);
  border-radius: 2px;
  transition: left 260ms cubic-bezier(0.23, 1, 0.32, 1),
              width 260ms cubic-bezier(0.23, 1, 0.32, 1);
  will-change: left, width;
}

/* Section h2 underline draw-on */
.section-h2 {
  position: relative;
  display: inline-block;
}
.section-h2::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0%;
  height: 3px;
  background: oklch(93% 0.27 122);
  border-radius: 3px;
  transition: width 600ms cubic-bezier(0.23, 1, 0.32, 1) 100ms;
}
.section-h2.h2-visible::after { width: 100%; }

/* Input focus glow */
.waitlist-form-input {
  transition: border-color 200ms ease,
              box-shadow 200ms ease;
}
.waitlist-form-input:focus {
  outline: none;
  border-color: oklch(93% 0.27 122 / 0.7);
  box-shadow:
    0 0 0 3px oklch(93% 0.27 122 / 0.12),
    0 1px 4px oklch(3.5% 0.015 265 / 0.4);
}

/* Feature hover accent */
.feature {
  transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
}
.feature:hover { transform: translateX(6px); }
.feature-num span {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature:hover .feature-num span {
  transform: scale(1.15) translateY(-2px);
}