/* ============================================================
   global.css — layout containers, section headers, animations
   ============================================================ */

/* SECTIONS */
.container { max-width:1080px; margin:0 auto; padding:0 2.5rem; }
.section-header { display:flex; align-items:center; gap:1rem; margin:4rem 0 1.75rem; }
.section-header h2 { font-family:var(--font-body); font-size:0.7rem; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; }
.section-header::after { content:''; flex:1; height:1px; background:var(--border); }

/* ANIMS */
.fade-up { opacity:0; transform:translateY(16px); animation:fadeUp .55s ease forwards; }
@keyframes fadeUp { to{opacity:1;transform:translateY(0)} }
.d1{animation-delay:.07s}.d2{animation-delay:.16s}.d3{animation-delay:.25s}.d4{animation-delay:.34s}.d5{animation-delay:.43s}

/* ACCESSIBILITY */
/* Skip link — visually hidden until focused, then pinned top-left */
.skip-link {
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#0d0d0d; padding:.6rem 1rem;
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  border-radius:0 0 var(--btn-radius) 0; text-decoration:none;
}
.skip-link:focus { left:0; }

/* Visible keyboard focus for interactive elements (mouse clicks stay clean via :focus-visible) */
a:focus-visible, button:focus-visible, .card:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px; border-radius:2px;
}

/* Respect users who prefer reduced motion: drop the entrance animation + smooth scroll.
   (The particle canvas independently honors the same preference in particles.js.) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .fade-up { animation:none; opacity:1; transform:none; }
}