/* ==========================================================================
   SiliCore — motion.css
   Load order: base.css -> layout.css -> components.css -> motion.css

   Decoration only. Delete this file and its <link> from the pages and the
   site looks and behaves exactly as it did before. The one thing here that
   touches layout is 6px of padding under section headings, which gives the
   accent rule somewhere to sit.

   Nothing needs a JS switch: the prefers-reduced-motion block in base.css
   clamps every animation and transition site-wide, so each effect below is
   written to land on its *finished* state when that clamp applies.
   ========================================================================== */

/* ========= Shared keyframes ========= */
@keyframes sc-rise{
  from{opacity:0; transform:translateY(16px)}
  to  {opacity:1; transform:none}
}
/* Drifts by exactly one 160px pattern tile, so the loop is seamless. */
@keyframes sc-drift{
  from{background-position:0 0}
  to  {background-position:160px 160px}
}
/* Starts and ends at full strength, so a clamped run is a no-op. */
@keyframes sc-breathe{
  0%,100%{opacity:1}
  50%    {opacity:.78}
}

/* ========= 1. Hero entrance =========
   The hero is above the fold, so it never gets a scroll reveal. Sequence it
   on load instead — eyebrow, headline, lead, buttons, ~90ms apart.
   `backwards` holds the start state through the delay. */
.hero__eyebrow,
.hero h1,
.hero .lead,
.hero .btnrow{
  animation:sc-rise .62s var(--ease) backwards;
}
.hero__eyebrow{animation-delay:.05s}
.hero h1      {animation-delay:.14s}
.hero .lead   {animation-delay:.23s}
.hero .btnrow {animation-delay:.32s}

/* ========= 2. A hero background that is not a still image =========
   Slower than anyone reads, on purpose: the traces should register as depth,
   not as something demanding attention. */
.hero::before{animation:sc-drift 90s linear infinite}
.hero::after {animation:sc-breathe 16s ease-in-out infinite}

/* ========= 3. The timeline draws itself =========
   Each node's connector is two halves (see components.css): ::after reaches
   forward to the next node, ::before arrives at this one. Scaling them in
   sequence makes the line travel along the track as it scrolls in — the one
   animation here that carries meaning, since the track is a progression.
   --i is the node index, set by scripts/timeline.js. */
.track .node::before,
.track .node::after{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .45s var(--ease);
}
.track .node::before{transition-delay:calc(var(--i, 0) * 90ms)}
.track .node::after {transition-delay:calc(var(--i, 0) * 90ms + 45ms)}
.track.is-visible .node::before,
.track.is-visible .node::after{transform:scaleX(1)}

/* Dots land just after the line reaches them. */
.track .node__dot{
  opacity:0;
  transform:translate(-50%,-50%) scale(.35);
  transition:opacity .28s var(--ease), transform .34s var(--ease);
  transition-delay:calc(var(--i, 0) * 90ms + 180ms);
}
.track.is-visible .node__dot{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* Mobile rail runs vertically, and the dot sits on a different transform. */
@media (max-width: 820px){
  .track .node::before{
    transform:scaleY(0);
    transform-origin:center top;
  }
  .track.is-visible .node::before{transform:scaleY(1)}

  .track .node__dot{transform:translate(-50%,0) scale(.35)}
  .track.is-visible .node__dot{transform:translate(-50%,0) scale(1)}
}

/* ========= 4. Grids arrive one card at a time =========
   A whole row fading in at the same instant reads as a page load; 70ms
   between cards reads as intent. Capped at six — past that the last card
   waits long enough to feel broken. */
.grid > .reveal:nth-child(2){transition-delay:.07s}
.grid > .reveal:nth-child(3){transition-delay:.14s}
.grid > .reveal:nth-child(4){transition-delay:.21s}
.grid > .reveal:nth-child(5){transition-delay:.28s}
.grid > .reveal:nth-child(6){transition-delay:.35s}
.grid > .reveal:nth-child(n+7){transition-delay:.42s}

/* The stat row is a single .reveal, so stagger its children instead. */
.stats.is-visible .stat{animation:sc-rise .5s var(--ease) backwards}
.stats.is-visible .stat:nth-child(1){animation-delay:.04s}
.stats.is-visible .stat:nth-child(2){animation-delay:.12s}
.stats.is-visible .stat:nth-child(3){animation-delay:.20s}
.stats.is-visible .stat:nth-child(4){animation-delay:.28s}

/* ========= 5. Hover detail ========= */

/* Portraits lift very slightly with their card. Kept under the card's own
   18px padding so nothing crosses the border radius. */
.member__photo{transition:transform .4s var(--ease)}
.member:hover .member__photo{transform:scale(1.025)}

/* Footer links draw their underline instead of switching it on. */
.site-footer li a{
  background-image:linear-gradient(currentColor, currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1px;
  transition:background-size .3s var(--ease), color var(--speed) var(--ease);
}
.site-footer li a:hover,
.site-footer li a:focus-visible{background-size:100% 1px}

/* The section-head rule already present on headings gets a wipe-in. */
.section-head__text h2{
  background-image:linear-gradient(var(--cyan), var(--cyan));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0 2px;
  transition:background-size .6s var(--ease) .15s;
  padding-bottom:6px;
}
.reveal.is-visible .section-head__text h2,
.section-head.is-visible .section-head__text h2{background-size:38px 2px}