/* =========================================================================
   hero-enhance.css  —  diveloper.digital homepage hero (HES) polish
   Loaded AFTER style.min.css. Fully reversible: remove the <link> to revert.
   Scope: only .hes-* hero visual cards + rail. Nothing else on the page.
   Goal: give the right-side hero cards real surface, depth and a tasteful
   accent glow so they stop looking washed-out in light theme.
   ========================================================================= */

/* ---- shared card surface (both themes get real depth) ------------------- */
.hes-tech-cell,
.hes-skill-card,
.hes-feature-item {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 18px 40px -20px rgba(15, 23, 42, .35),
    0 4px 12px -6px rgba(15, 23, 42, .18);
  transition:
    transform .35s cubic-bezier(.4, 0, .2, 1),
    border-color .25s ease,
    box-shadow .35s ease,
    background .25s ease;
}

/* accent wash that fades in on hover — uses the slide's --accent-from/to */
.hes-tech-cell::before,
.hes-skill-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 0%,
              color-mix(in srgb, var(--accent-from, #38bdf8) 22%, transparent),
              transparent 70%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.hes-tech-cell:hover::before,
.hes-skill-card:hover::before { opacity: 1; }

/* icons sit above the wash + render a touch larger / crisper */
.hes-tech-cell img,
.hes-skill-card img { position: relative; z-index: 1; }
.hes-tech-cell img { width: 42px; height: 42px; filter: drop-shadow(0 4px 10px rgba(15, 23, 42, .14)); }

/* light brand icons (e.g. React cyan #61DAFB) wash out on a white card —
   a hairline 4-way slate outline gives every thin/light stroke definition
   while keeping the brand colour intact */
[data-theme="light"] .hes-tech-cell img {
  filter:
    drop-shadow(.7px 0 .3px rgba(30, 41, 59, .32))
    drop-shadow(-.7px 0 .3px rgba(30, 41, 59, .32))
    drop-shadow(0 .7px .3px rgba(30, 41, 59, .32))
    drop-shadow(0 -.7px .3px rgba(30, 41, 59, .32))
    drop-shadow(0 5px 10px rgba(15, 23, 42, .16));
}

/* ---- LIGHT THEME: the actual fix (cards were ~4% opacity = invisible) --- */
[data-theme="light"] .hes-tech-cell,
[data-theme="light"] .hes-skill-card,
[data-theme="light"] .hes-feature-item {
  background: linear-gradient(160deg, rgba(255, 255, 255, .92), rgba(247, 249, 252, .72));
  border-color: rgba(15, 23, 42, .08);
  box-shadow:
    0 20px 44px -22px rgba(15, 23, 42, .22),
    0 3px 10px -4px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
[data-theme="light"] .hes-tech-cell:hover,
[data-theme="light"] .hes-skill-card:hover,
[data-theme="light"] .hes-feature-item:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent-from, #38bdf8) 55%, transparent);
  box-shadow:
    0 28px 56px -20px color-mix(in srgb, var(--accent-from, #38bdf8) 30%, rgba(15, 23, 42, .22)),
    0 6px 16px -6px rgba(15, 23, 42, .14),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

/* ---- DARK THEME: keep the glass look, just add a subtle accent lift ----- */
[data-theme="dark"] .hes-tech-cell,
[data-theme="dark"] .hes-skill-card,
[data-theme="dark"] .hes-feature-item {
  background: linear-gradient(160deg, rgba(245, 247, 250, .07), rgba(245, 247, 250, .03));
  border-color: rgba(245, 247, 250, .11);
}
[data-theme="dark"] .hes-tech-cell:hover,
[data-theme="dark"] .hes-skill-card:hover,
[data-theme="dark"] .hes-feature-item:hover {
  transform: translateY(-6px);
  box-shadow:
    0 26px 54px -22px color-mix(in srgb, var(--accent-from, #38bdf8) 38%, rgba(0, 0, 0, .5)),
    0 4px 12px -6px rgba(0, 0, 0, .4);
}

/* ---- vertical rail (01/02/03): make the active state read intentionally - */
.hes-rail-track { height: 2px; border-radius: 2px; }
.hes-rail-item.is-active .hes-rail-num {
  background: linear-gradient(135deg, var(--accent-from, #38bdf8), var(--accent-to, #6366f1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="light"] .hes-rail-track { background: rgba(15, 23, 42, .14); }
.hes-rail-item.is-active .hes-rail-track {
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--accent-from, #38bdf8) 60%, transparent);
}

/* honour reduced-motion: no hover lift jumps */
@media (prefers-reduced-motion: reduce) {
  .hes-tech-cell, .hes-skill-card, .hes-feature-item { transition: none; }
}