/* Маскот Авен в хиро главной (26.10.2026, новый арт).
   Картинка с прозрачностью: static/img/hero-mascot-v3*.webp, кристалл в руке на 15.4% / 25% картинки.
   Всё движение только transform/opacity (DESIGN.md → «Движение»); плавание у .mascot-stage, поэтому свечение
   кристалла и искры едут вместе с героиней. Лёгкий режим (html.fx-lite) оставляет только покачивание и пульс кристалла
   (одна transform-анимация, на слабых телефонах и iPhone, где fx-lite включается сам, героиня тоже двигается);
   prefers-reduced-motion выключает всё. */

.hero-mascot { isolation: isolate; }

/* Сцена: картинка + всё, что привязано к ней, плавает целиком */
.mascot-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 420px;
    animation: avenFloat 9s ease-in-out infinite;
    will-change: transform;
}
/* покачивание вверх-вниз: 26.10 сначала 14px за 7 с (незаметно), потом 24px за 4,8 с (быстро) — итог 20px за 9 с */
@keyframes avenFloat {
    0%, 100% { transform: translateY(0) rotate(-.4deg); }
    50% { transform: translateY(-20px) rotate(.4deg); }
}
@keyframes avenFloatSm {
    0%, 100% { transform: translateY(0) rotate(-.4deg); }
    50% { transform: translateY(-12px) rotate(.4deg); }
}

/* Сама картинка: появление при загрузке и мягкий низ вместо обрезанного края */
.hero-mascot .hero-mascot-img {
    display: block;
    max-width: 100%;
    width: 100%;
    animation: avenIn 1.1s cubic-bezier(.2, .8, .2, 1) both;
    will-change: auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
    mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
}
@keyframes avenIn {
    from { opacity: 0; transform: translateY(26px) scale(.965); }
    to { opacity: 1; transform: none; }
}

/* Блик: светлая полоса раз в 9 секунд проходит по силуэту (маска = альфа самой картинки) */
.mascot-shine {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: url('../img/hero-mascot-v3_w560.webp'), linear-gradient(to bottom, #000 78%, transparent 97%);
    -webkit-mask-size: 100% 100%, 100% 100%;
    -webkit-mask-composite: source-in;
    mask-image: url('../img/hero-mascot-v3_w560.webp'), linear-gradient(to bottom, #000 78%, transparent 97%);
    mask-size: 100% 100%, 100% 100%;
    mask-composite: intersect;
    mix-blend-mode: screen;
}
.mascot-shine::before {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 45%;
    background: linear-gradient(100deg, transparent 0%, rgba(233, 213, 255, 0) 20%, rgba(233, 213, 255, .28) 50%, rgba(233, 213, 255, 0) 80%, transparent 100%);
    transform: translateX(-120%) skewX(-12deg);
    animation: avenShine 9s ease-in-out 1.6s infinite;
}
@keyframes avenShine {
    0% { transform: translateX(-120%) skewX(-12deg); }
    18%, 100% { transform: translateX(330%) skewX(-12deg); }
}

/* Кристалл в руке: свечение, лучи и искры. Центр кристалла — 15.4% / 25% картинки */
.mascot-crystal {
    position: absolute;
    left: 15.4%;
    top: 25%;
    width: 30%;
    aspect-ratio: 1;
    translate: -50% -50%;
    z-index: 4;
    pointer-events: none;
    transition: scale .5s cubic-bezier(.2, .8, .2, 1);
}
.mascot-crystal::before,
.mascot-crystal::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
/* мягкий шар света, пульсирует */
.mascot-crystal::before {
    background: radial-gradient(circle, rgba(233, 213, 255, .55) 0%, rgba(192, 132, 252, .38) 18%, rgba(139, 92, 246, .16) 42%, transparent 68%);
    mix-blend-mode: screen;
    animation: avenCrystalPulse 2.6s ease-in-out infinite;
}
/* лучи: конический градиент медленно вращается */
.mascot-crystal::after {
    inset: -18%;
    background: repeating-conic-gradient(from 0deg, rgba(216, 180, 254, .22) 0deg 4deg, transparent 4deg 30deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 22%, transparent 58%);
    mask-image: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .6) 22%, transparent 58%);
    mix-blend-mode: screen;
    animation: avenRays 18s linear infinite;
    opacity: .8;
}
@keyframes avenCrystalPulse {
    0%, 100% { transform: scale(.88); opacity: .75; }
    50% { transform: scale(1.12); opacity: 1; }
}
@keyframes avenRays { to { transform: rotate(360deg); } }
.hero-mascot:hover .mascot-crystal { scale: 1.22; }

