/*
=====================================================================
   Nicholas Lewis - Portfolio Stylesheet
   Theme: Industrial Automation / Factory Gears (brass + iron + ember)
   Originally based on the "Ceevee" template (styleshout.com, 2014)

   TOC:
   a. General Styles
   b. Header Styles
   c. Gear background layer
   d. Primary navigation
   e. About Section
   f. Resume Section
   g. Portfolio Section
   h. Testimonials Section
   i. Contact Section
   j. Footer
===================================================================== */

:root {
  --nav-height: 72px;

  /* Industrial / steampunk palette - single source of truth for accent colors */
  --iron-dark:   #0c0906;
  --iron:        #171310;
  --soot:        #1e1712;
  --brass:       #d6b46a;
  --brass-dim:   #a98a4d;
  --rust:        #b0633a;
  --rust-deep:   #7a3f22;
  --ember:       #ff9d52;
  --cream:       #e6d8c8;
  --steel:       #e0e0e0;
  --steel-dim:   #aaaaaa;

  --accent-grad: linear-gradient(90deg, var(--rust), var(--brass));

  --nav-base:    var(--cream);
  --nav-dim:     #cbb89a;
  --nav-dot:     var(--ember);
  --nav-grad-a:  var(--rust);
  --nav-grad-b:  var(--brass);
  --nav-glow:    rgba(176, 99, 58, .45);
  --nav-overlay: rgba(20, 14, 10, .90);
}

/* ------------------------------------------------------------------ */
/* a. General Styles
/* ------------------------------------------------------------------ */

body { background: var(--iron-dark); }

/* ------------------------------------------------------------------ */
/* b. Header Styles (industrial: iron + rust + ember)
/* ------------------------------------------------------------------ */

/* Header Container */
header {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  text-align: center;
  z-index: 1;
  background: radial-gradient(120% 100% at 50% 0%, #241a12 0%, #150f0a 55%, #0a0705 100%);
}

/* Banner wrapper stays above gears */
header .banner {
  position: relative;
  z-index: 2;
}

/* Vertically center banner */
header:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

/* Banner Wrapper */
header .banner {
  position: relative;
  z-index: 2;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  width: 85%;
  padding-bottom: 30px;
  text-align: center;
}

header .banner-text {
  width: 100%;
}

/* ===== Soot overlay (readability + furnace mood) ===== */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;

  background:
    radial-gradient(1200px 700px at 50% 45%,
      rgba(0,0,0,0.40) 0%,
      rgba(0,0,0,0.65) 55%,
      rgba(0,0,0,0.82) 100%),
    linear-gradient(180deg,
      rgba(40,18,10,0.30),     /* warm soot */
      rgba(0,0,0,0.70));
}

/* Typing Headline */
header .banner-text h1 {
  font: 90px/1.1em 'opensans-bold', sans-serif;
  letter-spacing: -2px;
  margin: 0 auto 18px auto;
  text-shadow: none;
}

/* cream -> rust gradient title */
.hero-title {
  background: linear-gradient(90deg, var(--cream), var(--rust));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  /* background-clip text can't take a text-shadow, so use a drop-shadow
     to keep the title readable over the gear mechanism turning behind it */
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6));
}

/* Power-on flicker: name reads as a neon/CRT sign switching on, once, on load,
   then settles into a slow, subtle ember-glow breathing loop. */
.power-on {
  display: block;
  width: 100%;
  text-align: center;
  animation:
    powerOn 1.6s ease-out both,
    nameGlow 4.5s ease-in-out 1.6s infinite;
}

@keyframes powerOn {
  0%   { opacity: 0;  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(2.6); }
  6%   { opacity: 1;  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(3); }
  9%   { opacity: .2; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(1); }
  13%  { opacity: 1;  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(2.2); }
  16%  { opacity: .3; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(1); }
  22%  { opacity: 1;  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(1.8); }
  26%  { opacity: .5; filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(1); }
  32%  { opacity: 1;  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(1); }
  100% { opacity: 1;  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(1); }
}

/* Slow ember-glow breathing, once the boot flicker has settled */
@keyframes nameGlow {
  0%, 100% { filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6)) brightness(1); }
  50%      { filter: drop-shadow(0 2px 16px rgba(255,157,82,0.45)) brightness(1.06); }
}

@media (prefers-reduced-motion: reduce){
  .power-on{ animation:none !important; opacity:1; }
}

