/* АплАрт — креативный слой: первый экран-маска, курсор, переходы, лента кадров, отзывы, микроанимации */

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Логотип ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 30px; height: 30px; transition: transform 0.6s var(--ease); }
.logo:hover .logo-mark { transform: rotate(-12deg) scale(1.08); }
.foot-logo img { width: 150px; height: 150px; }

/* ---------- Зерно плёнки ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- Первый экран: кадры внутри букв ---------- */
.intro { position: relative; height: 260vh; background: #000; }
.intro-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; contain: paint; }
.intro .hero-shade { opacity: var(--shade, 0); }
.mask {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--bg);
  color: #fff;
  mix-blend-mode: multiply;
  display: grid;
  place-items: center;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform: scale(var(--z, 1));
  will-change: transform;
  pointer-events: none;
}
.mask.is-gone { visibility: hidden; }
.mask-word {
  display: flex;
  font-weight: 800;
  font-size: clamp(120px, 25vw, 520px);
  line-height: 1;
  letter-spacing: -0.07em;
  transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -8px), 0);
  margin-top: -0.04em;
}
.mask-word span { display: inline-block; transform: translateY(40%) scaleY(0.6); opacity: 0; transition: transform 1.3s var(--ease), opacity 0.9s; }
.is-in .mask-word span { transform: none; opacity: 1; }
.mask-word.measuring, .mask-word.measuring span { transform: none !important; transition: none !important; }
.mask-word span:nth-child(2) { transition-delay: 0.06s; }
.mask-word span:nth-child(3) { transition-delay: 0.12s; }
.mask-word span:nth-child(4) { transition-delay: 0.18s; }
.mask-word span:nth-child(5) { transition-delay: 0.24s; }
.mask-word span:nth-child(6) { transition-delay: 0.3s; }

.intro-tag {
  position: absolute;
  z-index: 3;
  left: var(--gutter);
  bottom: var(--gutter);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--soft);
  opacity: calc(1 - var(--p, 0) * 4);
}
.intro-tag::after { content: ""; display: block; width: 1px; height: 46px; margin-top: 16px; background: linear-gradient(var(--fg), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.intro .hero-foot { z-index: 3; opacity: var(--foot, 0); transform: translateY(calc((1 - var(--foot, 0)) * 40px)); pointer-events: none; }
.intro.is-open .hero-foot { pointer-events: auto; }
.intro .door { opacity: 1; transform: none; }
.intro .doors:hover .door { opacity: 0.42; }
.intro .doors .door:hover { opacity: 1; transform: translateX(10px); }

/* ---------- Переход между страницами ---------- */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--red);
  display: grid;
  place-items: center;
  transform: translateY(100%);
  pointer-events: none;
}
.wipe-mark { display: grid; justify-items: center; gap: 18px; color: #fff; opacity: 0; transform: scale(0.92); transition: opacity 0.3s, transform 0.5s var(--ease); }
.wipe.cover { transform: none; transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1); pointer-events: auto; }
.wipe.cover .wipe-mark, .wipe.from-top .wipe-mark { opacity: 1; transform: none; transition-delay: 0.2s; }
.wipe.from-top { transform: none; }
.wipe.leave { transform: translateY(-100%); transition: transform 0.75s cubic-bezier(0.7, 0, 0.2, 1) 0.1s; }
.wipe.leave .wipe-mark { opacity: 0; transform: translateY(-24px); transition: opacity 0.35s, transform 0.6s var(--ease); }

/* Ладони хлопают. Каждая рука и каждый пучок искр — отдельный HTML-слой: transform и opacity
   считает видеокарта, поэтому хлопок не дёргается, пока страница грузится.
   Цикл 1.25 с: лёгкий замах назад → разгон → удар → упругий отскок; в момент удара ладони сжимаются,
   от рук расходится кольцо света, искры разлетаются наружу. */
