/* ==========================================================================
   Careers hero — minimal animated SVG visual (chv-*)
   Replaces the static careers-team image in careers-hero__media.
   Story: "We're Hiring" (live dot) → paper plane (apply) → checkmark (accepted).
   Pure CSS motion graphics. Respects prefers-reduced-motion.
   ========================================================================== */

.careers-hero__visual-svg {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
}

/* ── Glass card ── */
.careers-hero__visual-svg .chv-card__bg {
    fill: rgba(248, 251, 255, 0.9);
}

.careers-hero__visual-svg .chv-card__border {
    stroke: rgba(30, 95, 168, 0.18);
    stroke-width: 1.25;
}

/* ── Ambient glow (slow breathe) ── */
.careers-hero__visual-svg .chv-ambient {
    transform-box: fill-box;
    transform-origin: center;
    animation: chv-breathe 7s ease-in-out infinite alternate;
}

/* ── "We're Hiring" pill ── */
.careers-hero__visual-svg .chv-pill {
    transform-box: fill-box;
    transform-origin: center;
    animation: chv-pill-float 4.5s ease-in-out infinite alternate;
}

.careers-hero__visual-svg .chv-pill__bg {
    fill: rgba(244, 123, 32, 0.12);
    stroke: rgba(244, 123, 32, 0.4);
    stroke-width: 1.25;
}

.careers-hero__visual-svg .chv-pill__label-wrap {
    overflow: visible;
}

.careers-hero__visual-svg .chv-pill__label-html {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
    color: #e06a10;
    text-align: center;
    white-space: nowrap;
    unicode-bidi: plaintext;
}

.careers-hero__visual-svg .chv-pill__label-html[dir="rtl"] {
    direction: rtl;
}

.careers-hero__visual-svg .chv-pill__text {
    /* Legacy SVG text — replaced by foreignObject for Arabic shaping */
    display: none;
}

/* Live "hiring is open" pulsing dot */
.careers-hero__visual-svg .chv-pill__dot {
    fill: #F47B20;
    transform-box: fill-box;
    transform-origin: center;
    animation: chv-dot-pulse 1.8s ease-in-out infinite;
}

/* ── CV / resume document ── */
.careers-hero__visual-svg .chv-cv {
    transform-box: fill-box;
    transform-origin: center;
    animation: chv-cv-float 4s ease-in-out infinite alternate;
}

.careers-hero__visual-svg .chv-cv__paper {
    fill: #ffffff;
    stroke: rgba(30, 95, 168, 0.25);
    stroke-width: 1.4;
}

.careers-hero__visual-svg .chv-cv__line {
    stroke: #1E5FA8;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-opacity: 0.45;
}

.careers-hero__visual-svg .chv-cv__line--short {
    stroke-opacity: 0.3;
}

/* ── Accepted checkmark badge ── */
.careers-hero__visual-svg .chv-accepted {
    transform-box: fill-box;
    transform-origin: center;
    animation: chv-accepted-pop 3.6s ease-in-out infinite;
}

.careers-hero__visual-svg .chv-accepted__ring {
    stroke-opacity: 0.6;
}

.careers-hero__visual-svg .chv-accepted__check {
    stroke-dasharray: 22;
    stroke-dashoffset: 0;
    animation: chv-check-draw 3.6s ease-in-out infinite;
}

/* ── Confetti burst ── */
.careers-hero__visual-svg .chv-confetti__bit {
    transform-box: view-box;
    transform-origin: 196px 150px;
    transform: rotate(var(--ang, 0deg)) translate(0, 0);
    opacity: 0;
    animation: chv-confetti 3.6s ease-out infinite;
}

.careers-hero__visual-svg .chv-confetti__bit:nth-child(2) { animation-delay: .06s; }
.careers-hero__visual-svg .chv-confetti__bit:nth-child(3) { animation-delay: .12s; }
.careers-hero__visual-svg .chv-confetti__bit:nth-child(4) { animation-delay: .18s; }

/* ── Paper plane (loops from CV up to the pill, then resets) ── */
.careers-hero__visual-svg .chv-plane {
    transform-box: fill-box;
    transform-origin: center;
    animation: chv-plane-fly 3s cubic-bezier(.4,.05,.55,.95) infinite;
}

/* ==========================================================================
   Keyframes
   ========================================================================== */

@keyframes chv-breathe {
    0%   { transform: scale(1);    opacity: 0.85; }
    100% { transform: scale(1.08); opacity: 1; }
}

@keyframes chv-pill-float {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

@keyframes chv-dot-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.55; }
    50%      { transform: scale(1.6);  opacity: 1; }
}

@keyframes chv-cv-float {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-5px); }
}

@keyframes chv-accepted-pop {
    0%, 70%, 100% { transform: scale(1); }
    14%           { transform: scale(1.22); }
    22%           { transform: scale(0.96); }
    28%           { transform: scale(1.06); }
}

@keyframes chv-check-draw {
    0%, 10%    { stroke-dashoffset: 22; }
    24%, 100%  { stroke-dashoffset: 0; }
}

@keyframes chv-confetti {
    0%, 14%   { transform: rotate(var(--ang, 0deg)) translate(0, 0); opacity: 0; }
    22%       { opacity: 1; }
    44%, 100% { transform: rotate(var(--ang, 0deg)) translate(var(--dist, 20px), 0); opacity: 0; }
}

@keyframes chv-plane-fly {
    0%   { transform: translate(150px, 196px) rotate(-8deg) scale(0.7);  opacity: 0; }
    14%  { opacity: 1; }
    55%  { transform: translate(196px, 110px) rotate(-22deg) scale(1);   opacity: 1; }
    82%  { transform: translate(224px, 78px)  rotate(-28deg) scale(0.9); opacity: 0; }
    100% { transform: translate(224px, 78px)  rotate(-28deg) scale(0.9); opacity: 0; }
}

/* ==========================================================================
   Reduced motion — freeze everything, keep it legible.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .careers-hero__visual-svg .chv-ambient,
    .careers-hero__visual-svg .chv-pill,
    .careers-hero__visual-svg .chv-pill__dot,
    .careers-hero__visual-svg .chv-cv,
    .careers-hero__visual-svg .chv-accepted,
    .careers-hero__visual-svg .chv-accepted__check,
    .careers-hero__visual-svg .chv-confetti__bit,
    .careers-hero__visual-svg .chv-plane {
        animation: none !important;
    }
    .careers-hero__visual-svg .chv-accepted__check { stroke-dashoffset: 0; }
    .careers-hero__visual-svg .chv-confetti__bit { opacity: 0; }
    .careers-hero__visual-svg .chv-plane { opacity: 0; }
}