/* Page-specific rules for the Sadhana Durai sales portfolio.
   The design's inline styles carry per-element layout/appearance (ported
   verbatim from the .dc.html source); this file covers what the Claude
   Design runtime handled specially — hover states, responsive breakpoints,
   scroll-reveal animation, and decorative keyframes. */

html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; transition: background .45s ease, color .45s ease; }

@keyframes slowspin { to { transform: rotate(360deg); } }
@keyframes driftA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(38px, -26px); } }
@keyframes driftB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-30px, 22px); } }
@keyframes nudge { 0%, 100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(7px); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* — nav — */
.nav-links { display: none; gap: 26px; align-items: center; font-size: 13.5px; letter-spacing: .01em; }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-link { color: inherit; text-decoration: none; opacity: .7; }
.nav-link:hover, .nav-link:focus-visible { opacity: 1; color: var(--color-accent); }
.theme-toggle:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* — hero — */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 64px; align-items: center; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* — stat cells (performance record) — */
.stat-cell { transition: background .3s ease; }
.stat-cell:hover { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }

/* — impact cards — */
.impact-card { transition: transform .35s cubic-bezier(.2, .7, .3, 1), border-color .35s ease, box-shadow .35s ease; }
.impact-card:hover { transform: translateY(-6px); border-color: var(--color-accent); box-shadow: var(--shadow-md); }

/* — toolkit tags — */
.toolkit-tag { border: 1px solid transparent; transition: all .3s ease; }
.toolkit-tag:hover { border-color: var(--color-accent); color: var(--color-accent-800); }

/* — certification cards — */
.cert-card { transition: all .35s ease; }
.cert-card:hover { border-color: var(--color-accent); transform: translateY(-4px); }

/* — award cards — */
.award-card { transition: box-shadow .4s ease, transform .4s cubic-bezier(.2, .7, .3, 1); }
.award-card:hover { box-shadow: var(--shadow-md); transform: translateY(-5px); }
.award-card-outline { transition: border-color .4s ease, transform .4s cubic-bezier(.2, .7, .3, 1); }
.award-card-outline:hover { border-color: var(--color-accent); transform: translateY(-5px); }

/* — process cycle — */
.process-node { transition: all .3s ease; }
.process-node:hover, .process-node:focus-visible, .process-node.is-active {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* — timeline accordion — */
.role-details { margin: 18px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; line-height: 1.6; opacity: .82; max-width: 70ch; }
.role-details[hidden] { display: none; }

/* — scroll reveal — */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .3, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* — animated bars — */
[data-bar] { width: 0; transition: width 1.4s cubic-bezier(.2, .8, .2, 1); }
[data-bar].is-visible { width: var(--bar-target); }