/* Subtitle Text */
header .banner-text h3 {
  font: 20px/1.8em 'Open Sans', sans-serif;
  color: rgba(240, 230, 220, 0.92);
  max-width: 800px;
  margin: 0 auto;
  letter-spacing: 0.5px;

  /* strong readability over gears */
  text-shadow: 0 1px 2px rgba(0,0,0,0.60);
}

header .banner-text h3 span {
  font-weight: bold;
  color: rgba(255, 160, 80, 0.90); /* ember accent */
}

header .banner-text h3 a {
  color: #fff;
}

/* Divider */
header .banner-text hr {
  width: 60%;
  margin: 18px auto 24px auto;
  border-color: rgba(255, 160, 80, 0.14);
}

/* Social Links */
header .social {
  margin: 24px 0;
  padding: 0;
  font-size: 30px;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}

header .social li {
  display: inline-block;
  margin: 0 15px;
  padding: 0;
}

header .social li a {
  color: rgba(240, 230, 220, 0.92);
}

header .social li a:hover {
  color: rgba(255, 160, 80, 0.92);
  filter: drop-shadow(0 0 6px rgba(255, 120, 40, 0.18));
}

/* Scroll Down Icon */
header .scrolldown a {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -29px;
  display: block;
  height: 42px;
  width: 42px;
  font-size: 42px;
  line-height: 42px;
  color: rgba(240, 230, 220, 0.92);
  border-radius: 100%;
  transition: all 0.3s ease-in-out;
}

header .scrolldown a:hover {
  color: rgba(255, 160, 80, 0.92);
  filter: drop-shadow(0 0 6px rgba(255, 120, 40, 0.18));
}

/* Fade-In Animation */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1.2s ease-out forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ------------------------------------------------------------------ */
/* c. Gear background layer (brass + iron)
/* ------------------------------------------------------------------ */

.gears-bg-wrap{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:100%;
  z-index:1;              /* sits above overlay (z=0) and below banner (z=2) */
  pointer-events:none;
  overflow:hidden;
}

.gears-bg{
  width:100%;
  height:100%;
  display:block;
  transform:translateZ(0);
}

/* Brass + iron */
.gear-metal {
  fill: rgba(214, 180, 106, 0.10);
  stroke: rgba(214, 180, 106, 0.22);
  stroke-width: 2;
  transition: stroke 0.4s ease, stroke-width 0.4s ease;

  /* NOTE: do not add a `filter:` (drop-shadow etc.) here. On this element
     — an SVG shape nested in a translated + continuously CSS-rotated
     group, positioned away from the SVG origin — a CSS filter causes
     Chrome to silently fail to paint it at all (confirmed by direct
     testing: identical gears render fine near the SVG origin/corners but
     vanish once translated toward the viewBox center while filtered).
     Same underlying class of bug as the SVG <filter> region issue removed
     from GearsBackground.js — the "machined depth" look isn't worth the
     instability. */
}

.gear-hole{
  fill: rgba(0, 0, 0, 0.28);
  stroke: rgba(140, 110, 70, 0.24);
  stroke-width: 2;
}

.gear-cap{
  fill: rgba(255, 220, 160, 0.06);
  stroke: rgba(214, 180, 106, 0.14);
  stroke-width: 2;
}

/* Featured mechanism: the gear train parked behind the hero name needs to
   actually read as machinery, not a ghost — bolder fill/stroke than the
   ambient corner gears, plus a warmer ember glow. */
.gear-metal-feature {
  fill: rgba(224, 184, 104, 0.30);
  stroke: rgba(255, 200, 130, 0.65);
  stroke-width: 2.5;
  /* no `filter:` here — see the note on .gear-metal above */
}

.gear-hole-feature{
  fill: rgba(0, 0, 0, 0.40);
  stroke: rgba(180, 130, 80, 0.45);
  stroke-width: 2.5;
}

.gear-cap-feature{
  fill: rgba(255, 220, 170, 0.18);
  stroke: rgba(255, 200, 130, 0.5);
  stroke-width: 2.5;
}

/* Proximity glow: ember (stroke only — see the no-filter note on .gear-metal) */
header.gear-proximity .gear-metal {
  stroke: rgba(214, 180, 106, 0.55);
  stroke-width: 2.5;
}

/* Rotation */
@keyframes gearRotateCW { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }
@keyframes gearRotateCCW{ from {transform:rotate(0deg);} to {transform:rotate(-360deg);} }

