/* ═══════════════════════════════════════════════════════════════════
   Космический Оракул — v2.05 «ГОРЯЩИЙ МАСТЕР».
   Зажигаем публичную страницу мастера (master.php) до уровня «Горящей
   станции» (v2.04) и «Горящей орбиты» /uslugi/ (v2.03): огненные
   токены, полоса прогресса чтения, живая аура героя, голографическая
   коническая рамка с угловыми скобками HUD и скан-линией, мерцающее
   огненное имя, 3D-наклон и прожектор на карточках прейскуранта,
   неоновые цены, голографическая галерея, энергетические отзывы,
   огненный CTA и пульс легенды рейтинга.
   Слой оформления: вся логика master.php (заказ, консоль, админка)
   не тронута. Ванильно, уважает prefers-reduced-motion, без JS всё
   видно (всё завязано на .fire-on).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 0. огненные токены страницы мастера ─────────────────────────── */
.cmp-page {
    --fire1: #ffe27a;
    --fire2: #ffab4d;
    --fire3: #ff5e7e;
    --fire4: #b76bff;
    --grad-fire: linear-gradient(92deg, var(--fire1), var(--fire2) 38%, var(--fire3) 72%, var(--fire4));
    --grad-ion: linear-gradient(92deg, #a8f6ff, #5ee2f0 55%, #7ea8ff);
    --mst-fire-ink: #1d0b02;
}

/* ── 1. полоса прогресса чтения ──────────────────────────────────── */
#mstFire {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 96;
    pointer-events: none;
    background: linear-gradient(90deg, var(--ion, #5ee2f0), var(--fire2, #ffab4d) 55%, var(--fire3, #ff5e7e));
    transform-origin: 0 50%;
    transform: scaleX(0);
    box-shadow: 0 0 14px rgba(94, 226, 240, .65), 0 0 30px rgba(255, 171, 77, .35);
}

/* ── 1а. навигация шапки: стилей .header-nav не существовало —
          ссылки слипались в кучу; flex + огненный hover ─────────────── */
.header-nav { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.header-nav a {
    color: rgba(239, 233, 255, .75);
    text-decoration: none;
    font-size: 14px;
    transition: color .2s ease, text-shadow .2s ease;
}
.header-nav a:hover {
    color: var(--fire1, #ffe27a);
    text-shadow: 0 0 12px rgba(255, 171, 77, .55);
}

/* ── 2. герой мастера: аура, голограф, скан-линия ────────────────── */
html.fire-on .cmp-page .cmp-hero { position: relative; overflow: hidden; }

.mst-fire-aura {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    filter: blur(2px);
}
.mst-fire-aura i {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    animation: mstAura 17s ease-in-out infinite alternate;
}
.mst-fire-aura i:nth-child(1) {
    width: 480px; height: 480px; left: -140px; top: -180px;
    background: radial-gradient(circle at 42% 40%, rgba(94, 226, 240, .30), transparent 66%);
}
.mst-fire-aura i:nth-child(2) {
    width: 560px; height: 560px; right: -170px; top: -120px;
    background: radial-gradient(circle at 55% 45%, rgba(255, 171, 77, .28), transparent 66%);
    animation-delay: -6s; animation-duration: 21s;
}
.mst-fire-aura i:nth-child(3) {
    width: 460px; height: 460px; left: 38%; bottom: -260px;
    background: radial-gradient(circle at 50% 50%, rgba(255, 94, 126, .20), transparent 64%);
    animation-delay: -11s; animation-duration: 25s;
}
@keyframes mstAura {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(42px, 24px, 0) scale(1.1); }
}

/* голографическая коническая рамка героя */
html.fire-on .cmp-page .cmp-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 9;
    pointer-events: none;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--mst-holo, 0deg), transparent 0 12%, rgba(255, 226, 122, .85) 18%, transparent 26% 58%, rgba(94, 226, 240, .7) 66%, transparent 74%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) exclude;
    animation: mstHoloSpin 6s linear infinite;
}
@property --mst-holo { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes mstHoloSpin { to { --mst-holo: 360deg; } }

/* угловые скобки HUD */
.mst-c {
    position: absolute;
    z-index: 10;
    width: 22px; height: 22px;
    border: 2px solid rgba(255, 216, 119, .9);
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(255, 171, 77, .7));
    animation: mstBlink 3.2s ease-in-out infinite;
}
.mst-c.c1 { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.mst-c.c2 { top: 10px; right: 10px; border-left: none; border-bottom: none; animation-delay: .8s; }
.mst-c.c3 { bottom: 10px; left: 10px; border-right: none; border-top: none; animation-delay: 1.6s; }
.mst-c.c4 { bottom: 10px; right: 10px; border-left: none; border-top: none; animation-delay: 2.4s; }
@keyframes mstBlink { 50% { opacity: .35; } }

/* скан-линия просмотра по фото героя */
.mst-scan {
    position: absolute;
    left: 0; right: 0;
    top: -8%;
    height: 9%;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(168, 246, 255, .16) 55%, rgba(168, 246, 255, .32) 88%, transparent);
    border-bottom: 1px solid rgba(168, 246, 255, .4);
    box-shadow: 0 0 22px rgba(94, 226, 240, .3);
    animation: mstScanMove 6.5s ease-in-out infinite;
    opacity: 0;
}
html.fire-on .mst-scan { opacity: 1; }
@keyframes mstScanMove {
    0%   { top: -10%; opacity: 0; }
    12%  { opacity: 1; }
    88%  { opacity: 1; }
    100% { top: 102%; opacity: 0; }
}

