/* Project Detail Page Styles */
/* Styles specific to project detail/case study pages */

/* Hero Section */
.project-hero {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: column;
}

.project-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--tertiary-text);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.project-title {
    font-size: clamp(48px, 8vw, 80px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
}

/* Section Styles */
.section-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--tertiary-text);
    margin-bottom: 12px;
}

.section-content {
    grid-column: 2 / 4;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.section-heading {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 16px;
}

.section-text {
    font-size: clamp(16px, 1.8vw, 18px);
    line-height: 1.5;
    color: var(--secondary-text);
    font-weight: 300;
}

/* Project Link */
.project-link {
    display: inline-block;
    margin-top: 20px;
    font-size: clamp(16px, 1.8vw, 18px);
    font-weight: 400;
    color: var(--text-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.project-link:hover {
    opacity: 0.7;
}

/* Project Details List */
.project-details {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 20px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tertiary-text);
}

.detail-value {
    font-size: 16px;
    color: var(--text-color);
    font-weight: 400;
}

/* Image Container - extends global styles */
.image-container {
    grid-column: 1 / 4;
}

/* Project Characteristics */
.project-characteristics {
    grid-column: 1 / 4;
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
}

.characteristic-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.characteristic-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--tertiary-text);
}

.characteristic-value {
    font-size: 15px;
    color: var(--text-color);
    font-weight: 400;
    line-height: 1.5;
}

/* Sticky Scroll Section */
.sticky-scroll-section {
    grid-column: 1 / 4;
    position: relative;
}

.sticky-text {
    /* GSAP ScrollTrigger will handle pinning */
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sticky-text .section-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--tertiary-text);
}

.scroll-images {
    display: flex;
    flex-direction: column;
    grid-column: 2 / 4;
    gap: 60px;
    padding: 0;
}

.scroll-image {
    width: 100%;
    border-radius: 24px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Next Project Link */
.next-project {
    grid-column: 1 / 4;
    margin-top: 60px;
    padding: 60px 0;
    border-top: 1px solid var(--border-color);
}

.next-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.next-link:hover {
    transform: translateX(10px);
}

.next-label {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tertiary-text);
    margin-bottom: 8px;
}

