/* Employee business card — navy theme */
:root {
    --emp-navy: #0c2340;
    --emp-navy-mid: #152d4d;
    --emp-navy-light: #1e3f6b;
    --emp-blue: #5ba3e8;
    --emp-sky: #7ec8f7;
    --emp-gold: #d4af37;
    --emp-gold-light: #f0d78c;
    --emp-gold-deep: #b8860b;
    --emp-text: #f1f5f9;
    --emp-text-muted: #e8eef5;
    --emp-card-w: 680px;
    --emp-card-h: 389px;
}

.emp-card {
    position: relative;
    width: min(96vw, var(--emp-card-w));
    max-width: 100%;
    aspect-ratio: 252 / 144;
    height: auto;
    margin-inline: auto;
    background:
        radial-gradient(ellipse 90% 70% at 8% 100%, rgba(14, 165, 233, 0.28) 0%, transparent 55%),
        radial-gradient(ellipse 70% 60% at 95% 0%, rgba(56, 189, 248, 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 50% 45% at 55% 45%, rgba(30, 64, 110, 0.55) 0%, transparent 70%),
        linear-gradient(145deg, #04111f 0%, #0a1f38 28%, #123356 58%, #0d2744 78%, #071a2e 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 24px 55px rgba(2, 10, 24, 0.6),
        0 0 0 1px rgba(125, 211, 252, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(125, 211, 252, 0.28);
    font-family: "Plus Jakarta Sans", "Tajawal", "Segoe UI", sans-serif;
    color: var(--emp-text);
}

.emp-card__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.emp-card__mesh {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(125, 211, 252, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 211, 252, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 75%);
    opacity: 0.7;
}

.emp-card__aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.emp-card__aurora--1 {
    width: 70%;
    height: 90%;
    left: -25%;
    bottom: -45%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.55) 0%, rgba(2, 132, 199, 0.15) 45%, transparent 70%);
    animation: empAurora1 8s ease-in-out infinite;
}

.emp-card__aurora--2 {
    width: 55%;
    height: 70%;
    right: -20%;
    top: -35%;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.42) 0%, rgba(125, 211, 252, 0.12) 50%, transparent 72%);
    animation: empAurora2 10s ease-in-out infinite;
}

.emp-card__aurora--3 {
    width: 40%;
    height: 50%;
    left: 35%;
    top: 20%;
    background: radial-gradient(circle, rgba(186, 230, 253, 0.18) 0%, transparent 68%);
    animation: empAurora3 7s ease-in-out infinite;
}

.emp-card__ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(125, 211, 252, 0.18);
    box-shadow: inset 0 0 24px rgba(56, 189, 248, 0.08);
}

.emp-card__ring--1 {
    width: 180px;
    height: 180px;
    left: -40px;
    bottom: -70px;
    animation: empRingPulse 6s ease-in-out infinite;
}

.emp-card__ring--2 {
    width: 110px;
    height: 110px;
    left: -5px;
    bottom: -35px;
    border-color: rgba(125, 211, 252, 0.28);
    animation: empRingPulse 6s ease-in-out infinite 0.8s;
}

.emp-card__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.55;
    will-change: transform, opacity;
}

.emp-card__glow--1 {
    width: 48%;
    height: 70%;
    left: -12%;
    bottom: -28%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.4) 0%, transparent 68%);
    animation: empGlowDrift1 9s ease-in-out infinite;
}

.emp-card__glow--2 {
    width: 38%;
    height: 55%;
    right: -8%;
    top: -22%;
    background: radial-gradient(circle, rgba(125, 211, 252, 0.32) 0%, transparent 70%);
    animation: empGlowDrift2 11s ease-in-out infinite;
}

.emp-card__glow--3 {
    width: 22%;
    height: 40%;
    left: 28%;
    top: 8%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 72%);
    animation: empGlowPulse 6s ease-in-out infinite;
}

.emp-card__particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(186, 230, 253, 0.9);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.8);
    animation: empParticleFloat linear infinite;
}

