/* Up-Down Marquee Component - EXACT implementation from Up-Down-Marquee.md */

/* Container styles - EXACT from spec */
.relative {
    position: relative;
}

.flex {
    display: flex;
}

.h-500px {
    height: 500px; /* h-[500px] */
}

.w-full {
    width: 100%;
}

.flex-row {
    flex-direction: row;
}

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

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

.overflow-hidden {
    overflow: hidden;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.border {
    border-width: 1px;
    border-style: solid;
    border-color: #e5e7eb;
}

.bg-background {
    background-color: #ffffff;
}

.md-shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Marquee component - EXACT from spec */
.marquee-wrapper {
    display: flex;
    overflow: hidden;
    padding: 0.5rem; /* p-2 */
    --duration: 40s; /* [--duration:40s] */
    --gap: 1rem; /* [--gap:1rem] */
    gap: var(--gap);
}

.marquee-wrapper.vertical {
    flex-direction: column; /* flex-col when vertical */
}

.marquee-wrapper.duration-20s {
    --duration: 20s; /* [--duration:20s] */
}

/* Marquee track - EXACT from spec */
.marquee-track {
    display: flex;
    flex-shrink: 0;
    justify-content: space-around;
    gap: var(--gap);
}

.marquee-track.flex-col {
    flex-direction: column;
}

.shrink-0 {
    flex-shrink: 0;
}

.justify-around {
    justify-content: space-around;
}

.gap-var-gap {
    gap: var(--gap);
}

.flex-col {
    flex-direction: column;
}

/* EXACT animations from spec keyframes */
@keyframes marquee-vertical {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(calc(-100% - var(--gap)));
    }
}

.animate-marquee-vertical {
    animation: marquee-vertical var(--duration) linear infinite;
}

.animation-direction-reverse {
    animation-direction: reverse;
}

/* Pause on hover - EXACT from spec */
.marquee-wrapper.pauseOnHover:hover .marquee-track {
    animation-play-state: paused;
}

/* ReviewCard component - EXACT from spec */
.review-card {
    position: relative;
    height: 10rem; /* h-40 */
    width: 9rem; /* w-36 */
    cursor: pointer;
    overflow: hidden;
    border-radius: 0.75rem; /* rounded-xl */
    border-width: 1px;
    padding: 1rem; /* p-4 */

    /* Light styles - Clean white background */
    border-color: #e5e7eb; /* Light gray border */
    background-color: white; /* Clean white background */

    transition: background-color 0.2s ease;

    /* Ensure text fits properly */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.review-card:hover {
    background-color: #f9fafb; /* Light gray on hover */
}

.review-card blockquote {
    font-size: 0.75rem; /* Smaller text to fit better */
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    margin-top: 0.5rem;
    color: #374151;
}

.review-card figcaption {
    font-size: 0.75rem;
    font-weight: 600;
    color: #111827;
}

.review-card p {
    font-size: 0.625rem;
    color: #6b7280;
}

.h-40 {
    height: 10rem;
}

.w-36 {
    width: 9rem;
}

.cursor-pointer {
    cursor: pointer;
}

.rounded-xl {
    border-radius: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

/* Light styles - EXACT from spec */
.border-gray-950-01 {
    border-color: rgba(3, 7, 18, 0.1); /* border-gray-950/[.1] */
}

.bg-gray-950-001 {
    background-color: rgba(3, 7, 18, 0.01); /* bg-gray-950/[.01] */
}

.hover-bg-gray-950-005:hover {
    background-color: rgba(3, 7, 18, 0.05); /* hover:bg-gray-950/[.05] */
}

/* Dark styles - EXACT from spec */
.dark-border-gray-50-01 {
    border-color: rgba(249, 250, 251, 0.1); /* dark:border-gray-50/[.1] */
}

.dark-bg-gray-50-010 {
    background-color: rgba(249, 250, 251, 0.10); /* dark:bg-gray-50/[.10] */
}

.dark-hover-bg-gray-50-015:hover {
    background-color: rgba(249, 250, 251, 0.15); /* dark:hover:bg-gray-50/[.15] */
}

/* Card content - EXACT from spec */
.gap-2 {
    gap: 0.5rem;
}

.rounded-full {
    border-radius: 9999px;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.font-medium {
    font-weight: 500;
}

.dark-text-white {
    color: #ffffff; /* dark:text-white */
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

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

.mt-2 {
    margin-top: 0.5rem;
}

/* Gradient overlays - EXACT from spec */
.pointer-events-none {
    pointer-events: none;
}

.absolute {
    position: absolute;
}

.inset-x-0 {
    left: 0;
    right: 0;
}

.top-0 {
    top: 0;
}

.bottom-0 {
    bottom: 0;
}

.h-1-3 {
    height: 33.333333%; /* h-1/3 */
}

/* Gradient overlays - EXACT from spec with proper implementation */
.bg-gradient-to-b.from-white {
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
}

.bg-gradient-to-t.from-white {
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
}

.bg-gradient-to-b.dark-from-background {
    background: linear-gradient(to bottom, #ffffff 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
}

.bg-gradient-to-t.dark-from-background {
    background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .bg-background {
        background-color: #000000;
    }

    .border {
        border-color: #374151;
    }

    .review-card {
        border-color: rgba(249, 250, 251, 0.1);
        background-color: rgba(249, 250, 251, 0.10);
    }

    .review-card:hover {
        background-color: rgba(249, 250, 251, 0.15);
    }

    .text-sm, .text-xs {
        color: #ffffff;
    }

    .dark-text-white-40 {
        color: rgba(255, 255, 255, 0.4);
    }

    .from-white {
        --tw-gradient-from: #000000;
        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0));
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .h-500px {
        height: 400px;
    }

    .review-card {
        height: 8rem;
        width: 7rem;
        padding: 0.75rem;
    }

    .text-sm {
        font-size: 0.75rem;
    }

    .text-xs {
        font-size: 0.625rem;
    }

    .marquee-wrapper {
        --duration: 30s; /* Slower on mobile */
    }
}

/* Performance optimizations */
.marquee-track {
    transform: translateZ(0); /* GPU acceleration */
    will-change: transform;
}

.review-card {
    transform: translateZ(0); /* GPU acceleration */
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .animate-marquee-vertical {
        animation: none;
    }

    .marquee-track {
        transform: none;
    }
}

/* Focus states */
.review-card:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}