/* Scrollable Gallery Styles */
.scrollable-gallery {
    padding: 4rem 0;
    overflow: hidden;
}

.gallery-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.rectangle-parent {
    display: flex;
    gap: 1.5rem;
    cursor: none;
    padding: 2rem 0;
    user-select: none;
}

.rectangle-parent:active {
    cursor: none;
}

.rectangle {
    width: 320px;
    height: 480px;
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.rectangle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rectangle:hover::before {
    opacity: 1;
}

/* Fixed-height slot reserved for the info panel. Its size never changes,
   so dynamic content inside the panel cannot reflow sections below it.
   The actual panel is centered inside this slot and is free to grow or
   shrink as its content height changes. */
.project-info-slot {
    position: relative;
    width: 100%;
    height: 360px;
    margin: 3rem auto 0;
}

.project-info-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 2rem);
    max-width: 980px;
    margin: 0;
    padding: 2.25rem 2.5rem;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;

    /* Truly transparent panel (no tinted fill) */
    background: transparent;
    background: rgba(10, 10, 12, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 26px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.info-content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.project-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.project-year,
.project-type {
    padding: 0.25rem 0.75rem;
    background: rgba(74, 144, 226, 0.1);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: var(--font-weight-medium);
    color: var(--accent-blue);
}

.project-title-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    width: fit-content;
    margin: 0 auto;
    transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-description-wrapper {
    position: relative;
    overflow: hidden;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-title,
.project-description {
    margin: 0;
}

.project-title {
    font-size: 2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--white);
    margin-bottom: 1rem;
    line-height: 1.2;
    white-space: nowrap;
}

.project-description {
    font-size: 1.1rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    white-space: normal;
}

.title-overlay,
.description-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Slight bleed to avoid 1px lines from subpixel rounding during transforms */
    height: calc(100% + 2px);
    top: -1px;
    pointer-events: none;
    transform-origin: top;
    /* Keep overlays fully offscreen when idle (prevents “1px line” flicker) */
    transform: translate3d(0, 110%, 0);
    will-change: transform;
    backface-visibility: hidden;
}

.title-overlay {
    background: var(--white);
}

.description-overlay {
    background: var(--secondary-color);
}

.project-tags {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.project-tags .tag {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    color: var(--primary-color);
    transition: var(--transition);
}

.project-tags .tag:hover {
    background: rgba(74, 144, 226, 0.1);
    border-color: rgba(74, 144, 226, 0.3);
    color: var(--accent-blue);
}

.project-reel-actions {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: center;
}

/* Per-project CTA — minimal pill that matches the site's .btn-secondary
   language: transparent fill, light border, gentle highlight + lift on
   hover, arrow slides forward. */
.project-reel-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;

    user-select: auto;
    -webkit-user-select: auto;
    font-size: 0.95rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);

    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-reel-link__arrow {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-reel-link:hover {
    color: var(--white);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
}

.project-reel-link:hover .project-reel-link__arrow {
    transform: translateX(4px);
}

.project-reel-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.45);
    outline-offset: 3px;
}

/* Reel CTA band — separate dedicated section below the info panel inviting
   visitors to explore the full reel page. */
.reel-cta-band {
    margin: 2.5rem auto 0;
    max-width: 980px;
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;

    background:
        radial-gradient(800px circle at 50% 0%, rgba(74, 144, 226, 0.10), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
}

/* Under section headline (e.g. Selected Work): same CTA, no card chrome */
.reel-cta-band--header {
    margin: 1.75rem auto 0;
    max-width: 36rem;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    gap: 1rem;
}

.reel-cta-band--header .reel-cta-band__lead-text {
    font-size: 1.05rem;
}

.reel-cta-band--header .reel-cta-band__btn {
    padding: 0.78rem 1.55rem;
    font-size: 0.95rem;
}

.reel-cta-band__lead {
    margin: 0;
    max-width: 32em;
}

/* Full line: shared gradient + gentle shimmer + underline (same treatment
   for every word). */
.reel-cta-band__lead-text {
    display: inline-block;
    position: relative;
    padding-bottom: 0.3em;
    font-size: 1.14rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.55;
    letter-spacing: 0.03em;

    background-image: linear-gradient(
        125deg,
        #ffffff 0%,
        #d2e9ff 22%,
        var(--accent-blue) 48%,
        #e8f4ff 72%,
        #ffffff 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;

    filter: drop-shadow(0 0 10px rgba(74, 144, 226, 0.28));
    animation: reelLeadTextShimmer 6.5s ease-in-out infinite;
}

/* Second layer: bright segment that sweeps left ↔ right along the line. */
.reel-cta-band__lead-text::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 36%;
    max-width: 9.5rem;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 22%,
        rgba(210, 235, 255, 1) 50%,
        rgba(255, 255, 255, 0.45) 78%,
        transparent 100%
    );
    box-shadow:
        0 0 10px rgba(74, 144, 226, 0.45),
        0 0 18px rgba(74, 144, 226, 0.22);
    animation: reelLeadLineSweep 2.75s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 1;
}