.gear-rot-cw{
  transform-origin:center;
  animation: gearRotateCW 24s linear infinite;
  will-change: transform;
}
.gear-rot-ccw{
  transform-origin:center;
  animation: gearRotateCCW 30s linear infinite;
  will-change: transform;
}

/* featured hero gear (flanking the name) */
.gear-mesh-c { animation-duration: 22s; }

/* speed tiers */
.gear-slower { animation-duration: 58s !important; }
.gear-slow   { animation-duration: 42s !important; }
.gear-mid    { animation-duration: 32s !important; }
.gear-fast   { animation-duration: 24s !important; }

/* Drift */
@keyframes drift1{
  0%{transform:translate(0px,0px);}
  50%{transform:translate(8px,-6px);}
  100%{transform:translate(0px,0px);}
}
@keyframes drift2{
  0%{transform:translate(0px,0px);}
  50%{transform:translate(-10px,7px);}
  100%{transform:translate(0px,0px);}
}

.gear-drift-1{ animation: drift1 10s ease-in-out infinite; }
.gear-drift-2{ animation: drift2 12s ease-in-out infinite; }
.gear-drift-3{ animation: drift1 14s ease-in-out infinite; }
.gear-drift-4{ animation: drift2 11s ease-in-out infinite; }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
  .gear-rot-cw,.gear-rot-ccw,.gear-drift-1,.gear-drift-2,.gear-drift-3,.gear-drift-4{
    animation:none !important;
  }
}

/* ------------------------------------------------------------------ */
/* d. Primary navigation
/* ------------------------------------------------------------------ */

/* makes anchors and the scroll tracker align with the fixed nav */
section[id] {
  scroll-margin-top: calc(var(--nav-height) + 8px);
}

#home{ position:relative; z-index:1; }
#home .banner-text, #home h1, #home h3{ position:relative; z-index:2; }

/* Bar */
#nav-wrap{
  position: fixed; top:0; left:0; right:0; z-index:99999 !important;
  width:100%;
  font:14px 'opensans-bold', sans-serif;
  text-transform:uppercase; letter-spacing:2px;
  background:transparent;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:none;
  transition: background .25s, backdrop-filter .25s, box-shadow .25s, padding .25s;
}
#nav-wrap.shrink{
  padding:5px 0;
  background: linear-gradient(to right, rgba(20,14,10,.82), rgba(38,26,17,.82));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
}

/* Layout: [hamburger] [menu ...] .................. [equation] */
#nav-inner{
  display:flex; align-items:center; justify-content:flex-start;
  gap:20px; padding:10px 18px 8px;
}
.mobile-toggle{ order: 0; }
ul#nav{
  order:1; margin-right:auto; flex-wrap:nowrap; overflow:visible !important;
  display:flex; align-items:center; gap:24px;
  list-style:none; margin:0; padding:0; min-height:48px;
}
#equation-logo{
  order:2; margin-left:18px;
  font-family:'EB Garamond','Georgia',serif;
  font-size:18px; font-weight:700; color:var(--cream); text-decoration:none;
  padding:6px 10px; border-radius:8px; transition:background .3s, transform .2s;
}
#equation-logo:hover{ background:rgba(60,40,25,.5); transform:scale(1.05); cursor:pointer; }
@media (max-width:768px){ #equation-logo{ display:none; } }

/* SCADA-style "system online" badge */
.status-badge{
  order:3; margin-left:14px;
  display:flex; align-items:center; gap:8px;
  font-size:11px; letter-spacing:2px;
  color:var(--nav-dim);
  white-space:nowrap;
}
.status-led{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:#7cff9e;
  box-shadow:0 0 6px 2px rgba(124,255,158,.6);
  animation: ledPulse 2.2s ease-in-out infinite;
}
@keyframes ledPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}
@media (max-width:768px){ .status-badge{ display:none; } }

/* HMI-style scrolling status ticker beneath the nav bar */
.hmi-ticker{
  overflow:hidden; width:100%; height:24px;
  background:linear-gradient(to right, rgba(20,14,10,.88), rgba(38,26,17,.88));
  border-top:1px solid rgba(214,180,106,.22);
  border-bottom:1px solid rgba(0,0,0,.35);
}
.hmi-ticker-track{
  display:flex; align-items:center; height:100%;
  width:max-content;
  animation: tickerScroll 34s linear infinite;
}
.hmi-ticker-item{
  display:inline-flex; align-items:center; gap:16px;
  padding-left:16px;
  font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  color: var(--brass-dim);
  white-space:nowrap;
}
.hmi-ticker-sep{ color:var(--ember); opacity:.7; margin-left:16px; }
@keyframes tickerScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .hmi-ticker-track{ animation:none !important; }
  .status-led{ animation:none !important; opacity:1; }
}

