/* ════════════════════════════════════════════════════════════════
   dgarland.com shared base styles
   Single source of truth for tokens, reset, base keyframes, nav,
   footer, and shared layout primitives. Page-specific styles stay
   in each page's inline <style> block.
   Canonical accent intensity: the homepage (index.html) "richer" set.
   ════════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:      #08080a;
  --bg2:     #0f0f12;
  --bg3:     #16161a;
  --bg4:     #1d1d22;
  --line:    #24242b;
  --line2:   #2e2e38;
  --dim:     #7d7d8c; /* WCAG AA at small sizes against --bg (was #6a6a78, 3.7:1) */
  --mid:     #8e8ea8;
  --soft:    #bdbdd4;
  --text:    #e0e0f0;
  --bright:  #f2f2ff;
  --ok:      #3ecf8e;
  --warn:    #f5a623;
  --mono:    'JetBrains Mono', monospace;
  --sans:    'Geist', sans-serif;
}

html { scroll-behavior:smooth; font-size:17px; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); overflow-x:hidden; }

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ══ BASE KEYFRAMES (shared across pages) ══ */
@keyframes rgb-text {
  0%{color:#ff6b6b} 14%{color:#ffa94d} 28%{color:#ffe066} 42%{color:#69db7c}
  57%{color:#4dabf7} 71%{color:#9775fa} 85%{color:#f783ac} 100%{color:#ff6b6b}
}
@keyframes rgb-border {
  0%   { border-color:#ff6b6b; box-shadow:0 0 18px rgba(255,107,107,0.35); }
  14%  { border-color:#ffa94d; box-shadow:0 0 18px rgba(255,169,77,0.35); }
  28%  { border-color:#ffe066; box-shadow:0 0 18px rgba(255,224,102,0.35); }
  42%  { border-color:#69db7c; box-shadow:0 0 18px rgba(105,219,124,0.35); }
  57%  { border-color:#4dabf7; box-shadow:0 0 18px rgba(77,171,247,0.35); }
  71%  { border-color:#9775fa; box-shadow:0 0 18px rgba(151,117,250,0.35); }
  85%  { border-color:#f783ac; box-shadow:0 0 18px rgba(247,131,172,0.35); }
  100% { border-color:#ff6b6b; box-shadow:0 0 18px rgba(255,107,107,0.35); }
}
@keyframes rgb-bg {
  0%   { background:rgba(255,107,107,0.08); }
  14%  { background:rgba(255,169,77,0.08); }
  28%  { background:rgba(255,224,102,0.08); }
  42%  { background:rgba(105,219,124,0.08); }
  57%  { background:rgba(77,171,247,0.08); }
  71%  { background:rgba(151,117,250,0.08); }
  85%  { background:rgba(247,131,172,0.08); }
  100% { background:rgba(255,107,107,0.08); }
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
@keyframes up    { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ══ NAV ══ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.4rem 5rem; transition:all 0.4s;
}
nav.stuck {
  background:rgba(8,8,10,0.94); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line); padding:0.9rem 5rem;
}
.logo {
  font-family:var(--mono); font-size:14px; font-weight:700;
  text-decoration:none; letter-spacing:0.14em;
  animation:rgb-text 20s linear infinite;
}
.nav-r { display:flex; align-items:center; gap:1.5rem; }
.nav-r a { font-family:var(--mono); font-size:13px; color:var(--mid); text-decoration:none; letter-spacing:0.1em; text-transform:uppercase; padding:0.45rem 0.8rem; border:1px solid transparent; border-radius:5px; transition:color 0.2s, transform 0.2s ease; }
.nav-r a:hover, .nav-r a:focus-visible { color:var(--bright); transform:scale(1.08); animation:nav-glow 8s linear infinite; }
@keyframes nav-glow {
  0%   { border-color:#ff6b6b; box-shadow:0 0 10px 2px rgba(255,107,107,0.7), 0 0 28px 4px rgba(255,107,107,0.35); color:#ff6b6b; }
  14%  { border-color:#ffa94d; box-shadow:0 0 10px 2px rgba(255,169,77,0.7),  0 0 28px 4px rgba(255,169,77,0.35);  color:#ffa94d; }
  28%  { border-color:#ffe066; box-shadow:0 0 10px 2px rgba(255,224,102,0.7), 0 0 28px 4px rgba(255,224,102,0.35); color:#ffe066; }
  42%  { border-color:#69db7c; box-shadow:0 0 10px 2px rgba(105,219,124,0.7), 0 0 28px 4px rgba(105,219,124,0.35); color:#69db7c; }
  57%  { border-color:#4dabf7; box-shadow:0 0 10px 2px rgba(77,171,247,0.7),  0 0 28px 4px rgba(77,171,247,0.35);  color:#4dabf7; }
  71%  { border-color:#9775fa; box-shadow:0 0 10px 2px rgba(151,117,250,0.7), 0 0 28px 4px rgba(151,117,250,0.35); color:#9775fa; }
  85%  { border-color:#f783ac; box-shadow:0 0 10px 2px rgba(247,131,172,0.7), 0 0 28px 4px rgba(247,131,172,0.35); color:#f783ac; }
  100% { border-color:#ff6b6b; box-shadow:0 0 10px 2px rgba(255,107,107,0.7), 0 0 28px 4px rgba(255,107,107,0.35); color:#ff6b6b; }
}
.nav-r a.active { color:var(--bright); }
.nav-cta {
  border:1px solid var(--line2) !important; color:var(--soft) !important;
  padding:0.45rem 1.1rem; border-radius:4px;
  animation:rgb-border 22s linear infinite !important;
}

/* ══ UTILS ══ */
section { position:relative; z-index:1; }
.wrap { max-width:1320px; margin:0 auto; padding:0 5rem; }

.rv { opacity:0; transform:translateY(30px); transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.rv.in { opacity:1; transform:translateY(0); }
.rv.d1{transition-delay:0.1s} .rv.d2{transition-delay:0.22s}
.rv.d3{transition-delay:0.34s} .rv.d4{transition-delay:0.46s}
.rv.d5{transition-delay:0.58s}

/* Visually hidden but available to screen readers */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Skip link: hidden until keyboard-focused */
.skip-link {
  position:fixed; top:-100px; left:1rem; z-index:1002;
  font-family:var(--mono); font-size:13px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--bright); background:var(--bg3); border:1px solid var(--line2); border-radius:5px;
  padding:0.6rem 1rem; text-decoration:none; transition:top 0.2s;
}
.skip-link:focus { top:1rem; }

/* ══ BUTTONS (shared across pages) ══ */
.btn { font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.85rem 1.75rem; border-radius:5px; text-decoration:none; transition:all 0.2s; display:inline-block; }
.btn-p { animation:rgb-border 22s linear infinite, rgb-bg 22s linear infinite; color:var(--bright); border:1px solid; }
.btn-p:hover { transform:translateY(-2px); }
.btn-g { border:1px solid var(--line2); color:var(--soft); }
.btn-g:hover { border-color:var(--soft); color:var(--bright); }

/* ══ FOOTER + CORNER ACCESS LINK ══ */
footer { border-top:1px solid var(--line); padding:1.5rem 5rem; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:1; animation:rgb-border 22s linear infinite; border-left:none; border-right:none; border-bottom:none; }
.fl { font-family:var(--mono); font-size:14px; color:var(--dim); letter-spacing:0.12em; }
.fr { font-family:var(--mono); font-size:14px; letter-spacing:0.12em; animation:rgb-text 20s linear infinite; }
.ca { position:fixed; bottom:1.5rem; right:1.5rem; font-family:var(--mono); font-size:14px; font-weight:700; text-decoration:none; letter-spacing:0.15em; text-transform:uppercase; border:1px solid; padding:0.4rem 0.8rem; border-radius:3px; background:rgba(8,8,10,0.92); backdrop-filter:blur(8px); z-index:800; animation:rgb-border 22s linear infinite, rgb-text 20s linear infinite; }

/* ══ MOBILE NAV (hamburger) ══ */
.nav-toggle {
  display:none; background:none; border:none; cursor:pointer;
  padding:0.4rem; flex-direction:column; gap:5px; z-index:1001;
}
.nav-toggle span {
  display:block; width:22px; height:2px;
  background:var(--mid); border-radius:1px; transition:all 0.28s cubic-bezier(0.22,1,0.36,1);
}
.nav-toggle:hover span { background:var(--bright); }
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:var(--bright); }
.nav-toggle.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:var(--bright); }

@media(max-width:768px) {
  .nav-toggle { display:flex; }
  .nav-r {
    display:none; position:fixed; inset:0; z-index:1000;
    background:rgba(8,8,10,0.97); backdrop-filter:blur(24px);
    flex-direction:column; align-items:center; justify-content:center; gap:0;
  }
  .nav-r.open { display:flex; }
  .nav-r a {
    font-size:1.1rem !important; letter-spacing:0.08em !important;
    padding:1.1rem 2rem !important; border:none !important;
    border-bottom:1px solid var(--line) !important; border-radius:0 !important;
    width:100%; text-align:center;
  }
  .nav-r a:first-child { border-top:1px solid var(--line) !important; }
  .nav-r a:hover, .nav-r a:focus-visible {
    transform:none !important;
    background:var(--bg2);
  }
}

/* ══ SHARED RESPONSIVE BASE ══ */
@media(max-width:900px){
  .wrap,nav,nav.stuck,footer{padding-left:2rem;padding-right:2rem;}
}

/* Respect reduced-motion. Animations complete instantly instead of being
   removed: entrance animations (opacity:0 -> forwards) must still reach
   their end state or hero and page-header text stays invisible. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    transition-delay:0s !important;
  }
  .rv { opacity:1 !important; transform:none !important; }
  html { scroll-behavior:auto; }
}