/* Base track: full-width underline (static breath; motion reads on ::before). */
.reel-cta-band__lead-text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(74, 144, 226, 0.25),
        rgba(74, 144, 226, 0.85),
        rgba(168, 212, 255, 0.95),
        rgba(74, 144, 226, 0.85),
        rgba(74, 144, 226, 0.25),
        transparent
    );
    opacity: 0.8;
    transform-origin: center;
    animation: reelLeadUnderline 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes reelLeadTextShimmer {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* Highlight ping-pongs: 0% … 100% so the bar stays within the text width. */
@keyframes reelLeadLineSweep {
    0% {
        left: 0;
    }
    100% {
        left: calc(100% - min(36%, 9.5rem));
    }
}

@keyframes reelLeadUnderline {
    0%, 100% {
        opacity: 0.55;
    }
    50% {
        opacity: 0.88;
    }
}

/* Reel CTA button — static soft accent rim (no spin); inner pill unchanged. */
.reel-cta-band__btn-orbit {
    position: relative;
    display: inline-flex;
    border-radius: 999px;
    padding: 2px;
    background: linear-gradient(
        125deg,
        rgba(74, 144, 226, 0.45),
        rgba(74, 144, 226, 0.2),
        rgba(130, 185, 235, 0.38),
        rgba(74, 144, 226, 0.2),
        rgba(74, 144, 226, 0.42)
    );
    box-shadow: 0 4px 18px rgba(74, 144, 226, 0.12);
}

.reel-cta-band__btn-orbit-inner {
    display: inline-flex;
    border-radius: inherit;
}

.reel-cta-band__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.88rem 1.85rem;
    border-radius: 999px;

    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    text-decoration: none;

    color: var(--white);
    background: linear-gradient(
        165deg,
        rgba(32, 44, 66, 0.98) 0%,
        rgba(12, 15, 24, 0.99) 100%
    );
    border: 1px solid rgba(142, 197, 255, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 0 1px rgba(0, 0, 0, 0.35),
        0 4px 20px rgba(74, 144, 226, 0.22);

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.reel-cta-band__btn-arrow {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.reel-cta-band__btn:hover {
    color: var(--white);
    background: linear-gradient(
        165deg,
        rgba(44, 62, 94, 0.98) 0%,
        rgba(18, 24, 38, 0.99) 100%
    );
    border-color: rgba(190, 224, 255, 0.75);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(74, 144, 226, 0.35),
        0 8px 32px rgba(74, 144, 226, 0.45);
    transform: translateY(-2px);
}

.reel-cta-band__btn:hover .reel-cta-band__btn-arrow {
    transform: translateX(4px);
}

.reel-cta-band__btn:focus-visible {
    outline: 2px solid rgba(168, 212, 255, 0.95);
    outline-offset: 4px;
}

/* DynamicSlide Animation */
@keyframes DynamicSlide {
    0% {
        transform: translateY(0) scaleY(1);
        opacity: 1;
    }
    39% {
        transform: translateY(0%) scaleY(1);
        opacity: 1;
    }
    50% {
        transform: translateY(-20%) scaleY(1);
        opacity: 1;
    }
    100% {
        transform: translateY(0) scaleY(1);
        opacity: 1;
    }
}

@keyframes overlay-slide {
    0% {
        opacity: 1;
        transform: translate3d(0, 110%, 0) scaleY(1);
    }
    40% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scaleY(1);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, -110%, 0) scaleY(1);
    }
}

/* Responsive adjustments for scrollable gallery */
@media (max-width: 768px) {
    .scrollable-gallery {
        padding: 2rem 0;
    }
    
    .gallery-container {
        padding: 0 1rem;
    }
    
    .rectangle {
        width: 280px;
        height: 420px;
    }
    
    .rectangle-parent {
        gap: 1rem;
        padding: 1rem 0;
    }
    
    .project-info-slot {
        height: 320px;
        margin-top: 2rem;
    }

    .project-info-panel {
        padding: 1.5rem 1.25rem;
        border-radius: 22px;
    }
    
    .project-title {
        font-size: 1.5rem;
    }
    
    .project-description {
        font-size: 1rem;
    }

    .project-reel-link {
        padding: 0.6rem 1.15rem;
        font-size: 0.9rem;
    }

    .reel-cta-band {
        margin-top: 2rem;
        padding: 1.5rem 1.25rem;
        border-radius: 18px;
    }

    .reel-cta-band--header {
        margin-top: 1.4rem;
    }

    .reel-cta-band--header .reel-cta-band__lead-text {
        font-size: 0.98rem;
    }

    .reel-cta-band__lead-text {
        font-size: 1.02rem;
    }

    .reel-cta-band__btn {
        padding: 0.75rem 1.4rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .rectangle {
        width: 240px;
        height: 360px;
    }
    
    .rectangle-parent {
        gap: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-reel-link,
    .project-reel-link__arrow,
    .reel-cta-band__btn,
    .reel-cta-band__btn-arrow {
        transition: none;
    }

    .reel-cta-band__lead-text,
    .reel-cta-band__lead-text::before,
    .reel-cta-band__lead-text::after {
        animation: none;
    }

    .reel-cta-band__lead-text {
        background-position: 45% 50%;
    }

    .reel-cta-band__lead-text::before {
        left: 32%;
        box-shadow: none;
    }

    .reel-cta-band__lead-text::after {
        opacity: 0.75;
        transform: none;
    }

    .project-reel-link:hover,
    .reel-cta-band__btn:hover {
        transform: none;
    }

    .project-reel-link:hover .project-reel-link__arrow,
    .reel-cta-band__btn:hover .reel-cta-band__btn-arrow {
        transform: none;
    }
}