/* ============================================
   Any Document OCR — Converging Document Hub
   Multiple document types flow into a central AI core
   ============================================ */

/* ── Container ── */
.anydoc-hub-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
}

.anydoc-hub-scene {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    animation: hubSceneEntry 1s ease-out both;
}

@keyframes hubSceneEntry {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Subtle concentric ring backdrop */
.anydoc-hub-scene::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, transparent 17.5%, rgba(26,47,110,0.04) 18%, transparent 19%),
        radial-gradient(circle at center, transparent 29.5%, rgba(26,47,110,0.03) 30%, transparent 31%),
        radial-gradient(circle at center, transparent 41.5%, rgba(26,47,110,0.025) 42%, transparent 43%),
        radial-gradient(circle at center, transparent 53.5%, rgba(26,47,110,0.02) 54%, transparent 55%);
    animation: hubRadarPulse 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes hubRadarPulse {
    0%, 100% { opacity: 0.6; transform: scale(0.98); }
    50%      { opacity: 1;   transform: scale(1.02); }
}


/* ══════════════════════════════════════════════
   Central AI Processing Core
   ══════════════════════════════════════════════ */
.anydoc-hub-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 88px;
    height: 88px;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* Pulsing glow behind core */
.anydoc-hub-core-glow {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26,47,110,0.18) 0%, rgba(45,82,217,0.05) 50%, transparent 70%);
    animation: hubGlowPulse 3s ease-in-out infinite;
    z-index: 0;
}

@keyframes hubGlowPulse {
    0%, 100% { transform: scale(1);   opacity: 0.5; }
    50%      { transform: scale(1.6); opacity: 1; }
}

/* Rotating rings */
.anydoc-hub-core-ring {
    position: absolute;
    border-radius: 50%;
}

.anydoc-hub-core-ring--outer {
    inset: -18px;
    border: 2px dashed rgba(26,47,110,0.18);
    animation: hubRingSpin 30s linear infinite;
}

.anydoc-hub-core-ring--inner {
    inset: -9px;
    border: 1.5px dotted rgba(26,47,110,0.12);
    animation: hubRingSpin 20s linear infinite reverse;
}

@keyframes hubRingSpin {
    to { transform: rotate(360deg); }
}

/* Core face — the solid circle */
.anydoc-hub-core-face {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    box-shadow:
        0 0 0 4px rgba(26,47,110,0.12),
        0 4px 30px rgba(26,47,110,0.25),
        inset 0 -2px 8px rgba(0,0,0,0.04);
    gap: 1px;
}

.anydoc-hub-core-face img {
    width: 65%;
    height: 65%;
    object-fit: contain;
}


/* ══════════════════════════════════════════════
   Orbiting Data Dots
   ══════════════════════════════════════════════ */
.anydoc-hub-orbit-dot {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    top: calc(50% - 2.5px);
    left: calc(50% - 2.5px);
    z-index: 9;
    opacity: 0.6;
}

.anydoc-hub-orbit-dot--1 {
    background: #4169e8;
    animation: hubOrbit1 9s linear infinite;
}
.anydoc-hub-orbit-dot--2 {
    background: #00796B;
    animation: hubOrbit2 12s linear infinite;
}
.anydoc-hub-orbit-dot--3 {
    background: #E65100;
    animation: hubOrbit3 15s linear infinite;
}

