/* =========================================================
   Polymathic Group — Home page
   Extends styles.css. Industries as a hairline roster, 
   Resources as a directory.
   ========================================================= */

/* =========================================================
   Industries — flat roster
   Four industries run as hairline rows on the dark band. The rows themselves are
   .prod-roster from styles.css;
   this adds the link cue column, the hover tint, and the full-width intro.
   ========================================================= */
.industries--roster .section-intro__lede {
  max-width: 48ch;
  color: var(--text-on-dark);
}

.industries--roster .industries__cta {
  margin-top: var(--content-gap);
}

/* The shared roster row is index / name / description. Links get a fourth
   column so every arrow lands in the same place structurally. */
.home-roster .prod-roster__row {
  grid-template-columns: minmax(11rem, 20%) 1fr auto;
  transition: background 0.15s ease;
}

.home-roster a.prod-roster__row:hover,
.home-roster a.prod-roster__row:focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

.home-roster a.prod-roster__row:hover .prod-roster__name,
.home-roster a.prod-roster__row:focus-visible .prod-roster__name {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.home-roster__cue {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--action-hover);
  font-weight: 600;
  white-space: nowrap;
}

/* Rows stack rather than reflowing into narrower columns, which would
   squeeze the description to three or four words a line. */
@media (max-width: 860px) {
  .home-roster .prod-roster__row {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    align-items: start;
  }

  .home-roster__cue {
    margin-top: 0.35rem;
  }
}

/* Hero entrance, matching parsons.on.ca: each line fades in and rises 10px,
   a tenth of a second after the one before, and the ledger follows. The
   starting state lives only in the keyframes (fill-mode both), so wherever
   animation is off (the reduced-motion rule in styles.css, or no animation
   support) everything simply shows in place. Delays are classes rather than
   inline style="--d: …", which the strict CSP would block. */
.hero-reveal {
  animation: hero-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-reveal--2 { animation-delay: 0.1s; }
.hero-reveal--3 { animation-delay: 0.2s; }
.hero-reveal--4 { animation-delay: 0.3s; }
.hero-reveal--5 { animation-delay: 0.4s; }

@keyframes hero-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* The stamp lands last, once the ledger has settled. Like a hand stamp, it
   comes down from a little larger, speeding up as it falls (ease-in), and
   stops dead on the page with no rebound. It animates the separate scale
   property, so its -8deg tilt in transform is untouched, and it reaches its
   normal 0.85 opacity on impact. */
.ledger__stamp {
  animation: stamp-land 0.25s cubic-bezier(0.55, 0, 0.9, 0.4) 1s both;
}

@keyframes stamp-land {
  from {
    opacity: 0;
    scale: 1.35;
  }
  to {
    opacity: 0.85;
    scale: 1;
  }
}