/* Сцена справа: тёмная в обеих темах, в светлой — чистая светлая. Полотно сцены в em: 1em = 10px на широком экране
   и сжимается вместе с шириной сцены. Части появляются, когда у сцены класс is-on (js/service_hero.js). */

.svc-scene {
    --svc-w: 52;
    --svc-tone: #7fd6b0;
    --svc-chip: rgba(255, 255, 255, 0.1);
    --svc-card: var(--surface-primary);
    --svc-line: rgba(255, 255, 255, 0.1);
    --svc-cap: rgba(255, 255, 255, 0.56);
    --svc-ink: #fff;
    --svc-shadow: 0 2.4em 6em -2em rgba(0, 0, 0, 0.7);
    /* лист резюме и письма: в тёмной теме тёмный, как карточки */
    --svc-p-sub: rgba(255, 255, 255, 0.56);
    --svc-p-mute: rgba(255, 255, 255, 0.4);
    --svc-p-tag: rgba(255, 255, 255, 0.08);
    --svc-p-hit: #9fe3c4;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 8px;
    padding: 16px 24px 20px;
    border-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
    container-type: inline-size;
    color: var(--svc-ink);
    background: var(--bg-color);
}

html:not(.dark-theme) .svc-scene {
    --svc-tone: #23875a;
    --svc-chip: #fff;
    --svc-card: #fff;
    --svc-line: rgba(0, 0, 0, 0.07);
    --svc-cap: #737373;
    --svc-ink: #121212;
    --svc-shadow: 0 1.2em 3.2em -1.6em rgba(0, 0, 0, 0.14);
    --svc-p-sub: #6b7370;
    --svc-p-mute: #9aa19e;
    --svc-p-tag: #f0f2f1;
    --svc-p-hit: #17694b;
    background: #f4f4f4;
}
.svc-scene > * { position: relative; }

.svc-pill {
    padding: 6px 12px;
    border-radius: 12px;
    background: var(--svc-chip);
    font-size: var(--fs-16);
    font-weight: var(--fw-medium);
    line-height: var(--lh-16);
    letter-spacing: var(--ls-16);
}

.svc-status { display: inline-flex; align-items: center; gap: 8px; color: var(--svc-cap); font-size: var(--fs-16); line-height: var(--lh-16); letter-spacing: var(--ls-16); }
.svc-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--svc-tone); animation: svc-pulse 1.6s ease-in-out infinite; }
@keyframes svc-pulse { 50% { opacity: 0.35; scale: 0.8; } }

/* Полотно сцены: размеры в em, сжимается по ширине сцены */
.svc-stage {
    position: relative;
    flex: none;
    --svc-h: 40;
    width: calc(var(--svc-w) * 1em);
    height: calc(var(--svc-h) * 1em);
    font-size: min(10px, calc(100cqw / var(--svc-w)));
    transition: opacity 0.45s ease;
}

.svc-scene.is-off .svc-stage { opacity: 0; }
.svc-stage > * { position: absolute; }

/* Появление частей сцены: задержка --d в долях секунды */
.svc-in { opacity: 0; translate: 0 1.2em; }
.svc-scene.is-on .svc-in { animation: svc-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0) * 1s) both; }
@keyframes svc-in { to { opacity: 1; translate: 0 0; } }

/* ---------- Лист резюме ---------- */

.svc-paper {
    box-sizing: border-box;
    padding: 2.4em 2.4em 2.6em;
    border-radius: 1.4em;
    background: var(--svc-card);
    color: var(--svc-ink);
    box-shadow: 0 0 0 0.4em var(--bg-color), var(--svc-shadow);
    overflow: hidden;
}

