/* ============================================================================
   animations.css — slide transitions, title animation, hover/attention motion
   AOS handles in-slide entrance choreography; this file owns everything else.
   ==========================================================================*/

/* ---------- 1. Slide transitions ---------------------------------------- */
/* Direction-aware: js/navigation.js stamps data-dir on #deck before switching */
.slide.active { animation: slideFadeIn .45s cubic-bezier(.22, .61, .36, 1) both; }
#deck[data-dir="prev"] .slide.active { animation-name: slideFadeInBack; }

@keyframes slideFadeIn {
  from { opacity: 0; transform: translate3d(26px, 8px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideFadeInBack {
  from { opacity: 0; transform: translate3d(-26px, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 2. Title slide choreography -------------------------------- */
.title-slide .title-mark { animation: riseIn .7s .05s ease both; }
.title-slide h1       { animation: riseIn .8s .18s ease both; }
.title-slide .sub     { animation: riseIn .8s .32s ease both; }
.title-slide .refbox  { animation: riseIn .8s .46s ease both; }
.title-slide .meta    { animation: riseIn .8s .60s ease both; }
.title-slide .skyline { animation: skylineIn 1.5s .3s ease both; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes skylineIn {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: .55; transform: none; }
}

/* underline sweep on the title */
.title-slide h1::after {
  content: "";
  display: block;
  height: 5px;
  width: 0;
  margin-top: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--teal));
  animation: sweep .9s .8s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes sweep { from { width: 0; } to { width: 220px; } }

/* ---------- 3. Closing slide ------------------------------------------- */
.thanks h1 { animation: riseIn .7s .1s ease both; }
.thanks .tagline { animation: riseIn .7s .24s ease both; }
.thanks .tk div { animation: popIn .5s ease both; }
.thanks .tk div:nth-child(1) { animation-delay: .30s; }
.thanks .tk div:nth-child(2) { animation-delay: .36s; }
.thanks .tk div:nth-child(3) { animation-delay: .42s; }
.thanks .tk div:nth-child(4) { animation-delay: .48s; }
.thanks .tk div:nth-child(5) { animation-delay: .54s; }
.thanks .tk div:nth-child(6) { animation-delay: .60s; }
.close-foot { animation: riseIn .7s .7s ease both; }

@keyframes popIn {
  from { opacity: 0; transform: scale(.94) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 4. Flow / stepper arrow motion ----------------------------- */
.flow .arrow { animation: nudgeX 2.2s ease-in-out infinite; }
.wf-arrow    { animation: nudgeY 2.2s ease-in-out infinite; }
.arch-conn   { animation: nudgeY 2.4s ease-in-out infinite; }

@keyframes nudgeX {
  0%, 100% { transform: translateX(0); opacity: .75; }
  50%      { transform: translateX(4px); opacity: 1; }
}
@keyframes nudgeY {
  0%, 100% { transform: translateY(0); opacity: .75; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* stagger the vertical workflow arrows so the chain reads as a wave */
.workflow .wf-arrow:nth-of-type(1) { animation-delay: 0s; }
.workflow .wf-arrow:nth-of-type(2) { animation-delay: .15s; }
.workflow .wf-arrow:nth-of-type(3) { animation-delay: .30s; }
.workflow .wf-arrow:nth-of-type(4) { animation-delay: .45s; }
.workflow .wf-arrow:nth-of-type(5) { animation-delay: .60s; }
.workflow .wf-arrow:nth-of-type(6) { animation-delay: .75s; }

/* ---------- 5. Animated statistics ------------------------------------ */
/* js/app.js counts the value up; this adds the subtle scale pulse */
.kpi.counting .val { animation: statPulse .6s ease both; }
@keyframes statPulse {
  from { transform: scale(.96); opacity: .6; }
  to   { transform: none; opacity: 1; }
}

/* live-data placeholders breathe so the audience reads them as "pending" */
.kpi.is-placeholder .val { animation: softBlink 2.6s ease-in-out infinite; }
@keyframes softBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}

/* ---------- 6. Stage lifecycle expand -------------------------------- */
.stage-detail {
  display: none;
  margin: -2px 0 6px 26px;
  padding: 9px 14px;
  font-size: .85rem;
  color: var(--muted);
  background: var(--card);
  border: 1px dashed var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  line-height: 1.5;
}
.stage-detail.open { display: block; animation: expand .28s ease both; }
@keyframes expand {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 7. Chrome micro-interactions ----------------------------- */
#hint { animation: riseIn .6s 1.2s ease both; }

.nav-btn i { transition: transform .18s ease; }
.nav-btn:hover:not(:disabled) i.fa-chevron-right { transform: translateX(3px); }
.nav-btn:hover:not(:disabled) i.fa-chevron-left  { transform: translateX(-3px); }

/* focus ring for keyboard users */
.nav-btn:focus-visible,
.agenda-card:focus-visible,
.stage:focus-visible,
#sidebar .sb-item:focus-visible,
.portal-card:focus-visible {
  outline: 3px solid var(--blue-light);
  outline-offset: 2px;
}