/* искры поднимаются от кристалла */
.crystal-sparks {
    position: absolute;
    left: 15.4%;
    top: 25%;
    z-index: 5;
    pointer-events: none;
}
.crystal-sparks i {
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #f3e8ff;
    box-shadow: 0 0 6px #c084fc, 0 0 12px rgba(192, 132, 252, .7);
    opacity: 0;
    animation: avenSpark 3.2s ease-out infinite;
}
.crystal-sparks i:nth-child(1) { --dx: -18px; --dy: -70px; animation-delay: 0s; }
.crystal-sparks i:nth-child(2) { --dx: 14px; --dy: -86px; animation-delay: .55s; width: 3px; height: 3px; }
.crystal-sparks i:nth-child(3) { --dx: -6px; --dy: -104px; animation-delay: 1.1s; }
.crystal-sparks i:nth-child(4) { --dx: 22px; --dy: -60px; animation-delay: 1.65s; width: 3px; height: 3px; }
.crystal-sparks i:nth-child(5) { --dx: -26px; --dy: -92px; animation-delay: 2.2s; width: 2px; height: 2px; }
.crystal-sparks i:nth-child(6) { --dx: 6px; --dy: -120px; animation-delay: 2.7s; width: 3px; height: 3px; }
@keyframes avenSpark {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}

