/**
 * ==============================================================================
 * PT FUJIWARA CREATIVE SOLUSINDO - Employee Profile
 * Linktree × Saweria Inspired Theme
 * File: public/assets/css/employee-profile.css
 *
 * Clean social-profile / creator-page visual
 * Warm cream canvas + Saweria orange accent
 * ==============================================================================
 */

:root {
    --ep-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI',
        Roboto, Helvetica, Arial, sans-serif;

    --ep-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco,
        Consolas, 'Liberation Mono', monospace;

    /* =========================================================
       CANVAS
       ========================================================= */
    --ep-bg-canvas: #f7f7f5;

    --ep-text-main: #161616;
    --ep-text-muted: #6b6b6b;
    --ep-text-dim: #999999;

    /* =========================================================
       SAWERIA / CREATOR ACCENT
       ========================================================= */
    --ep-accent: #ff6b35;
    --ep-accent-dark: #e95725;
    --ep-accent-light: #fff0e9;
    --ep-accent-border: #ffd2c1;

    /* =========================================================
       PROFILE CARD
       ========================================================= */
    --ep-card-bg: rgba(255, 255, 255, 0.96);
    --ep-card-border: rgba(0, 0, 0, 0.06);

    --ep-card-shadow:
        0 20px 50px rgba(0, 0, 0, 0.07),
        0 2px 8px rgba(0, 0, 0, 0.03);

    --ep-card-blur: 16px;

    /* =========================================================
       AMBIENT
       ========================================================= */
    --ep-orb-1: rgba(255, 107, 53, 0.10);
    --ep-orb-2: rgba(255, 180, 120, 0.08);
    --ep-orb-3: rgba(255, 220, 190, 0.10);

    /* =========================================================
       AVATAR
       ========================================================= */
    --ep-avatar-gradient: linear-gradient(
        135deg,
        #ff6b35,
        #ff9a62
    );

    --ep-avatar-border: #ffffff;

    /* =========================================================
       POSITION
       ========================================================= */
    --ep-position-bg: #fff0e9;
    --ep-position-border: #ffd2c1;
    --ep-position-text: #e95725;

    /* =========================================================
       LINKS
       ========================================================= */
    --ep-link-bg: #ffffff;
    --ep-link-hover-bg: #fff8f5;
    --ep-link-border: rgba(0, 0, 0, 0.08);
    --ep-link-hover-border: rgba(255, 107, 53, 0.45);

    --ep-link-hover-shadow:
        0 10px 25px rgba(255, 107, 53, 0.10);
}


/* ============================================================
   OFFICIAL ACCOUNT THEME
   ============================================================ */

.ep-theme-official {
    /* =========================================================
       OFFICIAL CORPORATE BLUE ACCENTS
       ========================================================= */
    --ep-accent: #0288d1;
    --ep-accent-dark: #01579b;
    --ep-accent-light: #e1f5fe;
    --ep-accent-border: #b3e5fc;

    --ep-card-bg: rgba(255, 255, 255, 0.98);

    --ep-card-border: rgba(2, 136, 209, 0.22);

    --ep-card-shadow:
        0 25px 60px rgba(2, 136, 209, 0.12),
        0 0 0 1px rgba(2, 136, 209, 0.08);

    --ep-orb-1: rgba(2, 136, 209, 0.18);
    --ep-orb-2: rgba(0, 180, 255, 0.14);

    --ep-avatar-gradient: linear-gradient(
        135deg,
        #0288d1,
        #00b0ff
    );

    --ep-avatar-border: #ffffff;

    --ep-position-bg: #e1f5fe;
    --ep-position-border: #b3e5fc;
    --ep-position-text: #0277bd;

    --ep-link-hover-border: rgba(2, 136, 209, 0.55);

    --ep-link-hover-shadow:
        0 12px 28px rgba(2, 136, 209, 0.16);
}

