/* ═══════════════════════════════════════════════════════════════
   D16 — Service mascots + service tints
   Three chameleon mascots, one per service. Each carries its own body
   colour, used here only as a quiet secondary tint (glows, washes, rings).
   Gold and black stay the primary palette: no text, button or border
   is ever painted in a service colour.

   Assets (images/jsagency/maskot/):
     maskot-*-poza.webp     transparent poses built to sit on a card edge
                            (lean = flat ledge at the image bottom,
                             lie   = ledge at 72.1% of the width from top,
                             stand = toes on the image bottom, sink 3.3% of width)
     maskot-*-portret.webp  square bust on the original dark backdrop,
                            always shown inside a circular medallion

   Scope hooks: [data-svc="uctovnictvo|marketing|web"] on any ancestor.
   Load AFTER client-meeting-polish.css.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --svc-ucto-rgb: 140 96 220;
    --svc-mkt-rgb: 118 184 64;
    --svc-web-rgb: 54 132 236;
    --svc-rgb: 201 162 85;
    /* One knob for how strongly the service colours show through every
       glow, wash and ring below (1 = the original, very quiet level). */
    --svc-tint: 2.6;
}

[data-svc="uctovnictvo"] { --svc-rgb: var(--svc-ucto-rgb); }
[data-svc="marketing"]   { --svc-rgb: var(--svc-mkt-rgb); }
[data-svc="web"]         { --svc-rgb: var(--svc-web-rgb); }

/* ─── Shared mascot image ───────────────────────────────────────── */
.svc-mascot {
    position: absolute;
    display: block;
    pointer-events: none;
    transform-origin: 50% 100%;
    transition: transform 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.svc-mascot img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    filter:
        drop-shadow(0 14px 18px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 22px rgb(var(--svc-rgb) / min(1, calc(0.16 * var(--svc-tint)))));
}

/* Rise over the card edge once, as the cards themselves fade in. Runs on
   the mascot image element (via WOW) so the positioned wrapper keeps its hover transform.
   Moving down by N% while clipping the bottom N% keeps the visible lower
   edge pinned to the ledge, so the mascot emerges from behind it. */
@keyframes svcMascotRise {
    from {
        opacity: 0;
        transform: translate3d(0, 34%, 0);
        clip-path: inset(-60% -60% 34% -60%);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        clip-path: inset(-60% -60% -60% -60%);
    }
}

