/* static/css/style.css */

:root{
  --bg0: #05020a;

  --violet0: #2a0939;
  --violet1: #380b51;
  --violet2: #7712b3;

  --emerald2: #00a277;

  --card: rgba(15, 23, 42, 0.68);
  --cardStrong: rgba(15, 23, 42, 0.56);

  --border: rgba(148,163,184,0.16);
  --text: rgba(226,232,240,0.94);
}

body{
  background: var(--bg0);
  color: var(--text);
  overflow-x: hidden;
}

/* ===== Liquid background ===== */
body::before,
body::after{
  content:"";
  position: fixed;
  inset: -22%;
  z-index: 0;
  pointer-events: none;
  filter: blur(54px);
  transform: translate3d(0,0,0);
  will-change: transform, opacity;
}

body::before{
  opacity: 0.70;
  background:
    radial-gradient(42% 36% at 18% 40%, rgba(119,18,179,0.46) 0%, rgba(119,18,179,0.0) 62%),
    radial-gradient(46% 42% at 56% 28%, rgba(56,11,81,0.72) 0%, rgba(56,11,81,0.0) 66%),
    radial-gradient(38% 34% at 78% 62%, rgba(42,9,57,0.86) 0%, rgba(42,9,57,0.0) 68%),
    radial-gradient(55% 50% at 50% 35%, rgba(119,18,179,0.16) 0%, rgba(119,18,179,0.0) 70%);
  animation: bgFloatViolet 16s ease-in-out infinite;
}

body::after{
  opacity: 0.46;
  background:
    radial-gradient(46% 40% at 35% 75%, rgba(0,162,119,0.22) 0%, rgba(0,162,119,0.0) 64%),
    radial-gradient(40% 34% at 78% 45%, rgba(0,73,56,0.28) 0%, rgba(0,73,56,0.0) 68%),
    radial-gradient(36% 30% at 62% 70%, rgba(0,41,32,0.46) 0%, rgba(0,41,32,0.0) 72%),
    radial-gradient(60% 55% at 50% 55%, rgba(0,162,119,0.08) 0%, rgba(0,162,119,0.0) 72%);
  animation: bgFloatEmerald 20s ease-in-out infinite;
}

@keyframes bgFloatViolet{
  0%   { transform: translate(-2%, -1%) scale(1.02); }
  50%  { transform: translate( 2%,  1%) scale(1.09); }
  100% { transform: translate(-2%, -1%) scale(1.02); }
}
@keyframes bgFloatEmerald{
  0%   { transform: translate( 2%,  1%) scale(1.00); opacity: 0.40; }
  50%  { transform: translate(-2%, -1%) scale(1.07); opacity: 0.54; }
  100% { transform: translate( 2%,  1%) scale(1.00); opacity: 0.40; }
}

/* ===== Glass cards ===== */
.glass{
  background: var(--card);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

.glass-strong{
  background: var(--cardStrong);
  border: 1px solid rgba(148,163,184,0.18);
  backdrop-filter: blur(14px);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* выделение контуром основных блоков (чтобы не сливались) */
.glass-outline{
  box-shadow:
    inset 0 0 0 1px rgba(0,162,119,0.10),
    0 18px 44px rgba(0,0,0,0.35);
}

/* ===== FIO depth glow ===== */
.fio-title{
  color: rgba(241,245,249,0.96);
  text-shadow:
    0 2px 14px rgba(119,18,179,0.22),
    0 1px 0 rgba(255,255,255,0.06),
    0 10px 26px rgba(0,0,0,0.30);
}

/* accent line */
.accent-line{
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(0,162,119,0) 0%,
    rgba(0,162,119,0.55) 50%,
    rgba(0,162,119,0) 100%
  );
}

/* fade-in */
.fade-in{
  opacity: 0;
  animation: fadeInEase 0.9s ease forwards;
}
@keyframes fadeInEase{
  0% { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* work cards */
.work-card{
  background: rgba(2,6,23,0.34);
  border: 1px solid rgba(148,163,184,0.14);
}
.company-emerald{
  color: rgba(0,162,119,0.78);
}

/* repo button */
.repo-btn{
  background: rgba(2,6,23,0.34);
  border: 1px solid rgba(0,162,119,0.42);
}
.repo-btn:hover{
  background: rgba(0,162,119,0.10);
  border-color: rgba(0,162,119,0.55);
}

/* skill tags base */
.skill-badge{
  display:inline-block;
  padding: 0.45rem 0.85rem;
  margin: 0.25rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* skills: ярче изумрудное стекло (как просил) */
.skill-emerald{
  color: rgba(236,253,245,0.98);
  background: linear-gradient(
    180deg,
    rgba(0,162,119,0.38) 0%,
    rgba(0,162,119,0.22) 100%
  );
  border: 1px solid rgba(0,162,119,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 10px 26px rgba(0,0,0,0.18);
  backdrop-filter: blur(10px);
}
.skill-emerald:hover{
  transform: translateY(-1px);
  border-color: rgba(0,162,119,0.72);
  background: linear-gradient(
    180deg,
    rgba(0,162,119,0.46) 0%,
    rgba(0,162,119,0.26) 100%
  );
}

/* ===== DevOps cards ===== */
.devops-card{
  background: rgba(2,6,23,0.40);
  border: 1px solid rgba(0,162,119,0.32); /* всегда видна */
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.devops-card:hover{
  transform: scale(1.055);
  border-color: rgba(0,162,119,0.66);
  background: rgba(2,6,23,0.50);
  box-shadow: 0 20px 54px rgba(0,0,0,0.38);
}

/* shine effect */
.block-gradient{
  position: relative;
  overflow: hidden;
}
.block-gradient::after{
  content:'';
  position:absolute;
  top:0; left:-80%;
  width:56%;
  height:100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.16) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-18deg);
  opacity: 0.14;
  animation: shineSlow 6.0s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shineSlow{
  0%   { left:-80%; }
  16%  { left:-80%; }
  52%  { left:130%; }
  100% { left:130%; }
}