/* ppuzzle.works -- Modular Constructivism */
:root {
    --red: #DE3C22;
    --blue: #1B56B5;
    --yellow: #F2C12E;
    --concrete: #E8E4DE;
    --dark: #2B2B2B;
    --light: #F5F2ED;
    --deep: #1A1816;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--dark); background: var(--concrete); overflow-x: hidden; }

.nav-strip { position: fixed; top: 0; left: 0; right: 0; display: flex; z-index: 100; height: 40px; }
.nav-block { flex: 1; display: flex; align-items: center; justify-content: center; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--light); transition: background 0.2s, transform 0.2s; transform: translateY(-100%); }
.nav-block.on { transform: translateY(0); }
.nav-red { background: var(--red); }
.nav-blue { background: var(--blue); }
.nav-yellow { background: var(--yellow); color: var(--dark); }

.concrete-field { padding: 56px 16px 0; max-width: 1200px; margin: 0 auto; }

.hero-grid { height: 100vh; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(6, 1fr); gap: 16px; align-items: stretch; padding-top: 40px; }
.hero-block { opacity: 0; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s; }
.block-1 { grid-column: 1 / 4; grid-row: 2 / 4; transform: translateX(-100%); }
.block-2 { grid-column: 4 / 7; grid-row: 1 / 3; transform: translateY(-100%); }
.block-3 { grid-column: 8 / 12; grid-row: 2 / 4; transform: translateX(100%); }
.block-4 { grid-column: 2 / 5; grid-row: 4 / 6; transform: translateX(-100%); }
.block-5 { grid-column: 5 / 11; grid-row: 3 / 6; transform: translateY(100%); display: flex; align-items: center; justify-content: center; }
.hero-block.on { opacity: 1; transform: translate(0, 0); }

.block-red { background: var(--red); box-shadow: 4px 4px 0 #B82E18; }
.block-blue { background: var(--blue); box-shadow: 4px 4px 0 #133D80; }
.block-yellow { background: var(--yellow); box-shadow: 4px 4px 0 #C9A01E; }
.block-dark { background: var(--dark); box-shadow: 4px 4px 0 var(--deep); }

.hero-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(32px, 5vw, 64px); letter-spacing: -0.03em; text-transform: uppercase; color: var(--light); opacity: 0; transition: opacity 0.3s; }
.hero-title.on { opacity: 1; }

.module-section { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 16px; }
.content-block { padding: 24px; position: relative; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s, box-shadow 0.2s; opacity: 0; }
.content-block.visible { opacity: 1; transform: translate(0, 0) !important; }
.content-block:hover { transform: translateY(-2px) !important; }
.content-block:hover.block-red { box-shadow: 8px 8px 0 #B82E18; }
.content-block:hover.block-blue { box-shadow: 8px 8px 0 #133D80; }
.content-block:hover.block-yellow { box-shadow: 8px 8px 0 #C9A01E; }
.content-block:hover.block-dark { box-shadow: 8px 8px 0 var(--deep); }

.slide-left { transform: translateX(-60px); }
.slide-right { transform: translateX(60px); }
.slide-up { transform: translateY(60px); }

.block-2x1 { grid-column: span 2; }
.block-1x2 { grid-row: span 2; }
.block-2x2 { grid-column: span 2; grid-row: span 2; }
.block-1x1 { min-height: 160px; }

.module-num { position: absolute; top: 8px; left: 12px; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 10px; color: inherit; opacity: 0.4; }
.light-num { color: var(--light); }

.rotation-mark { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; opacity: 0.3; }

.section-heading { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 32px; letter-spacing: -0.03em; text-transform: uppercase; color: var(--light); margin-bottom: 12px; }
.dark-heading { color: var(--dark); }
.light-heading { color: var(--light); }
.body-text { font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--dark); }
.light-text { color: var(--light); }
.concrete-text { color: var(--concrete); }

.footer-block { background: var(--dark); padding: 40px 24px; margin-top: 16px; position: relative; }

@media (max-width: 768px) {
    .hero-grid { grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, 1fr); }
    .block-1 { grid-column: 1 / 3; grid-row: 2 / 4; }
    .block-2 { grid-column: 3 / 5; grid-row: 1 / 3; }
    .block-3 { grid-column: 4 / 7; grid-row: 3 / 5; }
    .block-4 { grid-column: 1 / 4; grid-row: 5 / 7; }
    .block-5 { grid-column: 2 / 6; grid-row: 4 / 7; }
    .module-section { grid-template-columns: repeat(2, 1fr); }
    .block-2x2 { grid-column: span 2; }
    .section-heading { font-size: 24px; }
}