/* Animated Card Chart Component - EXACT implementation from animated-card-chart.md */

/* Layout utilities - EXACT from spec */
.flex {
    display: flex;
}

.justify-center {
    justify-content: center;
}

.items-center {
    align-items: center;
}

.min-h-screen {
    min-height: 100vh;
}

.bg-gray-50 {
    background-color: #f9fafb;
}

.dark-bg-gray-900 {
    background-color: #111827;
}

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.md-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lg-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-8 {
    gap: 2rem;
}

.p-8 {
    padding: 2rem;
}

/* AnimatedCard - EXACT from spec */
.animated-card {
    position: relative;
    width: 356px; /* w-[356px] */
    overflow: hidden;
    border-radius: 0.75rem; /* rounded-xl */
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e7; /* border-zinc-200 */
    background-color: #ffffff; /* bg-white */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

.group-animated-card {
    /* group/animated-card */
}

.dark-border-zinc-900 {
    border-color: #18181b; /* dark:border-zinc-900 */
}

.dark-bg-black {
    background-color: #000000; /* dark:bg-black */
}

/* CardVisual - EXACT from spec */
.card-visual {
    height: 180px; /* h-[180px] */
    width: 356px; /* w-[356px] */
    overflow: hidden;
}

.h-180px {
    height: 180px;
}

.w-356px {
    width: 356px;
}

/* Visual3 container - EXACT from spec */
.visual3-container {
    position: relative;
}

.visual3-hover-area {
    position: absolute;
    inset: 0;
    z-index: 20;
}

.visual3-hover-area:hover ~ .relative .layer4 {
    transform: scale(1.5);
}

/* Layers - EXACT from spec */
.layer4 {
    position: absolute;
    inset: 0;
    z-index: 8;
    display: flex;
    height: 180px;
    width: 356px;
    align-items: center;
    justify-content: center;
    color: rgba(38, 38, 38, 0.1); /* text-neutral-800/10 */
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);
    transition-duration: 500ms;
}

.animated-card:hover .layer4 {
    transform: scale(1.5);
}

/* Fix hover effects for chart visibility */
.animated-card:hover .card-visual {
    opacity: 1;
    transform: scale(1.05);
}

.animated-card:hover .layer1,
.animated-card:hover .layer2,
.animated-card:hover .layer3,
.animated-card:hover .layer4 {
    opacity: 1;
    visibility: visible;
}

/* Ensure text is visible */
.animated-card .card-title,
.animated-card .card-description {
    position: relative;
    z-index: 10;
    color: #1f2937;
    font-weight: 600;
}

.animated-card:hover .card-title,
.animated-card:hover .card-description {
    color: #111827;
}

.dark-text-white-15 {
    color: rgba(255, 255, 255, 0.15); /* dark:text-white/15 */
}

.ease-cubic-bezier-0-6-0-6-0-1 {
    transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);
}

.transition-all {
    transition-property: all;
}

.duration-500 {
    transition-duration: 500ms;
}

.transition-transform {
    transition-property: transform;
}

/* Bar rectangles - EXACT from spec */
.bar-rect {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.6, 0.6, 0, 1);
    transition-duration: 500ms;
}

.visual3-hover-area:hover ~ .relative .bar-rect:nth-child(odd) {
    height: 120;
    y: 30;
}

.visual3-hover-area:hover ~ .relative .bar-rect:nth-child(even) {
    fill: var(--secondary-color);
}

/* Layer3 - Grid pattern - EXACT from spec */
.layer3 {
    position: absolute;
    inset: 0;
    z-index: 7;
    height: 100%;
    width: 100%;
    background-color: transparent;
    background-image: linear-gradient(to right, var(--color) 1px, transparent 1px), linear-gradient(to bottom, var(--color) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: center;
    opacity: 0.3;
    mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 60%, transparent 100%);
}