.svc-mascot img.svcMascotRise {
    animation-name: svcMascotRise;
    animation-duration: 1.15s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══ HOMEPAGE HERO CARDS ═══════════════════════════════════════ */
/* The slot already exists so the pictogram tile can escape the clipped
   card. Isolating it lets the mascots interleave with the card:
   lean mascot (2) < card (3) < tile (4) < lie/stand mascot (5). */
.hero > .container .hero-card-slot {
    isolation: isolate;
    --lift: 0px;
}

.hero > .container .hero-card-slot .hero-service-card { position: relative; z-index: 3; }
.hero > .container .hero-card-slot .hero-card-icon { z-index: 4; }

.hero > .container .hero-card-slot:has(.hero-service-card:hover),
.hero > .container .hero-card-slot:focus-within {
    --lift: -4px;
}

/* Service tint inside the card: a faint wash rising from the mascot's side. */
.hero > .container .hero-card-slot[data-svc] .hero-service-card {
    background:
        radial-gradient(110% 70% at var(--wash-x, 30%) 0%, rgb(var(--svc-rgb) / min(1, calc(0.085 * var(--svc-tint)))), transparent 62%),
        linear-gradient(155deg, #232323 0%, var(--surface) 55%, #121008 100%);
}

.hero > .container .hero-card-slot[data-svc] .hero-service-card:hover,
.hero > .container .hero-card-slot[data-svc] .hero-service-card:focus-visible {
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1.5px 0 rgba(0, 0, 0, 0.52),
        0 20px 42px -18px rgba(0, 0, 0, 0.78),
        0 8px 24px -12px rgba(201, 162, 85, 0.2),
        0 -18px 46px -26px rgb(var(--svc-rgb) / min(1, calc(0.55 * var(--svc-tint))));
}

/* 01 — accounting: rises from behind the top edge, left side. The pose is
   cut flat at the bottom, so the card must cover that cut: the mascot sits
   below the card in the stack and sinks a little behind its edge. */
.hero > .container .svc-mascot--lean {
    --mw: clamp(160px, 14.4vw, 224px);
    width: var(--mw);
    left: clamp(22px, 2.2vw, 32px);
    bottom: calc(100% - var(--mw) * 0.085);
    z-index: 2;
    transform: translate3d(0, var(--lift), 0);
}

.hero > .container .hero-card-slot:has(.hero-service-card:hover) .svc-mascot--lean {
    transform: translate3d(0, var(--lift), 0) rotate(-2.2deg);
}

/* 02 — marketing: lying along the top edge, tail draping over the card
   just left of the pictogram tile. */
.hero > .container .svc-mascot--lie {
    --mw: clamp(178px, 16.4vw, 248px);
    width: var(--mw);
    right: calc(clamp(72px, 4.8vw, 84px) + 30px);
    top: calc(var(--mw) * -0.721 + 9px);
    z-index: 5;
    transform: translate3d(0, var(--lift), 0);
}

.hero > .container .hero-card-slot:has(.hero-service-card:hover) .svc-mascot--lie {
    transform: translate3d(-4px, var(--lift), 0);
}

/* 03 — web: seated on the top edge, legs and tail hanging over the card
   face (sink = 0.33 × width; the figure is 1.323 × width tall). It is
   anchored just left of the pictogram tile so the tail never covers it;
   the extra card top padding below keeps the service label clear. */
.hero > .container .hero-card-slot[data-svc="web"] {
    --tile-r: 20px;
    --tile-w: clamp(72px, 4.8vw, 84px);
}

.hero > .container .svc-mascot--stand {
    --mw: clamp(132px, 11vw, 156px);
    width: var(--mw);
    right: calc(var(--tile-r) + var(--tile-w) + 8px - var(--mw) * 0.02);
    bottom: calc(100% - var(--mw) * 0.33);
    z-index: 5;
    transform: translate3d(0, var(--lift), 0);
}

.hero > .container .hero-card-slot:has(.hero-service-card:hover) .svc-mascot--stand {
    transform: translate3d(0, calc(var(--lift) - 2px), 0) rotate(1.6deg);
}

/* Legs (web) and tail (marketing) hang up to ~52px into the cards, so all
   three cards start their content lower; the label now lines up with the
   middle of the pictogram tile. */
.hero > .container .hero-card-slot .hero-service-card {
    padding-top: 52px;
}

/* Wash anchors per card */
.hero > .container .hero-card-slot[data-svc="uctovnictvo"] { --wash-x: 22%; }
.hero > .container .hero-card-slot[data-svc="marketing"]   { --wash-x: 56%; }
.hero > .container .hero-card-slot[data-svc="web"]         { --wash-x: 24%; }

/* Room above the cards for the mascots */
.hero > .container .hero-cards-grid {
    margin-top: clamp(128px, 11vw, 168px);
}

@media (max-width: 1199.98px) {
    .hero > .container .hero-cards-grid {
        row-gap: 0;
    }

    .hero > .container .hero-card-slot + .hero-card-slot {
        margin-top: clamp(150px, 20vw, 172px);
    }

    .hero > .container .svc-mascot--lean { --mw: clamp(150px, 26vw, 196px); }
    .hero > .container .svc-mascot--lie { --mw: clamp(168px, 30vw, 214px); }
    .hero > .container .svc-mascot--stand { --mw: clamp(120px, 30vw, 156px); }

    /* height above the card = 0.993 × width */
    .hero > .container .hero-card-slot[data-svc="web"] {
        margin-top: calc(clamp(120px, 30vw, 156px) + 16px);
    }
}

@media (max-width: 767.98px) {
    .hero > .container .hero-card-slot[data-svc="web"] { --tile-r: 18px; }

    .hero > .container .svc-mascot--lie {
        right: calc(72px + 32px);
    }
}

/* Narrow phones: the card label runs almost to the tile, so the tail must
   stay above the label line instead of fitting beside it. */
@media (max-width: 420px) {
    .hero > .container .svc-mascot--lie {
        --mw: 142px;
        right: 98px;
        top: calc(var(--mw) * -0.721 + 1px);
    }
}

/* ═══ CIRCULAR PORTRAIT MEDALLION ═══════════════════════════════ */
.svc-medallion {
    --size: 112px;
    position: relative;
    display: block;
    width: var(--size);
    height: var(--size);
    flex: 0 0 auto;
    border-radius: 50%;
    padding: 3px;
    background:
        conic-gradient(from 210deg,
            rgba(243, 223, 170, 0.95),
            rgba(201, 162, 85, 0.55) 28%,
            rgb(var(--svc-rgb) / min(1, calc(0.75 * var(--svc-tint)))) 52%,
            rgba(201, 162, 85, 0.55) 76%,
            rgba(243, 223, 170, 0.95));
    box-shadow:
        0 18px 34px -18px rgba(0, 0, 0, 0.9),
        0 10px 40px -14px rgb(var(--svc-rgb) / min(1, calc(0.42 * var(--svc-tint))));
}

.svc-medallion img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    /* the portraits are transparent: a dark disc lit from behind the head
       in the service colour, falling off to near-black at the rim */
    background:
        radial-gradient(circle at 50% 38%, rgb(var(--svc-rgb) / min(1, calc(0.34 * var(--svc-tint)))) 0%, rgb(var(--svc-rgb) / min(1, calc(0.1 * var(--svc-tint)))) 42%, transparent 70%),
        radial-gradient(circle at 50% 50%, #1a1712 0%, #0a0907 100%);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.svc-medallion::after {
    /* glassy top highlight */
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), transparent 38%);
    pointer-events: none;
}