.emp-card__particle--1 { left: 18%; bottom: 8%; animation-duration: 7.5s; animation-delay: 0s; }
.emp-card__particle--2 { left: 42%; bottom: 4%; width: 4px; height: 4px; animation-duration: 9s; animation-delay: -2s; }
.emp-card__particle--3 { left: 68%; bottom: 10%; width: 6px; height: 6px; animation-duration: 8.2s; animation-delay: -4s; }
.emp-card__particle--4 { left: 28%; bottom: 2%; width: 3px; height: 3px; animation-duration: 10s; animation-delay: -1s; opacity: 0.7; }
.emp-card__particle--5 { left: 82%; bottom: 6%; animation-duration: 7.8s; animation-delay: -3.5s; }
.emp-card__particle--6 { left: 55%; bottom: 0; width: 4px; height: 4px; animation-duration: 11s; animation-delay: -5s; }

.emp-card__flake {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0.35;
    background:
        linear-gradient(#7dd3fc, #7dd3fc) center / 100% 1.5px no-repeat,
        linear-gradient(#7dd3fc, #7dd3fc) center / 1.5px 100% no-repeat,
        linear-gradient(45deg, transparent 44%, #7dd3fc 44%, #7dd3fc 56%, transparent 56%),
        linear-gradient(-45deg, transparent 44%, #7dd3fc 44%, #7dd3fc 56%, transparent 56%);
    filter: drop-shadow(0 0 4px rgba(125, 211, 252, 0.6));
    animation: empFlakeSpin linear infinite;
}

.emp-card__flake--1 { right: 18%; top: 18%; animation-duration: 14s; }
.emp-card__flake--2 { right: 32%; top: 58%; width: 7px; height: 7px; animation-duration: 18s; animation-delay: -4s; opacity: 0.25; }
.emp-card__flake--3 { right: 8%; top: 42%; width: 8px; height: 8px; animation-duration: 16s; animation-delay: -8s; opacity: 0.3; }

.emp-card__frost {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.1) 0%, transparent 18%),
        radial-gradient(circle at 88% 78%, rgba(125, 211, 252, 0.08) 0%, transparent 22%),
        linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 28%);
    opacity: 0.9;
}

.emp-card__pattern {
    position: absolute;
    inset: -20%;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%237dd3fc' stroke-opacity='0.11'%3E%3Cpath d='M70 8 L118 36 L118 92 L70 120 L22 92 L22 36 Z'/%3E%3Cpath d='M70 28 L100 46 L100 82 L70 100 L40 82 L40 46 Z'/%3E%3C/g%3E%3Ccircle cx='70' cy='70' r='3' fill='%237dd3fc' fill-opacity='0.12'/%3E%3C/svg%3E");
    background-size: 70px 70px;
    pointer-events: none;
    animation: empPatternDrift 22s linear infinite;
    will-change: transform;
    mask-image: linear-gradient(120deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(120deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
}

.emp-card__shine {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(125deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.04) 16%, transparent 36%),
        linear-gradient(300deg, transparent 50%, rgba(125, 211, 252, 0.08) 70%, transparent 88%);
    pointer-events: none;
    animation: empShineBreathe 5.5s ease-in-out infinite;
}

.emp-card__beam {
    position: absolute;
    top: -20%;
    left: -40%;
    width: 42%;
    height: 140%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.03) 40%,
        rgba(125, 211, 252, 0.22) 50%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    animation: empBeamSweep 6.5s ease-in-out infinite;
    will-change: transform, opacity;
}

.emp-card__vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 85% 80% at 50% 50%, transparent 45%, rgba(2, 8, 20, 0.45) 100%);
    box-shadow: inset 0 0 0 1px rgba(186, 230, 253, 0.08);
}

.emp-card__watermark {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
    width: 40%;
    opacity: 0.1;
    filter: none;
    pointer-events: none;
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.55) 0%, transparent 88%);
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.55) 0%, transparent 88%);
    animation: empWatermarkPulse 8s ease-in-out infinite;
}