/* слои героя: туманность и аура — под фото, звёзды и тело — поверх */
html.fire-on .cmp-page .cmp-hero img.cmp-photo { position: relative; z-index: 1; }
html.fire-on .cmp-page .cmp-hero .cmp-stars-bg { z-index: 2; }
html.fire-on .cmp-page .cmp-hero .cmp-hero-body { z-index: 3; }
html.fire-on .cmp-page .cmp-hero .mst-nebula { z-index: 0; }
html.fire-on .cmp-page .cmp-hero .mst-fire-aura { z-index: 0; }

/* параллакс туманности героя за курсором (JS ставит --px/--py) */
html.fire-on .mst-nebula {
    position: absolute;
    inset: -12%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(42% 55% at 22% 30%, rgba(94, 226, 240, .10), transparent 70%),
        radial-gradient(50% 60% at 78% 24%, rgba(255, 171, 77, .10), transparent 72%),
        radial-gradient(46% 52% at 55% 85%, rgba(183, 107, 255, .09), transparent 70%);
    transform: translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 9px), 0);
    transition: transform .3s ease-out;
}

/* имя мастера: мерцающий огненный градиент */
html.fire-on .cmp-page .cmp-name {
    background: linear-gradient(94deg, #f2fbff 0%, #a8f6ff 20%, var(--fire1) 44%, var(--fire2) 62%, var(--fire3) 84%, var(--fire4) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 24px rgba(255, 171, 77, .22)) drop-shadow(0 4px 26px rgba(94, 226, 240, .16));
    animation: mstShimmer 7s ease-in-out infinite alternate;
    width: fit-content;
}
@keyframes mstShimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
/* станция-приписка внутри градиентного имени возвращается в обычный цвет */
html.fire-on .cmp-page .cmp-name i {
    -webkit-text-fill-color: var(--gold-soft);
    color: var(--gold-soft);
    filter: none;
}

/* кикер героя: станционный HUD-титул */
.mst-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font: 600 10.5px/1.4 'Onest', system-ui, sans-serif;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(168, 246, 255, .78);
    border: 1px solid rgba(94, 226, 240, .3);
    background: rgba(7, 10, 26, .55);
    padding: 8px 14px;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.mst-kicker i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--fire2, #ffab4d);
    box-shadow: 0 0 10px var(--fire2, #ffab4d), 0 0 22px rgba(255, 171, 77, .6);
    animation: mstBlink 1.6s ease-in-out infinite;
}

/* чип статуса и цена: горячие */
.cmp-page .cmp-meta .cm-status.star {
    border-color: rgba(255, 171, 77, .55);
    background: linear-gradient(120deg, rgba(255, 190, 80, .16), rgba(255, 94, 126, .1));
    color: #ffd977;
    box-shadow: 0 0 16px rgba(255, 171, 77, .22);
    animation: mstChipFire 2.4s ease-in-out infinite;
}
@keyframes mstChipFire {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 171, 77, .16); }
    50%      { box-shadow: 0 0 26px rgba(255, 171, 77, .4); }
}
html.fire-on .cmp-page .cmp-price-range {
    color: #ffd977;
    text-shadow: 0 0 12px rgba(255, 171, 77, .35);
}

/* ── 3. HUD-паспорта разделов страницы ───────────────────────────── */
.cmp-page .cmp-block { position: relative; }
.cmp-page .cmp-block > .fire-tag {
    position: absolute;
    top: -22px; right: 2px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: 600 9.5px/1 'Onest', system-ui, sans-serif;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(168, 246, 255, .55);
    pointer-events: none;
    white-space: nowrap;
}
.cmp-page .cmp-block > .fire-tag::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fire2, #ffab4d);
    box-shadow: 0 0 8px rgba(255, 171, 77, .8);
    animation: mstBlink 2.2s ease-in-out infinite;
}
.cmp-page #price > .fire-tag,
.cmp-page #gallery > .fire-tag { color: rgba(255, 216, 119, .72); }
/* тег CTA: абсолют внутри огненной плашки призыва */
.cmp-page .cmp-cta > .fire-tag {
    position: absolute;
    top: 10px; right: 14px;
    color: rgba(255, 216, 119, .72);
}

