/* about.css — dark glass + brighter violet glow (refactor + glass cards) */
:root{
  --bg:#000000;
  --panel:#101010;
  --text:#ffffff;
  --muted:#d0d0d0;
  --accent:#a78bfa;        /* світло-фіолетовий */
  --accent-strong:#8b5cf6; /* насиченіший */
  --accent-rgb:167,139,250;

  /* світіння */
  --glow:0 0 22px rgba(var(--accent-rgb),0.32);
  --glow-strong:0 0 34px rgba(var(--accent-rgb),0.44);
  --border:#262626;

  /* фон сторінки */
  --bg-img: url("009.jpg"); /* змініть шлях при потребі */
  --bg-dark:.70;            /* інтенсивність затемнення 0..1 */

  /* зручний керований відступ зверху під fixed header */
  --header-offset: 48px;

  /* параметри «скляних» карток (сделал прозрачнее) */
  --card-alpha:.22;        /* было .34 */
  --card-alpha-hover:.32;  /* было .44 */
  --card-blur:12px;
}

body{
  color:#fff;
  /* підсвітка + затемнення + фото */
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(167,139,250,.12), transparent 70%),
    linear-gradient(rgba(0,0,0,var(--bg-dark)), rgba(0,0,0,.85)),
    var(--bg-img) center / cover no-repeat fixed;
}

/* На мобільних відключаємо fixed для плавності скролла */
@media (max-width:1024px){
  body{
    background:
      radial-gradient(1200px 800px at 80% -10%, rgba(167,139,250,.12), transparent 70%),
      linear-gradient(rgba(0,0,0,var(--bg-dark)), rgba(0,0,0,.85)),
      var(--bg-img) center / cover no-repeat;
  }
}

/* Контейнер about */
.about-section{
  max-width:1100px;
  margin:0 auto;
  padding: calc(var(--header-offset)) 20px 48px;
}
:where(.about-section h2,.about-section h3){ scroll-margin-top:120px; }

/* --------- стеклянные карточки для трёх зон --------- */
.about-block,
.about-profile,
.about-title-block{
  position:relative;
  isolation:isolate;      /* отдельный стек для слоёв */
  z-index:0;
  background: rgba(16,16,16,var(--card-alpha));
  border:1px solid rgba(167,139,250,.22);
  border-radius:14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 28px rgba(0,0,0,.45), var(--glow);
  backdrop-filter: blur(var(--card-blur)) saturate(130%);
  -webkit-backdrop-filter: blur(var(--card-blur)) saturate(130%);
  overflow:hidden;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease,
              opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}

/* всегда показываем шапку (фото) */
.about-profile{ text-align:center; padding:24px 24px 18px; margin-bottom:1.1rem; opacity:1 !important; transform:none !important; }

/* контент поверх псевдоэлементов */
.about-block > *, .about-profile > *, .about-title-block > *{ position:relative; z-index:1; }

/* Индивидуальные отступы */
.about-block{ padding:1.3rem 1.2rem; margin-bottom:1.1rem; }
.about-title-block{ text-align:center; padding:16px 18px; margin:10px 0 25px; }

/* внутрішній «блік» (ослаблен, чтобы лучше просвечивал фон) */
.about-block::before,
.about-profile::before,
.about-title-block::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(70% 48% at 18% 0%, rgba(167,139,250,.16), transparent 60%),
    radial-gradient(80% 60% at 100% 0%, rgba(255,255,255,.06), transparent 70%);
  mix-blend-mode: screen; opacity:.60; /* было .95 */
}

