/* Case Study Glassmorphism Styles */

body {
    font-family: 'Inter', sans-serif;
    background-color: #FAFAFA;
}

.glass-card {
    background-color: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease,
                transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease;
}

.glass-card:hover {
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.12);
}

/* Glass Card text hierarchy */
.glass-card h2,
.glass-card h3,
.glass-card h4 {
    color: #0F172A;
}

.glass-card p {
    color: #475569;
}

/* Glass Card labels (uppercase tracking text) */
.glass-card .text-\[10px\].uppercase {
    color: #94A3B8;
}

/* Glass Card tag/pill elements */
.glass-card .px-2.py-1.rounded {
    background-color: #F4F4F5;
    color: #475569;
    border-color: rgba(0, 0, 0, 0.08);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5rem;
}

.text-high-contrast {
    color: #0F172A;
}

.text-high-contrast::selection {
    background-color: #4F46E5;
    color: #FFFFFF;
}

.bg-grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.04;
}

.glow-indigo {
    filter: blur(120px);
    background: radial-gradient(circle, rgba(79, 70, 229, 0.08) 0%, transparent 70%);
}

.glow-magenta {
    filter: blur(120px);
    background: radial-gradient(circle, rgba(217, 70, 239, 0.06) 0%, transparent 70%);
}

/* Carousel Styles */

/* Carousel container background */
.carousel-container {
    background-color: #F4F4F5;
}

/* Carousel nav buttons */
.nav-btn {
    background: rgba(255, 255, 255, 0.8);
    color: #0F172A;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Expand button — same light glass styling as nav buttons */
.expand-btn {
    background: rgba(255, 255, 255, 0.8);
    color: #0F172A;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.carousel-container:hover .nav-btn, 
.carousel-container:hover .expand-btn {
    opacity: 1;
}

.slide {
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0, 0, 0.2, 1);
}

.slide.active {
    opacity: 1;
}

/* Slide image badges */
.slide .badge,
.slide [class*="badge"] {
    background: rgba(79, 70, 229, 0.1);
    color: #4F46E5;
}

/* Progress bar track */
.carousel-container .progress-bar-track,
.carousel-container > .h-1\.5,
.carousel-container > [class*="h-1"] {
    background: rgba(0, 0, 0, 0.05);
}

@keyframes progress {
    from { width: 0%; }
    to { width: 100%; }
}

/* Progress bar fill */
.progress-bar-fill {
    background: #94A3B8;
    animation: progress 5s linear infinite;
}

/* Lightbox */
#lightbox:target {
    display: flex;
}

/* Lightbox overlay */
#lightbox {
    background: rgba(250, 250, 250, 0.9);
    backdrop-filter: blur(20px);
}

/* Lightbox buttons (close, nav) */
#lightbox a,
#lightbox button {
    background: rgba(255, 255, 255, 0.8);
    color: #475569;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ===================================================================
   Case Study Navigation Cards (prev/next)
   =================================================================== */

/* --- Card base --- */
.case-study__nav-link {
    display: flex;
    align-items: center;
    gap: 0;
    transition: background-color 0.3s ease;
}

.case-study__nav-link:hover {
    background-color: #F4F4F5;
}

/* --- Arrow circle: hidden by default, revealed on hover --- */
.case-study__nav-icon {
    width: 0;
    min-width: 0;
    height: 48px;
    opacity: 0;
    overflow: hidden;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    flex-shrink: 0;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease,
                color 0.3s ease,
                margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-study__nav-link:hover .case-study__nav-icon {
    width: 48px;
    min-width: 48px;
    opacity: 1;
    background-color: #0F172A;
    color: #FFFFFF;
}

/* Previous card: circle on left, needs right margin on hover */
.case-study__nav-link--prev:hover .case-study__nav-icon {
    margin-right: 24px;
}

/* Next card: circle on right, needs left margin on hover */
.case-study__nav-link--next:hover .case-study__nav-icon {
    margin-left: 24px;
}

/* Next card: push text to the right */
.case-study__nav-link--next {
    justify-content: flex-end;
}

.case-study__nav-link--next .case-study__nav-body {
    text-align: right;
}

/* --- Text block --- */
.case-study__nav-body {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Label (Previous / Next) --- */
.case-study__nav-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: #94A3B8;
    margin-bottom: 8px;
    font-weight: 700;
}

/* --- Title --- */
.case-study__nav-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F172A;
    transition: transform 0.3s ease;
}

/* Previous: title nudges right on hover */
.case-study__nav-link--prev:hover .case-study__nav-title {
    transform: translateX(4px);
}

/* Next: title nudges left on hover */
.case-study__nav-link--next:hover .case-study__nav-title {
    transform: translateX(-4px);
}