:root{
  --glass-surface:rgba(8,12,15,.54);
  --glass-surface-strong:rgba(8,12,15,.70);
  --glass-line:rgba(255,255,255,.105);
  --glass-line-hot:rgba(145,243,156,.28);
  --glass-highlight:rgba(255,255,255,.12);
  --glass-green:rgba(145,243,156,.075);
  --glass-shadow:0 22px 62px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(145,243,156,.055);
  --glass-shadow-hover:0 28px 82px rgba(0,0,0,.42),0 0 0 1px rgba(145,243,156,.025),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -1px 0 rgba(145,243,156,.095);
  --glass-radius:18px;
  --glass-blur:18px;
}

/* Project cards: keep the existing game/project artwork, but make the shell read as smoked liquid glass. */
.professional-page .projects,
.passion-page .projects{
  gap:clamp(10px,1vw,16px)!important;
  border-top-color:transparent!important;
}

.professional-page .project-card,
.passion-page .project-card{
  border:1px solid var(--glass-line)!important;
  border-radius:var(--glass-radius)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.014) 22%,rgba(145,243,156,.018) 58%,rgba(5,8,10,.20) 100%),
    var(--glass-surface)!important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(138%);
  backdrop-filter:blur(var(--glass-blur)) saturate(138%);
  box-shadow:var(--glass-shadow)!important;
  transition:
    min-height .82s cubic-bezier(.22,.61,.36,1),
    border-color .34s ease,
    box-shadow .42s ease,
    filter .42s ease,
    transform .34s cubic-bezier(.22,.61,.36,1)!important;
}

.professional-page .project-card:hover,
.passion-page .project-card:hover,
.professional-page .project-card.is-focused,
.passion-page .project-card.is-active{
  border-color:var(--glass-line-hot)!important;
  box-shadow:var(--glass-shadow-hover)!important;
}

.professional-page .project-card:hover,
.passion-page .project-card:hover{
  transform:translateY(-2px);
}

.professional-page .project-card::before,
.passion-page .project-card::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:-35% -48%;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.035) 43%,rgba(255,255,255,.13) 49%,rgba(145,243,156,.055) 53%,transparent 63%);
  transform:translate3d(-42%,0,0) rotate(.001deg);
  opacity:.50;
  transition:transform .85s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
  mix-blend-mode:screen;
}

.professional-page .project-card:hover::before,
.passion-page .project-card:hover::before,
.professional-page .project-card.is-focused::before,
.passion-page .project-card.is-active::before{
  transform:translate3d(42%,0,0) rotate(.001deg);
  opacity:.78;
}

.passion-page .project-inner{position:relative;z-index:2}

/* Tooling / repository cards. */
.tooling-page .plugin-card,
.plugins-page .plugin-card,
.tooling-page .software-repo-card,
.plugins-page .software-repo-card,
.tooling-page .plugin-focus-card,
.plugins-page .plugin-focus-card,
.tooling-page .tooling-activity-shell,
.plugins-page .tooling-activity-shell{
  border:1px solid var(--glass-line)!important;
  border-radius:var(--glass-radius)!important;
  background:
    radial-gradient(circle at 14% 5%,rgba(255,255,255,.075),transparent 24%),
    radial-gradient(circle at 92% 0%,rgba(145,243,156,.055),transparent 27%),
    linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.009) 45%,rgba(5,8,10,.18)),
    var(--glass-surface)!important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--glass-shadow)!important;
}

.tooling-page .plugin-card,
.plugins-page .plugin-card,
.tooling-page .software-repo-card,
.plugins-page .software-repo-card{
  transition:border-color .24s ease,transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,background .28s ease!important;
}

.tooling-page .plugin-card:hover,
.plugins-page .plugin-card:hover,
.tooling-page .software-repo-card:hover,
.plugins-page .software-repo-card:hover,
.tooling-page .plugin-card.is-selected,
.plugins-page .plugin-card.is-selected,
.tooling-page .software-repo-card.is-selected,
.plugins-page .software-repo-card.is-selected{
  border-color:var(--glass-line-hot)!important;
  transform:translateY(-4px);
  box-shadow:var(--glass-shadow-hover)!important;
}

.tooling-page .plugin-card::after,
.plugins-page .plugin-card::after,
.tooling-page .software-repo-card::after,
.plugins-page .software-repo-card::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:-45% -58%;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 39%,rgba(255,255,255,.11) 49%,rgba(145,243,156,.045) 53%,transparent 63%);
  transform:translateX(-40%);
  opacity:.42;
  transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .28s ease;
}

.tooling-page .plugin-card:hover::after,
.plugins-page .plugin-card:hover::after,
.tooling-page .software-repo-card:hover::after,
.plugins-page .software-repo-card:hover::after{
  transform:translateX(40%);
  opacity:.72;
}