/* тонка градієнтна рамка — под контентом */
.about-block::after,
.about-profile::after,
.about-title-block::after{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:0;
  background: linear-gradient(120deg, rgba(167,139,250,.6), rgba(255,255,255,.08), rgba(167,139,250,.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity:.85; pointer-events:none; transition:opacity .25s ease;
}

.about-block:hover,
.about-profile:hover,
.about-title-block:hover{
  background: rgba(18,18,18,var(--card-alpha-hover));
  border-color: rgba(167,139,250,.34);
  box-shadow: 0 14px 44px rgba(167,139,250,.22), var(--glow-strong);
}
.about-block:hover::after,
.about-profile:hover::after,
.about-title-block:hover::after{ opacity:1; }

/* Профіль (контент) */
.profile-photo{
  width:180px; height:180px; border-radius:50%;
  border:2px solid rgba(var(--accent-rgb),.45);
  box-shadow: 0 0 0 4px rgba(167,139,250,.12) inset, var(--glow);
  object-fit:cover;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  background: radial-gradient(60% 40% at 20% 0%, rgba(167,139,250,.18), transparent 60%);
}
.profile-photo:hover{
  transform: scale(1.05);
  box-shadow: 0 0 0 6px rgba(167,139,250,.14) inset, var(--glow-strong);
  border-color: rgba(var(--accent-rgb),.65);
}
.profile-name{ margin-top:1rem; font-size:1.4rem; color:var(--text); }

/* Заголовок/підзаголовок (внутри карточки .about-title-block) */
.about-role{
  font-size:20px; font-weight:600; color:var(--accent);
  text-shadow:0 0 10px rgba(var(--accent-rgb),.28);
  margin-bottom:6px;
}
.about-subtitle{
  font-size:18px; font-weight:500; color:var(--muted);
  line-height:1.55; max-width:700px; margin:0 auto;
}

/* Заголовки секций */
.about-heading{
  color:var(--text); margin:0 0 .5rem;
  font-size:1.18rem; letter-spacing:.2px;
  text-shadow:0 0 10px rgba(var(--accent-rgb),.22);
}

/* Текст + списки */
.about-text{ line-height:1.7; color:#eaeaea; }

/* красиві маркери списку */
.about-block ul{ list-style:none; padding-left:0; margin:.4rem 0 0; }
.about-block li{
  color:#e6e6e6; line-height:1.7; font-size:1.04rem;
  display:flex; gap:.6rem; align-items:flex-start;
}
.about-block li::before{
  content:""; flex:0 0 8px; height:8px; margin-top:.55rem; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.1)),
    radial-gradient(circle, rgba(167,139,250,.9), rgba(167,139,250,.2));
  box-shadow:0 0 10px rgba(var(--accent-rgb),.6);
}

/* Посилання */
.about-section a{
  color:var(--accent); text-decoration:underline; text-underline-offset:2px;
}
.about-section a:hover{
  color:var(--accent-strong); text-shadow:0 0 8px rgba(var(--accent-rgb),.35);
}

/* Кнопка */
.about-btn{
  display:inline-block; margin-top:1.2rem; padding:.65rem 1.4rem;
  background: linear-gradient(90deg,#8b5cf6,#a78bfa);
  color:#fff; border-radius:10px; text-decoration:none; font-weight:700;
  transition: filter .2s, box-shadow .2s, transform .12s;
  box-shadow: var(--glow); border:none;
}
.about-btn:hover{ filter:brightness(1.06); box-shadow: var(--glow-strong); }
.about-btn:active{ transform: translateY(1px) scale(.99); }

/* Фокус-доступність */
.about-btn:focus-visible, .about-section a:focus-visible{
  outline:2px solid var(--accent-strong); outline-offset:2px; box-shadow: var(--glow-strong);
}

/* Хлібні крихти */
.breadcrumbs{
  max-width:1100px; margin:0 auto 16px; padding:0 20px;
  font-size:14px; color:#bdbdbd;
}
.breadcrumbs a{ color:#a78bfa; text-decoration:none; }
.breadcrumbs a:hover{ color:#8b5cf6; text-decoration:underline; }

/* Опційна анімація появи */
.about-section.use-reveal .about-block,
.about-section.use-reveal .about-title-block{
  opacity:0; transform:translateY(40px);
}
/* профиль всегда видим даже при use-reveal */
.about-section.use-reveal .about-profile{ opacity:1; transform:none; }

.about-section.use-reveal .about-block[data-visible="true"],
.about-section.use-reveal .about-title-block[data-visible="true"]{
  opacity:1; transform:translateY(0);
}

/* Мобільна адаптація */
@media (max-width:600px){
  .about-section{ padding: calc(var(--header-offset) - 8px) 16px 32px; }
  .profile-photo{ width:130px; height:130px; }
  .about-subtitle{ font-size:16px; }
  .about-heading{ font-size:1.08rem; }
  .about-btn{ width:100%; text-align:center; }
}

/* Менше анімації/прозорості при системних налаштуваннях */
@media (prefers-reduced-motion: reduce){
  .about-section.use-reveal .about-block,
  .about-section.use-reveal .about-title-block{
    transition:none; transform:none !important; opacity:1 !important;
  }
  .profile-photo{ transition:none; }
}
@media (prefers-reduced-transparency: reduce){
  .about-block, .about-profile, .about-title-block{
    backdrop-filter:none; -webkit-backdrop-filter:none; background:#141414;
  }
}

/* graceful fallback, якщо немає backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .about-block, .about-profile, .about-title-block{ background:#141414; }
}

/* === БОЛЕЕ ПРОЗРАЧНЫЕ КАРТОЧКИ (фон виден чётко) === */
:root{
  --card-alpha:.14;        /* было .22/.34 — заметно прозрачнее */
  --card-alpha-hover:.22;  /* мягкий hover */
  --card-blur:6px;         /* меньше blur — фон читается */
}

/* ослабляем внутренний блик ещё сильнее */
.about-block::before,
.about-profile::before,
.about-title-block::before{ opacity:.18; }

/* легче тень, чтобы не забивать края */
.about-block,
.about-profile,
.about-title-block{
  box-shadow: 0 6px 24px rgba(0,0,0,.35), var(--glow);
}

/* На мобильных возвращаем немного контраста */
@media (max-width:600px){
  :root{ --card-alpha:.22; --card-alpha-hover:.30; }
}