/*
 * LC3 Creative - motion & accessibility layer
 *
 * Rules of the road:
 *  - Nothing is ever hidden unless motion.js has run AND the visitor has not
 *    asked for reduced motion (html.motion-ok is only set in that case).
 *  - Every animation lives inside prefers-reduced-motion: no-preference.
 *  - Hover effects always have a matching :focus-visible / :focus-within twin.
 */

:root {
  --motion-ease: cubic-bezier(.2, .7, .2, 1);
  --motion-fast: 180ms;
  --motion-slow: 700ms;
  --focus-ring: #00c9be;
}

/* ---------- Skip link (WCAG 2.4.1) ---------- */
.skip-link {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: #fff;
  color: #000;
  font-weight: 700;
  border: 3px solid var(--lc3-red);
  border-radius: .375rem;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
  color: #000;
}
#main-content:focus {
  outline: none;
}

/* ---------- Focus visibility (WCAG 2.4.7) ---------- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
.bg-dark a:focus-visible,
.navbar-dark a:focus-visible {
  outline-color: #fff;
}

/* Team bio toggles: real buttons that keep the original look */
.bio-toggle {
  display: inline-block;
  padding: .5rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.bio-toggle:hover {
  text-decoration: underline;
}

/* ---------- Heading underlines (state; animated below) ---------- */
/* Accent words inside headings, e.g. "Our <span class=lc3-red-txt>values</span>" */
.motion-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .12em;
  padding-bottom: .06em;
}
/* Headings without an accent word get a short bar */
.motion-bar::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: .6rem;
  border-radius: 2px;
  background: var(--lc3-red);
}
.text-center.motion-bar::after,
.text-center .motion-bar::after {
  margin-left: auto;
  margin-right: auto;
}
.bg-dark .motion-bar::after,
.motion-bar.text-light::after {
  background: var(--lc3-teal);
}

/* ---------- Nav: current page + hover underline ---------- */
.navbar .nav-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible,
.navbar .nav-link[aria-current="page"] {
  background-size: 100% 2px;
}
.navbar .nav-link[aria-current="page"] {
  color: #fff;
}

/* ---------- Typewriter pause control (WCAG 2.2.2) ---------- */
.typewriter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  padding: .25rem .75rem;
  border: 1px solid currentColor;
  border-radius: 2rem;
  background: transparent;
  color: #495057;
  font-size: .875rem;
}
.typewriter-toggle:hover {
  background: #212529;
  color: #fff;
}

/* ---------- Animation (only for people who are fine with motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Scroll reveal */
  .motion-ok [data-reveal] {
    transition:
      opacity var(--motion-slow) var(--motion-ease),
      transform var(--motion-slow) var(--motion-ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .motion-ok [data-reveal]:not(.is-inview) {
    opacity: 0;
    transform: translateY(24px);
  }

  /* Underlines draw in when their heading scrolls into view */
  .motion-ok .motion-underline {
    transition: background-size 900ms var(--motion-ease) 250ms;
  }
  .motion-ok .motion-heading:not(.is-inview) .motion-underline {
    background-size: 0 .12em;
  }
  .motion-ok .motion-bar::after {
    transition: width 900ms var(--motion-ease) 200ms;
  }
  .motion-ok .motion-bar:not(.is-inview)::after {
    width: 0;
  }

  /* Nav underline slide */
  .navbar .nav-link {
    transition: background-size 250ms var(--motion-ease), color var(--motion-fast);
  }

  /* Gentle lift on cards (mouse and keyboard alike) */
  .client-card,
  .profile-card-2,
  .fact-box,
  #intro .card,
  #icons .icon,
  .toolbox-icon,
  .ci-thumbs {
    transition:
      transform 250ms var(--motion-ease),
      box-shadow 250ms var(--motion-ease);
  }
  .btn {
    transition:
      transform 200ms var(--motion-ease),
      color .15s ease-in-out,
      background-color .15s ease-in-out,
      border-color .15s ease-in-out,
      box-shadow .15s ease-in-out;
  }
  .client-card:hover,
  .client-card:focus-within,
  .profile-card-2:hover,
  .profile-card-2:focus-within,
  #intro .card:hover,
  #intro .card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .15);
  }
  #icons .icon:hover,
  #icons .icon:focus-within,
  .fact-box:hover {
    transform: translateY(-4px);
  }
  .toolbox-icon:hover,
  a:focus-visible > .ci-thumbs,
  a:hover > .ci-thumbs {
    transform: scale(1.05);
  }
  .btn:hover,
  .btn:focus-visible {
    transform: translateY(-2px);
  }
  .btn:active {
    transform: none;
  }

  /* Skill-set icons tilt when their card is hovered */
  #icons .icon i {
    transition: transform 400ms var(--motion-ease), color 250ms;
  }
  #icons .icon:hover i,
  #icons .icon:focus-within i {
    transform: translateY(-4px) rotate(-8deg) scale(1.1);
    color: var(--lc3-teal) !important;
  }

  /* Blinking typewriter cursor, stops when the animation is paused */
  .typewriter-cursor {
    animation: lc3-blink 1s steps(1) infinite;
  }
  .typewriter-paused .typewriter-cursor {
    animation: none;
  }
  @keyframes lc3-blink {
    50% { opacity: 0; }
  }
}

@media print {
  .motion-ok [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
  .skip-link,
  .typewriter-toggle {
    display: none;
  }
}