/* ==========================================================================
 * Micro-interactions layer for grokskill.tech
 *
 * Loaded AFTER styles.css so it overrides where needed without touching the
 * base sheet. Everything here is purely additive — turning this file off
 * leaves the site fully usable, just static.
 *
 * Sections:
 *   1. Tokens & motion safety
 *   2. Smooth in-page navigation
 *   3. Sticky nav: blur + border on scroll
 *   4. Buttons: hover lift + press
 *   5. Cards: hover lift + glow border
 *   6. Links & nav items: underline / color
 *   7. Form controls: focus glow
 *   8. Logo: subtle hover scale
 *   9. Scroll-reveal entry animations
 *  10. Misc (avatars, tabs, dropdowns)
 * ========================================================================== */

/* ---------- 1. Tokens & motion safety -------------------------------- */
:root {
  --mi-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);     /* gentle ease-out */
  --mi-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);      /* "expo out" */
  --mi-fast:        140ms;
  --mi-base:        240ms;
  --mi-slow:        420ms;
  --mi-lift:        -2px;                                /* px Y on hover lift */
  --mi-glow:        0 0 0 3px rgba(255,255,255,0.10);   /* focus ring */
  --mi-shadow-lift: 0 8px 24px -8px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
}

/* Respect user OS-level "reduce motion" preference. Kill ALL animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 2. Smooth in-page navigation ----------------------------- */
html { scroll-behavior: smooth; }

/* Offset for fixed nav when jumping to #anchor */
:target { scroll-margin-top: 88px; }

/* ---------- 3. Sticky nav: blur + border on scroll ------------------- */
.nav {
  transition: background-color var(--mi-base) var(--mi-ease),
              border-color    var(--mi-base) var(--mi-ease),
              backdrop-filter var(--mi-base) var(--mi-ease);
}
.nav.scrolled {
  background-color: rgba(11, 13, 16, 0.78);
  backdrop-filter:  saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ---------- 4. Buttons: hover lift + press --------------------------- */
.btn, .oauth-btn, .gs-buy {
  transition:
    transform    var(--mi-fast) var(--mi-ease),
    box-shadow   var(--mi-base) var(--mi-ease),
    background   var(--mi-base) var(--mi-ease),
    border-color var(--mi-base) var(--mi-ease),
    color        var(--mi-base) var(--mi-ease);
  will-change: transform;
}
.btn:hover,
.oauth-btn:hover,
.gs-buy:hover {
  transform: translateY(var(--mi-lift));
  box-shadow: var(--mi-shadow-lift);
}
.btn:active,
.oauth-btn:active,
.gs-buy:active {
  transform: translateY(0);
  transition-duration: 60ms;       /* snap back fast */
}

/* Primary button — softer brand glow on hover */
.btn-primary:hover {
  box-shadow:
    0 10px 28px -10px rgba(255,255,255,0.35),
    0 0 0 1px rgba(255,255,255,0.06);
}

/* Disabled / loading buttons should not lift */
.btn[disabled],
.btn[aria-busy="true"],
.oauth-btn[disabled] {
  transform: none !important;
  box-shadow: none !important;
}

/* ---------- 5. Cards: hover lift + subtle border glow ---------------- */
/*
 * `.tier`, `.ptier`           — pricing tier cards
 * `.problem-card`             — problems section on index
 * `.testi`                    — testimonials
 * `.faq-item`                 — FAQ rows on pricing
 * `.step`                     — onboarding steps
 */
.tier, .ptier, .problem-card, .testi, .faq-item, .step {
  transition:
    transform    var(--mi-base) var(--mi-ease),
    border-color var(--mi-base) var(--mi-ease),
    box-shadow   var(--mi-base) var(--mi-ease),
    background   var(--mi-base) var(--mi-ease);
  will-change: transform;
}
.tier:hover,
.ptier:hover,
.problem-card:hover,
.testi:hover,
.faq-item:hover,
.step:hover {
  transform: translateY(var(--mi-lift));
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 12px 36px -16px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04);
}

/* Highlighted pricing tier — slightly stronger lift to keep emphasis */
.tier-badge ~ * { /* no-op selector keeps spec consistent */ }

/* ---------- 6. Links & nav items: underline / color ------------------ */
.nav-links a {
  position: relative;
  transition: color var(--mi-fast) var(--mi-ease);
}
.nav-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mi-base) var(--mi-ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* Inline content links (footer, body) — soft underline color shift */
.foot-col a {
  transition: color var(--mi-fast) var(--mi-ease);
}
.foot-col a:hover { color: #fff; }

/* ---------- 7. Form controls: focus glow ----------------------------- */
input, textarea, select, button {
  transition:
    border-color var(--mi-fast) var(--mi-ease),
    box-shadow   var(--mi-fast) var(--mi-ease);
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: rgba(255,255,255,0.4);
  box-shadow: var(--mi-glow);
}

/* Keyboard focus ring for buttons & links — accessibility */
.btn:focus-visible,
.oauth-btn:focus-visible,
.gs-buy:focus-visible,
.nav-links a:focus-visible,
.brand:focus-visible {
  outline: none;
  box-shadow: var(--mi-glow);
}

/* ---------- 8. Logo: subtle hover scale ------------------------------ */
.brand { transition: opacity var(--mi-fast) var(--mi-ease); }
.brand:hover { opacity: 0.85; }
.brand-glyph {
  transition: transform var(--mi-base) var(--mi-ease-out);
}
.brand:hover .brand-glyph { transform: rotate(-4deg) scale(1.06); }

/* ---------- 9. Scroll-reveal entry animations ------------------------ */
/*
 * Elements get `.reveal` from micro-interactions.js. They start translated
 * down and faded, then snap into place when intersecting the viewport.
 *
 * Stagger via `--mi-delay` (set as inline style by the JS for sibling cards).
 */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity   var(--mi-slow) var(--mi-ease-out) var(--mi-delay, 0ms),
    transform var(--mi-slow) var(--mi-ease-out) var(--mi-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- 10. Misc -------------------------------------------------- */
/* Avatar hover bump */
.user-avatar,
.testi-avatar {
  transition: transform var(--mi-fast) var(--mi-ease);
}
.user-trigger:hover .user-avatar,
.testi:hover .testi-avatar { transform: scale(1.06); }

/* Dropdown chevron rotates when menu is open */
.user-trigger .chev {
  display: inline-block;
  transition: transform var(--mi-fast) var(--mi-ease);
}
.user-dropdown.show ~ * .chev,    /* not always adjacent; left for robustness */
.user-menu .user-dropdown.show + .chev,
.user-menu:has(.user-dropdown.show) .chev { transform: rotate(180deg); }

/* Skill chips: gentle hover */
.skill-chip {
  transition:
    background var(--mi-fast) var(--mi-ease),
    transform  var(--mi-fast) var(--mi-ease),
    color      var(--mi-fast) var(--mi-ease);
}
.skill-chip:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  color: #fff;
}

/* Steps: animated number badge */
.step .step-num,
.step-num {
  transition: transform var(--mi-base) var(--mi-ease-out),
              background var(--mi-base) var(--mi-ease);
}
.step:hover .step-num { transform: scale(1.08); }