.ep-theme-official .ep-badge-official {
    background: #e1f5fe;
    border-color: #b3e5fc;
    color: #0277bd;
    box-shadow: 0 4px 12px rgba(2, 136, 209, 0.10);
}

.ep-theme-official .ep-badge-official i {
    color: #0288d1;
}

.ep-theme-official .ep-handle {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(2, 136, 209, 0.35);
    color: #014361; /* Deep rich corporate navy - ultra readable WCAG AAA */
    box-shadow: 0 2px 8px rgba(2, 136, 209, 0.12);
}

.ep-theme-official .ep-handle-text {
    color: #014361;
}

.ep-theme-official .ep-handle-at {
    color: #0288d1;
}

.ep-theme-official .ep-handle:hover {
    background: #ffffff;
    border-color: #0288d1;
    color: #002f47;
    box-shadow: 0 4px 14px rgba(2, 136, 209, 0.22);
}

.ep-theme-official .ep-name-badge {
    background: #0288d1;
    color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 2px 10px rgba(2, 136, 209, 0.45);
}

.ep-theme-official .ep-name-badge i {
    color: #ffffff;
}

.ep-theme-official .ep-name-badge-icon {
    color: #0288d1;
}

.ep-theme-official .ep-position-pill {
    background: #e1f5fe;
    border-color: #b3e5fc;
    color: #0277bd;
}

.ep-theme-official .ep-photo-verified {
    background: #0288d1;
    color: #ffffff;
}

.ep-theme-official .ep-link-card:hover .ep-link-icon-box svg {
    color: #0288d1;
}

.ep-theme-official .ep-pinned-item:hover svg,
.ep-theme-official .ep-pinned-item:hover i {
    color: #0288d1;
}

.ep-theme-official .ep-pinned-item:hover .ep-pinned-label {
    color: #01579b;
}

.ep-theme-official .ep-photo-placeholder {
    background: linear-gradient(135deg, #e1f5fe, #b3e5fc);
}

.ep-theme-official .ep-link-card::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(2, 136, 209, 0.18),
        rgba(255, 255, 255, 0.6),
        rgba(2, 136, 209, 0.18),
        transparent
    );
}

body.ep-body-official {
    background: linear-gradient(180deg, #f0f7fc 0%, #e8f3fa 100%);
}

.ep-ambient-official .ep-orb-1 {
    background: rgba(2, 136, 209, 0.18);
}

.ep-ambient-official .ep-orb-2 {
    background: rgba(0, 180, 255, 0.14);
}


/* ============================================================
   BASE
   ============================================================ */

body.ep-body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    font-family: var(--ep-font-sans);

    background:
        linear-gradient(
            180deg,
            #fafaf8 0%,
            #f5f5f2 100%
        );

    color: var(--ep-text-main);

    position: relative;

    overflow-x: hidden;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}


/* ============================================================
   AMBIENT BACKGROUND
   ============================================================ */

.ep-bg-ambient {
    position: fixed;
    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;
}

.ep-orb {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.8;

    pointer-events: none;

    transform: translateZ(0);
}

.ep-orb-1 {
    top: -20%;
    left: -15%;

    width: 50vw;
    height: 50vw;

    max-width: 600px;
    max-height: 600px;

    background: var(--ep-orb-1);
}

.ep-orb-2 {
    top: 60%;
    right: -15%;

    width: 55vw;
    height: 55vw;

    max-width: 650px;
    max-height: 650px;

    background: var(--ep-orb-2);
}

.ep-orb-3 {
    top: 30%;
    left: 25%;

    width: 40vw;
    height: 40vw;

    max-width: 450px;
    max-height: 450px;

    background: var(--ep-orb-3);
}


/* ============================================================
   ELECTRON PARTICLES CONSTELLATION
   ============================================================ */

#particles-js {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;

    z-index: 0;

    pointer-events: auto;

    opacity: 1;
    transition: opacity 0.5s ease;
}

#particles-js canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    filter: saturate(1.25);
}


/* ============================================================
   MAIN SECTION
   ============================================================ */

