/* mozgivdengi/video-lessons/pages/LessonPage.vue */

:root {
  --bg: #faf6ec;
  --text: #0a0a0a;
  --muted: #4b5563;
  --hint: #6b7280;
  --accent: #ff2d55;
  --cyan: #00d4ff;
  --yellow: #fcd34d;
  --dark: #1f1f1f;
  --surface: #faf6ec;
  --red: #ef4444;
  --line: #0a0a0a;
  --shadow: 10px 10px 0 var(--line);
  --shadow-sm: 6px 6px 0 var(--line);
  --font-display: 'Unbounded', 'Arial Black', 'Impact', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
html, body {
  background-color: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
* { box-sizing: border-box;
}
::selection { background: var(--yellow); color: var(--text);
}
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px;
}
::-webkit-scrollbar { width: 12px;
}
::-webkit-scrollbar-track { background: var(--bg);
}
::-webkit-scrollbar-thumb { background: var(--line); border: 2px solid var(--bg);
}

/* Scroll-анимации: заметное появление блоков и текста при чтении */
[data-reveal] { opacity: 1; transform: none;
}
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js [data-reveal="left"] { transform: translateX(-44px);
}
.js [data-reveal="right"] { transform: translateX(44px);
}
.js [data-reveal="zoom"] { transform: scale(0.9);
}
.js [data-reveal].reveal-in { opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] { opacity: 1; transform: none; transition: none;
}
}
/* Плавающая CTA: появление при загрузке */
.mvd-float-pop { animation: mvd-float-in 0.7s ease both; animation-delay: 0.9s;
}
@keyframes mvd-float-in {
from { opacity: 0; transform: translateY(18px);
}
to { opacity: 1; transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.mvd-float-pop { animation: none;
}
}
/* Плавающие элементы: слой 45 — ниже cookie-баннера (50), чата (60) и формы (70) */
.mvd-float-cta {
  position: fixed;
  z-index: 45;
  right: 16px;
  bottom: 156px;
}

/* Заглушка захвата по «закрытой» ссылке (gate=1) */
/* Контент ниже первого экрана: заблокирован и заблюрен, пока нет заявки */
.mvd-gate-lock {
  filter: blur(12px);
  -webkit-filter: blur(12px);
  pointer-events: none;
  user-select: none;
}
/* Полноэкранная заглушка: блюрит весь текст, CTA открывает единую форму */
.mvd-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 62; /* выше чата (60) и cookie-баннера (50), ниже формы (70) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: mvd-gate-in 0.35s ease-out both;
}
.mvd-gate-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  border: 2px solid var(--line);
  background: var(--bg);
  box-shadow: var(--shadow);
  animation: mvd-gate-card-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.mvd-gate-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--hint);
  transition: color 0.2s ease;
}
.mvd-gate-close:hover { color: var(--accent);
}
@keyframes mvd-gate-in {
from { opacity: 0;
}
to { opacity: 1;
}
}
@keyframes mvd-gate-card-in {
from { opacity: 0; transform: translateY(18px) scale(0.94);
}
to { opacity: 1; transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.mvd-gate-overlay { animation: none;
}
.mvd-gate-card { animation: none;
}
}

/* Общие классы (bold-система) */
.mvd-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Ссылки-подписи («СМОТРЕТЬ →») были высотой 15 px — на телефоне в них
   трудно попасть. Даём нормальную тап-зону, не меняя вид текста. */
a.mvd-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.mvd-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid var(--line);
  background: var(--yellow);
  color: var(--text);
  padding: 14px 26px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.mvd-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow);
  background: var(--cyan);
}
.mvd-btn-dark { background: var(--dark); color: var(--bg);
}
.mvd-btn-dark:hover { background: var(--accent); color: var(--bg);
}
.mvd-badge {
  display: inline-block;
  transform: rotate(-4deg);
  border: 2px solid var(--line);
  background: var(--yellow);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 18px;
  box-shadow: var(--shadow-sm);
}
.mvd-tag {
  display: inline-block;
  border: 2px solid var(--line);
  background: var(--yellow);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 12px;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mvd-tag:hover { background: var(--dark); color: var(--bg);
}
.mvd-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.2s ease;
}
.mvd-link:hover { color: var(--accent);
}
.mvd-hover { transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mvd-hover:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow);
}
a { transition: color 0.2s ease;
}
a:hover { color: var(--accent);
}