/* ==========================================================================
   3D GLASSMORPHISM CARDS (DEPTHFOLD STYLE)
   ========================================================================== */

/* The outer container defining the 3D perspective space */
.ux-parent {
    width: 100%;
    /* Let max-width be controlled by the grid, or provide a generous max */
    max-width: 100%; 
    height: 380px;
    margin-inline: auto;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    filter: drop-shadow(0 28px 50px rgba(0, 40, 30, 0.25)); /* Lighter shadow for light mode fallback */
}

body.dark .ux-parent {
    filter: drop-shadow(0 28px 50px rgba(0, 40, 30, 0.45));
}

/* The 3D rotating card */
.ux-card {
    position: relative;
    height: 100%;
    border-radius: 40px;
    background: var(--ux-grad);
    transform-style: preserve-3d;
    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.55s ease;
    box-shadow:
        rgba(5, 71, 17, 0) 40px 50px 25px -40px,
        rgba(5, 71, 17, 0.15) 0 25px 25px -5px; /* Lighter shadow */
    text-decoration: none;
    display: block;
    color: inherit;
}

body.dark .ux-card {
    box-shadow:
        rgba(5, 71, 17, 0) 40px 50px 25px -40px,
        rgba(5, 71, 17, 0.28) 0 25px 25px -5px;
}

.ux-parent:hover .ux-card {
    transform: rotate3d(1, 1, 0, 18deg); /* Slightly less extreme rotation for readability */
    box-shadow:
        rgba(5, 71, 17, 0.25) 28px 48px 28px -38px,
        rgba(0, 255, 214, 0.08) 0 0 60px -10px,
        rgba(5, 71, 17, 0.1) 0 25px 35px 0;
}

body.dark .ux-parent:hover .ux-card {
    box-shadow:
        rgba(5, 71, 17, 0.45) 28px 48px 28px -38px,
        rgba(0, 255, 214, 0.12) 0 0 60px -10px,
        rgba(5, 71, 17, 0.15) 0 25px 35px 0;
}

/* THEMES */
/* NCLI Brand Theme: Deep Blue and Royal Blue with Gold Orbits */
.ux-parent--brand {
    --ux-grad: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
    --ux-title: #ffffff;
    --ux-body: rgba(255, 255, 255, 0.9);
    --ux-cta: #f59e0b;
    --ux-orbit: rgba(255, 255, 255, 0.15); /* Soft white orbits */
}

/* NCLI Brand Theme Alt: Slate and Blue with White Orbits */
.ux-parent--brand-alt {
    --ux-grad: linear-gradient(145deg, #0f172a 0%, #1e40af 100%);
    --ux-title: #ffffff;
    --ux-body: rgba(255, 255, 255, 0.85);
    --ux-cta: #38bdf8;
    --ux-orbit: rgba(56, 189, 248, 0.15); /* Light blue orbits */
}

/* Glass Layer */
.ux-glass {
    transform-style: preserve-3d;
    position: absolute;
    inset: 6px;
    border-radius: 36px;
    border-top-right-radius: 90%;
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.82) 100%);
    transform: translate3d(0, 0, 20px);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.75);
    transition: all 0.5s ease-in-out;
    pointer-events: none;
}

body.dark .ux-glass {
    /* Slightly dimmer glass in dark mode */
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.4) 100%);
    border-inline-start: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.ux-parent--void .ux-glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(15, 23, 42, 0.55) 100%);
    border-color: rgba(148, 163, 184, 0.25);
}

/* Logo Orbits */
.ux-logo {
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    transform-style: preserve-3d;
    pointer-events: none;
    z-index: 2;
}

.ux-circle {
    display: block;
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    top: 0;
    inset-inline-end: 0;
    background: var(--ux-orbit);
    box-shadow: rgba(100, 100, 111, 0.15) -10px 10px 24px 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.5s ease-in-out;
}

.ux-circle:nth-child(1) { width: 170px; transform: translate3d(0, 0, 15px); top: 8px; inset-inline-end: 8px; }
.ux-circle:nth-child(2) { width: 140px; transform: translate3d(0, 0, 30px); top: 10px; inset-inline-end: 10px; backdrop-filter: blur(4px); transition-delay: 0.05s; }
.ux-circle:nth-child(3) { width: 110px; transform: translate3d(0, 0, 45px); top: 17px; inset-inline-end: 17px; transition-delay: 0.1s; }
.ux-circle:nth-child(4) { width: 80px;  transform: translate3d(0, 0, 60px); top: 23px; inset-inline-end: 23px; transition-delay: 0.15s; }
.ux-circle:nth-child(5) { 
    width: 50px;  
    transform: translate3d(0, 0, 75px); 
    top: 30px; 
    inset-inline-end: 30px; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition-delay: 0.2s; 
}

.ux-circle:nth-child(5) i {
    font-size: 20px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.ux-parent:hover .ux-circle:nth-child(2) { transform: translate3d(0, 0, 45px); }
.ux-parent:hover .ux-circle:nth-child(3) { transform: translate3d(0, 0, 60px); }
.ux-parent:hover .ux-circle:nth-child(4) { transform: translate3d(0, 0, 75px); }
.ux-parent:hover .ux-circle:nth-child(5) { transform: translate3d(0, 0, 90px); }

/* Content Area */
.ux-content {
    padding: 180px 1.5rem 0 1.5rem;
    transform: translate3d(0, 0, 90px); /* Pushed forward to float above circles */
    position: relative;
    z-index: 10;
    pointer-events: none; /* Let clicks pass through if the card itself is a link */
}

.ux-title {
    display: block;
    color: var(--ux-title);
    font-weight: 900;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.ux-text {
    display: block;
    color: var(--ux-body);
    font-size: 0.95rem;
    line-height: 1.5;
    font-weight: 600;
    padding-bottom: 60px; /* Space for the absolute bottom bar */
}

/* Bottom Actions / Meta */
.ux-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 16px 24px;
    transform: translate3d(0, 0, 30px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 4;
}

.ux-meta {
    font-size: 13px;
    font-weight: 700;
    color: var(--ux-title);
    display: flex;
    gap: 12px;
}

.ux-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ux-more {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ux-title);
    font-weight: 700;
    font-size: 14px;
    transition: gap 0.3s ease;
}

.ux-parent:hover .ux-more {
    gap: 10px;
}

.ux-more i {
    transition: transform 0.3s ease;
}

.ux-parent:hover .ux-more i {
    transform: translateX(4px);
}