#nav-wrap ul, #nav-wrap li, #nav-wrap a{ margin:0; padding:0; border:0; outline:0; }

/* Links */
ul#nav li{ position:relative; }
ul#nav li a{
  position:relative; display:inline-block;
  padding:8px 4px; line-height:32px; text-decoration:none; text-align:center;
  color:var(--nav-dim) !important; text-shadow:none !important;
  transition: color .18s ease;
  background:transparent !important; box-shadow:none !important;
}
ul#nav li a:hover{ color:var(--nav-base) !important; }

/* Active (from JS: li[data-active="true"]) */
#nav-wrap ul#nav li[data-active="true"] a,
#nav-wrap ul#nav li[data-active="true"] a:hover{
  color:transparent !important;
  background-image:linear-gradient(90deg, var(--nav-grad-a), var(--nav-grad-b)) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:0 0 6px var(--nav-glow);
}

/* Dot: hidden by default, visible only on active */
ul#nav li a::after{
  content:''; position:absolute; bottom:6px; left:50%;
  width:6px; height:6px; border-radius:50%;
  background:var(--nav-dot);
  transform:translateX(-50%) translateY(0);
  opacity:0; transition:opacity .25s, transform .25s;
}
#nav-wrap ul#nav li[data-active="true"] a::after{
  opacity:1; transform:translateX(-50%) translateY(2px);
  box-shadow:0 0 10px rgba(255,157,82,.65);
}

/* Accessibility & legacy cleanup */
#nav-wrap ul#nav li a:focus-visible{
  outline:2px solid rgba(176,99,58,.9); outline-offset:3px; border-radius:8px;
}
#nav-wrap ul#nav li::marker{ content:""; }
#nav-wrap ul#nav li a::before,
#nav-wrap ul#nav li::before,
#nav-wrap::before{ content:none !important; display:none !important; }
#nav-wrap > a.mobile-btn, #nav-wrap a.mobile-btn{ display:none !important; }
#nav-wrap a{ -webkit-tap-highlight-color:transparent; }

/* Ensure HOME never gets hidden by old themes */
#nav-wrap ul#nav li:first-child{
  display:inline-block !important; visibility:visible !important; opacity:1 !important;
}
#nav-wrap ul#nav li a[href="#home"]{ -webkit-text-fill-color: currentColor !important; }

/* Fallback if text-clip gradients aren't supported */
@supports not (-webkit-background-clip: text) {
  #nav-wrap ul#nav li[data-active="true"] a{
    background:none !important; text-shadow:none;
    color:var(--nav-base) !important;
  }
}

/* Mobile menu */
.mobile-toggle{
  display:none; background:transparent; border:0; padding:0;
  appearance:none; -webkit-appearance:none;
}
@media (max-width:768px){
  #nav-inner{ padding:10px 14px; }
  .mobile-toggle{
    display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
    width:36px; height:36px; cursor:pointer; z-index:10001;
  }
  .mobile-toggle span{
    display:block; height:3px; width:100%; background:#fff; border-radius:2px;
    transition:transform .2s, opacity .2s;
  }
  #nav-wrap ul#nav{
    position:absolute; top:56px; left:12px; right:12px; display:none;
    flex-direction:column; gap:0;
    background:var(--nav-overlay) !important;
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(200,160,110,.15);
    border-radius:12px; padding:16px 0; margin:0;
    box-shadow:0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
    animation: fadeDown .4s ease-out;
  }
  #nav-wrap.open ul#nav{ display:block; }
  #nav-wrap ul#nav li{ padding:10px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
  #nav-wrap ul#nav li:last-child{ border-bottom:0; }
  #nav-wrap ul#nav li a{ display:block; width:100%; color:var(--nav-dim) !important; }
  #nav-wrap ul#nav li a:hover{ color:var(--nav-base) !important; }
}