.next-title {
    font-size: clamp(32px, 5vw, 48px);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.next-arrow {
    font-size: 48px;
    font-weight: 300;
    transition: transform 0.3s ease;
}

.next-link:hover .next-arrow {
    transform: translateX(10px);
}

/* Responsive Design for Project Details */
@media (max-width: 1280px) {
    .container {
        max-width: 100%;
        padding: 100px 40px 60px;
    }

    .grid-layout {
        grid-template-columns: 1fr 2fr;
        column-gap: 80px;
    }

    .section-title {
        grid-column: 1;
    }

    .section-content {
        grid-column: 2;
    }

    .project-hero {
        grid-column: 1 / 3;
    }

    .project-characteristics {
        grid-column: 1 / 3;
        gap: 40px;
    }

    .image-container {
        grid-column: 1 / 3;
    }

    .sticky-scroll-section {
        grid-column: 1 / 3;
        grid-template-columns: 1fr 2fr;
        column-gap: 60px;
    }

    .scroll-images {
        gap: 40px;
        padding: 80px 0;
    }

    .next-project {
        grid-column: 1 / 3;
    }
}

@media (max-width: 768px) {
    .grid-layout {
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    .section-title {
        grid-column: 1;
        font-size: 32px;
        margin-bottom: 20px;
    }

    .section-content {
        grid-column: 1;
    }

    .project-hero {
        grid-column: 1;
    }

    .project-characteristics {
        grid-column: 1;
        flex-direction: column;
        gap: 24px;
        margin: 30px 0 40px;
    }

    .image-container {
        grid-column: 1;
    }

    .sticky-scroll-section {
        grid-column: 1;
        grid-template-columns: 1fr;
    }

    .sticky-text {
        margin-bottom: 40px;
    }

    .scroll-images {
        grid-column: 1;
        gap: 30px;
        padding: 0;
    }

    .next-project {
        grid-column: 1;
        margin-top: 40px;
        padding: 40px 0;
    }
}

/* Animated Button */
.swirl-button {
    --duration: 7s;
    --easing: linear;
    --c-color-1: rgba(90, 88, 96, 0.6);
    --c-color-2: rgba(29, 29, 29, 0.7);
    --c-color-3: rgba(63, 63, 72, 0.6);
    --c-color-4: rgba(134, 134, 147, 0.5);
    --c-radial-inner: #2a2a2a;
    --c-radial-outer: #1a1a1a;
    --c-color: #fff;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    border: none;
    display: inline-flex;
    position: relative;
    border-radius: 28px;
    padding: 0;
    margin: 0;
    text-align: center;
    font-family: var(--font-family);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.5;
    color: var(--c-color);
    background: var(--c-radial-outer);
    text-decoration: none;
    transition: transform 0.3s ease;
    overflow: hidden;
}

.swirl-button:before {
    content: "";
    pointer-events: none;
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 28px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.swirl-button .wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    min-width: 110px;
    padding: 10px 20px;
    background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
}

.swirl-button .wrapper span {
    display: inline-block;
    position: relative;
    letter-spacing: 3%;
    font-weight: 300;
    z-index: 1;
}

.swirl-button .wrapper .arrow {
    display: inline-block;
    margin-left: 8px;
    font-size: 14px;
    transition: transform 0.3s ease;
}

.swirl-button:hover {
    --duration: 2s;
    transform: translateY(-1px);
}

.swirl-button:hover .arrow {
    transform: translate(2px, 2px);
}

.swirl-button .wrapper .circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    filter: blur(var(--blur, 8px));
    background: var(--background, transparent);
    transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
    animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

.swirl-button .wrapper .circle.circle-1,
.swirl-button .wrapper .circle.circle-9,
.swirl-button .wrapper .circle.circle-10 {
    --background: var(--c-color-4);
}

.swirl-button .wrapper .circle.circle-3,
.swirl-button .wrapper .circle.circle-4 {
    --background: var(--c-color-2);
    --blur: 14px;
}

.swirl-button .wrapper .circle.circle-5,
.swirl-button .wrapper .circle.circle-6 {
    --background: var(--c-color-3);
    --blur: 16px;
}

.swirl-button .wrapper .circle.circle-2,
.swirl-button .wrapper .circle.circle-7,
.swirl-button .wrapper .circle.circle-8,
.swirl-button .wrapper .circle.circle-11,
.swirl-button .wrapper .circle.circle-12 {
    --background: var(--c-color-1);
    --blur: 12px;
}

.swirl-button .wrapper .circle.circle-1 { --x: 0; --y: -40px; --animation: circle-1; }
.swirl-button .wrapper .circle.circle-2 { --x: 92px; --y: 8px; --animation: circle-2; }
.swirl-button .wrapper .circle.circle-3 { --x: -12px; --y: -12px; --animation: circle-3; }
.swirl-button .wrapper .circle.circle-4 { --x: 80px; --y: -12px; --animation: circle-4; }
.swirl-button .wrapper .circle.circle-5 { --x: 12px; --y: -4px; --animation: circle-5; }
.swirl-button .wrapper .circle.circle-6 { --x: 56px; --y: 16px; --animation: circle-6; }
.swirl-button .wrapper .circle.circle-7 { --x: 8px; --y: 28px; --animation: circle-7; }
.swirl-button .wrapper .circle.circle-8 { --x: 28px; --y: -4px; --animation: circle-8; }
.swirl-button .wrapper .circle.circle-9 { --x: 20px; --y: -12px; --animation: circle-9; }
.swirl-button .wrapper .circle.circle-10 { --x: 64px; --y: 16px; --animation: circle-10; }
.swirl-button .wrapper .circle.circle-11 { --x: 4px; --y: 4px; --animation: circle-11; }
.swirl-button .wrapper .circle.circle-12 { --blur: 14px; --x: 52px; --y: 4px; --animation: circle-12; }

@keyframes circle-1 { 33% { transform: translate(0px, 16px) translateZ(0); } 66% { transform: translate(12px, 64px) translateZ(0); } }
@keyframes circle-2 { 33% { transform: translate(80px, -10px) translateZ(0); } 66% { transform: translate(72px, -48px) translateZ(0); } }
@keyframes circle-3 { 33% { transform: translate(20px, 12px) translateZ(0); } 66% { transform: translate(12px, 4px) translateZ(0); } }
@keyframes circle-4 { 33% { transform: translate(76px, -12px) translateZ(0); } 66% { transform: translate(112px, -8px) translateZ(0); } }
@keyframes circle-5 { 33% { transform: translate(84px, 28px) translateZ(0); } 66% { transform: translate(40px, -32px) translateZ(0); } }
@keyframes circle-6 { 33% { transform: translate(28px, -16px) translateZ(0); } 66% { transform: translate(76px, -56px) translateZ(0); } }
@keyframes circle-7 { 33% { transform: translate(8px, 28px) translateZ(0); } 66% { transform: translate(20px, -60px) translateZ(0); } }
@keyframes circle-8 { 33% { transform: translate(32px, -4px) translateZ(0); } 66% { transform: translate(56px, -20px) translateZ(0); } }
@keyframes circle-9 { 33% { transform: translate(20px, -12px) translateZ(0); } 66% { transform: translate(80px, -8px) translateZ(0); } }
@keyframes circle-10 { 33% { transform: translate(68px, 20px) translateZ(0); } 66% { transform: translate(100px, 28px) translateZ(0); } }
@keyframes circle-11 { 33% { transform: translate(4px, 4px) translateZ(0); } 66% { transform: translate(68px, 20px) translateZ(0); } }
@keyframes circle-12 { 33% { transform: translate(56px, 0px) translateZ(0); } 66% { transform: translate(60px, -32px) translateZ(0); } }