.tooling-page .plugin-card>* ,
.plugins-page .plugin-card>* ,
.tooling-page .software-repo-card>* ,
.plugins-page .software-repo-card>*{position:relative;z-index:1}

/* About / game deck cards. */
.steam-game-card{
  border:1px solid var(--glass-line)!important;
  border-radius:16px!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.012) 42%,rgba(145,243,156,.018)),
    rgba(8,12,15,.60)!important;
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.10),inset 0 -1px 0 rgba(145,243,156,.05)!important;
  transition:border-color .22s ease,transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,background .28s ease!important;
}

.steam-game-card[href]:hover{
  border-color:var(--glass-line-hot)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.014) 42%,rgba(145,243,156,.035)),
    rgba(8,12,15,.64)!important;
  box-shadow:0 24px 66px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(145,243,156,.09)!important;
}

.steam-game-card::before{
  content:"";
  position:absolute;
  z-index:6;
  inset:-55% -62%;
  pointer-events:none;
  background:linear-gradient(110deg,transparent 41%,rgba(255,255,255,.105) 49%,rgba(145,243,156,.04) 53%,transparent 61%);
  transform:translateX(-38%);
  opacity:.34;
  transition:transform .8s cubic-bezier(.22,.61,.36,1),opacity .25s ease;
}

.steam-game-card[href]:hover::before{transform:translateX(38%);opacity:.68}
.steam-game-art{background:rgba(4,7,9,.52)!important}
.steam-game-info{background:linear-gradient(90deg,rgba(7,10,13,.12),rgba(7,10,13,.36))}
.game-platform-stamp{
  border-color:rgba(255,255,255,.16)!important;
  background:rgba(6,10,12,.55)!important;
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 7px 20px rgba(0,0,0,.2);
}

/* Thoughts index and editorial cards. */
.post-card,
.publisher-card,
.article-pullquote,
.article-closing{
  border:1px solid var(--glass-line)!important;
  border-radius:var(--glass-radius)!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,255,255,.065),transparent 28%),
    radial-gradient(circle at 92% 6%,rgba(145,243,156,.055),transparent 30%),
    linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008) 50%,rgba(5,8,10,.16)),
    var(--glass-surface)!important;
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  backdrop-filter:blur(var(--glass-blur)) saturate(140%);
  box-shadow:var(--glass-shadow)!important;
}

.post-card,
.publisher-card{
  transition:transform .28s cubic-bezier(.22,.61,.36,1),border-color .24s ease,box-shadow .3s ease,background .25s ease!important;
}

.post-card:hover,
.publisher-card:hover{
  transform:translateY(-4px);
  border-color:var(--glass-line-hot)!important;
  box-shadow:var(--glass-shadow-hover)!important;
}

.post-card::after,
.publisher-card::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-45% -58%;
  pointer-events:none;
  background:linear-gradient(112deg,transparent 39%,rgba(255,255,255,.11) 49%,rgba(145,243,156,.045) 53%,transparent 63%);
  transform:translateX(-42%);
  opacity:.4;
  transition:transform .82s cubic-bezier(.22,.61,.36,1),opacity .25s ease;
}

.post-card:hover::after,
.publisher-card:hover::before{transform:translateX(42%);opacity:.72}
.post-card>* , .publisher-card>*{position:relative;z-index:1}

/* Small internal surfaces should feel cut from the same glass without becoming noisy. */
.project-tags span,
.plugin-tags span,
.post-tags span{
  border-color:rgba(255,255,255,.10)!important;
  background:rgba(7,10,13,.34)!important;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

.media-stage,
.media-frame .media-stage,
.article-video-frame{
  border-color:rgba(255,255,255,.12)!important;
  border-radius:14px;
  box-shadow:0 20px 58px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.055)!important;
  overflow:hidden;
}

@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .professional-page .project-card,
  .passion-page .project-card,
  .tooling-page .plugin-card,
  .plugins-page .plugin-card,
  .tooling-page .software-repo-card,
  .plugins-page .software-repo-card,
  .steam-game-card,
  .post-card,
  .publisher-card,
  .article-pullquote,
  .article-closing{
    background:rgba(8,12,15,.92)!important;
  }
}

@media(max-width:720px){
  :root{--glass-radius:14px;--glass-blur:14px}
  .professional-page .projects,.passion-page .projects{gap:9px!important}
  .steam-game-card{border-radius:14px!important}
}

@media(prefers-reduced-motion:reduce){
  .professional-page .project-card::before,
  .passion-page .project-card::before,
  .tooling-page .plugin-card::after,
  .plugins-page .plugin-card::after,
  .tooling-page .software-repo-card::after,
  .plugins-page .software-repo-card::after,
  .steam-game-card::before,
  .post-card::after,
  .publisher-card::before{
    transition:none!important;
    transform:none!important;
  }
}