.svc-paper > * { font-size: 1.1em; line-height: 1.45; }
.svc-p-head { display: flex; align-items: center; gap: 1.1em; }
.svc-p-ava { flex: none; display: grid; place-items: center; width: 4em; height: 4em; border-radius: 50%; background: linear-gradient(135deg, #4db288, #fed88e); color: #fff; font-weight: 600; font-size: 1.1em; }
.svc-p-head b { display: block; font-size: 1.5em; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.svc-p-head > div span { display: block; color: var(--svc-p-sub); }
.svc-p-sec { margin-top: 1.5em; }
.svc-p-sec > h4 { margin: 0 0 0.5em; color: var(--svc-p-mute); font-size: 0.82em; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.svc-p-sec p { margin: 0; }
.svc-p-job { display: flex; justify-content: space-between; gap: 1em; margin-top: 0.9em; font-weight: 600; }
.svc-p-job:first-of-type { margin-top: 0; }
.svc-p-job span { flex: none; color: var(--svc-p-mute); font-weight: 400; }
.svc-p-li { position: relative; display: block; margin-top: 0.3em; padding-left: 1em; border-radius: 0.4em; }
.svc-p-li::before { content: ""; position: absolute; left: 0.15em; top: 0.62em; width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--svc-p-mute); }
.svc-p-tags { display: flex; flex-wrap: wrap; gap: 0.5em; }
.svc-p-tags i { padding: 0.25em 0.8em; border-radius: 0.7em; background: var(--svc-p-tag); font-style: normal; transition: background 0.4s ease, color 0.4s ease; }

/* Пометки на листе: зелёная — сильное место, оранжевая — стоит поправить */
.svc-hl { box-shadow: 0 0 0 0.35em transparent; border-radius: 0.3em; }
.svc-scene.is-on .svc-hl { animation: svc-hl-ok 0.6s ease calc(var(--d, 0) * 1s) both; }
.svc-scene.is-on .svc-hl.is-warn { animation-name: svc-hl-warn; }
@keyframes svc-hl-ok { to { background: rgba(77, 178, 136, 0.22); box-shadow: 0 0 0 0.35em rgba(77, 178, 136, 0.22); } }
@keyframes svc-hl-warn { to { background: rgba(240, 138, 75, 0.24); box-shadow: 0 0 0 0.35em rgba(240, 138, 75, 0.24); } }
.svc-hl.is-block { display: block; margin: 0 -0.6em; padding: 0.4em 0.6em; border-radius: 0.6em; box-shadow: none !important; }
.svc-scene.is-on .svc-p-tags i.is-hit { animation: svc-hit 0.5s ease calc(var(--d, 0) * 1s) both; }
@keyframes svc-hit { to { background: rgba(77, 178, 136, 0.24); color: var(--svc-p-hit); } }

/* Луч проверки проходит по листу сверху вниз */
.svc-paper.is-scan::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 9em;
    background: linear-gradient(180deg, transparent, rgba(77, 178, 136, 0.28));
    border-bottom: 0.2em solid #4db288;
    translate: 0 -100%;
    opacity: 0;
}
.svc-scene.is-on .svc-paper.is-scan::after { animation: svc-scan 2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both; }
@keyframes svc-scan { 0% { translate: 0 -100%; opacity: 1; } 85% { opacity: 1; } 100% { translate: 0 46em; opacity: 0; } }

/* Замена строки: старая уходит, новая встаёт на её место */
.svc-swap { display: grid; }
.svc-swap > * { grid-area: 1 / 1; }
.svc-swap s { color: var(--svc-p-mute); }
.svc-swap b { font-weight: 400; opacity: 0; }
.svc-swap mark { padding: 0 0.25em; border-radius: 0.3em; background: rgba(77, 178, 136, 0.26); color: inherit; }
.svc-scene.is-on .svc-swap s { animation: svc-swap-out 0.5s ease calc(var(--d, 0) * 1s) both; }
.svc-scene.is-on .svc-swap b { animation: svc-swap-in 0.6s ease calc(var(--d, 0) * 1s + 0.35s) both; }
@keyframes svc-swap-out { to { opacity: 0; translate: 0 -0.6em; } }
@keyframes svc-swap-in { from { opacity: 0; translate: 0 0.6em; } to { opacity: 1; translate: 0 0; } }

/* Набор текста по строкам */
.svc-type { display: block; clip-path: inset(0 100% 0 0); }
.svc-scene.is-on .svc-type { animation: svc-type 0.9s linear calc(var(--d, 0) * 1s) both; }
@keyframes svc-type { to { clip-path: inset(0 0 0 0); } }

/* ---------- Карточки поверх листа ---------- */

.svc-card {
    box-sizing: border-box;
    padding: 2em;
    border-radius: 2em;
    background: var(--svc-card);
    box-shadow: 0 0 0 0.4em var(--bg-color), var(--svc-shadow);
}

.svc-card > * { font-size: 1.4em; line-height: 1.4; }
.svc-cap { display: block; color: var(--svc-cap); font-size: 1.2em; }

.svc-ring { position: relative; display: grid; place-items: center; width: 8.6em; height: 8.6em; margin: 0 auto; }
.svc-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.svc-ring circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.svc-ring circle:first-child { stroke: var(--svc-line); }
.svc-ring circle:last-child { stroke: #4db288; stroke-dasharray: 327; stroke-dashoffset: 327; }
.svc-scene.is-on .svc-ring circle:last-child { transition: stroke-dashoffset 1.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0) * 1s); stroke-dashoffset: calc(327 - 327 * var(--p)); }
.svc-ring b { font-size: 2.6em; line-height: 1; font-weight: var(--fw-semibold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.svc-ring small { display: block; margin-top: 0.3em; color: var(--svc-cap); font-size: 0.86em; text-align: center; }
.svc-ring > div { text-align: center; }

.svc-rows { margin-top: 1em; }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) 4.2em 1.6em; align-items: center; gap: 0.8em; padding: 0.62em 0; }
.svc-row + .svc-row { border-top: 1px solid var(--svc-line); }
.svc-row u { height: 0.4em; border-radius: 0.2em; background: var(--svc-line); overflow: hidden; text-decoration: none; }
.svc-row u::before { content: ""; display: block; height: 100%; width: calc(var(--v) * 1%); border-radius: inherit; background: #4db288; transform-origin: left; scale: 0 1; }
.svc-row.is-weak u::before { background: #f08a4b; }
.svc-scene.is-on .svc-row u::before { transition: scale 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0) * 1s); scale: 1 1; }
.svc-row em { color: var(--svc-cap); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }

/* Требования вакансии: совпало / не хватает */
.svc-req { display: flex; align-items: center; gap: 0.7em; padding: 0.5em 0; }
.svc-req i { flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--svc-line); color: var(--svc-cap); font-style: normal; font-size: 0.8em; }
.svc-req i::before { content: "–"; }
.svc-req.is-miss { color: var(--svc-cap); }
.svc-scene.is-on .svc-req:not(.is-miss) i { animation: svc-req 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--d, 0) * 1s) both; }
.svc-scene.is-on .svc-req:not(.is-miss) i::before { content: "✓"; }
@keyframes svc-req { from { scale: 0.4; } to { scale: 1; background: #4db288; color: #fff; } }
.svc-card h5 { margin: 0 0 0.1em; font-size: 1.6em; line-height: 1.25; font-weight: var(--fw-semibold); }

/* Плашки-спутники */
.svc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.8em;
    padding: 0.9em 1.4em 0.9em 0.9em;
    border-radius: 1.6em;
    background: var(--svc-card);
    box-shadow: 0 0 0 0.4em var(--bg-color), var(--svc-shadow);
    white-space: nowrap;
}
.svc-badge > span { font-size: 1.4em; line-height: 1.3; }
.svc-badge small { display: block; color: var(--svc-cap); font-size: 0.86em; }
.svc-badge > i { flex: none; display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 1em; background: rgba(77, 178, 136, 0.18); color: #4db288; font-style: normal; }
.svc-badge > i svg { width: 1.8em; height: 1.8em; }
.svc-badge.is-warm > i { background: rgba(240, 138, 75, 0.18); color: #f08a4b; }
.svc-float { opacity: 0; }
.svc-scene.is-on .svc-float { animation: svc-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--d, 0) * 1s) both, svc-float 5s ease-in-out calc(var(--d, 0) * 1s + 0.7s) infinite; }
@keyframes svc-float { 50% { translate: 0 -0.6em; } }

/* Список возможностей в карточке: значок загорается, когда доходит очередь */
.svc-feats { padding: 0.6em 1.8em; }
.svc-feat { display: flex; align-items: center; gap: 0.8em; padding: 0.8em 0; }
.svc-feat + .svc-feat { border-top: 1px solid var(--svc-line); }
.svc-feat i { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 0.7em; background: var(--svc-line); color: var(--svc-cap); font-style: normal; }
.svc-feat i svg { width: 1.3em; height: 1.3em; }
.svc-feat small { display: block; color: var(--svc-cap); font-size: 0.86em; }
.svc-scene.is-on .svc-feat i { animation: svc-feat 0.5s ease calc(var(--d, 0) * 1s) both; }
@keyframes svc-feat { to { background: rgba(77, 178, 136, 0.18); color: #4db288; } }

/* Профиль LinkedIn */
.svc-profile { padding: 0; overflow: hidden; }
.svc-profile-cover { height: 6.4em; background: linear-gradient(110deg, #1f7f5c, #4db288 45%, #fed88e); }
.svc-profile-body { padding: 0 2em 2em; }
.svc-profile-body > * { font-size: 1.4em; line-height: 1.4; }
.svc-profile .svc-p-ava { width: 4.6em; height: 4.6em; margin-top: -2.3em; border: 0.25em solid var(--svc-card); font-size: 1.5em; }
.svc-profile b.svc-name { display: block; margin-top: 0.5em; font-size: 1.8em; font-weight: var(--fw-semibold); }
.svc-profile .svc-swap s { color: var(--svc-cap); }
.svc-profile p { margin: 0.9em 0 0; color: var(--svc-cap); }

/* Источники письма */
.svc-plus { color: var(--svc-cap); font-size: 2em; }

/* ---------- Расклад сцен ---------- */

[data-svc-scene="cv"] { --svc-h: 35; }
[data-svc-scene="cv"] .svc-paper { left: 0; top: 0; width: 31em; }
[data-svc-scene="cv"] .svc-card { right: 0; top: 2em; width: 23em; }

[data-svc-scene="match"] { --svc-h: 43; }
[data-svc-scene="match"] .svc-paper { left: 0; top: 7em; width: 28em; }
[data-svc-scene="match"] .svc-card { right: 0; top: 11em; width: 25em; }
[data-svc-scene="match"] .svc-ring { position: absolute; margin: 0; left: 21em; top: 0; width: 12em; height: 12em; border-radius: 50%; background: var(--svc-card); box-shadow: 0 0 0 0.4em var(--bg-color), var(--svc-shadow); font-size: 1em; }
[data-svc-scene="match"] .svc-ring svg { inset: 1em; width: auto; height: auto; }
[data-svc-scene="match"] .svc-ring b { font-size: 3.4em; }
[data-svc-scene="match"] .svc-ring small { font-size: 1.2em; }

[data-svc-scene="tailor"] { --svc-h: 39; }
[data-svc-scene="tailor"] .svc-paper { left: 8em; top: 4em; width: 36em; }
[data-svc-scene="tailor"] .svc-b1 { left: 0; top: 0; }
[data-svc-scene="tailor"] .svc-b2 { right: 0; bottom: 2em; }

[data-svc-scene="cover"] { --svc-h: 36; }
[data-svc-scene="cover"] .svc-paper { left: 6em; top: 8em; width: 40em; padding: 3em; }
[data-svc-scene="cover"] .svc-paper > * { font-size: 1.4em; line-height: 1.55; }
[data-svc-scene="cover"] .svc-paper p { margin: 0 0 0.9em; }
[data-svc-scene="cover"] .svc-paper p:last-child { margin: 0; }
[data-svc-scene="cover"] .svc-b1 { right: 28.5em; top: 0; }
[data-svc-scene="cover"] .svc-b2 { left: 28.5em; top: 0; }
[data-svc-scene="cover"] .svc-plus { left: 12.7em; top: 0.5em; line-height: 1; }
[data-svc-scene="cover"] mark { padding: 0 0.25em; border-radius: 0.3em; background: rgba(77, 178, 136, 0.26); color: inherit; }

[data-svc-scene="linkedin"] { --svc-h: 33; }
[data-svc-scene="linkedin"] .svc-profile { left: 0; top: 0; width: 31em; }
[data-svc-scene="linkedin"] .svc-scorecard { right: 0; top: 0; width: 22.5em; }
[data-svc-scene="linkedin"] .svc-profile { top: 1.5em; }

[data-svc-scene="builder"] { --svc-h: 30; }
[data-svc-scene="builder"] .svc-paper { left: 0; top: 0; width: 30em; }
[data-svc-scene="builder"] .svc-feats { right: 0; top: 2.5em; width: 24em; }
.svc-profile > * { font-size: 1em; }

/* Узкая сцена (телефон): тот же сюжет, плотнее */
@container (max-width: 440px) {
    .svc-stage { --svc-w: 36; }
    [data-svc-scene="cv"] { --svc-h: 53; }
    [data-svc-scene="cv"] .svc-paper { width: 28em; }
    [data-svc-scene="cv"] .svc-card { top: 20em; width: 21em; }
    [data-svc-scene="match"] { --svc-h: 57; }
    [data-svc-scene="match"] .svc-paper { top: 9em; width: 26em; }
    [data-svc-scene="match"] .svc-card { top: 25em; width: 22em; }
    [data-svc-scene="match"] .svc-ring { left: 22em; top: 0; }
    [data-svc-scene="tailor"] { --svc-h: 42; }
    [data-svc-scene="tailor"] .svc-paper { left: 0; top: 3em; width: 36em; }
    [data-svc-scene="tailor"] .svc-b1 { left: auto; right: 0; }
    [data-svc-scene="tailor"] .svc-b2 { bottom: 0; }
    [data-svc-scene="cover"] { --svc-h: 34; }
    [data-svc-scene="cover"] .svc-paper { left: 0; top: 8em; width: 36em; padding: 2.4em; }
    [data-svc-scene="cover"] .svc-b1 { right: 19.5em; top: 0; }
    [data-svc-scene="cover"] .svc-b2 { left: 19.5em; top: 0; }
    [data-svc-scene="cover"] .svc-plus { left: 8.6em; top: -0.3em; }
    [data-svc-scene="linkedin"] { --svc-h: 60; }
    [data-svc-scene="linkedin"] .svc-profile { width: 30em; }
    [data-svc-scene="linkedin"] .svc-profile { top: 0; }
    [data-svc-scene="linkedin"] .svc-scorecard { top: 27em; width: 21em; }
    [data-svc-scene="builder"] { --svc-h: 52; }
    [data-svc-scene="builder"] .svc-paper { width: 30em; }
    [data-svc-scene="builder"] .svc-feats { top: 26.5em; width: 24em; }
}

@media (max-width: 1279px) {
    .svc-scene { padding: 16px 16px 20px; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .svc-scene *, .svc-scene *::before, .svc-scene *::after { animation-duration: 0.01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}