/* заголовки разделов: огненное подчёркивание */
html.fire-on .cmp-page .cmp-block > h3::after {
    background: linear-gradient(90deg, rgba(255, 171, 77, .65), rgba(94, 226, 240, .4) 55%, transparent);
}

/* ── 4. каскадное появление блоков ───────────────────────────────── */
html.fire-on .cmp-page .mst-hide { opacity: 0; transform: translateY(26px); }
html.fire-on .cmp-page .mst-hide.mst-in {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease, transform .8s cubic-bezier(.19, 1, .22, 1);
}

/* ── 5. прейскурант: tilt + прожектор + скан-линия + неон ────────── */
html.fire-on .cmp-page .cmp-price-card {
    transform: perspective(800px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition: transform .16s ease, border-color .25s ease, box-shadow .25s ease;
    will-change: transform;
}
.cmp-page .cmp-price-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(94, 226, 240, .13), rgba(255, 171, 77, .08) 45%, transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 2;
}
.cmp-page .cmp-price-card:hover::after { opacity: 1; }
.cmp-page .cmp-price-card:hover {
    border-color: rgba(255, 171, 77, .5);
    box-shadow: 0 20px 46px rgba(0, 0, 0, .5), 0 0 26px rgba(255, 171, 77, .15);
}

/* скан-линия по фото услуги при наведении */
.cmp-price-card .mst-ph-scan {
    position: absolute;
    left: 0; right: 0; top: -12%;
    height: 14%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(168, 246, 255, .2) 60%, transparent);
    border-bottom: 1px solid rgba(168, 246, 255, .45);
    opacity: 0;
}
.cmp-page .cmp-price-card:hover .mst-ph-scan { opacity: 1; animation: mstScanMove 1.9s ease-in-out infinite; }

/* цена услуги: неоновый огонь */
html.fire-on .cmp-page .cmp-price-card .pr {
    background: var(--grad-fire);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 8px rgba(255, 171, 77, .35));
    font-family: 'Unbounded', var(--font-display, 'Onest', sans-serif), sans-serif;
    font-size: 14.5px;
}
html.fire-on .cmp-page .cmp-price-card .g { animation: mstGlyphFloat 3.6s ease-in-out infinite; }
@keyframes mstGlyphFloat {
    0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 9px rgba(94, 226, 240, .55)); }
    50%      { transform: translateY(-4px); filter: drop-shadow(0 0 14px rgba(255, 171, 77, .65)); }
}

/* кнопка быстрого заказа: огненная, с бегущим бликом */
/* кнопка — <a> (inline): overflow:hidden не клипает inline, блик вытекает
   за пределы. Делаем inline-flex — клип работает, текст по центру. */
.cmp-page .cmp-price-card .btn-magic.small,
.cmp-page .cmp-cta .btn-magic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
}
.cmp-page .cmp-price-card .btn-magic.small {
    background: var(--grad-fire);
    background-size: 160% 100%;
    color: var(--mst-fire-ink, #1d0b02);
    border: none;
    padding: 10px 14px;
    font-size: 14px;
    letter-spacing: .04em;
    box-shadow: 0 0 18px rgba(255, 171, 77, .32), 0 10px 28px -10px rgba(255, 94, 126, .45);
    overflow: hidden;
    position: relative;
}
.cmp-page .cmp-price-card .btn-magic.small span { position: relative; z-index: 1; }
.cmp-page .cmp-price-card .btn-magic.small::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -80%;
    width: 46%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-20deg);
    animation: mstSweep 3.4s ease-in-out infinite;
}
@keyframes mstSweep { 0%, 55% { left: -80%; } 90%, 100% { left: 130%; } }
.cmp-page .cmp-price-card .btn-magic.small:hover { filter: brightness(1.08) saturate(1.06); transform: translateY(-2px); }

/* ── 6. галерея работ: голограф и наведение ──────────────────────── */
html.fire-on .cmp-page .cmp-gal-item {
    transform: perspective(700px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
    transition: transform .16s ease, border-color .25s ease, box-shadow .25s ease;
    will-change: transform;
    position: relative;
}
.cmp-page .cmp-gal-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 171, 77, .16), transparent 62%);
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 2;
}
.cmp-page .cmp-gal-item:hover::after { opacity: 1; }
.cmp-page .cmp-gal-item:hover {
    border-color: rgba(255, 216, 119, .8);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 22px rgba(255, 171, 77, .18);
}

