/* ============================================================================
 *  ФормулаЦТ — визуальный слой: иллюстрации курсов, презентаций и теории
 * ==========================================================================*/
.art { display: block; width: 100%; height: 100%; }

/* --------------------------- КАРТОЧКИ КУРСОВ ---------------------------- */
.course-card { position: relative; overflow: hidden; }
.course-card__art {
  position: absolute; inset: 0; z-index: 0; opacity: .38;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 8%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 8%, #000 62%);
}
html[data-theme="dark"] .course-card__art { opacity: .22; }
.course-card > *:not(.course-card__art) { position: relative; z-index: 1; }

/* ------------------------- КАРТОЧКИ ПРЕЗЕНТАЦИЙ ------------------------- */
.deck-card { min-height: 178px; }
.deck-card__art {
  position: absolute; inset: 0; z-index: 0; opacity: .34;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 58%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.35) 58%, transparent 92%);
}
html[data-theme="dark"] .deck-card__art { opacity: .22; }
.deck-card > *:not(.deck-card__art) { position: relative; z-index: 1; }
.deck-card__title { font-size: 18px; }
.deck-card__top { margin-bottom: 18px; }

/* ---------------------------- ПРЕЗЕНТАЦИЯ ------------------------------- */
.slide--title, .slide--figure { position: relative; overflow: hidden; }
.slide__art {
  position: absolute; inset: 0; z-index: 0; opacity: .34; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 62%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.25) 62%, transparent 92%);
}
html[data-theme="dark"] .slide__art { opacity: .2; }
.slide--title > *:not(.slide__art) { position: relative; z-index: 1; }
.slide__figure {
  margin-top: 8px; border-radius: var(--r-lg); overflow: hidden;
  height: clamp(150px, 32vh, 290px);
  border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: var(--sh-1);
}
.slide--figure .slide__h2 { margin-bottom: 10px; }
.art--anim { animation: artIn .4s ease both; }
@keyframes artIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

/* ------------------------------- ТЕОРИЯ -------------------------------- */
.theory__art {
  height: 156px; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.theory__anim {
  height: 168px; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 18px;
  border: 1px solid var(--line); background: var(--surface-2);
  box-shadow: var(--sh-1);
}
@media (max-width: 560px) {
  .course-card__art { opacity: .3; }
  .deck-card { min-height: 158px; }
  .theory__art { height: 128px; }
  .theory__anim { height: 140px; }
}

/* -------------------------------- АВАТАР -------------------------------- */
.ava-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.prof-ava { overflow: hidden; }
.prof-ava .ava-img { width: 100%; height: 100%; }
.hud__avatar { overflow: hidden; }
.hud__avatar .ava-img { width: 100%; height: 100%; }
.onb__ava-preview {
  width: 78px; height: 78px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); display: grid; place-items: center;
  margin: 0 auto 4px; border: 2px solid var(--line);
}
.onb__ava-preview svg { width: 38px; height: 38px; }
.onb__ava-preview .ava-img { width: 100%; height: 100%; }