@keyframes hubOrbit1 {
    from { transform: rotate(0deg)   translateX(58px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(58px) rotate(-360deg); }
}
@keyframes hubOrbit2 {
    from { transform: rotate(120deg) translateX(52px) rotate(-120deg); }
    to   { transform: rotate(480deg) translateX(52px) rotate(-480deg); }
}
@keyframes hubOrbit3 {
    from { transform: rotate(240deg) translateX(62px) rotate(-240deg); }
    to   { transform: rotate(600deg) translateX(62px) rotate(-600deg); }
}


/* ══════════════════════════════════════════════
   Document Cards
   ══════════════════════════════════════════════ */
.anydoc-hub-card {
    position: absolute;
    /* Centered on container center; animations translate outward from here */
    top:  calc(50% - 44px);
    left: calc(50% - 35px);
    width: 70px;
    height: 88px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    z-index: 5;
    will-change: transform, opacity;
}

/* Colored top accent bar */
.anydoc-hub-card-bar {
    width: 100%;
    height: 4px;
    flex-shrink: 0;
}

/* Icon */
.anydoc-hub-card-icon {
    margin-top: 10px;
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}

/* Fake text lines (content placeholder) */
.anydoc-hub-card-lines {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 8px;
    width: 72%;
}

.anydoc-hub-card-line {
    height: 3px;
    background: #e8e8e8;
    border-radius: 2px;
}

.anydoc-hub-card-line.short {
    width: 55%;
}

/* Label */
.anydoc-hub-card-label {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #666;
    margin-top: auto;
    margin-bottom: 6px;
    white-space: nowrap;
}


/* ── Card Color Themes ── */
.anydoc-hub-card--invoice  .anydoc-hub-card-bar  { background: #1a2f6e; }
.anydoc-hub-card--invoice  .anydoc-hub-card-icon { color: #1a2f6e; }

.anydoc-hub-card--receipt  .anydoc-hub-card-bar  { background: #00796B; }
.anydoc-hub-card--receipt  .anydoc-hub-card-icon { color: #00796B; }

.anydoc-hub-card--bank     .anydoc-hub-card-bar  { background: #6A1B9A; }
.anydoc-hub-card--bank     .anydoc-hub-card-icon { color: #6A1B9A; }

.anydoc-hub-card--resume   .anydoc-hub-card-bar  { background: #E65100; }
.anydoc-hub-card--resume   .anydoc-hub-card-icon { color: #E65100; }

.anydoc-hub-card--id       .anydoc-hub-card-bar  { background: #00838F; }
.anydoc-hub-card--id       .anydoc-hub-card-icon { color: #00838F; }

.anydoc-hub-card--medical  .anydoc-hub-card-bar  { background: #C62828; }
.anydoc-hub-card--medical  .anydoc-hub-card-icon { color: #C62828; }


/* ══════════════════════════════════════════════
   Convergence Animations
   8s cycle — cards drift from outer position to center
   Staggered delays create continuous flow
   ══════════════════════════════════════════════ */
.anydoc-hub-card--invoice  { animation: hubConv1 8s cubic-bezier(0.4,0,0.2,1) infinite 0s backwards; }
.anydoc-hub-card--receipt  { animation: hubConv2 8s cubic-bezier(0.4,0,0.2,1) infinite 1.3s backwards; }
.anydoc-hub-card--bank     { animation: hubConv3 8s cubic-bezier(0.4,0,0.2,1) infinite 2.7s backwards; }
.anydoc-hub-card--resume   { animation: hubConv4 8s cubic-bezier(0.4,0,0.2,1) infinite 4s backwards; }
.anydoc-hub-card--id       { animation: hubConv5 8s cubic-bezier(0.4,0,0.2,1) infinite 5.3s backwards; }
.anydoc-hub-card--medical  { animation: hubConv6 8s cubic-bezier(0.4,0,0.2,1) infinite 6.7s backwards; }


/* Card 1: Invoice — top-left */
@keyframes hubConv1 {
    0% {
        transform: translate(-135px, -115px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    10% {
        transform: translate(-135px, -121px) scale(1);
        opacity: 1;
    }
    20% {
        transform: translate(-135px, -115px) scale(1);
        opacity: 1;
    }
    58% {
        transform: translate(-22px, -18px) scale(0.55);
        opacity: 0.6;
        box-shadow: 0 0 25px rgba(26,47,110,0.3);
    }
    74% {
        transform: translate(0, 0) scale(0.08);
        opacity: 0;
    }
    75% {
        transform: translate(-135px, -115px) scale(0.5);
        opacity: 0;
    }
    92%, 100% {
        transform: translate(-135px, -115px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
}

/* Card 2: Receipt — top-right */
@keyframes hubConv2 {
    0% {
        transform: translate(135px, -115px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    10% {
        transform: translate(135px, -121px) scale(1);
        opacity: 1;
    }
    20% {
        transform: translate(135px, -115px) scale(1);
        opacity: 1;
    }
    58% {
        transform: translate(22px, -18px) scale(0.55);
        opacity: 0.6;
        box-shadow: 0 0 25px rgba(0,121,107,0.3);
    }
    74% {
        transform: translate(0, 0) scale(0.08);
        opacity: 0;
    }
    75% {
        transform: translate(135px, -115px) scale(0.5);
        opacity: 0;
    }
    92%, 100% {
        transform: translate(135px, -115px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
}

/* Card 3: Bank Statement — mid-right */
@keyframes hubConv3 {
    0% {
        transform: translate(160px, 15px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    10% {
        transform: translate(160px, 9px) scale(1);
        opacity: 1;
    }
    20% {
        transform: translate(160px, 15px) scale(1);
        opacity: 1;
    }
    58% {
        transform: translate(26px, 2px) scale(0.55);
        opacity: 0.6;
        box-shadow: 0 0 25px rgba(106,27,154,0.3);
    }
    74% {
        transform: translate(0, 0) scale(0.08);
        opacity: 0;
    }
    75% {
        transform: translate(160px, 15px) scale(0.5);
        opacity: 0;
    }
    92%, 100% {
        transform: translate(160px, 15px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
}

/* Card 4: Resume — bottom-right */
@keyframes hubConv4 {
    0% {
        transform: translate(120px, 125px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    10% {
        transform: translate(120px, 119px) scale(1);
        opacity: 1;
    }
    20% {
        transform: translate(120px, 125px) scale(1);
        opacity: 1;
    }
    58% {
        transform: translate(19px, 20px) scale(0.55);
        opacity: 0.6;
        box-shadow: 0 0 25px rgba(230,81,0,0.3);
    }
    74% {
        transform: translate(0, 0) scale(0.08);
        opacity: 0;
    }
    75% {
        transform: translate(120px, 125px) scale(0.5);
        opacity: 0;
    }
    92%, 100% {
        transform: translate(120px, 125px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
}

/* Card 5: ID Card — bottom-left */
@keyframes hubConv5 {
    0% {
        transform: translate(-120px, 125px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    10% {
        transform: translate(-120px, 119px) scale(1);
        opacity: 1;
    }
    20% {
        transform: translate(-120px, 125px) scale(1);
        opacity: 1;
    }
    58% {
        transform: translate(-19px, 20px) scale(0.55);
        opacity: 0.6;
        box-shadow: 0 0 25px rgba(0,131,143,0.3);
    }
    74% {
        transform: translate(0, 0) scale(0.08);
        opacity: 0;
    }
    75% {
        transform: translate(-120px, 125px) scale(0.5);
        opacity: 0;
    }
    92%, 100% {
        transform: translate(-120px, 125px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
}

/* Card 6: Medical — mid-left */
@keyframes hubConv6 {
    0% {
        transform: translate(-160px, 15px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    10% {
        transform: translate(-160px, 9px) scale(1);
        opacity: 1;
    }
    20% {
        transform: translate(-160px, 15px) scale(1);
        opacity: 1;
    }
    58% {
        transform: translate(-26px, 2px) scale(0.55);
        opacity: 0.6;
        box-shadow: 0 0 25px rgba(198,40,40,0.3);
    }
    74% {
        transform: translate(0, 0) scale(0.08);
        opacity: 0;
    }
    75% {
        transform: translate(-160px, 15px) scale(0.5);
        opacity: 0;
    }
    92%, 100% {
        transform: translate(-160px, 15px) scale(1);
        opacity: 1;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
}


/* ══════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════ */
@media (max-width: 767px) {
    .anydoc-hub-wrapper { display: none; }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .anydoc-hub-wrapper { max-width: 400px; }
    .anydoc-hub-scene   { transform: scale(0.8); transform-origin: center center; }
}


/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .anydoc-hub-card,
    .anydoc-hub-core-glow,
    .anydoc-hub-core-ring,
    .anydoc-hub-orbit-dot,
    .anydoc-hub-scene::before,
    .anydoc-hub-scene {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    .anydoc-hub-card--invoice  { transform: translate(-135px, -115px); opacity: 1; }
    .anydoc-hub-card--receipt  { transform: translate(135px, -115px);  opacity: 1; }
    .anydoc-hub-card--bank     { transform: translate(160px, 15px);    opacity: 1; }
    .anydoc-hub-card--resume   { transform: translate(120px, 125px);   opacity: 1; }
    .anydoc-hub-card--id       { transform: translate(-120px, 125px);  opacity: 1; }
    .anydoc-hub-card--medical  { transform: translate(-160px, 15px);   opacity: 1; }
}