/* Живой сайт: плавающий фон, появление блоков при прокрутке, наклон карточек, блики, пульсации.
   Всё отключается при «уменьшить движение» в системе (prefers-reduced-motion). */
:root { --sy: 0; --mx: 50vw; --my: 40vh; }
#app { position: relative; z-index: 1; }
.site-foot { position: relative; z-index: 1; }

/* ---------- фон: плавающие цветные шары и искры ---------- */
.mv-orbs { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mv-orbs i { position: absolute; border-radius: 50%; opacity: .6; will-change: transform; }
.mv-orbs i:nth-child(1) { width: 46vmax; height: 46vmax; left: -14vmax; top: -10vmax; background: radial-gradient(circle, #cfe2f5, transparent 68%); animation: mv-drift1 26s ease-in-out infinite alternate; }
.mv-orbs i:nth-child(2) { width: 40vmax; height: 40vmax; right: -12vmax; top: 24vh; background: radial-gradient(circle, #f0e0c8, transparent 68%); animation: mv-drift2 31s ease-in-out infinite alternate; }
.mv-orbs i:nth-child(3) { width: 36vmax; height: 36vmax; left: 20vw; bottom: -14vmax; background: radial-gradient(circle, #d9e6f7, transparent 68%); animation: mv-drift3 29s ease-in-out infinite alternate; }
@keyframes mv-drift1 { to { transform: translate(14vw, 12vh) scale(1.15); } }
@keyframes mv-drift2 { to { transform: translate(-16vw, -10vh) scale(1.2); } }
@keyframes mv-drift3 { to { transform: translate(10vw, -14vh) scale(1.1); } }
.mv-sparks { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.mv-sparks span { position: absolute; bottom: -30px; color: #8DB7E3; opacity: 0; animation: mv-rise linear infinite; will-change: transform, opacity; }
@keyframes mv-rise { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 10% { opacity: .75; } 90% { opacity: .5; } 100% { transform: translate(var(--dx, 30px), -110vh) rotate(200deg); opacity: 0; } }

/* свет за курсором */
.mv-glow { position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; z-index: 0; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 163, 216, .22), rgba(217, 180, 138, .1) 45%, transparent 70%); transform: translate(var(--mx), var(--my)); transition: opacity .4s; opacity: 0; }
.mv-glow.on { opacity: 1; }

/* полоса прокрутки */
.mv-bar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 9999; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #4A86C5, #8DB7E3, #e6c9a0); pointer-events: none; }

/* шапка при прокрутке */
.site-head { transition: box-shadow .3s, background .3s; }
.site-head.mv-scrolled { box-shadow: 0 10px 30px -18px rgba(59, 36, 24, .35); background: rgba(246, 240, 230, .96); }
.logo { background: linear-gradient(100deg, #2a2420 30%, #4A86C5 50%, #2a2420 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.site-foot .logo { animation: none; }
@keyframes mv-shine { to { background-position: -250% 0; } }

/* ---------- появление блоков ---------- */
.mv { opacity: 0; transform: translateY(34px) scale(.985); }
.mv.mv-in { opacity: 1; transform: none; transition: opacity .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms), transform .9s cubic-bezier(.16, 1, .3, 1) var(--d, 0ms); }

/* ---------- главная: заставка ---------- */
.hero .wrap > div:first-child > * { animation: mv-up 1s cubic-bezier(.16, 1, .3, 1) both; }
.hero .eyebrow { animation-delay: .05s !important; }
.hero h1 { animation-delay: .18s !important; }
.hero .lead { animation-delay: .34s !important; }
.hero .actions { animation-delay: .48s !important; }
@keyframes mv-up { from { opacity: 0; transform: translateY(30px); } }
.hero h1 em { background-size: 220% 100%; }
@keyframes mv-grad { to { background-position: 100% 0; } }
.hero .arch-wrap { animation: mv-float 7s ease-in-out infinite; }
@keyframes mv-float { 50% { transform: translateY(-14px); } }
.hero::before { transform: translateY(calc(var(--sy) * .18px)); }
.hero .actions .btn:first-child { animation: mv-glow 3.2s ease-in-out infinite; }
@keyframes mv-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 120, 181, 0); } 50% { box-shadow: 0 0 0 10px rgba(63, 120, 181, .14); } }

/* заголовки разделов с акцентом */
.sec-title em, .page-head h1 em, .course-band h2 em, .final h2 em, .welcome-text h2 em, .quiz .page-head h1 em { background: linear-gradient(100deg, #4A86C5, #f3a56b 60%, #4A86C5); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- кнопки: блик и «дыхание» ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); pointer-events: none; z-index: 1; }
.btn:hover::after { animation: mv-sweep .8s ease; }
@keyframes mv-sweep { to { left: 140%; } }

/* ---------- карточки ---------- */
.door .pic img, .post-card .pic img, .product .pic img { transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.door:hover .pic img, .post-card:hover .pic img, .product:hover .pic img { transform: scale(1.07); }
.mv-tilt { transition: transform .12s ease-out, box-shadow .3s !important; will-change: transform; }
.mv-tilt-off { transition: transform .6s cubic-bezier(.16, 1, .3, 1), box-shadow .3s !important; }
.door .go, .rt-go { transition: letter-spacing .3s, transform .3s; }
.door:hover .go { letter-spacing: .24em; }
.rt-card { animation: mv-bob 7s ease-in-out infinite; }
.rt-card.rt-1 { animation-delay: -3.5s; }
@keyframes mv-bob { 50% { translate: 0 -6px; } }
.cab-test .ct-pic img { animation: mv-bob 8s ease-in-out infinite; }
.mini-arch { animation: mv-float 8s ease-in-out infinite; }

/* акции: плавающие кружки, блик и бегущий градиент */

@keyframes mv-gradmove { to { background-position: 100% 100%; } }
.pp { animation: mv-bob 5s ease-in-out infinite; }
.pp1 { animation-delay: -1.2s; } .pp2 { animation-delay: -2.4s; } .pp3 { animation-delay: -3.6s; }
.promo-big { background: linear-gradient(100deg, #fff 30%, #ffe9a8 50%, #fff 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.sale-badge { overflow: hidden; }
.sale-badge::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); animation: mv-badge 3.4s ease-in-out infinite; }
@keyframes mv-badge { 60%, 100% { transform: translateX(120%); } }
.sale-strip:not(.on) { animation: mv-glow 3s ease-in-out infinite; }

/* тест: варианты ответов выезжают по очереди */
.quiz .opt { animation: mv-up .6s cubic-bezier(.16, 1, .3, 1) both; }
.quiz .opts .opt:nth-child(2) { animation-delay: .06s; } .quiz .opts .opt:nth-child(3) { animation-delay: .12s; } .quiz .opts .opt:nth-child(4) { animation-delay: .18s; } .quiz .opts .opt:nth-child(5) { animation-delay: .24s; } .quiz .opts .opt:nth-child(6) { animation-delay: .3s; }
.quiz .opt { transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
.quiz .opt:hover { transform: translateX(6px); border-color: #4A86C5; box-shadow: 0 10px 24px -16px rgba(63, 120, 181, .6); }
.quiz .progress span { transition: width .6s cubic-bezier(.16, 1, .3, 1); }

/* плавное появление страницы */
body { animation: mv-page .6s ease both; }
@keyframes mv-page { from { opacity: 0; } }

@media (max-width: 720px) {
  .mv-orbs i { animation: none !important; opacity: .5; }
  .mv-sparks { display: none; }
  .mv-glow { display: none; }
  .hero .arch-wrap { animation-duration: 9s; }
}
@media (prefers-reduced-motion: reduce) {
  .mv-orbs, .mv-sparks, .mv-glow, .mv-bar { display: none !important; }
  .mv, .mv.mv-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation: none !important; }
}