.ep-section {
    position: relative;

    z-index: 10;

    min-height: 100vh;

    padding:
        3.5rem
        1rem
        2.5rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    /* Allows mouse pointer events to pass through background to particles-js */
    pointer-events: none;
}


/* ============================================================
   PROFILE CARD
   ============================================================ */

.ep-card {
    position: relative;
    width: 100%;
    max-width: 440px;

    background: var(--ep-card-bg);

    -webkit-backdrop-filter: blur(var(--ep-card-blur));
    backdrop-filter: blur(var(--ep-card-blur));

    border:
        1px solid
        var(--ep-card-border);

    border-radius: 28px;

    padding:
        2.25rem
        1.5rem
        1.5rem;

    box-shadow: var(--ep-card-shadow);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    box-sizing: border-box;

    /* Re-enable interactive clicks inside the card */
    pointer-events: auto;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

/* High-Voltage Electric Energy Aura Around Card */
.ep-card::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 31px;
    background: linear-gradient(
        135deg,
        rgba(230, 74, 25, 0.65),
        rgba(255, 87, 34, 0.25) 25%,
        rgba(216, 67, 21, 0.75) 50%,
        rgba(255, 87, 34, 0.25) 75%,
        rgba(230, 74, 25, 0.65)
    );
    background-size: 250% 250%;
    z-index: -1;
    opacity: 0.85;
    filter: blur(12px);
    animation: ep-electric-glow 5.5s ease infinite;
    pointer-events: none;
}

@keyframes ep-electric-glow {
    0% { background-position: 0% 50%; opacity: 0.65; }
    50% { background-position: 100% 50%; opacity: 0.95; }
    100% { background-position: 0% 50%; opacity: 0.65; }
}

.ep-theme-official.ep-card::before {
    background: linear-gradient(
        135deg,
        rgba(2, 136, 209, 0.75),
        rgba(0, 145, 234, 0.25) 25%,
        rgba(0, 119, 194, 0.85) 50%,
        rgba(0, 145, 234, 0.25) 75%,
        rgba(2, 136, 209, 0.75)
    );
    background-size: 250% 250%;
}

@media (max-width: 480px) {
    .ep-section {
        padding:
            1.5rem
            0.75rem
            1.5rem;
    }

    .ep-card {
        padding:
            2rem
            1rem
            1.25rem;

        border-radius: 24px;
    }
}


/* ============================================================
   OFFICIAL BADGE
   ============================================================ */

.ep-badge-official {
    margin-bottom: 1.25rem;

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    padding:
        0.4rem
        0.8rem;

    border-radius: 9999px;

    background: var(--ep-accent-light);

    border:
        1px solid
        var(--ep-accent-border);

    color: var(--ep-accent-dark);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.025em;

    box-shadow:
        0 4px 12px
        rgba(255, 107, 53, 0.08);
}

.ep-badge-official i {
    color: var(--ep-accent);

    font-size: 0.7rem;
}


/* ============================================================
   PING DOT
   ============================================================ */

.ep-ping-dot-wrapper {
    position: relative;

    display: flex;

    width: 0.45rem;
    height: 0.45rem;
}

.ep-ping-dot-anim {
    position: absolute;

    inset: 0;

    border-radius: 9999px;

    background-color: var(--ep-accent);

    opacity: 0.55;

    animation:
        ep-ping
        1.5s
        cubic-bezier(0, 0, 0.2, 1)
        infinite;
}

.ep-ping-dot-core {
    position: relative;

    display: inline-flex;

    border-radius: 9999px;

    width: 0.45rem;
    height: 0.45rem;

    background-color: var(--ep-accent);
}

@keyframes ep-ping {
    75%,
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}


/* ============================================================
   PROFILE PHOTO & 3D ATOMIC ELECTRON ORBITALS
   ============================================================ */

.ep-photo-wrapper {
    position: relative;

    width: 7.25rem;
    height: 7.25rem;

    margin-bottom: 1.35rem;

    perspective: 800px;
}