@keyframes fadeDown{
  from{ opacity:0; transform:translateY(-10px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ------------------------------------------------------------------ */
/* e. About Section - Enhanced Layout & Style */
/* ------------------------------------------------------------------ */

/* --- About: layout & sizing --- */
#about {
  background:
    radial-gradient(circle at top left, rgba(176,99,58,0.18), transparent 40%),
    radial-gradient(circle at bottom right, rgba(214,180,106,0.14), transparent 40%),
    linear-gradient(to bottom, var(--iron-dark), var(--iron));
  color: var(--steel);
  position: relative;
  text-align: center;
  padding: 140px 0 60px;
}

@media screen and (max-width: 768px) {
  #about {
    padding: 120px 0 140px; /* more compact on phones */
  }
}

#about::after {
  display: none; /* removes that black rectangle/fade */
}

.about-grid {
  display: grid;
  grid-template-columns: 160px minmax(0, 680px);
  gap: 28px;
  align-items: start;
  justify-content: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-avatar {
  display: flex;
  justify-content: center;
}

.profile-pic {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--brass);
  box-shadow: 0 0 18px rgba(214,180,106,.45);
  animation: avatarPulse 4s ease-in-out infinite;
}

@keyframes avatarPulse {
  0%,100% { box-shadow: 0 0 18px rgba(214,180,106,.45); }
  50% { box-shadow: 0 0 28px rgba(214,180,106,.75); }
}

/* Card polish */
.about-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 36px 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  text-align: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover like Resume */
.about-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 0 25px rgba(176,99,58,0.5);
}

.about-card:hover h2,
.about-card:hover p,
.about-card:hover .contact-chips,
.about-card:hover .about-cta {
  animation: floatIn 0.6s ease-out forwards;
  opacity: 1;
}

/* Chips */
.contact-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 6px 0 18px;
}
.contact-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #e6e6e6;
  text-decoration: none;
  font-size: 14px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.contact-chips .chip:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
}

/* Buttons */
.about-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.button-gradient {
  background: var(--accent-grad);
  color: #1a1208;
}
.button-gradient:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(214,180,106,0.25);
}

.button-ghost {
  background: transparent;
  color: #e0e0e0;
  border-color: rgba(255,255,255,.2);
}
.button-ghost:hover {
  background: rgba(255,255,255,.08);
}

/* ===== About: force solid white titles, gray body text ===== */
#about .about-card h2,
#about .about-card .about-subtitle {
  color: #fff !important;                 /* white titles */
  background: none !important;            /* kill gradient background */
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: #fff !important; /* override transparent fill */
  text-shadow: none;
}

#about .about-card p {
  color: #c0c0c0;                          /* softer grey for description */
}

/* instant jumps (we animate in JS now) */
html { scroll-behavior: auto; }

/* keep offsets for manual or wheel scrolls */
section { scroll-margin-top: 72px; }
#about  { scroll-margin-top: 84px; } /* keeps ABOUT from straddling the boundary */

/* Mobile */
@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .about-card { text-align: center; }
  .contact-chips { justify-content: center; }
  .about-cta { justify-content: center; }
  #about h2 { font-size: 32px; }
  .about-subtitle {
    color: #ffffff; /* pure white */
    background: none; /* remove gradient if you want solid white */
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
  }
  /* Description paragraph */
  .about-card p {
    color: #c0c0c0; /* softer grey */
  }
}

/* ------------------------------------------------------------------ */
/* f. Resume Section
/* ------------------------------------------------------------------ */

#resume {
  background:
    radial-gradient(circle at top right, rgba(214,180,106,0.12), transparent 40%),
    radial-gradient(circle at bottom left, rgba(176,99,58,0.14), transparent 40%),
    linear-gradient(to top, var(--iron-dark), var(--iron));
  padding: 60px 0;
}
#resume h1,
#resume h3,
#resume .info,
#resume .date {
  color: #f0f0f0;
}

#resume h1 span {
  border-bottom: 3px solid var(--rust);
}

#resume .info {
  font-style: italic;
  color: #aaa;
}

#resume .info span {
   margin-right: 5px;
   margin-left: 5px;
}

#resume .date {
   font: 15px/24px 'opensans-regular', sans-serif;
   margin-top: 6px;
}

