/* ============================================================
   Dee Portfolio — shared styles
   Tokens from DESIGN.md (Claude editorial: cream + coral + dark navy)
   ============================================================ */

:root {
  --primary: #cc785c;
  --primary-active: #a9583e;
  --ink: #141413;
  --body: #3d3d3a;
  --body-strong: #252523;
  --muted: #6c6a64;
  --muted-soft: #8e8b82;
  --hairline: #e6dfd8;
  --canvas: #faf9f5;
  --surface-soft: #f5f0e8;
  --surface-card: #efe9de;
  --surface-cream-strong: #e8e0d2;
  --surface-dark: #181715;
  --surface-dark-elevated: #252320;
  --on-dark: #faf9f5;
  --on-dark-soft: #a09d96;
  --accent-teal: #5db8a6;
  --accent-amber: #e8a55a;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--primary); color: #fff; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* Keyboard accessibility: visible focus ring on interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--on-dark);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 500;
}
.skip-link:focus { left: 0; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Marquees (BD partners + KOL strip) ---------- */
.bd-marquee-track,
.dr-marquee-track {
  animation: marquee 70s linear infinite;
  will-change: transform;
}
.dr-marquee-track { animation-duration: 48s; }

.bd-marquee:hover .bd-marquee-track,
.dr-marquee:hover .dr-marquee-track,
.bd-marquee:focus-within .bd-marquee-track,
.dr-marquee:focus-within .dr-marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Accordion (GTM phases / Operations steps) ---------- */
.acc-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .32s ease, opacity .32s ease;
}
.acc-item.is-open .acc-panel { max-height: 320px; opacity: 1; }
.acc-chevron { transition: transform .25s ease; }
.acc-item.is-open .acc-chevron { transform: rotate(180deg); }

/* Operations: open step flips to dark surface */
.step-btn { background: var(--canvas); border: 1px solid var(--hairline); }
.acc-item.is-open .step-btn { background: var(--surface-dark); border-color: var(--surface-dark); }
.acc-item.is-open .step-num { background: var(--primary); color: #fff; }
.acc-item.is-open .step-title { color: var(--on-dark); }
.acc-item.is-open .step-tagline { color: var(--on-dark-soft); }
.acc-item.is-open .step-body { color: #d6d3cc; }
.acc-item.is-open .step-chevron-wrap { background: rgba(255,255,255,0.12); color: #fff; }

/* GTM phase: open gets coral border */
.acc-item.is-open .phase-btn { border-color: var(--primary); }

/* ---------- Funnel reveal ---------- */
.funnel-bar { transition: width 1.2s cubic-bezier(.22,1,.36,1); }
.funnel-bar.s2 { transition-delay: .1s; }
.funnel-bar.s3 { transition-delay: .2s; }

/* ---------- BD search panel ---------- */
.bd-search-panel[hidden] { display: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bd-marquee-track, .dr-marquee-track { animation: none !important; }
  .bd-marquee, .dr-marquee { overflow-x: auto; }
  .funnel-bar { transition: none !important; }
  .acc-panel { transition: none; }
}

/* ---------- Responsive nav ---------- */
@media (max-width: 600px) {
  /* collapse the nav "Download CV" to an icon-only button so the bar stays one line */
  .nav-cv .cv-label { display: none; }
  .nav-cv { padding: 0 11px !important; gap: 0 !important; }
  header nav { gap: 8px !important; }
}