/* Homepage service sections: the portrait is pressed onto the top-right
   corner of the "Problémy, ktoré riešime" card like a seal. It sits in the
   column (not the clipped card) and clears the card's own heading row. */
.homepage-service [class*="col-"]:has(> .svc-medallion--seal) {
    position: relative;
}

.svc-medallion--seal {
    --size: clamp(92px, 8.2vw, 120px);
    position: absolute;
    z-index: 2;
    top: calc(var(--size) * -0.62);
    right: clamp(20px, 2.4vw, 34px);
    transform: rotate(-6deg);
    transition: transform 0.7s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.homepage-service [class*="col-"]:has(> .problems-block:hover) > .svc-medallion--seal {
    transform: rotate(0deg) translateY(-4px);
}

@media (max-width: 991.98px) {
    .homepage-service [class*="col-"]:has(> .svc-medallion--seal) {
        margin-top: 56px;
    }
}

@media (max-width: 575.98px) {
    .svc-medallion--seal { --size: 84px; right: 16px; }
}

/* ═══ SERVICE AURA (section wash) ═══════════════════════════════ */
/* A field of soft service-colour glows behind a whole service section:
   one opening glow by the heading (::before), a closing glow near the end
   (::after), and between them a repeating rhythm that alternates right and
   left roughly every 760px, so a tall section never goes colourless. The
   field fades out at the section's top and bottom edges. */
.svc-aura {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    background-image:
        radial-gradient(ellipse min(34vw, 460px) 300px at 94% 28%, rgb(var(--svc-rgb) / min(1, calc(0.085 * var(--svc-tint)))), rgb(var(--svc-rgb) / min(1, calc(0.03 * var(--svc-tint)))) 50%, transparent 100%),
        radial-gradient(ellipse min(30vw, 420px) 280px at 4% 78%, rgb(var(--svc-rgb) / min(1, calc(0.075 * var(--svc-tint)))), rgb(var(--svc-rgb) / min(1, calc(0.025 * var(--svc-tint)))) 50%, transparent 100%);
    background-size: 100% 1520px;
    background-position: 0 420px;
    background-repeat: repeat-y;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 180px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 140px, #000 calc(100% - 180px), transparent 100%);
}

.svc-aura::before,
.svc-aura::after {
    content: '';
    position: absolute;
    aspect-ratio: 1.35;
    border-radius: 50%;
    filter: blur(8px);
}

.svc-aura::before {
    width: min(70vw, 900px);
    left: var(--aura-x, -12%);
    top: var(--aura-y, -8%);
    background: radial-gradient(closest-side, rgb(var(--svc-rgb) / min(1, calc(0.075 * var(--svc-tint)))), rgb(var(--svc-rgb) / min(1, calc(0.025 * var(--svc-tint)))) 55%, transparent);
}

.svc-aura::after {
    width: min(60vw, 760px);
    right: -16%;
    bottom: 4%;
    background: radial-gradient(closest-side, rgb(var(--svc-rgb) / min(1, calc(0.07 * var(--svc-tint)))), rgb(var(--svc-rgb) / min(1, calc(0.022 * var(--svc-tint)))) 55%, transparent);
}

.homepage-service .svc-aura { --aura-x: -14%; --aura-y: -6%; }

/* Anchored glows: light pooling behind the cards that carry the service
   message, so the colour also sits where the eye already is. */
.homepage-service [class*="col-"]:has(> .svc-medallion--seal)::before,
.svc-pricing-slot::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(10px);
}

