/* Borja Miramón — portfolio
   Change the two brand colours here; everything (including the canvas animations) follows. */
:root {
  --accent: #E8552B;
  --cobalt: #2E3BF0;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: #EFEAE0; color: #141310; font-family: 'Archivo', Helvetica, sans-serif; }

a { color: #141310; }
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }

#top a { text-decoration: none; }
#leadership a { color: #EFEAE0; }
#contact a { color: #141310; }
#contact a:hover { color: #EFEAE0; }
#contact a:focus-visible { outline-color: #141310; outline-offset: 4px; }
article a { color: inherit; }
article a:focus-visible { outline-color: var(--accent); outline-offset: 4px; }

/* Header timeline: fills once on load, labels appear as the bar reaches them */
@keyframes scrubFill { from { width: 0; } to { width: 88%; } }
@keyframes scrubHead { from { left: -7px; } to { left: calc(88% - 7px); } }
@keyframes lblIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes recBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.15; } }
.scrub-fill { animation: scrubFill 2.8s linear 0.3s both; }
.scrub-head { animation: scrubHead 2.8s linear 0.3s both; }
.lbl { display: inline-block; animation: lblIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.rec { animation: recBlink 1.2s steps(1) infinite; }

/* Leadership marquee rows */
@keyframes reelL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes reelR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.reel-l { animation: reelL 38s linear infinite; }
.reel-r { animation: reelR 30s linear infinite; }
.reel-s { animation: reelL 46s linear infinite; }

/* Case study process timeline playhead */
@keyframes play { from { left: 0; } to { left: calc(100% - 2px); } }
.playhead { animation: play 9s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scrub-fill, .scrub-head, .lbl, .rec, .reel-l, .reel-r, .reel-s, .playhead { animation: none; }
}