.clap { position: relative; width: 112px; height: 112px; color: #fff; will-change: transform; }
.clap-l { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform; backface-visibility: hidden; }
.clap-front { transform-origin: 46% 89%; transform: rotate(-20deg); }
.clap-back { transform-origin: 34% 70%; transform: rotate(13deg); }
.clap-bl, .clap-br, .clap-bt { transform-origin: 49% 60%; opacity: 0; will-change: transform, opacity; }
.clap-ring { position: absolute; left: 48%; top: 58%; width: 76%; aspect-ratio: 1; margin: -38% 0 0 -38%; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55), 0 0 24px rgba(255, 255, 255, 0.18); opacity: 0; will-change: transform, opacity; }
.wipe-word { font-weight: 800; font-size: 26px; letter-spacing: -0.06em; line-height: 1; opacity: 0; }
.wipe.cover .clap, .pre .clap { animation: clap-squash 1.25s infinite; }
.wipe.cover .clap-front, .pre .clap-front { animation: clap-front 1.25s infinite; }
.wipe.cover .clap-back, .pre .clap-back { animation: clap-back 1.25s infinite; }
.wipe.cover :is(.clap-bl, .clap-br, .clap-bt), .pre :is(.clap-bl, .clap-br, .clap-bt) { animation: clap-burst 1.25s infinite; }
.wipe.cover .clap-ring, .pre .clap-ring { animation: clap-ring 1.25s infinite; }
.pre .clap-bt, .wipe.cover .clap-bt { animation-delay: 0.015s; }
.pre .clap-br, .wipe.cover .clap-br { animation-delay: 0.03s; }
@keyframes clap-front {
  0% { transform: rotate(-20deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  28% { transform: rotate(-27deg); animation-timing-function: cubic-bezier(0.6, 0, 0.95, 0.5); }
  42% { transform: rotate(1deg); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  52% { transform: rotate(-5deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  60% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { transform: rotate(-20deg); }
}
@keyframes clap-back {
  0% { transform: rotate(13deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  28% { transform: rotate(17deg); animation-timing-function: cubic-bezier(0.6, 0, 0.95, 0.5); }
  42% { transform: rotate(-1deg); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  52% { transform: rotate(3deg); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  60% { transform: rotate(0deg); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  100% { transform: rotate(13deg); }
}
@keyframes clap-squash {
  0%, 41% { transform: scale(1); }
  44% { transform: scale(0.94); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  56% { transform: scale(1.02); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  68%, 100% { transform: scale(1); }
}
@keyframes clap-burst {
  0%, 41% { opacity: 0; transform: scale(0.72); }
  44% { opacity: 1; transform: scale(0.92); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  72%, 100% { opacity: 0; transform: scale(1.14); }
}
@keyframes clap-ring {
  0%, 42% { opacity: 0; transform: scale(0.5); }
  44% { opacity: 0.6; transform: scale(0.62); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); }
  82%, 100% { opacity: 0; transform: scale(1.5); }
}

/* Прелоадер: та же шторка закрывает экран с первого кадра, слово проявляется, на загрузке шторка уходит вверх */
.pre body { overflow: hidden; }
.pre .wipe { transform: none; pointer-events: auto; transition: none; will-change: transform; }
.pre .wipe-mark { opacity: 1; transform: none; transition: none; }
.pre .wipe-word { animation: wipe-word 0.6s var(--ease) 0.25s both; }
.wipe-word { display: none; }
.pre .wipe-word { display: block; }
@keyframes wipe-word { from { opacity: 0; transform: translateY(8px); } to { opacity: 0.9; transform: none; } }
.pre.pre-out .wipe { transform: translateY(-100%); transition: transform 0.8s cubic-bezier(0.7, 0, 0.2, 1); }
.pre.pre-out .wipe-mark { opacity: 0; transform: translateY(-28px); transition: opacity 0.35s, transform 0.6s var(--ease); }

/* ---------- Курсор-подсказка ---------- */
.cursor { position: fixed; z-index: 150; left: 0; top: 0; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor span {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--fg);
  display: grid;
  place-items: center;
  font-size: 0;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  mix-blend-mode: difference;
  transition: width 0.45s var(--ease), height 0.45s var(--ease), left 0.45s var(--ease), top 0.45s var(--ease), font-size 0.3s, background 0.3s;
}
.cursor.is-label span { width: 96px; height: 96px; left: -48px; top: -48px; font-size: 12px; mix-blend-mode: normal; background: var(--red); color: #fff; }
.cursor.is-link span { width: 44px; height: 44px; left: -22px; top: -22px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--fg); }
.cursor.is-down span { transform: scale(0.8); }

/* ---------- Кнопки: текст прокручивается, магнит ---------- */
.roll { display: inline-grid; overflow: hidden; height: 1.25em; line-height: 1.25; }
.roll > span { grid-area: 1 / 1; transition: transform 0.55s var(--ease); }
.roll > span + span { transform: translateY(110%); }
.btn:hover .roll > span:first-child { transform: translateY(-110%); }
.btn:hover .roll > span + span { transform: none; }
.magnet { transition: transform 0.5s var(--ease); }

/* ---------- Заголовки по словам ---------- */
.split-words .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-words .w > span { display: inline-block; transform: translateY(105%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.split-words.in .w > span { transform: none; }

/* ---------- Манифест: слова загораются по скроллу ---------- */
[data-words] .sw { opacity: 0.14; transition: opacity 0.3s; }
[data-words] .sw.on { opacity: 1; }
[data-words] .chip { opacity: 0.14; transform: scale(0.6); transition: opacity 0.4s, transform 0.6s var(--ease); }
[data-words] .chip.on { opacity: 1; transform: none; }

/* ---------- Фото раскрываются шторкой ---------- */
.img-reveal { clip-path: inset(100% 0 0 0 round var(--radius)); transition: clip-path 1.3s var(--ease); }
.img-reveal img { transform: scale(1.25); transition: transform 1.8s var(--ease); }
.img-reveal.in { clip-path: inset(0 0 0 0 round var(--radius)); }
.img-reveal.in img { transform: scale(1); }
.img-reveal.in:hover img { transform: scale(1.05); }

/* ---------- Педагоги: наклон ---------- */
.teacher-photo { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease); }
.teacher-photo img { translate: calc(var(--ry, 0deg) / 1deg * -1.4px) calc(var(--rx, 0deg) / 1deg * 1.4px); }

/* ---------- Разделитель: фото следует за курсором ---------- */
.split-side > img { translate: calc(var(--px, 0) * -18px) calc(var(--py, 0) * -12px); scale: 1.06; }

/* ---------- Лента кадров ---------- */
.film { padding: clamp(40px, 6vh, 80px) 0; overflow: hidden; display: grid; gap: clamp(14px, 1.6vw, 22px); }
.film-row { overflow: hidden; }
.film-track { display: flex; gap: clamp(10px, 1.2vw, 18px); width: max-content; will-change: transform; }
.film-track img { height: clamp(170px, 20vw, 330px); width: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; transform: skewX(var(--skew, 0deg)); transition: filter 0.4s; }
.film-row:hover img { filter: brightness(0.6); }
.film-row:hover img:hover { filter: none; }
.film-title { display: flex; align-items: baseline; justify-content: center; gap: 20px; flex-wrap: wrap; padding: clamp(10px, 2vw, 30px) var(--gutter); text-align: center; }
.film-title span { font-weight: 700; font-size: clamp(54px, 9vw, 180px); letter-spacing: -0.065em; line-height: 0.9; }
.film-title em { font-style: normal; font-size: clamp(16px, 1.4vw, 22px); color: var(--soft); font-weight: 500; }

/* ---------- Отзывы ---------- */
.reviews { overflow: hidden; }
.rv-track {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  /* лента прокручивается вбок и обрезает всё за своим краем: повёрнутым и поднятым карточкам нужен запас сверху и снизу */
  padding: clamp(22px, 2.4vw, 34px) var(--gutter) clamp(30px, 3vw, 44px);
  margin: calc(-1 * clamp(22px, 2.4vw, 34px)) 0 calc(-1 * clamp(20px, 2vw, 34px));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.rv-track::-webkit-scrollbar { display: none; }
.rv-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.rv {
  flex: none;
  width: clamp(300px, 34vw, 520px);
  min-height: clamp(380px, 40vw, 540px);
  padding: clamp(24px, 2.4vw, 38px);
  border-radius: 18px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  scroll-snap-align: start;
  transform: rotate(var(--rot, 0deg)) translateY(var(--lift, 0px));
  transition: transform 0.6s var(--ease), background 0.4s;
}
.rv:nth-child(odd) { --rot: -1.2deg; }
.rv:nth-child(even) { --rot: 1deg; --lift: 18px; }
.rv:hover { --rot: 0deg; --lift: -6px; background: var(--bg-3); }
.rv--accent { background: var(--red); box-shadow: none; }
.rv--accent:hover { background: #f04a34; }
.rv-big { font-weight: 600; font-size: clamp(24px, 2.2vw, 36px); line-height: 1.08; letter-spacing: -0.04em; }
.rv-full { color: var(--soft); font-size: 15px; line-height: 1.5; align-self: end; }
.rv--accent .rv-full { color: rgba(255, 255, 255, 0.85); }
.rv-name { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 16px; border-top: 1px solid rgba(239, 233, 225, 0.2); }

/* ---------- Мелочи ---------- */
.rep-row .rep-title { transition: transform 0.6s var(--ease), letter-spacing 0.6s var(--ease); }
.rep-row:hover .rep-title { letter-spacing: -0.03em; }
.fact b { font-variant-numeric: tabular-nums; }
.split-go, .video .play { transition: transform 0.5s var(--ease), background 0.3s; }

@media (max-width: 767px) {
  .intro { height: 220vh; }
  .mask-word { font-size: 29vw; }
  .intro-tag { font-size: 13px; }
  .intro .hero-foot { bottom: 20px; }
  .rv { width: 84vw; min-height: 0; }
  .rv:nth-child(even) { --lift: 0px; }
  .film-track img { height: 44vw; }
  .foot-logo img { width: 110px; height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro { height: auto; }
  .intro-pin { position: relative; }
  .mask { display: none; }
  .intro .hero-foot { opacity: 1; transform: none; pointer-events: auto; }
  .intro .hero-shade { opacity: 1; }
  .split-words .w > span, .img-reveal, .img-reveal img { transform: none; clip-path: none; }
  [data-words] .sw, [data-words] .chip { opacity: 1; transform: none; }
  .wipe { display: none; }
}