/* ============================================================
   tompepper.me — shared site styles
   Used by every page (index, portfolio, future modules).
   ============================================================ */

html,body{margin:0;padding:0;background:#070a04;}
*{box-sizing:border-box;}
::selection{background:#4C8C4A;color:#0d1207;}

/* ---- keyframes (CRT + data-viz animations) ---- */
@keyframes blink{0%,48%{opacity:1}49%,100%{opacity:0}}
@keyframes flick{0%{opacity:.02}30%{opacity:.06}60%{opacity:.03}100%{opacity:.05}}
@keyframes sweep{0%{top:-12%}100%{top:112%}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinr{to{transform:rotate(-360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes bootglow{0%,100%{text-shadow:0 0 6px rgba(95,224,138,.5)}50%{text-shadow:0 0 14px rgba(95,224,138,.9)}}
@keyframes logoIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ---- scrollbar ---- */
.tr-scroll::-webkit-scrollbar{width:10px}
.tr-scroll::-webkit-scrollbar-track{background:rgba(74,90,42,.12)}
.tr-scroll::-webkit-scrollbar-thumb{background:#8a9a5b;border:2px solid #dcdcc0}

/* ---- hover states (ported from the design tool's style-hover) ---- */
.nav-btn{position:relative;display:flex;align-items:center;gap:10px;border:1px solid #8a9a5b;background:transparent;color:#2b3a1a;font-family:inherit;font-size:13px;letter-spacing:.1em;text-align:left;padding:11px 12px;cursor:pointer;text-transform:uppercase;overflow:hidden;}
.nav-btn:hover{border-color:#4C8C4A;box-shadow:inset 0 0 0 1px #4C8C4A;}
.nav-btn .navfill{display:none;position:absolute;inset:0;background:#4C8C4A;}
.nav-btn.active .navfill{display:block;}

.stat-box{border:1px solid #8a9a5b;padding:12px 13px;}
.stat-box:hover{border-color:#4C8C4A;box-shadow:0 0 0 1px #4C8C4A,0 0 20px rgba(76,140,74,.22);}

.impact-card:hover{border-color:#4C8C4A;box-shadow:0 0 0 1px #4C8C4A;}

.exp-row:hover{background:linear-gradient(90deg,rgba(76,140,74,.07),transparent);}

.contact-row:hover{background:linear-gradient(90deg,rgba(76,140,74,.08),transparent);}

a{color:inherit;}

/* ---- environment: starfield + cockpit canopy (behind the terminal) ---- */
#starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:radial-gradient(ellipse at 50% 38%,#10160b 0%,#0a0d06 55%,#050703 100%);}
.canopy{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
/* heated-glass filament grid */
.canopy .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(120,170,90,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(120,170,90,.05) 1px,transparent 1px);background-size:48px 48px;}
/* warmer horizontal "heating element" lines */
.canopy .filaments{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 33px,rgba(205,140,60,.05) 33px 34px);}
/* diagonal glare sweeping across the glass */
.canopy .sheen{position:absolute;inset:-25%;background:linear-gradient(118deg,transparent 42%,rgba(190,215,160,.06) 50%,transparent 58%);}
/* curved-viewport vignette */
.canopy .vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(4,7,3,.78) 100%);}
@media (prefers-reduced-motion: no-preference){
  .canopy .sheen{animation:sheenDrift 18s ease-in-out infinite alternate;}
}
@keyframes sheenDrift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}

/* ---- audio mute toggle (header) ---- */
#audioToggle{flex:none;cursor:pointer;background:none;border:none;padding:0 2px;font-size:15px;line-height:1;opacity:.85;filter:saturate(.4);transition:opacity .15s,filter .15s;}
#audioToggle:hover{opacity:1;filter:saturate(1);}

/* ---- panels (tab content) ---- */
.panel{display:none;padding:28px 32px 36px;}
.panel.active{display:block;animation:fadeUp .5s ease both;}

/* ---- shared site footer (loaded via partials/footer.html) ---- */
.site-footer{
  max-width:1340px;margin:14px auto 0;padding:14px 22px 26px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  color:#5e6b3e;text-transform:uppercase;
}
.site-footer .sf-brand{color:#7da256;}
.site-footer .sf-spacer{margin-left:auto;}
.site-footer a{color:#8a9a5b;text-decoration:none;}
.site-footer a:hover{color:#4C8C4A;}