.homepage-service [class*="col-"]:has(> .svc-medallion--seal)::before {
    left: 10%;
    right: -6%;
    top: -18%;
    bottom: -22%;
    background: radial-gradient(closest-side at 70% 40%, rgb(var(--svc-rgb) / min(1, calc(0.11 * var(--svc-tint)))), rgb(var(--svc-rgb) / min(1, calc(0.035 * var(--svc-tint)))) 55%, transparent);
}

.homepage-service [class*="col-"] > .problems-block { position: relative; z-index: 1; }

.svc-pricing-slot::before {
    left: -8%;
    right: -8%;
    top: -10%;
    bottom: -14%;
    background: radial-gradient(closest-side, rgb(var(--svc-rgb) / min(1, calc(0.1 * var(--svc-tint)))), rgb(var(--svc-rgb) / min(1, calc(0.03 * var(--svc-tint)))) 58%, transparent);
}

/* ═══ SERVICE SUBPAGES ══════════════════════════════════════════ */

/* Hero canvas: a low service-colour haze behind the orbit, under the gold */
.subpage[data-svc] .subpage-hero::before {
    background:
        radial-gradient(ellipse 46% 58% at 69% 52%, rgb(var(--svc-rgb) / min(1, calc(0.1 * var(--svc-tint)))), transparent 70%),
        radial-gradient(circle, rgba(201, 162, 85, 0.06) 0%, transparent 70%);
}

/* Mascot at the centre of the pictogram orbit. It lives inside the
   orbital world so the icons pass both behind and in front of it. */
/* Keep the inner pictogram ring clear of the mascot's silhouette. */
.subpage[data-svc] .subpage-hero > .vault-bg {
    --vault-orbit-inner-scale-min: 0.64;
}

.svc-orbit-core {
    --mw: clamp(236px, 21vw, 330px);
    position: absolute;
    left: calc(50% + var(--vault-orbit-shift-x, 0) * 100%);
    top: calc(50% + var(--vault-orbit-shift-y, 0) * 100%);
    width: var(--mw);
    transform: translate3d(-50%, -50%, 0);
    z-index: 4;
    pointer-events: none;
}

.svc-orbit-core__float {
    position: relative;
    display: block;
    animation: svcCoreFloat 7s ease-in-out infinite;
}

@keyframes svcCoreFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -10px, 0); }
}

.svc-orbit-core__halo {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 150%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(closest-side, rgb(var(--svc-rgb) / min(1, calc(0.34 * var(--svc-tint)))), rgb(var(--svc-rgb) / min(1, calc(0.12 * var(--svc-tint)))) 50%, transparent 76%);
    filter: blur(6px);
}

/* Floating glass ledge the lean/lie mascots rest on: the top of a card
   that dissolves into the dark below. */
.svc-orbit-core__ledge {
    position: absolute;
    left: -9%;
    right: -9%;
    height: 96px;
    border: 1px solid rgba(201, 162, 85, 0.55);
    border-bottom: 0;
    border-radius: 20px 20px 0 0;
    background:
        radial-gradient(90% 120% at 50% 0%, rgb(var(--svc-rgb) / min(1, calc(0.22 * var(--svc-tint)))), transparent 70%),
        linear-gradient(170deg, #2c281f 0%, #17150f 60%, #0c0b08 100%);
    box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.1);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 30%, transparent 100%);
}

.svc-orbit-core__ledge::before {
    /* gold rim light along the edge */
    content: '';
    position: absolute;
    left: 8%;
    right: 8%;
    top: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 236, 190, 0.95), transparent);
}

.svc-orbit-core .svc-mascot {
    position: relative;
    width: 100%;
    z-index: 1;
}

.svc-orbit-core .svc-mascot img {
    filter:
        drop-shadow(0 18px 22px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 30px rgb(var(--svc-rgb) / min(1, calc(0.22 * var(--svc-tint)))));
}

/* lean: the ledge covers the flat cut at the bottom of the pose */
.svc-orbit-core--lean .svc-orbit-core__ledge { top: calc(100% - var(--mw) * 0.085); z-index: 3; }
.svc-orbit-core--lean .svc-mascot { z-index: 2; }

/* lie: ledge top sits under the belly; the tail drapes over its front */
.svc-orbit-core--lie .svc-orbit-core__ledge { top: calc(var(--mw) * 0.721 - 8px); }
.svc-orbit-core--lie .svc-mascot { z-index: 2; }

/* stand: feet planted on the ledge top, mascot in front of it.
   The figure is taller than wide (1.323), so it gets a narrower width. */
.svc-orbit-core--stand {
    --mw: clamp(196px, 17vw, 262px);
}