.resume-card {
  z-index: 0;
  position: relative;
  background: linear-gradient(to bottom, var(--iron), var(--soot));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 30px 40px;
  margin-bottom: 40px;
  box-shadow: 0 0 15px rgba(176,99,58,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.resume-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 0 25px rgba(176,99,58,0.5);
}

.resume-card:hover h3,
.resume-card:hover p,
.resume-card:hover .info {
  animation: floatIn 0.6s ease-out forwards;
  opacity: 1;
}

.resume-card h3,
.resume-card p,
.resume-card .info {
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

/* Float-in keyframes */
@keyframes floatIn {
  0% {
    transform: translateY(10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}
/*----------------------------------------------*/
/*	Skill Gauges (pressure-dial style)
/*----------------------------------------------*/
.skill-gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 20px;
  padding-top: 20px;
}
.skill-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 130px;
}
.skill-gauge-ring {
  position: relative;
  width: 100%;
}
.skill-gauge-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.skill-gauge-tick {
  fill: var(--brass-dim);
  opacity: 0.5;
}
.skill-gauge-track {
  stroke: rgba(255, 255, 255, 0.08);
}
.skill-gauge-fill {
  stroke: var(--brass);
  stroke-linecap: round;
  transition: stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);
}
.skill-gauge-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 18px/1 'opensans-bold', sans-serif;
  color: var(--cream);
}
.skill-gauge-name {
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}

/*----------------------------------------------*/
/*	Scroll-in "stamped metal" reveal
/*----------------------------------------------*/
.reveal {
  opacity: 0;
}
.reveal.is-visible {
  animation: stampReveal 0.7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes stampReveal {
  0%   { opacity: 0; transform: translateY(28px) scale(0.97); filter: brightness(1.8); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.01); filter: brightness(1.1); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .reveal.is-visible { animation: none; }
}

/*----------------------------------------------*/
/*	Scroll progress gauge
/*----------------------------------------------*/
.scroll-gauge {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  z-index: 999999;
  pointer-events: none;
}
.scroll-gauge-fill {
  position: relative;
  height: 100%;
  background: var(--accent-grad);
  box-shadow: 0 0 8px rgba(255, 157, 82, 0.55);
}
.scroll-gauge-rivet {
  position: absolute;
  right: -3px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cream);
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(255, 220, 180, 0.8);
}

/*----------------------------------------------*/
/*	Gear cursor + trail
/*----------------------------------------------*/
body.gear-cursor-active,
body.gear-cursor-active a,
body.gear-cursor-active button {
  cursor: none;
}
.cursor-gear-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999997;
}
.cursor-gear-head,
.cursor-trail-dot {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.cursor-gear-head {
  width: 22px;
  height: 22px;
}
.cursor-gear-spin {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--brass) 0%, var(--rust) 65%, transparent 66%),
    repeating-conic-gradient(var(--brass) 0deg 12deg, transparent 12deg 30deg);
  box-shadow: 0 0 10px rgba(214, 180, 106, 0.65);
  animation: cursorGearSpin 3s linear infinite;
}
@keyframes cursorGearSpin {
  to { transform: rotate(360deg); }
}
.cursor-trail-dot {
  border-radius: 50%;
  background: radial-gradient(circle, var(--brass) 0%, transparent 70%);
}
.cursor-trail-1 {
  width: 12px;
  height: 12px;
  opacity: 0.5;
}
.cursor-trail-2 {
  width: 7px;
  height: 7px;
  opacity: 0.3;
}
@media (prefers-reduced-motion: reduce) {
  .cursor-gear-spin { animation: none; }
}

/* ------------------------------------------------------------------ */
/* g. Portfolio Section
/* ------------------------------------------------------------------ */

#portfolio {
   background: linear-gradient(to bottom, var(--iron), var(--soot));
   padding-top: 90px;
   padding-bottom: 60px;
   position: relative;
   z-index: auto;
}
#portfolio h1 {
   font: 15px/24px 'opensans-semibold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 1px;
   text-align: center;
   margin-bottom: 48px;
   color: #ffffff;
}

#portfolio-wrapper {
   display: flex;
   flex-wrap: wrap;
}

/* Portfolio Content */
#portfolio-wrapper .columns { margin-bottom: 36px; }
.portfolio-item .item-wrap {
   background: linear-gradient(to bottom, var(--iron), var(--soot));

   overflow: hidden;
   position: relative;

   -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.portfolio-item .item-wrap a {
   display: block;
   cursor: pointer;
}

/* overlay */
.portfolio-item .item-wrap .overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(0, 0, 0, 0.45); /* gradient dark overlay */
  background-image: url(../images/overlay-bg.png);
  background-repeat: repeat;
  background-size: cover;

  backdrop-filter: blur(6px); /* glass blur effect */
  -webkit-backdrop-filter: blur(6px); /* for Safari support */

  opacity: 0;
  transition: opacity 0.3s ease-in-out;

}