/* ── 7. отзывы: энергетические карточки ──────────────────────────── */
.cmp-page .cmp-review {
    position: relative;
    border-left: 3px solid rgba(94, 226, 240, .45);
    transition: border-color .25s ease, box-shadow .25s ease;
}
.cmp-page .cmp-review:hover {
    border-left-color: rgba(255, 171, 77, .85);
    box-shadow: inset 0 0 30px rgba(255, 171, 77, .06), 0 10px 26px rgba(0, 0, 0, .35);
}
html.fire-on .cmp-page .cmp-review .st {
    background: var(--grad-fire);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    filter: drop-shadow(0 0 8px rgba(255, 171, 77, .4));
}

/* легенда рейтинга: пульсирующее золото */
html.fire-on .cmp-page .cm-rate-badge.rt-legend { animation: mstLegend 2.6s ease-in-out infinite; }
@keyframes mstLegend {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 216, 119, .35); }
    50%      { box-shadow: 0 0 30px rgba(255, 216, 119, .7), 0 0 54px rgba(255, 94, 126, .25); }
}

/* ── 8. CTA: огненная кнопка события ─────────────────────────────── */
.cmp-page .cmp-cta {
    position: relative;
    overflow: hidden;
    padding-top: 40px;
    border-style: solid;
    border-color: rgba(255, 171, 77, .4);
    background:
        radial-gradient(120% 140% at 50% -20%, rgba(255, 171, 77, .12), transparent 55%),
        linear-gradient(160deg, rgba(13, 24, 48, .9), rgba(9, 16, 32, .95));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), inset 0 0 40px rgba(94, 226, 240, .05);
}
/* абзац не заезжает под угловой тег «СТЫКОВКА» */
.cmp-page .cmp-cta > p { padding: 0 30px; }
.cmp-page .cmp-cta .btn-magic {
    background: var(--grad-fire);
    background-size: 160% 100%;
    color: var(--mst-fire-ink, #1d0b02);
    border: none;
    box-shadow: 0 0 26px rgba(255, 171, 77, .38), 0 12px 34px -12px rgba(255, 94, 126, .5);
    animation: mstBtnFire 2.6s ease-in-out infinite;
    overflow: hidden;
    position: relative;
}
.cmp-page .cmp-cta .btn-magic span { position: relative; z-index: 1; }
.cmp-page .cmp-cta .btn-magic::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0; left: -80%;
    width: 46%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
    transform: skewX(-20deg);
    animation: mstSweep 3.4s ease-in-out infinite;
}
@keyframes mstBtnFire {
    0%, 100% { box-shadow: 0 0 22px rgba(255, 171, 77, .34), 0 12px 34px -12px rgba(255, 94, 126, .45); }
    50%      { box-shadow: 0 0 40px rgba(255, 171, 77, .6), 0 14px 44px -10px rgba(255, 94, 126, .65); }
}
.cmp-page .cmp-cta .btn-magic:hover { filter: brightness(1.08) saturate(1.06); transform: translateY(-2px); }

/* ── 9. 404-герой (нет такой звезды) — тоже в тоне огня ──────────── */
.cmp-page .cmp-hero.empty .cmp-photo-ph { position: relative; overflow: hidden; }

/* ── 10. мобильная версия ────────────────────────────────────────── */
@media (max-width: 720px) {
    .cmp-page .cmp-block > .fire-tag { display: none; }
    .mst-kicker { font-size: 9.5px; padding: 7px 11px; letter-spacing: .2em; }
    .mst-fire-aura i { filter: blur(54px); }
    .mst-c { width: 16px; height: 16px; }
    html.fire-on .cmp-page .cmp-price-card,
    html.fire-on .cmp-page .cmp-gal-item { transform: none !important; }
}

/* ── 11. reduced motion: всё видно, ничего не мельтешит ──────────── */
@media (prefers-reduced-motion: reduce) {
    .mst-fire-aura i,
    .mst-c,
    .mst-scan,
    .cmp-page .cmp-meta .cm-status.star,
    .cmp-page .cmp-price-card .g,
    .cmp-page .cmp-price-card .btn-magic.small::after,
    .cmp-page .cmp-cta .btn-magic,
    .cmp-page .cmp-cta .btn-magic::after,
    html.fire-on .cmp-page .cm-rate-badge.rt-legend { animation: none !important; }
    html.fire-on .cmp-page .cmp-hero::before { animation: none; }
    html.fire-on .cmp-page .cmp-name { animation: none; }
    html.fire-on .cmp-page .mst-hide { opacity: 1; transform: none; transition: none; }
    html.fire-on .mst-nebula { transition: none; }
    html.fire-on .cmp-page .cmp-price-card,
    html.fire-on .cmp-page .cmp-gal-item { transform: none !important; }
}