/* High-energy electric plasma aura behind avatar */
.ep-photo-glow {
    position: absolute;

    inset: -8px;

    border-radius: 9999px;

    background: radial-gradient(
        circle,
        rgba(216, 67, 21, 0.55) 0%,
        rgba(255, 87, 34, 0.3) 50%,
        transparent 75%
    );

    filter: blur(16px);

    opacity: 0.85;

    animation: ep-plasma-pulse 3.6s ease-in-out infinite;

    transition:
        opacity 0.4s ease,
        filter 0.4s ease;
}

.ep-photo-wrapper:hover .ep-photo-glow {
    opacity: 1;
    filter: blur(20px);
}

@keyframes ep-plasma-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.75;
    }
    50% {
        transform: scale(1.18);
        opacity: 1;
    }
}

.ep-theme-official .ep-photo-glow {
    background: radial-gradient(
        circle,
        rgba(2, 136, 209, 0.6) 0%,
        rgba(0, 145, 234, 0.3) 50%,
        transparent 75%
    );
}

/* Fallback single-ring orbit support directly on photo wrapper */
.ep-photo-wrapper::before {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px dashed rgba(216, 67, 21, 0.45);
    pointer-events: none;
    animation: ep-revolve-cw 18s linear infinite;
    z-index: 1;
}

.ep-photo-wrapper::after {
    content: '';
    position: absolute;
    top: -19px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: #ff3d00;
    box-shadow: 
        0 0 10px #ff3d00, 
        0 0 20px #e64a19,
        0 0 30px rgba(216, 67, 21, 0.8);
    pointer-events: none;
    z-index: 5;
    transform-origin: 6px calc(3.625rem + 19px);
    animation: ep-revolve-cw 3.5s linear infinite;
}

.ep-photo-wrapper:has(.ep-electron-orbit)::before,
.ep-photo-wrapper:has(.ep-electron-orbit)::after {
    display: none;
}

.ep-theme-official .ep-photo-wrapper::before {
    border-color: rgba(2, 136, 209, 0.5);
}

.ep-theme-official .ep-photo-wrapper::after {
    background: #0288d1;
    box-shadow: 
        0 0 10px #0091ea, 
        0 0 20px #0288d1,
        0 0 30px rgba(2, 136, 209, 0.85);
}

/* 3D Atomic Orbit Rings (Base Planes) */
.ep-electron-orbit {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transform-style: preserve-3d;
    z-index: 2;
}

/* Orbit 1: Tilted 65deg X, 35deg Z */
.ep-orbit-1 {
    inset: -15px;
    transform: rotateZ(35deg) rotateX(65deg);
}

.ep-orbit-1::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(216, 67, 21, 0.45);
    animation: ep-revolve-cw 18s linear infinite;
}

/* Orbit 2: Tilted 65deg X, -35deg Z */
.ep-orbit-2 {
    inset: -21px;
    transform: rotateZ(-35deg) rotateX(65deg);
}

.ep-orbit-2::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(230, 74, 25, 0.45);
    animation: ep-revolve-ccw 22s linear infinite;
}

/* Orbit 3: Equatorial circular wave */
.ep-orbit-3 {
    inset: -27px;
    transform: rotateX(75deg);
}

.ep-orbit-3::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dotted rgba(191, 54, 12, 0.35);
    animation: ep-revolve-cw 26s linear infinite;
}

/* Revolving electron dot containers (Faster, active electron orbital speed) */
.ep-electron-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.ep-orbit-1 .ep-electron-dot {
    animation: ep-revolve-cw 3.4s linear infinite;
}

.ep-orbit-2 .ep-electron-dot {
    animation: ep-revolve-ccw 4.8s linear infinite;
}

.ep-orbit-3 .ep-electron-dot {
    animation: ep-revolve-cw 6.2s linear infinite;
}

