/* ============================================================
   overrides.css — modifiers, state classes, narrow-scope rules
   Last in the cascade. Wins by virtue of order, not !important.
   ============================================================ */

/* ============================================================
   UTILITIES
   ============================================================ */

/* Section divider modifier */
.section-bordered-top {
  border-top: 1px solid var(--border);
}

/* Body scroll lock when modal open */
body.modal-open {
  overflow: hidden;
}

/* Hidden tab/grid panes (HTML [hidden] support) */
.tab-desc[hidden],
.tab-grid[hidden] {
  display: none;
}

/* Crossfade transient state */
.tab-desc.fading,
.tab-grid.fading {
  opacity: 0;
}

/* ============================================================
   PAGE-SPECIFIC — state modifiers and disabled forms
   ============================================================ */

/* Cert item state modifiers */
.cert-item.in-progress .cert-name {
  color: var(--text-muted);
}
.cert-item.in-progress .cert-badge {
  opacity: 0.7;
}
.cert-item.planned .cert-name {
  color: var(--text-faint);
}
.cert-item.planned .cert-badge {
  opacity: 0.45;
}
.cert-item.planned .cert-issuer {
  opacity: 0.7;
}

/* Modal CTA disabled state */
.modal-cta[data-disabled="true"] {
  color: var(--text-muted);

  background: var(--bg-secondary);
  border-top-color: var(--border);
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}
.modal-cta[data-disabled="true"]::before {
  display: none;
}

/* ============================================================
   SCROLL REVEAL SYSTEM
   Lives last in the cascade so its transitions and opacity
   transforms win over component shorthands (e.g., project-card
   transform on hover).
   ============================================================ */
.reveal,
.reveal-soft,
.reveal-rise {
  opacity: 0;
  transform: translateY(18px);

  will-change: opacity, transform;
  transition: opacity var(--duration-reveal) var(--ease-out-soft),
              transform var(--duration-reveal) var(--ease-out-soft);
  transition-delay: calc(var(--i, 0) * var(--stagger-step));
}
.reveal-soft {
  transform: translateY(8px);
}
.reveal-rise {
  transform: translateY(28px);
}

.reveal.is-visible,
.reveal-soft.is-visible,
.reveal-rise.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children — keyframes (not transitions) so they don't
   collide with each card's own transition shorthand on hover. */
.reveal-stagger > * {
  opacity: 0;
}
.reveal-stagger.is-visible > * {
  opacity: 1;

  animation: reveal-fade-up var(--duration-reveal) var(--ease-out-soft) backwards;
  animation-delay: calc(var(--i, 0) * var(--stagger-step));
}
@keyframes reveal-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stage-banner / section-header rule — left-to-right wipe on reveal */
.reveal-rule .stage-banner-rule,
.reveal-rule .experience-header-rule,
.reveal-rule .creds-header-rule {
  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 1100ms var(--ease-out-soft);
}
.reveal-rule.is-visible .stage-banner-rule,
.reveal-rule.is-visible .experience-header-rule,
.reveal-rule.is-visible .creds-header-rule {
  transform: scaleX(1);
}