.portfolio-item .item-wrap .link-icon {
   display: block;
   color: var(--brass);
   height: 30px;
   width: 30px;
   font-size: 18px;
   line-height: 30px;
   text-align: center;

   opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);

   -webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;

   position: absolute;
   top: 85%;
   left: 50%;
   margin-left: -15px;
   margin-top: -15px;

}
.portfolio-item .item-wrap img {
  width: 100%;
  height: 225px; /* or whatever height matches your other images */
  object-fit: cover;
  border-radius: 4px;

}
.portfolio-item:hover .item-wrap img {
  transform: scale(1.05);
}
.portfolio-item .portfolio-item-meta {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  text-align: center;
  color: var(--brass);
}
.portfolio-item .portfolio-item-meta h5 {
   font: 14px/21px 'opensans-bold', sans-serif;
   color: #fff;
}
.portfolio-item .portfolio-item-meta p {
   font: 12px/18px 'opensans-light', sans-serif;
   color: #c6c7c7;
   margin-bottom: 0;
}
.portfolio-item:hover .portfolio-item-meta {
  opacity: 1;
  transform: translateY(0);
}
/* on hover */
.portfolio-item:hover .overlay {
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
.portfolio-item:hover .link-icon {
   opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}

/* ------------------------------------------------------------------
/* h. Testimonials
/* ------------------------------------------------------------------ */
.quote-intro-container {
  text-align: center;
  margin-bottom: 30px;
  margin-top: 40px; /* this now works */
}

.quote-intro {
  font-family: 'Open Sans', sans-serif;
  color: var(--steel);
  font-size: 18px;
  opacity: 0.9;
  margin: 0 auto;
  max-width: 700px;
}

#testimonials {
   background: linear-gradient(180deg, var(--soot), var(--iron-dark));

   position: relative;
   min-height: 200px;
   width: 100%;
   overflow: hidden;
   z-index: 0;
}
@media (max-width: 768px) {
  .fade-slider { min-height: 200px; }           /* give quotes a bit more room */
  #testimonials blockquote p { font-size: 20px; line-height: 32px; }
  .fade-dots .dot { width: 14px; height: 14px; }/* bigger tap targets */
  .fade-dots .dot { -webkit-tap-highlight-color: transparent; }
}
#testimonials .text-container {
  position: relative;
  z-index: 1;
  padding-top: 96px;
  padding-bottom: 66px;
}
#testimonials::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.55); /* dark semi-transparent overlay */
  z-index: 0; /* stay behind the content */
}
#testimonials h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: #fff;
}
#testimonials h1 span { display: none; }
#testimonials .header-col { padding-top: 9px; }
#testimonials .header-col h1:before {
   font-family: 'FontAwesome';
   content: "\f10d";
	padding-right: 10px;
	font-size: 72px;
   line-height: 72px;
   text-align: left;
   float: left;
   color: #fff;
}

/*	Blockquotes */
#testimonials blockquote p {
  font-family: 'librebaskerville-italic', serif;
  padding: 0;
  font-size: 24px;
  line-height: 48px;
  color: #fff;
  text-shadow: none; /* Optional: remove harsh shadow */
}
#testimonials blockquote:before { content: none; }
#testimonials blockquote cite {
  font-size: 12px;
  line-height: 18px;
  color: #bbbbbb; /* Dimmed for contrast */
}
#testimonials blockquote cite:before { content: "\2014 \0020"; }
#testimonials blockquote cite a,
#testimonials blockquote cite a:visited { color: #8B9798; border: none }

/* Pure React fade slider */
.fade-slider {
  position: relative;
  min-height: 160px; /* keeps layout stable during fades */
}

.fade-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 800ms ease; /* matches FADE_MS */
  display: flex;
  align-items: center;
}
.fade-slide.is-active {
  opacity: 1;
  position: relative; /* active one participates in flow for height */
}

.fade-dots {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.fade-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  border: none;
  background: rgba(255,255,255,.3);
  cursor: pointer;
}
.fade-dots .dot.active {
  background: var(--accent-grad);
}

/* Optional: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .fade-slide { transition: none; }
}

/* ------------------------------------------------------------------ */
/* i. Contact Section
/* ------------------------------------------------------------------ */

#contact {
   background: #191919;
   padding-top: 96px;
   padding-bottom: 102px;
   color: #636363;
   position: relative;
   z-index: auto;
}
#contact .section-head { margin-bottom: 42px; }