/* The actual glowing particle beads (Bold, Large & Kereng) */
.ep-orbit-1 .ep-electron-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -6px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #ff3d00;
    box-shadow: 
        0 0 8px #ff3d00,
        0 0 18px #e64a19,
        0 0 28px rgba(216, 67, 21, 0.95);
}

.ep-orbit-2 .ep-electron-dot::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: #e64a19;
    box-shadow: 
        0 0 8px #f4511e,
        0 0 18px #e64a19,
        0 0 28px rgba(230, 74, 25, 0.95);
}

.ep-orbit-3 .ep-electron-dot::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: #bf360c;
    box-shadow: 
        0 0 8px #d84315,
        0 0 16px #bf360c;
}

/* Universal 2D Rotation Keyframes - immune to 3D matrix quaternion cancellation */
@keyframes ep-revolve-cw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes ep-revolve-ccw {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}

/* Official Corporate Electron Orbit Colors */
.ep-theme-official .ep-orbit-1::before {
    border-color: rgba(2, 136, 209, 0.5);
}
.ep-theme-official .ep-orbit-2::before {
    border-color: rgba(0, 145, 234, 0.5);
}
.ep-theme-official .ep-orbit-3::before {
    border-color: rgba(0, 119, 194, 0.4);
}
.ep-theme-official .ep-orbit-1 .ep-electron-dot::after {
    background: #0091ea;
    box-shadow: 
        0 0 8px #0091ea,
        0 0 18px #0288d1,
        0 0 28px rgba(2, 136, 209, 0.95);
}
.ep-theme-official .ep-orbit-2 .ep-electron-dot::after {
    background: #0288d1;
    box-shadow: 
        0 0 8px #00b0ff,
        0 0 18px #0288d1,
        0 0 28px rgba(0, 145, 234, 0.95);
}
.ep-theme-official .ep-orbit-3 .ep-electron-dot::after {
    background: #0077c2;
    box-shadow: 
        0 0 8px #0091ea,
        0 0 16px #0077c2;
}

.ep-photo-img {
    position: relative;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 9999px;

    border:
        4px solid
        var(--ep-avatar-border);

    background: #f1f1ef;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.12);

    display: block;
}

.ep-photo-placeholder {
    position: relative;

    width: 100%;
    height: 100%;

    border-radius: 9999px;

    border:
        4px solid
        var(--ep-avatar-border);

    background:
        linear-gradient(
            135deg,
            #fff0e9,
            #ffe3d5
        );

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 2.5rem;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.10);
}


/* ============================================================
   VERIFIED BADGE
   ============================================================ */

.ep-photo-verified {
    position: absolute;

    bottom: 0;
    right: 0;

    background: var(--ep-accent);

    color: #ffffff;

    width: 1.8rem;
    height: 1.8rem;

    border-radius: 9999px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        3px solid
        #ffffff;

    box-shadow:
        0 4px 10px
        rgba(0, 0, 0, 0.15);

    z-index: 10;

    font-size: 0.75rem;
}


/* ============================================================
   NAME
   ============================================================ */

.ep-name-row {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.45rem;

    margin-bottom: 0.95rem;

    max-width: 100%;

    padding:
        0 0.5rem;
}

.ep-name {
    font-size: 1.45rem;

    font-weight: 800;

    color: #171717;

    letter-spacing: -0.035em;

    line-height: 1.25;

    margin: 0;

    word-break: break-word;
}

/* Verified Name Badge (Crisp High-Contrast Circle with Pure White Check) */
.ep-name-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 9999px;
    background: var(--ep-accent);
    color: #ffffff;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ep-name-badge i {
    font-size: 0.72rem;
    color: #ffffff;
    line-height: 1;
}

.ep-name-badge:hover {
    transform: scale(1.12);
    box-shadow: 0 3px 12px rgba(2, 136, 209, 0.4);
}

.ep-name-badge-icon {
    flex-shrink: 0;
}


/* ============================================================
   HANDLE (High-Contrast Glass Badge Pill)
   ============================================================ */

