/* skills.css — award-show treatment for the Skills grid, matching
 * Services' visual language (hairline grid, giant faded monogram, cursor
 * spotlight, numbered index) plus a Motion-powered staggered tag reveal.
 * Kept in its own file (loaded last) so a future Claude-design update
 * can't wipe it. Old .skills-grid/.skill-title/.skill-tags rules in
 * site.css are now partly superseded — .skill-title/.skill-tags class
 * names are still used (new rules here layer on top); .skills-grid is
 * fully replaced below.
 */

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: var(--space-2);
}

/* Dividers are borders ON the tiles (not a grid `gap` + background-peek):
   with repeat(3, 1fr) the column width is rarely a whole pixel, so two
   independently-rounded tile edges can land on the same physical pixel
   and the seam between COLUMNS silently vanishes while row seams (far
   fewer of them) survive. A border is one atomic paint on a single box,
   so it can't be lost that way. */
.skill-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--color-card-bg);
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 30px 28px 26px;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: background .45s var(--ease-out, ease);
}
.skills-grid > .reveal:nth-child(3n) .skill-tile { border-right: none; }
.skills-grid > .reveal:nth-last-child(-n+3) .skill-tile { border-bottom: none; }

.skill-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
              rgba(143, 218, 250, .14), transparent 70%);
  transition: opacity .5s ease;
  pointer-events: none;
}
.skill-tile:hover .skill-spotlight { opacity: 1; }

.skill-mono {
  position: absolute;
  top: -0.14em;
  right: 12px;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 80px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-white);
  opacity: .035;
  transition: opacity .45s var(--ease-out, ease), transform .6s var(--ease-out, ease);
  pointer-events: none;
}
.skill-tile:hover .skill-mono { opacity: .07; transform: scale(1.06); }

.skill-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 18px;
  margin-bottom: var(--space-4);
  color: var(--color-text-primary);
  transition: transform .45s var(--ease-out, ease);
}
.skill-tile:hover .skill-title { transform: translateX(4px); }

.skill-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }

/* The wrapper carries the hover lift/glow — Tag itself renders its
   border/background/color as inline styles (shared with About/Work), so
   a stylesheet :hover on the button can't override those without
   !important. Styling the wrapper sidesteps that entirely. */
.skill-tag-wrap {
  display: inline-flex;
  border-radius: var(--radius-full);
  transition: transform .3s var(--ease-out, ease), box-shadow .3s ease;
}
.skill-tag-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(143, 218, 250, .45);
}
.skill-tag-wrap:hover button {
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.skill-tile:hover {
  background: #131418;
  /* the flat static ring this used to draw is now the animated glow
     ring below — a cursor-tracking arc of light instead of a fixed
     outline, so it isn't drawn twice here. */
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .6);
  z-index: 2;
}

/* ---------------------------------------------------------------
   Cursor-tracking conic-gradient border glow (ported from a supplied
   Aceternity-style "GlowingEffect" reference). Unlike the rest of this
   tile's hover state, it isn't gated by :hover — js/glow-border.js
   tracks the cursor globally and fades --glow-active in once the
   pointer is within `proximity` px, so the glow "wakes up" as you
   approach rather than snapping on/off at the tile's exact edge.
   Re-themed to this site's blue/cyan/indigo family — the reference's
   default pink/gold/green rainbow would clash with the single-accent
   palette used everywhere else on the site.
   --------------------------------------------------------------- */
.skill-tile {
  --glow-start: 0;
  --glow-active: 0;
  --glow-spread: 70;
  --glow-border-width: 3px;
  --glow-gradient:
    radial-gradient(circle, #8FDAFA 10%, #8FDAFA00 20%),
    radial-gradient(circle at 40% 40%, #5EEAD4 5%, #5EEAD400 15%),
    radial-gradient(circle at 60% 60%, #4B94B3 10%, #4B94B300 20%),
    radial-gradient(circle at 40% 60%, #6C7FFF 10%, #6C7FFF00 20%),
    repeating-conic-gradient(
      from 236.84deg at 50% 50%,
      #8FDAFA 0%,
      #5EEAD4 calc(25% / 5),
      #4B94B3 calc(50% / 5),
      #6C7FFF calc(75% / 5),
      #8FDAFA calc(100% / 5)
    );
}
.skill-glow-ring {
  position: absolute;
  inset: 0;
  z-index: 3; /* above the spotlight wash and the hover background */
  pointer-events: none;
}
.skill-glow-ring::after {
  content: '';
  position: absolute;
  /* inset 0 (NOT the reference's negative inset). The reference renders
     its glow in an outer wrapper that is NOT overflow:hidden, so it can
     safely bleed the ring outside the card. Here the ring lives inside
     .skill-tile, which MUST keep overflow:hidden (the giant monogram
     watermark is positioned partly above the tile and relies on being
     clipped). With a negative inset the entire border band sat outside
     the tile's box and was clipped away completely — the ring rendered
     but was 100% invisible. Drawing it just inside the edge keeps it
     within the clip region. */
  inset: 0;
  border: var(--glow-border-width) solid transparent;
  background: var(--glow-gradient);
  background-attachment: fixed;
  opacity: var(--glow-active);
  transition: opacity .3s ease;
  /* The dual-mask trick: layer 1 (a fully-transparent linear-gradient,
     clipped to padding-box) forces the whole INTERIOR to stay hidden
     regardless of layer 2; `intersect` means only the remaining
     border-box-only ring can ever show anything. Layer 2 (a conic
     gradient centered on --glow-start, `spread` degrees wide) then
     picks which arc of that ring is currently lit. */
  mask-clip: padding-box, border-box;
  -webkit-mask-clip: padding-box, border-box;
  mask-composite: intersect;
  -webkit-mask-composite: source-in; /* legacy Safari equivalent of intersect */
  mask-image:
    linear-gradient(#0000, #0000),
    conic-gradient(from calc((var(--glow-start) - var(--glow-spread)) * 1deg),
      #00000000 0deg, #fff, #00000000 calc(var(--glow-spread) * 2deg));
  -webkit-mask-image:
    linear-gradient(#0000, #0000),
    conic-gradient(from calc((var(--glow-start) - var(--glow-spread)) * 1deg),
      #00000000 0deg, #fff, #00000000 calc(var(--glow-spread) * 2deg));
}

@media (max-width: 980px) {
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .skill-mono { font-size: 64px; }
  .skills-grid > .reveal:nth-child(n) .skill-tile { border-right: 1px solid var(--color-border); }
  .skills-grid > .reveal:nth-child(2n) .skill-tile { border-right: none; }
  .skills-grid > .reveal:nth-last-child(-n+3) .skill-tile { border-bottom: 1px solid var(--color-border); }
  .skills-grid > .reveal:nth-last-child(-n+2) .skill-tile { border-bottom: none; }
}

@media (max-width: 620px) {
  .skills-grid { grid-template-columns: 1fr; }
  .skill-tile { padding: 26px 22px 22px; }
  .skill-mono { font-size: 56px; }
  .skills-grid > .reveal:nth-child(n) .skill-tile { border-right: none; }
  .skills-grid > .reveal:nth-child(n) .skill-tile { border-bottom: 1px solid var(--color-border); }
  .skills-grid > .reveal:last-child .skill-tile { border-bottom: none; }
}

@media (prefers-reduced-motion: reduce) {
  .skill-tile, .skill-mono, .skill-title, .skill-tag-wrap, .skill-spotlight {
    transition: none;
  }
}