@keyframes empAurora1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.7; }
    50% { transform: translate(12%, -10%) scale(1.15); opacity: 1; }
}

@keyframes empAurora2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
    50% { transform: translate(-14%, 12%) scale(1.2); opacity: 0.95; }
}

@keyframes empAurora3 {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50% { transform: scale(1.3); opacity: 0.7; }
}

@keyframes empRingPulse {
    0%, 100% { transform: scale(1); opacity: 0.45; }
    50% { transform: scale(1.08); opacity: 0.85; }
}

@keyframes empFlakeSpin {
    0% { transform: rotate(0deg) translateY(0); opacity: 0.2; }
    50% { opacity: 0.45; }
    100% { transform: rotate(360deg) translateY(-8px); opacity: 0.2; }
}

@keyframes empLogoSpin {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(-360deg); }
}

@keyframes empGlowDrift1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(10%, -8%) scale(1.12); opacity: 0.75; }
}

@keyframes empGlowDrift2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
    50% { transform: translate(-12%, 10%) scale(1.15); opacity: 0.7; }
}

@keyframes empGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.35; }
    50% { transform: scale(1.25); opacity: 0.65; }
}

@keyframes empParticleFloat {
    0% { transform: translateY(0) translateX(0) scale(0.7); opacity: 0; }
    15% { opacity: 0.9; }
    50% { transform: translateY(-55%) translateX(12px) scale(1); opacity: 0.7; }
    85% { opacity: 0.35; }
    100% { transform: translateY(-110%) translateX(-8px) scale(0.5); opacity: 0; }
}

@keyframes empPatternDrift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(44px, 44px); }
}

@keyframes empShineBreathe {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

@keyframes empBeamSweep {
    0% { transform: translateX(-30%) skewX(-18deg); opacity: 0; }
    12% { opacity: 0.85; }
    45% { opacity: 0.55; }
    70% { transform: translateX(280%) skewX(-18deg); opacity: 0; }
    100% { transform: translateX(280%) skewX(-18deg); opacity: 0; }
}

@keyframes empWatermarkPulse {
    0%, 100% { opacity: 0.06; transform: translateY(-50%) scale(1); }
    50% { opacity: 0.11; transform: translateY(-50%) scale(1.03); }
}

@keyframes empPageAura {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.06) saturate(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .emp-card__glow--1 { animation-duration: 10s !important; }
    .emp-card__glow--2 { animation-duration: 12s !important; }
    .emp-card__glow--3 { animation-duration: 8s !important; }
    .emp-card__beam { animation-duration: 8s !important; }
    .emp-card__particle { animation-duration: 9s !important; }
    .emp-card__logo { animation-duration: 24s !important; }
}

.emp-card__watermark img {
    width: 100%;
    height: auto;
    display: block;
}

.emp-card__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 42% 58%;
    align-items: center;
    height: 100%;
    padding: 18px 22px 18px 16px;
    gap: 4px;
}

.emp-card__inner::before {
    content: "";
    position: absolute;
    left: 41%;
    top: 14%;
    bottom: 14%;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(126, 200, 247, 0.35) 22%,
        rgba(255, 255, 255, 0.18) 50%,
        rgba(126, 200, 247, 0.35) 78%,
        transparent 100%
    );
    pointer-events: none;
}

.emp-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0;
    overflow: visible;
    perspective: 700px;
}

.emp-card__logo {
    width: 280px !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain;
    display: block;
    filter: none !important;
    -webkit-filter: none !important;
    mix-blend-mode: normal !important;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: visible;
    animation: empLogoSpin 10s linear infinite;
    will-change: transform;
}

.emp-card__info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    height: 100%;
    padding: 0 6px 0 16px;
    box-sizing: border-box;
    transform: translateY(-4px);
}

.emp-card__name {
    margin: 0 0 4px;
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--emp-gold-light);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-shadow: 0 1px 8px rgba(212, 175, 55, 0.25);
}