/* Ореол за героиней: медленно вращающееся кольцо света поверх старой ауры */
.mascot-halo {
    position: absolute;
    width: 78%;
    aspect-ratio: 1;
    top: 8%;
    left: 11%;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(from 90deg, rgba(168, 85, 247, 0) 0deg, rgba(168, 85, 247, .42) 70deg, rgba(56, 189, 248, .18) 140deg, rgba(168, 85, 247, 0) 200deg, rgba(192, 132, 252, .34) 290deg, rgba(168, 85, 247, 0) 360deg);
    -webkit-mask-image: radial-gradient(circle, transparent 52%, #000 60%, #000 64%, transparent 72%);
    mask-image: radial-gradient(circle, transparent 52%, #000 60%, #000 64%, transparent 72%);
    animation: avenRays 26s linear infinite;
    opacity: .75;
}

/* Скролл: при уходе хиро вверх героиня чуть уменьшается и тает (вместо правила в fx3d, которое висело на картинке) */
@supports (animation-timeline: scroll()) {
    .hero-mascot {
        animation: avenScrollOut linear both;
        animation-timeline: scroll(root);
        animation-range: 0 60vh;
    }
    @keyframes avenScrollOut { from { scale: 1; opacity: 1; } to { scale: .92; opacity: .35; } }
}

/* Телефон и планшет: меньше и без лишнего */
@media (max-width: 1024px) {
    .mascot-stage { max-width: 250px; }
    .crystal-sparks i:nth-child(n+5) { display: none; }
}
@media (max-width: 480px) {
    .mascot-stage { max-width: 200px; animation-name: avenFloatSm; }
    .mascot-halo { opacity: .7; }
    .crystal-sparks i { width: 3px; height: 3px; }
}

/* ── Частицы фона хиро (26.10.2026) ──────────────────────────────────────────────────────────────
   Только transform/opacity, анимации на компоновщике: дёшево и на телефоне, поэтому работают и в fx-lite.
   Значения каждой частицы задаются в разметке (index.html) через --x/--y/--d/--t/--sz/--dx/--c. */
.hero-sparkles {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.hero-sparkles i { position: absolute; display: block; will-change: transform, opacity; }

/* искры: поднимаются снизу вверх с лёгким сносом, задержка отрицательная — на старте уже летят */
.hs-mote {
    left: var(--x);
    top: 96%;
    width: var(--sz);
    height: var(--sz);
    border-radius: 50%;
    background: #f3e8ff;
    box-shadow: 0 0 6px 1px rgba(192, 132, 252, .9), 0 0 16px 3px rgba(139, 92, 246, .45);
    opacity: 0;
    animation: hsRise var(--t) linear calc(var(--d) * -1) infinite;
}
@keyframes hsRise {
    0% { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; }
    12% { opacity: .95; }
    55% { transform: translate3d(var(--dx), -48vh, 0) scale(1); }
    85% { opacity: .7; }
    100% { transform: translate3d(calc(var(--dx) * -.5), -92vh, 0) scale(.4); opacity: 0; }
}

/* звёзды-блики: крест из двух лучей и светлое ядро, мерцают на месте */
.hs-star {
    left: var(--x);
    top: var(--y);
    width: var(--sz);
    height: var(--sz);
    margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
    background: radial-gradient(circle, #fff 0 9%, rgba(233, 213, 255, .85) 14%, rgba(192, 132, 252, .35) 30%, transparent 55%);
    opacity: 0;
    animation: hsTwinkle var(--t) ease-in-out var(--d) infinite;
}
.hs-star::before, .hs-star::after {
    content: '';
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(243, 232, 255, .95), transparent);
}
.hs-star::before { left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; }
.hs-star::after { top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, rgba(243, 232, 255, .95), transparent); }
@keyframes hsTwinkle {
    0%, 100% { transform: scale(.2) rotate(0deg); opacity: 0; }
    45% { transform: scale(1) rotate(30deg); opacity: 1; }
    60% { transform: scale(.85) rotate(40deg); opacity: .8; }
}

/* мягкие пятна света: медленно дрейфуют и дышат */
.hs-bokeh {
    left: var(--x);
    top: var(--y);
    width: var(--sz);
    height: var(--sz);
    margin: calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--c), .26) 0%, rgba(var(--c), .1) 45%, transparent 70%);
    animation: hsDrift var(--t) ease-in-out calc(var(--d) * -1) infinite alternate;
}
@keyframes hsDrift {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; }
    50% { opacity: 1; }
    100% { transform: translate3d(40px, -30px, 0) scale(1.15); opacity: .6; }
}

/* телефон: меньше частиц */
@media (max-width: 480px) {
    .hs-mote:nth-child(2n), .hs-star:nth-of-type(n+24) { display: none; }
    .hs-bokeh { width: 110px; height: 110px; margin: -55px 0 0 -55px; }
}
/* лёгкий режим: половина искр, без пятен (они крупные) */
html.fx-lite .hs-mote:nth-child(2n), html.fx-lite .hs-bokeh { display: none; }

/* Лёгкий режим: без блика, лучей, ореола и искр, но покачивание (.mascot-stage) и пульс кристалла остаются.
   Старое правило fx3d.css html.fx-lite .hero-mascot-img { animation: none } на это не влияет: плавает сцена, а не картинка */
html.fx-lite .hero-mascot .hero-mascot-img, html.fx-lite .mascot-shine::before,
html.fx-lite .mascot-crystal::after, html.fx-lite .mascot-halo,
html.fx-lite .hero-mascot { animation: none !important; }
html.fx-lite .crystal-sparks, html.fx-lite .mascot-shine { display: none; }
@media (prefers-reduced-motion: reduce) {
    .mascot-stage, .hero-mascot .hero-mascot-img, .mascot-shine::before, .mascot-crystal::before,
    .mascot-crystal::after, .mascot-halo, .hero-mascot { animation: none !important; }
    .crystal-sparks, .mascot-shine { display: none; }
    .mascot-crystal { transition: none; }
    /* частицы: искры убираем, звёзды и пятна остаются неподвижными */
    .hs-mote { display: none; }
    .hs-star, .hs-bokeh { animation: none !important; opacity: .6; }
}