.svc-orbit-core--stand .svc-orbit-core__ledge { top: calc(100% - var(--mw) * 0.33); }
.svc-orbit-core--stand .svc-mascot { z-index: 2; }

@media (max-width: 991.98px) {
    .subpage[data-svc] .subpage-hero > .vault-bg { --vault-orbit-inner-scale-min: 0.6; }
    .svc-orbit-core { --mw: clamp(170px, 46vw, 250px); }
    .svc-orbit-core--stand { --mw: clamp(150px, 38vw, 200px); }
}

/* ─── Pricing: mascot on the featured card ──────────────────────── */
.svc-pricing-slot {
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    margin-top: clamp(118px, 11vw, 150px);
}

.pricing-grid--single .svc-pricing-slot { max-width: 820px; }

/* Two-card web pricing row: lift the whole row so both cards stay aligned */
.pricing-row-with-cta .svc-pricing-slot { margin-top: 0; }
.pricing-row-with-cta:has(.svc-pricing-slot) { margin-top: clamp(118px, 11vw, 150px); }
.svc-pricing-slot > .pricing-card { position: relative; z-index: 3; width: 100%; max-width: none; }

.svc-pricing-slot > .pricing-card.featured {
    background:
        radial-gradient(70% 60% at 82% 0%, rgb(var(--svc-rgb) / min(1, calc(0.09 * var(--svc-tint)))), transparent 66%),
        linear-gradient(155deg, #262218 0%, var(--surface-2) 55%, #14120c 100%);
}

.svc-pricing-slot:has(.pricing-card:hover) { --lift: -6px; }

.svc-pricing-slot .svc-mascot--lean {
    --mw: clamp(150px, 13vw, 196px);
    width: var(--mw);
    right: clamp(24px, 4vw, 56px);
    bottom: calc(100% - var(--mw) * 0.085);
    z-index: 2;
    transform: translate3d(0, var(--lift, 0px), 0);
}

.svc-pricing-slot .svc-mascot--lie {
    --mw: clamp(168px, 15vw, 214px);
    width: var(--mw);
    right: clamp(24px, 4vw, 56px);
    top: calc(var(--mw) * -0.721 + 9px);
    z-index: 5;
    transform: translate3d(0, var(--lift, 0px), 0);
}

.svc-pricing-slot .svc-mascot--stand {
    --mw: clamp(128px, 11vw, 160px);
    width: var(--mw);
    right: clamp(24px, 4vw, 56px);
    bottom: calc(100% - var(--mw) * 0.33);
    z-index: 5;
    transform: translate3d(0, var(--lift, 0px), 0);
}

.pricing-row-with-cta:has(.svc-mascot--stand) {
    margin-top: calc(clamp(128px, 11vw, 160px) + 28px);
}

/* Phones: the card is narrow enough for the legs to reach the tier label */
@media (max-width: 575.98px) {
    .svc-pricing-slot:has(.svc-mascot--stand) > .pricing-card { padding-top: 56px; }
}

/* ─── CTA bar: portrait medallion beside the invitation ─────────── */
.subpage[data-svc] .service-cta-bar {
    background:
        radial-gradient(60% 140% at 0% 50%, rgb(var(--svc-rgb) / min(1, calc(0.08 * var(--svc-tint)))), transparent 70%),
        var(--surface-2);
}

.svc-cta-lead {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 24px);
}

.svc-cta-lead .svc-medallion { --size: clamp(68px, 6vw, 84px); }

/* Stacked CTA bar (premium.css stacks it below 992px): portrait sits
   centred above the heading, a little larger. */
@media (max-width: 991.98px) {
    .svc-cta-lead {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        width: 100%;
    }

    .svc-cta-lead .svc-medallion {
        --size: clamp(96px, 26vw, 112px);
        align-self: center;
    }

    /* ...and the whole stacked bar follows it onto the centre axis */
    .subpage[data-svc] .service-cta-bar > .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .subpage[data-svc] .service-cta-bar .cta-bar-contacts {
        justify-content: center;
    }

    .subpage[data-svc] .service-cta-bar .cta-bar-action {
        align-items: center;
        width: 100%;
    }
}

/* ─── Subpage section accents ───────────────────────────────────── */
.subpage[data-svc] .subpage-hero + .service-section .svc-aura { --aura-x: 52%; --aura-y: 2%; }

/* ─── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .svc-mascot,
    .svc-orbit-core__float {
        animation: none !important;
        transition: none !important;
    }

    .svc-mascot img.svcMascotRise {
        animation: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        clip-path: none !important;
    }
}