.ep-handle-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 0.85rem;
}

.ep-handle {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    padding: 0.26rem 0.85rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-family: var(--ep-font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: #374151;
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.2;
    transition: all 0.2s ease;
}

.ep-handle:hover {
    background: #ffffff;
    color: #111827;
    border-color: rgba(0, 0, 0, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.ep-handle-at {
    color: var(--ep-accent);
    font-weight: 800;
}

.ep-handle-text {
    color: inherit;
    font-weight: 700;
}


/* ============================================================
   POSITION
   ============================================================ */

.ep-position-pill {
    font-size: 0.68rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.07em;

    padding:
        0.35rem
        0.85rem;

    border-radius: 9999px;

    background:
        var(--ep-position-bg);

    border:
        1px solid
        var(--ep-position-border);

    color:
        var(--ep-position-text);

    margin:
        0
        0
        1.75rem;

    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.ep-position-pill::before {
    content: '';
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 8px currentColor;
    animation: ep-electron-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ep-electron-ping {
    0%, 100% {
        transform: scale(1);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.6);
        opacity: 0.4;
    }
}


/* ============================================================
   PINNED LINKS
   ============================================================ */

.ep-pinned-grid {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    width: 100%;

    margin-bottom: 1.5rem;

    padding:
        0
        0.1rem;

    box-sizing: border-box;
}

.ep-pinned-wrapper {
    flex: 1;

    display: flex;

    min-width: 0;
}

.ep-pinned-item {
    flex: 1;

    aspect-ratio: 1 / 0.78;

    min-height: 76px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        var(--ep-link-bg);

    border:
        1px solid
        var(--ep-link-border);

    border-radius: 16px;

    text-decoration: none;

    transition:
        all 0.2s
        cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, 0.04);

    box-sizing: border-box;

    min-width: 0;
}

.ep-pinned-item:hover {
    background:
        var(--ep-link-hover-bg);

    border-color:
        var(--ep-link-hover-border);

    transform:
        translateY(-2px);

    box-shadow:
        var(--ep-link-hover-shadow);
}

.ep-pinned-item svg,
.ep-pinned-item i {
    width: 1.65rem;
    height: 1.65rem;

    font-size: 1.65rem;

    margin-bottom: 0.35rem;

    transition:
        transform 0.2s ease,
        color 0.2s ease;

    color: #555555;
}

.ep-pinned-item:hover svg,
.ep-pinned-item:hover i {
    color: var(--ep-accent);

    transform:
        scale(1.08);
}

.ep-pinned-label {
    font-size: 0.65rem;

    font-weight: 700;

    color: #777777;

    transition:
        color 0.2s ease;
}

.ep-pinned-item:hover .ep-pinned-label {
    color: #333333;
}


/* ============================================================
   WHATSAPP
   ============================================================ */

.ep-pinned-wa {
    background:
        #f0fbf5;

    border-color:
        #bde8ce;

    box-shadow:
        0 4px 12px
        rgba(37, 211, 102, 0.08);

    transform:
        scale(1.025);

    z-index: 2;
}

.ep-pinned-wa:hover {
    background:
        #e7f9ef;

    border-color:
        #25d366;

    box-shadow:
        0 10px 22px
        rgba(37, 211, 102, 0.15);

    transform:
        translateY(-2px)
        scale(1.04);
}

.ep-pinned-wa i {
    color: #20b858;
}

.ep-pinned-wa:hover i {
    color: #159447;
}

.ep-pinned-wa .ep-pinned-label {
    color: #198f46;

    font-weight: 700;
}


/* ============================================================
   CUSTOM LINKS
   ============================================================ */

.ep-links-list {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 0.7rem;

    box-sizing: border-box;
}

.ep-link-card {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 58px;

    padding:
        0.65rem
        0.75rem;

    background:
        var(--ep-link-bg);

    border:
        1px solid
        var(--ep-link-border);

    border-radius: 14px;

    overflow: hidden;

    text-decoration: none;

    transition:
        all 0.2s
        cubic-bezier(0.16, 1, 0.3, 1);

    box-shadow:
        0 3px 10px
        rgba(0, 0, 0, 0.035);

    box-sizing: border-box;
}

/* Electric Electron Shimmer on Link Card */
.ep-link-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 107, 53, 0.18),
        rgba(255, 255, 255, 0.6),
        rgba(255, 107, 53, 0.18),
        transparent
    );
    transition: left 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.ep-link-card:hover::before {
    left: 100%;
}

.ep-link-card:hover {
    background:
        var(--ep-link-hover-bg);

    border-color:
        var(--ep-link-hover-border);

    transform:
        translateY(-2px);

    box-shadow:
        var(--ep-link-hover-shadow),
        0 0 0 1px rgba(255, 107, 53, 0.15);
}

.ep-theme-official .ep-link-card:hover {
    box-shadow:
        var(--ep-link-hover-shadow),
        0 0 0 1px rgba(0, 210, 255, 0.25);
}

.ep-link-card:active {
    transform:
        translateY(0)
        scale(0.99);
}


/* ============================================================
   LINK ICON
   ============================================================ */

.ep-link-icon-box {
    flex-shrink: 0;

    width: 2.5rem;
    height: 2.5rem;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 10px;
}

.ep-link-icon-box img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 8px;
}

