/* Страница «Свобода» (/svoboda/): балерина Дарья Ионова. Сцена на весь экран: огромное слово,
   вертикальные точки слева, большое фото справа; темные и светлые кадры сменяют друг друга,
   и страница меняет цвет под кадр. Шрифт – Noto Sans (только шрифты сайта), без скруглений. */
:root { --sv-bg: #000; --sv-fg: #fff; --sv-dim: rgba(255, 255, 255, .62); --sv-line: rgba(255, 255, 255, .22); }
html, body { margin: 0; }
body { background: #000; color: #fff; font-family: 'Noto Sans', Arial, sans-serif; font-weight: 300; }
.sv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sv { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  background: var(--sv-bg); color: var(--sv-fg); transition: background-color 1.2s ease, color 1.2s ease; }
.sv::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60vw 70vh at 18% -8%, rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 70%); transition: opacity 1.2s ease; }
.sv.is-light { --sv-bg: #e1e1e1; --sv-fg: #0d0d0d; --sv-dim: rgba(13, 13, 13, .62); --sv-line: rgba(13, 13, 13, .26); }
.sv.is-light::before { opacity: .0; }
.sv::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16vh; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000); transition: opacity 1.2s ease; }
.sv.is-light::after { opacity: 0; }
body.sv-light .kl-hamburger-btn--inner span { background: #0d0d0d; box-shadow: none; }

/* вертикальные точки слева (переключение кадров) */
.sv-dots { position: absolute; left: clamp(16px, 3vw, 44px); top: 50%; transform: translateY(-50%); z-index: 4; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sv-dots button { position: relative; display: block; width: 28px; height: 36px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-dots button::before { content: ''; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 1px; background: var(--sv-line); transition: background .3s; }
.sv-dots button i { position: absolute; left: 12px; top: 6px; width: 3px; height: 0; background: var(--sv-fg); }
.sv-dots button[aria-current="true"]::before { background: var(--sv-fg); }
.sv-dots button[aria-current="true"] i { animation: svFill var(--sv-dur, 7s) linear forwards; }
.sv.is-paused .sv-dots button[aria-current="true"] i { animation-play-state: paused; }
@keyframes svFill { from { height: 0; } to { height: calc(100% - 12px); } }

/* левая колонка: слово и подпись */
.sv-left { position: relative; z-index: 4; box-sizing: border-box; min-height: 100vh; min-height: 100svh; width: 52%;
  padding: clamp(86px, 13vh, 150px) 0 clamp(40px, 8vh, 90px) clamp(70px, 8vw, 140px); display: flex; flex-direction: column; justify-content: center; }
.sv-kicker { margin: 0 0 clamp(14px, 3vh, 30px); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--sv-dim); transition: color 1.2s; }
.sv-title { margin: 0; font-weight: 200; font-size: clamp(46px, 9.4vw, 168px); line-height: .95; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.sv-title .l { display: inline-block; animation: svLetter 1.5s cubic-bezier(.22, .61, .36, 1) backwards; animation-delay: calc(var(--i) * 90ms + 250ms); transition: transform .5s ease; }
@keyframes svLetter { from { opacity: 0; filter: blur(16px); transform: translateY(14px); } }
.sv.is-swap .sv-title .l { animation: svSwap 1.1s ease both; animation-delay: calc(var(--i) * 50ms); }
@keyframes svSwap { 0% { filter: blur(0); opacity: 1; } 35% { filter: blur(9px); opacity: .35; } 100% { filter: blur(0); opacity: 1; } }
.sv-who { margin: clamp(18px, 4vh, 40px) 0 0; font-size: clamp(18px, 1.7vw, 26px); font-weight: 300; letter-spacing: .02em; }
.sv-who b { font-weight: 500; }
.sv-sub { margin: 10px 0 0; max-width: 30em; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.55; color: var(--sv-dim); transition: color 1.2s; }
.sv-count { margin: clamp(22px, 5vh, 54px) 0 0; font-size: 13px; letter-spacing: .2em; font-variant-numeric: tabular-nums; color: var(--sv-dim); transition: color 1.2s; }
.sv-count b { font-weight: 600; color: var(--sv-fg); }

/* фото справа */
.sv-stage { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 62%; display: flex; align-items: center; justify-content: center; padding: 3vh 2vw 3vh 0; box-sizing: border-box; }
/* смена кадра: новое фото «открывается» занавесом справа налево, а само чуть выезжает и успокаивается;
   прежнее остаётся под ним, пока занавес не закроет его целиком */
.sv-fig { position: absolute; inset: 3vh 1vw 3vh 0; margin: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 1;
  opacity: 0; clip-path: inset(0 0 0 100%); transform: translateX(46px) scale(1.07); transition: opacity 0s linear 1.5s, clip-path 0s linear 1.5s, transform 0s linear 1.5s; }
.sv-fig.is-on { opacity: 1; clip-path: inset(0 0 0 0); transform: none; z-index: 2; transition: clip-path 1.5s cubic-bezier(.77, 0, .18, 1), transform 1.8s cubic-bezier(.22, .61, .36, 1); }
.sv-stage { animation: svStage 1.8s ease .15s backwards; }
@keyframes svStage { from { opacity: 0; transform: translateX(24px); } }
.sv-fig img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; will-change: transform;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
.sv-fig--light img { mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 96%, transparent 100%); }

/* ниже сцены: коротко о занятиях */
.sv-about { position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff; padding: clamp(60px, 14vh, 150px) clamp(20px, 8vw, 140px) clamp(50px, 10vh, 110px); }
/* видео на фоне: приглушено, без звука, играет только пока блок на экране */
.sv-bgv { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; pointer-events: none; }
.sv-bgv.is-ready { opacity: .55; }
.sv-bgv__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .35) 78%, #000 100%), radial-gradient(70% 90% at 30% 50%, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 100%); }
.sv-about__in { max-width: 1200px; margin: 0 auto; }
.sv-h2 { margin: 0; font-weight: 300; font-size: clamp(26px, 3.2vw, 46px); letter-spacing: .04em; text-transform: uppercase; line-height: 1.15; }
.sv-line { display: block; width: 100%; max-width: 800px; height: 1px; margin: 18px 0 24px; background: radial-gradient(circle, #e00000 0%, rgba(224, 0, 0, 0) 100%); }
.sv-lead { margin: 0; max-width: 34em; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.6; color: rgba(255, 255, 255, .88); }
.sv-list { margin: clamp(30px, 6vh, 60px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid rgba(255, 255, 255, .16); }
.sv-list li { padding: 22px 0 8px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.sv-list small { display: block; font-size: 12px; letter-spacing: .2em; color: #e00000; font-weight: 600; }
.sv-list b { display: block; margin-top: 8px; font-size: clamp(19px, 1.7vw, 25px); font-weight: 400; }
.sv-list span { display: block; margin: 8px 0 14px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
.sv-back { background: #000; }
@media (prefers-reduced-motion: reduce) { .sv-bgv { display: none; } }

@media (max-width: 899px) {
  .sv { min-height: 0; }
  .sv::after { height: 10vh; }
  .sv-left { width: auto; min-height: 0; padding: 82px 20px 12px 58px; }
  .sv-title { font-size: clamp(40px, 15.5vw, 92px); }
  .sv-stage { position: relative; width: auto; height: 104vw; max-height: 640px; margin-top: 0; padding: 0; }
  .sv-fig { inset: 0 0 2vh; }
  .sv-fig img, .sv-fig--light img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
  .sv-count { margin-top: 14px; }
  .sv-dots { top: 40px; transform: none; left: 14px; }
  .sv-dots button { height: 30px; }
  .sv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-title .l { animation: none; }
  .sv.is-swap .sv-title .l { animation: none; }
  .sv-dots button[aria-current="true"] i { animation: none; height: calc(100% - 12px); }
  .sv, .sv-fig { transition: none; }
  .sv-stage { animation: none; }
}

/* кнопка «← Назад» – как на страницах проектов */
.pk-back {
  display: inline-block;
  margin-top: 14px;
  padding: 9px 18px;
  border: 0;
  border-radius: 8px;
  background: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  color: #fff !important;
  font-family: 'Noto Sans', Arial, sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  transition: transform .25s ease;
}
.pk-back:hover,
.pk-back:focus-visible {
  transform: scale(1.05);
}
.pk-back::before, .pk-back::after { content: none !important; display: none !important; }
.pk-back:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* «Назад» отдельной строкой в конце страницы – после галерей
   («Песни», «Московское долголетие»), а не посреди контента */
.pk-back-row { text-align: center; padding: 8px 18px 40px; }

/* «Скоро» на чёрном фоне вместо блока с текстом (05.10.2026) */
.sv-soon { display: flex; align-items: center; justify-content: center; min-height: 55vh; padding: 60px 20px; }
.sv-soon__t { margin: 0; font-weight: 300; font-size: clamp(34px, 7vw, 84px); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: #fff; }

/* видео под «Скоро» – на всю ширину, без звука, по кругу */
.sv-film { background: #000; line-height: 0; }
.sv-film__v { display: block; width: 100%; height: auto; max-height: 100vh; object-fit: cover; background: #000; }