.hr-team-card {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: #fff;
    text-align: left;
    font: inherit;
    cursor: pointer;
    perspective: 1200px;
    -webkit-tap-highlight-color: transparent;
}

.hr-team-card:focus-visible {
    outline: 3px solid #f5662a;
    outline-offset: -3px;
}

.hr-team-card__inner {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 650ms cubic-bezier(.22, .65, .25, 1);
}

.hr-team-card[aria-expanded="true"] .hr-team-card__inner {
    transform: rotateY(180deg);
}

.hr-team-card__face {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    border-radius: 24px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.hr-team-card__face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hr-team-card__back {
    transform: rotateY(180deg);
    background: #19211e;
}

.hr-team-card__back::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 28%, rgba(8, 17, 14, .12) 45%, rgba(8, 17, 14, .88) 76%, #08110e 100%);
}

.hr-team-card__copy {
    position: absolute;
    z-index: 1;
    inset: auto 0 0;
    display: grid;
    gap: 10px;
    padding: clamp(16px, 1.7vw, 28px);
}

.hr-team-card__title {
    font-size: clamp(20px, 1.7vw, 28px);
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.hr-team-card__description {
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.45;
    color: #f1f4f2;
}

.hr-team-card__hint {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid #ffffff45;
    border-radius: 30px;
    background: #101916b8;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    backdrop-filter: blur(8px);
}

.hr-workshop-shell {
    display: block;
    position: relative;
}

.hr-workshop {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: #e7dccc;
    pointer-events: none;
}

.hr-workshop__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hr-workshop__portrait {
    position: absolute;
    inset: 0;
    display: block;
    transform: translateY(6%) scale(.9);
    transform-origin: center bottom;
}

.hr-workshop__presence {
    position: absolute;
    inset: 0;
    display: block;
    transform-origin: 50% 76%;
    filter: drop-shadow(5px 9px 8px #33271940) drop-shadow(0 2px 2px #291e1726);
    animation: hr-portrait-sway 8.6s ease-in-out infinite paused;
}

.hr-workshop__presence img {
    position: absolute;
    inset: 0;
}

.hr-workshop__blink {
    opacity: 0;
    /* Feather only the eyelids inside the original glasses; preserve the rest of the portrait. */
    -webkit-mask-image: radial-gradient(ellipse 3.3% 1.1% at 40.8% 14.3%, #000 62%, transparent 100%), radial-gradient(ellipse 3.3% 1.1% at 49.3% 14.87%, #000 62%, transparent 100%);
    mask-image: radial-gradient(ellipse 3.3% 1.1% at 40.8% 14.3%, #000 62%, transparent 100%), radial-gradient(ellipse 3.3% 1.1% at 49.3% 14.87%, #000 62%, transparent 100%);
    animation: hr-portrait-blink 14s linear infinite paused;
}

.is-workshop-running .hr-workshop__presence,
.is-workshop-running .hr-workshop__blink { animation-play-state: running; }
.hr-team-card:not(.is-workshop-running) .hr-workshop__blink { visibility: hidden; }

@keyframes hr-portrait-sway {
    0%, 100% { transform: translateX(-.45%) rotate(-.45deg); }
    50% { transform: translateX(.45%) rotate(.45deg); }
}

@keyframes hr-portrait-blink {
    0%, 17.5%, 19%, 48.8%, 50.3%, 79%, 80.5%, 100% { opacity: 0; }
    18%, 18.4%, 49.3%, 49.7%, 79.5%, 79.9% { opacity: 1; }
}

.hr-team-card--vitalii .hr-team-card__back::after,
.hr-team-card--oksana .hr-team-card__back::after {
    background: linear-gradient(180deg, transparent 40%, #08110e0d 55%, #08110ee8 80%, #08110e 100%);
}

.hr-workshop-toggle {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #ffffff6b;
    border-radius: 50%;
    background: #263a2dcc;
    color: #fff;
    font: 600 17px/1 sans-serif;
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.hr-workshop-toggle[hidden] { display: none; }
.hr-workshop-toggle:hover { background: #263a2d; }
.hr-workshop-toggle:focus-visible { outline: 3px solid #f5662a; outline-offset: 2px; }

.hr-planning {
    --planning-x: 0;
    --planning-y: 0;
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: #d4c5ad;
    pointer-events: none;
}
.hr-planning__layer {
    position: absolute;
    inset: 0;
    display: block;
    transition: transform 700ms cubic-bezier(.2, .65, .3, 1);
}
.hr-planning__room {
    inset: -3%;
    transform: translate(calc(var(--planning-x) * -6px), calc(var(--planning-y) * -4px));
}
.hr-planning__room img {
    animation: hr-planning-room 12s ease-in-out infinite paused;
}
.hr-planning__portrait {
    transform: translate(calc(var(--planning-x) * 1.5px), calc(var(--planning-y) * 1px));
}
.hr-planning__portrait img {
    transform-origin: 50% 90%;
    filter: drop-shadow(4px 8px 7px #36291d45);
    animation: hr-planning-person 9s ease-in-out infinite paused;
}
.hr-planning__desk {
    transform: translate(calc(var(--planning-x) * 3px), calc(var(--planning-y) * 2px));
}
.hr-planning__desk img {
    transform-origin: 50% 100%;
    animation: hr-planning-desk 11s ease-in-out infinite paused;
}
.hr-planning__daylight {
    position: absolute;
    inset: -10%;
    display: block;
    background: linear-gradient(112deg, transparent 18%, #fff2cb4a 33%, #fff2cb00 53%);
    mix-blend-mode: soft-light;
    animation: hr-planning-light 14s ease-in-out infinite paused;
}
.is-workshop-running .hr-planning__layer img,
.is-workshop-running .hr-planning__daylight { animation-play-state: running; }
/* Hold the idle drift while the user directly controls the depth. */
.is-workshop-running .hr-planning.is-pointer-tracking .hr-planning__layer img { animation-play-state: paused; }

@keyframes hr-planning-room {
    0%, 100% { transform: translate(-.7%, -.2%) scale(1.01); }
    50% { transform: translate(.7%, .2%) scale(1.01); }
}
@keyframes hr-planning-person {
    0%, 100% { transform: translate(-.3%, 2%) scale(.91) rotate(-.3deg); }
    50% { transform: translate(.3%, 2%) scale(.91) rotate(.3deg); }
}
@keyframes hr-planning-desk {
    0%, 100% { transform: translate(.4%, -6%) scale(1.04); }
    50% { transform: translate(-.4%, -6%) scale(1.04); }
}
@keyframes hr-planning-light {
    0%, 100% { transform: translateX(-3%); opacity: .3; }
    50% { transform: translateX(3%); opacity: .65; }
}

@media (prefers-reduced-motion: reduce) {
    .hr-planning__layer { transition: none; transform: none; }
    .hr-planning__layer img,
    .hr-planning__daylight { animation: none; }
    .hr-planning__portrait img { transform: translateY(2%) scale(.91); }
    .hr-planning__desk img { transform: translateY(-6%) scale(1.04); }
    .hr-planning__daylight { opacity: .3; }
    .hr-workshop__presence { animation: none; transform: none; }
    .hr-workshop__blink { animation: none; visibility: hidden; }
    .hr-team-card__inner,
    .hr-team-card[aria-expanded="true"] .hr-team-card__inner,
    .hr-team-card__back {
        transform: none;
        transition: none;
    }
    .hr-team-card__face { transition: opacity 120ms linear; }
    .hr-team-card__back { opacity: 0; }
    .hr-team-card[aria-expanded="true"] .hr-team-card__front { opacity: 0; }
    .hr-team-card[aria-expanded="true"] .hr-team-card__back { opacity: 1; }
}