.ep-link-icon-box svg {
    width: 1.4rem;
    height: 1.4rem;

    color: #777777;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.ep-link-card:hover .ep-link-icon-box svg {
    color: var(--ep-accent);

    transform:
        scale(1.05);
}


/* ============================================================
   LINK TITLE
   ============================================================ */

.ep-link-title {
    flex: 1;

    padding:
        0
        0.75rem;

    text-align: center;

    margin-right: 2.5rem;

    font-size: 0.84rem;

    font-weight: 650;

    color: #303030;

    transition:
        color 0.2s ease;

    margin-top: 0;
    margin-bottom: 0;

    word-break: break-word;

    line-height: 1.35;
}

.ep-link-card:hover .ep-link-title {
    color: #111111;
}


/* ============================================================
   EMPTY LINKS
   ============================================================ */

.ep-empty-links {
    padding:
        2rem
        1rem;

    text-align: center;

    color:
        var(--ep-text-dim);

    font-size: 0.8rem;
}


/* ============================================================
   FOOTER
   ============================================================ */

.ep-footer {
    margin-top: 1.75rem;

    margin-bottom: 0.5rem;

    text-align: center;
}

.ep-footer-caption {
    font-size: 0.62rem;

    color: #a0a0a0;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    margin:
        0
        0
        0.35rem;
}

.ep-footer-logo-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    opacity: 0.65;

    transition:
        opacity 0.2s ease;
}

.ep-footer-logo-link:hover {
    opacity: 0.9;
}

.ep-footer-logo-img {
    height: 1.35rem;

    width: auto;
}

.ep-footer-logo-fallback {
    font-size: 0.85rem;

    font-weight: 700;

    color: #777777;
}


/* ============================================================
   MOBILE REFINEMENT
   ============================================================ */

@media (max-width: 480px) {

    .ep-photo-wrapper {
        width: 6.5rem;
        height: 6.5rem;
    }

    .ep-name {
        font-size: 1.35rem;
    }

    .ep-pinned-grid {
        gap: 0.6rem;
    }

    .ep-pinned-item {
        min-height: 70px;

        border-radius: 14px;
    }

    .ep-link-card {
        min-height: 56px;

        border-radius: 13px;
    }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .ep-card,
    .ep-pinned-item,
    .ep-link-card {
        transition-duration: 0.01ms !important;
    }

    .ep-electron-dot,
    .ep-orbit-1::before,
    .ep-orbit-2::before,
    .ep-orbit-3::before {
        animation-duration: 20s !important;
    }

}