#contact a, #contact a:visited  { color: var(--ember); }
#contact a:hover, #contact a:focus { color: #fff; }

#contact h1 {
   font: 18px/24px 'opensans-bold', sans-serif;
   text-transform: uppercase;
   letter-spacing: 3px;
   color: #EBEEEE;
   margin-bottom: 6px;
}
#contact h1 span { display: none; }
#contact h1:before {
   font-family: 'FontAwesome';
   content: "\f0e0";
	padding-right: 10px;
	font-size: 72px;
   line-height: 72px;
   text-align: left;
   float: left;
   color: #ebeeee;
}

#contact h4 {
   font: 16px/24px 'opensans-bold', sans-serif;
   color: #EBEEEE;
   margin-bottom: 6px;
}
#contact p.lead {
   font: 18px/36px 'opensans-light', sans-serif;
   padding-right: 3%;
}
#contact .header-col { padding-top: 6px; }


/* contact form */
#contact form { margin-bottom: 30px; }
#contact label {
   font: 15px/24px 'opensans-bold', sans-serif;
   margin: 12px 0;
   color: #EBEEEE;
	display: inline-block;
	float: left;
   width: 26%;
}
#contact input,
#contact textarea,
#contact select {
   padding: 18px 20px;
	color: #eee;
	background: #373233;
	margin-bottom: 42px;
	border: 0;
	outline: none;
   font-size: 15px;
   line-height: 24px;
   width: 65%;
}
#contact input:focus,
#contact textarea:focus,
#contact select:focus {
	color: #fff;
}
#contact button.submit {
	text-transform: uppercase;
	letter-spacing: 3px;
	color: #1a1208;
   background: var(--accent-grad);
	border: none;
   cursor: pointer;
   height: auto;
   display: inline-block;
	border-radius: 3px;
   margin-left: 26%;
}
#contact button.submit:hover {
	color: #0D0D0D;
	background: #fff;
}
#contact span.required {
	color: var(--ember);
	font-size: 13px;
}
#message-warning, #message-success {
   display: none;
	background: #0F0F0F;
	padding: 24px 24px;
	margin-bottom: 36px;
   width: 65%;
   margin-left: 26%;
}
#message-warning { color: #D72828; }
#message-success { color: var(--brass); }

#message-warning i,
#message-success i {
   margin-right: 10px;
}
#image-loader {
   display: none;
   position: relative;
   left: 18px;
   top: 17px;
}


/* ------------------------------------------------------------------ */
/* j. Footer
/* ------------------------------------------------------------------ */

footer {
   padding-top: 48px;
   margin-bottom: 48px;
   color: #303030;
   font-size: 14px;
   text-align: center;
   position: relative;
}

footer a, footer a:visited { color: #525252; }
footer a:hover, footer a:focus { color: var(--brass); }

/* copyright */
footer .copyright {
    margin: 0;
    padding: 0;
 }
footer .copyright li {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 24px;
}
.ie footer .copyright li {
   display: inline;
}
footer .copyright li:before {
    content: "\2022";
    padding-left: 10px;
    padding-right: 10px;
    color: var(--rust-deep);
}
footer .copyright  li:first-child:before {
    display: none;
}

/* social links */
footer .social-links {
   margin: 18px 0 30px 0;
   padding: 0;
   font-size: 30px;
}
footer .social-links li {
    display: inline-block;
    margin: 0;
    padding: 0;
    margin-left: 42px;
}

footer .social-links li:first-child { margin-left: 0; }

/* Go To Top Button */
#go-top {
	position: absolute;
	top: -24px;
   left: 50%;
   margin-left: -30px;
}
#go-top a {
	text-decoration: none;
	border: 0 none;
	display: block;
	width: 60px;
	height: 60px;
	background-color: #525252;

	-webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;

   color: #fff;
   font-size: 21px;
   line-height: 60px;
 	border-radius: 100%;
}
#go-top a:hover { background-color: var(--brass); color: #1a1208; }


/* ------------------------------------------------------------------ */
/* Final Adjustment for nav-bar, last
/* ------------------------------------------------------------------ */
#nav-wrap {
  z-index: 9999 !important;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: auto !important;
}

#about {
  position: relative;
  z-index: 0 !important;
}

.about-card {
  position: relative;
  z-index: 0 !important;
}

header .banner-text,
header .banner-text h1,
header .banner-text h3 {
  z-index: 9998 !important;
  position: relative !important;
}