/* =========================================================
   THOMPSON SORTED — WEB APPS PAGE (web-apps.html)
   The hero slideshow, plus a few page-specific tweaks.
   Script: js/webapps.js. Reduced motion: no autoplay, no
   movement, slides can still be stepped through.
   ========================================================= */

.main-nav a[aria-current="page"] { color: var(--teal); }

/* Six cards read best as 3 x 2 */
.wa-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .wa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .wa-grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
.hero .subheadline { max-width: 540px; }

/* ---- Slideshow ---- */
.wa-show { width: 100%; }

.wa-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  min-height: 340px;
  background:
    radial-gradient(420px circle at 0% 0%, rgba(31, 138, 130, .14), transparent 60%),
    #eef4f2;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(31, 36, 34, 0.12);
  overflow: hidden;
}

.wa-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 28px 30px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.wa-slide.active { opacity: 1; visibility: visible; transition: opacity .5s ease; }

.wa-count {
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--charcoal-500);
  margin-bottom: 14px;
}
.wa-title {
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 0 0 8px;
}
.wa-text {
  color: var(--charcoal-700);
  font-size: .95rem;
  max-width: 30ch;
  margin: 0;
}
.wa-art {
  margin-top: auto;
  align-self: center;
  width: min(100%, 300px);
  height: auto;
  overflow: visible;
}

/* Diagram parts */
.wa-box    { fill: var(--white); stroke: var(--charcoal-900); stroke-width: 1.4; }
.wa-soft   { fill: var(--teal-light); stroke: #b9dcd8; stroke-width: 1; }
.wa-accent { fill: var(--teal); }
.wa-pick   { fill: var(--charcoal-900); }
.wa-fill   { fill: #c9c6bd; }
.wa-stroke { stroke: var(--charcoal-900); stroke-width: 1.2; fill: none; }
.wa-link   { stroke: var(--teal); stroke-width: 2; stroke-dasharray: 4 4; }
.wa-label  { font-family: var(--font-body); font-size: 11px; fill: var(--charcoal-900); text-anchor: middle; }
.wa-slide.active .wa-link { animation: wa-dash 1.2s linear infinite; }
@keyframes wa-dash { to { stroke-dashoffset: -16; } }

.wa-slide.active .wa-draw {
  animation: wa-pop .55s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--d, 0s);
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes wa-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }

.wa-slide.active .wa-grow {
  animation: wa-rise .7s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: var(--d, 0s);
  transform-box: fill-box;
  transform-origin: bottom;
}
@keyframes wa-rise { from { transform: scaleY(0); } to { transform: none; } }

/* ---- Controls ---- */
.wa-controls { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.wa-play {
  width: 36px; height: 36px;
  flex: none;
  display: grid; place-items: center;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  background: var(--white);
  color: var(--charcoal-900);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.wa-play:hover { border-color: var(--teal); color: var(--teal); }
.wa-play svg { width: 13px; height: 13px; }
.wa-play .i-play { display: none; }
.wa-show.paused .wa-play .i-play { display: block; }
.wa-show.paused .wa-play .i-pause { display: none; }

.wa-bars { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.wa-bars button {
  position: relative;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.wa-bars button::before, .wa-bars button::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 7px;
  height: 4px;
  border-radius: 2px;
}
.wa-bars button::before { background: var(--border); }
.wa-bars button::after { right: auto; width: 0; background: var(--teal); }
.wa-bars button.done::after { width: 100%; }
.wa-bars button[aria-current="true"]::after { animation: wa-fill var(--wa-dur, 4.5s) linear forwards; }
.wa-show.paused .wa-bars button[aria-current="true"]::after { animation-play-state: paused; }
@keyframes wa-fill { from { width: 0; } to { width: 100%; } }
.wa-bars button:focus-visible, .wa-play:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

@media (max-width: 768px) {
  .wa-stage { aspect-ratio: auto; min-height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-slide, .wa-slide.active { transition: none; }
  .wa-slide.active .wa-draw, .wa-slide.active .wa-grow, .wa-slide.active .wa-link { animation: none; }
  .wa-bars button[aria-current="true"]::after { animation: none; width: 100%; }
}