/* ppuzzl.in - Corporate Marble Institutional */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #fafaf8;
    color: #2a2622;
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.75;
    overflow-x: hidden;
}

/* Marble Background */
.marble-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(130deg, transparent 0px, transparent 40px, #d4cfc6 41px, transparent 43px),
        repeating-linear-gradient(70deg, transparent 0px, transparent 60px, #e8e4db 61px, transparent 62px),
        repeating-conic-gradient(rgba(212, 207, 198, 0.01) 0deg, transparent 1deg, transparent 5deg) 0 0 / 4px 4px;
    background-color: #fafaf8;
    z-index: 0;
}

/* Marble Shimmer */
.marble-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(232, 228, 219, 0.6) 50%, transparent 70%);
    background-size: 300% 100%;
    background-position: -100% 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
}

.marble-shimmer.active {
    opacity: 1;
    animation: shimmer-pass 2s ease-in-out forwards;
}

@keyframes shimmer-pass {
    0% { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

/* Atrium */
.atrium {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.atrium-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.corp-wordmark {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    letter-spacing: 0.04em;
    color: #3a3632;
    opacity: 0;
    transition: opacity 1s ease;
}

.corp-wordmark.visible {
    opacity: 1;
}

.corp-rule {
    width: 0;
    height: 1px;
    background: #8a7d6b;
    margin: 20px auto;
    transition: width 0.8s ease;
}

.corp-rule.visible {
    width: 50vw;
    max-width: 500px;
}

.corp-descriptor {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-style: italic;
    font-size: 1rem;
    color: #7a756e;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.corp-descriptor.visible {
    opacity: 1;
}

/* Capability Section */
.capability-section {
    padding: 100px 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.capability-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

/* Capability Card */
.cap-card {
    position: relative;
    background: #f0efeb;
    aspect-ratio: 1;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    cursor: default;
}

.cap-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.cap-card-wide {
    grid-column: span 2;
    aspect-ratio: 2 / 1;
}

/* Card Grain Overlay */
.card-grain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-conic-gradient(rgba(58, 54, 50, 0.03) 0deg, transparent 1deg, transparent 4deg) 0 0 / 3px 3px,
        repeating-conic-gradient(transparent 0deg, rgba(58, 54, 50, 0.02) 2deg, transparent 3deg) 1px 1px / 4px 4px;
    transition: transform 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.cap-card:hover .card-grain {
    transform: rotate(90deg);
}

/* Card Shimmer */
.card-shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent 30%, rgba(232, 228, 219, 0.6) 50%, transparent 70%);
    background-size: 300% 100%;
    background-position: -100% 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cap-card:hover .card-shimmer {
    opacity: 1;
    animation: shimmer-pass 0.8s ease-in-out forwards;
}

/* Card Motif */
.card-motif {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    z-index: 0;
    transition: transform 0.5s ease;
}

.cap-card:hover .motif-flute line {
    animation: flute-extend 0.5s ease forwards;
}

@keyframes flute-extend {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(1.3); }
    100% { transform: scaleY(1); }
}

.cap-card:hover .motif-scroll path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: scroll-draw 0.8s ease forwards;
}

@keyframes scroll-draw {
    to { stroke-dashoffset: 0; }
}

.cap-card:hover .motif-pediment polygon {
    animation: pediment-open 0.6s ease forwards;
}

@keyframes pediment-open {
    0% { transform: scaleX(1); }
    50% { transform: scaleX(1.05); }
    100% { transform: scaleX(1); }
}

/* Card Text */
.card-text {
    position: relative;
    z-index: 3;
}

.card-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #3a3632;
    margin-bottom: 8px;
}

.card-desc {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #7a756e;
}

/* Data Ribbon */
.data-ribbon {
    width: 100%;
    background: #4a6a78;
    padding: 20px 0;
    overflow: hidden;
    margin: 40px 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.data-ribbon.visible {
    opacity: 1;
}

.ribbon-track {
    display: flex;
    white-space: nowrap;
    animation: ribbon-scroll 60s linear infinite;
}

.ribbon-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fafaf8;
    padding: 0 20px;
}

@keyframes ribbon-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* d4cfc6 marble vein, e8e4db shimmer - used in marble-bg and shimmer */

/* Footer Monument */
.monument {
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafaf8;
    overflow: hidden;
}

.monument-spotlight {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(138, 125, 107, 0.08) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: spotlight-pulse 3s ease-in-out 1;
}

.monument.visible .monument-spotlight {
    opacity: 1;
}

@keyframes spotlight-pulse {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

.monument-content {
    position: relative;
    z-index: 1;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
}

.monument.visible .monument-content {
    opacity: 1;
    transform: translateY(0);
}

.monument-wordmark {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: 0.04em;
    background:
        repeating-linear-gradient(130deg, transparent 0px, transparent 40px, #d4cfc6 41px, transparent 43px),
        repeating-linear-gradient(70deg, transparent 0px, transparent 60px, #e8e4db 61px, transparent 62px),
        linear-gradient(135deg, #3a3632, #7a756e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
}

.monument-domain {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: #7a756e;
    margin-top: 12px;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 900px) {
    .capability-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cap-card-wide {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .capability-grid {
        grid-template-columns: 1fr;
    }

    .cap-card-wide {
        grid-column: span 1;
        aspect-ratio: auto;
    }

    .cap-card {
        aspect-ratio: auto;
        min-height: 200px;
    }

    .capability-section {
        padding: 60px 20px;
    }
}