.emp-card__title {
    margin: 0 0 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--emp-gold);
    letter-spacing: 0.03em;
}

.emp-card__contacts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.emp-card__contacts li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: var(--emp-text-muted);
    line-height: 1.3;
}

.emp-card__contacts i {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(212, 175, 55, 0.16);
    color: var(--emp-gold-light);
    font-size: 0.78rem;
    border: 1px solid rgba(240, 215, 140, 0.45);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.18);
}

.emp-card__contacts a {
    color: inherit;
    text-decoration: none;
}

.emp-card__contacts a:hover {
    color: var(--emp-gold-light);
}

.emp-card__accent-bar {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 62%;
    background: linear-gradient(180deg, var(--emp-gold-light) 0%, var(--emp-gold-deep) 100%);
    border-radius: 3px;
}

/* Standalone page */
.emp-card-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 10px 32px;
    background:
        radial-gradient(circle at 18% 12%, rgba(255, 236, 179, 0.55), transparent 42%),
        radial-gradient(circle at 82% 88%, rgba(180, 120, 30, 0.35), transparent 48%),
        linear-gradient(160deg, #f6e2a8 0%, #d4a84b 38%, #b8860b 68%, #8a6508 100%);
    animation: empPageAura 12s ease-in-out infinite;
}

.emp-card-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.emp-card-page__btn {
    border: 0;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #8a6508 0%, #c9a227 55%, #a67c00 100%);
    box-shadow: 0 8px 20px rgba(120, 80, 10, 0.28);
    text-decoration: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.emp-card-page__btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.emp-card-page__btn--secondary {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%);
}

@media (max-width: 720px) {
    :root {
        --emp-card-w: 100%;
    }

    .emp-card {
        width: calc(100vw - 12px);
        max-width: none;
        aspect-ratio: 16 / 10;
        min-height: clamp(280px, 62vw, 420px);
        border-radius: 14px;
    }

    .emp-card__inner {
        padding: 16px 14px;
        grid-template-columns: 38% 62%;
        gap: 2px;
    }

    .emp-card__inner::before {
        left: 37%;
    }

    .emp-card__logo {
        width: clamp(170px, 42vw, 250px) !important;
    }

    .emp-card__brand {
        padding: 0;
    }

    .emp-card__info {
        transform: translateY(-2px);
        padding: 0 2px 0 12px;
    }

    .emp-card__name {
        font-size: clamp(1.35rem, 5.8vw, 1.75rem);
        color: var(--emp-gold-light);
    }

    .emp-card__title {
        font-size: clamp(0.9rem, 3.6vw, 1.05rem);
        margin-bottom: 10px;
        color: var(--emp-gold);
    }

    .emp-card__contacts {
        gap: 8px;
    }

    .emp-card__contacts li {
        font-size: clamp(0.92rem, 3.8vw, 1.1rem);
        gap: 11px;
    }

    .emp-card__contacts i {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
        color: var(--emp-gold-light);
        background: rgba(212, 175, 55, 0.16);
        border-color: rgba(240, 215, 140, 0.45);
    }

    .emp-card-page__btn {
        font-size: 0.95rem;
        padding: 12px 22px;
    }
}

@media (max-width: 580px) {
    .emp-card__contacts {
        gap: 6px;
    }
}

@media print {
    @page {
        size: 90mm 51mm;
        margin: 0;
    }

    body.emp-card-print-page {
        background: var(--emp-navy) !important;
        margin: 0;
        padding: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .emp-card-page__actions,
    .no-print {
        display: none !important;
    }

    .emp-card-page {
        padding: 0;
        min-height: auto;
        background: var(--emp-navy);
    }

    .emp-card {
        width: 90mm;
        height: 51mm;
        max-width: none;
        box-shadow: none;
        border-radius: 0;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .emp-card__glow,
    .emp-card__shine {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .emp-card__contacts a {
        color: var(--emp-text-muted) !important;
    }
}