/* =============================================
   PPADDL.com — Bauhaus-Inspired Design System
   Colors: #0D0D0D, #1A1A1A, #2B2B2B, #3D3D3D,
           #6B6B6B, #B8B8B0, #D4D4CE, #E0E0DA,
           #F5F5F0, #FFFFFF, #C0392B
   Fonts: Roboto Slab 700, Zilla Slab 500,
          Work Sans 400/600, Roboto Mono 400
   ============================================= */

/* === Reset & Base === */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    color: #2B2B2B;
    background-color: #F5F5F0;
    line-height: 1.75;
    overflow-x: hidden;
    position: relative;
}

/* === Background Grid Overlay === */
#grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(224, 224, 218, 0.5) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(224, 224, 218, 0.5) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 40%, transparent 100%);
}

/* === Sticky Header === */
#sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #F5F5F0;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

#sticky-header.visible {
    transform: translateY(0);
}

.header-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 16px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1A1A1A;
}

.header-nav {
    display: flex;
    gap: 32px;
}

.nav-link {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6B6B6B;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #C0392B;
}

.header-border {
    width: 0;
    height: 2px;
    background-color: #1A1A1A;
    transition: width 0.4s ease;
}

#sticky-header.visible .header-border {
    width: 100%;
}

/* === Hero Section === */
#hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background-color: #0D0D0D;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: crosshair;
    z-index: 1;
}

#hero-crosshair-zone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.crosshair-line {
    position: absolute;
    background-color: rgba(192, 57, 43, 0.25);
    opacity: 0;
    transition: opacity 0.15s ease;
}

#crosshair-h {
    width: 100%;
    height: 1px;
    left: 0;
    top: 50%;
}

#crosshair-v {
    width: 1px;
    height: 100%;
    top: 0;
    left: 50%;
}

/* Hero Geometric Elements */
.hero-geometrics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-rect {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-rect-1 {
    width: 280px;
    height: 200px;
    background-color: #FFFFFF;
    top: 38.2%;
    right: 18%;
    transform: translateX(100px);
}

.hero-rect-2 {
    width: 220px;
    height: 160px;
    background-color: #E0E0DA;
    top: 44%;
    right: 14%;
    transform: translateX(80px);
}

.hero-rect-3 {
    width: 160px;
    height: 120px;
    background-color: #C0392B;
    top: 50%;
    right: 22%;
    transform: translateX(60px);
}

.hero-line {
    position: absolute;
    background-color: #F5F5F0;
    opacity: 0;
}

.hero-line-1 {
    width: 0;
    height: 2px;
    top: 35%;
    right: 10%;
    transition: width 0.6s ease 0.8s, opacity 0.3s ease 0.8s;
}

.hero-line-2 {
    width: 2px;
    height: 0;
    top: 30%;
    right: 30%;
    transition: height 0.6s ease 1s, opacity 0.3s ease 1s;
}

.hero-rect.animate {
    opacity: 1;
    transform: translateX(0);
}

.hero-line.animate {
    opacity: 0.6;
}

.hero-line-1.animate {
    width: 200px;
}

.hero-line-2.animate {
    height: 200px;
}

.hero-title {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 8vw;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F5F5F0;
    margin-left: 12vw;
    position: relative;
    z-index: 3;
    opacity: 0;
    transform: scale(1.02);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-title.animate {
    opacity: 1;
    transform: scale(1.0);
}

.hero-tagline {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C0392B;
    margin-left: 12vw;
    margin-top: 16px;
    position: relative;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hero-tagline.animate {
    opacity: 1;
}

/* === Timeline Container === */
#timeline-container {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 0 200px 0;
    z-index: 1;
}

/* Timeline Spine */
#timeline-spine {
    position: absolute;
    left: 50%;
    top: 0;
    width: 4px;
    height: 0;
    background-color: #1A1A1A;
    transform: translateX(-50%);
    transition: height 0.05s linear;
    z-index: 1;
}

/* === Section Breaks === */
.section-break {
    position: relative;
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
    z-index: 2;
}

.section-break-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #B8B8B0;
    transform: translateY(-50%);
}

.section-break-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border: 2px solid #C0392B;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background-color: #F5F5F0;
    z-index: 3;
}

/* Section Icons */
.section-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    transform: translate(-50%, -50%);
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.section-icon.visible {
    opacity: 1;
}

/* About Icon: Circle with crosshairs */
.section-icon-about .geo-circle {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    border: 2px solid #1A1A1A;
    border-radius: 50%;
}

.section-icon-about .geo-line-h {
    position: absolute;
    top: 59px;
    left: 0;
    width: 120px;
    height: 2px;
    background-color: #C0392B;
}

.section-icon-about .geo-line-v {
    position: absolute;
    top: 0;
    left: 59px;
    width: 2px;
    height: 120px;
    background-color: #C0392B;
}

/* Process Icon: Square with triangle */
.section-icon-process .geo-square {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 80px;
    height: 80px;
    border: 2px solid #1A1A1A;
}

.section-icon-process .geo-triangle {
    position: absolute;
    top: 35px;
    left: 35px;
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 45px solid #C0392B;
}

/* Work Icon: Overlapping rects with circle */
.section-icon-work .geo-rect-1 {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 60px;
    height: 45px;
    border: 2px solid #1A1A1A;
}

.section-icon-work .geo-rect-2 {
    position: absolute;
    top: 45px;
    left: 45px;
    width: 60px;
    height: 45px;
    border: 2px solid #1A1A1A;
    background-color: rgba(245, 245, 240, 0.8);
}

.section-icon-work .geo-circle-sm {
    position: absolute;
    bottom: 15px;
    left: 25px;
    width: 30px;
    height: 30px;
    border: 2px solid #C0392B;
    border-radius: 50%;
}

/* Philosophy Icon: Triangle with diagonal */
.section-icon-philosophy .geo-triangle-lg {
    position: absolute;
    top: 15px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid #1A1A1A;
}

.section-icon-philosophy .geo-triangle-lg::after {
    content: '';
    position: absolute;
    top: 4px;
    left: -36px;
    width: 0;
    height: 0;
    border-left: 36px solid transparent;
    border-right: 36px solid transparent;
    border-bottom: 63px solid #F5F5F0;
}

.section-icon-philosophy .geo-line-diag {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 140px;
    height: 2px;
    background-color: #C0392B;
    transform: rotate(45deg);
    transform-origin: 0 0;
}

/* Contact Icon: Plus sign */
.section-icon-contact .geo-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section-icon-contact .geo-plus::before {
    content: '';
    position: absolute;
    top: -30px;
    left: -2px;
    width: 4px;
    height: 60px;
    background-color: #C0392B;
}

.section-icon-contact .geo-plus::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -30px;
    width: 60px;
    height: 4px;
    background-color: #C0392B;
}

/* === Timeline Nodes === */
.timeline-node {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    margin: 60px 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    z-index: 2;
}

.timeline-node.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Left Node */
.node-left {
    flex-direction: row-reverse;
    padding-right: 50%;
}

.node-left .node-content {
    text-align: right;
    padding-right: 40px;
    padding-left: 48px;
}

/* Right Node */
.node-right {
    padding-left: 50%;
}

.node-right .node-content {
    text-align: left;
    padding-left: 40px;
    padding-right: 48px;
}

/* Connector */
.connector {
    position: absolute;
    top: 24px;
    display: flex;
    align-items: center;
    z-index: 3;
}

.node-left .connector {
    right: calc(50% - 40px);
    flex-direction: row;
}

.node-right .connector {
    left: calc(50% - 40px);
    flex-direction: row-reverse;
}

.connector-bar {
    width: 0;
    height: 2px;
    background-color: #1A1A1A;
    transition: width 0.3s ease;
}

.timeline-node.visible .connector-bar {
    width: 40px;
}

/* Diamond Marker */
.diamond {
    width: 12px;
    height: 12px;
    background-color: transparent;
    border: 2px solid #1A1A1A;
    transform: rotate(45deg) scale(0);
    transition: transform 0.3s ease 0.2s, background-color 0.3s ease, border-color 0.3s ease;
    flex-shrink: 0;
}

.timeline-node.visible .diamond {
    transform: rotate(45deg) scale(1);
}

.diamond.filled {
    background-color: #C0392B;
    border-color: #C0392B;
}

/* Node Content */
.node-content {
    position: relative;
    padding-top: 8px;
    padding-bottom: 24px;
    max-width: 100%;
}

/* Border draw animation overlay */
.node-content .border-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
}

.node-content .border-overlay svg {
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
}

.node-content .border-overlay svg rect {
    fill: none;
    stroke: #1A1A1A;
    stroke-width: 3;
    stroke-dasharray: var(--perimeter, 1000);
    stroke-dashoffset: var(--perimeter, 1000);
}

.node-content.border-animating .border-overlay svg rect {
    animation: borderDraw 0.8s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

@keyframes borderDraw {
    0% {
        stroke-dashoffset: var(--perimeter, 1000);
        stroke: #1A1A1A;
    }
    85% {
        stroke: #1A1A1A;
    }
    95% {
        stroke: #C0392B;
    }
    100% {
        stroke-dashoffset: 0;
        stroke: #1A1A1A;
    }
}

/* Hover state for node content */
.node-content {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.node-content:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 #1A1A1A;
}

.node-content:hover .border-overlay svg rect {
    stroke: #C0392B;
}

.node-label {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C0392B;
    display: block;
    margin-bottom: 8px;
}

.node-heading {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1A1A1A;
    line-height: 1.15;
    margin-bottom: 16px;
}

.node-heading .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.1s ease, transform 0.1s ease;
}

.node-heading .word.stamp {
    opacity: 1;
    transform: translateY(0);
}

.node-text {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.75;
    color: #2B2B2B;
}

.contact-info {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.node-left .contact-info {
    align-items: flex-end;
}

.contact-item {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C0392B;
}

/* === Timeline Terminus === */
#timeline-terminus {
    position: relative;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    z-index: 2;
}

.terminus-chevron {
    width: 20px;
    height: 20px;
    border-right: 3px solid #1A1A1A;
    border-bottom: 3px solid #1A1A1A;
    transform: rotate(45deg);
    margin-top: -10px;
}

/* === Footer === */
#footer {
    position: relative;
    width: 100%;
    padding: 120px 48px 60px 48px;
    background-color: #FFFFFF;
    overflow: hidden;
    z-index: 1;
}

.footer-geometrics {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.footer-rect {
    position: absolute;
}

.footer-rect-1 {
    width: 280px;
    height: 200px;
    background-color: #1A1A1A;
    bottom: 20%;
    left: 10%;
    opacity: 0.15;
}

.footer-rect-2 {
    width: 220px;
    height: 160px;
    background-color: #0D0D0D;
    bottom: 15%;
    left: 15%;
    opacity: 0.1;
}

.footer-rect-3 {
    width: 160px;
    height: 120px;
    background-color: #C0392B;
    bottom: 25%;
    left: 8%;
    opacity: 0.2;
}

.footer-text {
    font-family: 'Roboto Slab', serif;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1A1A1A;
    position: relative;
    z-index: 1;
}

.footer-year {
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C0392B;
    margin-top: 16px;
    display: block;
    position: relative;
    z-index: 1;
}

/* === Responsive: Mobile (< 768px) === */
@media (max-width: 768px) {
    #grid-overlay {
        display: none;
    }

    .header-inner {
        padding: 12px 24px;
    }

    .header-nav {
        gap: 16px;
    }

    .nav-link {
        font-size: 0.7rem;
    }

    .hero-title {
        font-size: 12vw;
        margin-left: 8vw;
    }

    .hero-tagline {
        margin-left: 8vw;
    }

    .hero-rect-1 {
        width: 140px;
        height: 100px;
    }

    .hero-rect-2 {
        width: 110px;
        height: 80px;
    }

    .hero-rect-3 {
        width: 80px;
        height: 60px;
    }

    #timeline-container {
        padding: 60px 0 120px 0;
    }

    #timeline-spine {
        left: 24px;
        transform: translateX(0);
    }

    .timeline-node {
        margin: 40px 0;
    }

    .node-left,
    .node-right {
        flex-direction: row;
        padding-left: 60px;
        padding-right: 24px;
    }

    .node-left .node-content,
    .node-right .node-content {
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }

    .node-left .connector,
    .node-right .connector {
        left: 4px;
        right: auto;
        flex-direction: row-reverse;
    }

    .timeline-node.visible .connector-bar {
        width: 20px;
    }

    .node-heading {
        font-size: 1.5rem;
    }

    .section-break {
        height: 100px;
        margin: 20px 0;
    }

    .section-icon {
        width: 60px;
        height: 60px;
        left: 24px;
        transform: translate(-50%, -50%) scale(0.5);
    }

    .section-break-circle {
        left: 24px;
    }

    .node-left .contact-info {
        align-items: flex-start;
    }

    #footer {
        padding: 80px 24px 40px 24px;
    }

    .footer-text {
        font-size: 1.1rem;
    }
}

/* === Responsive: Tablet (768-1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
    .node-heading {
        font-size: 1.8rem;
    }

    .hero-title {
        font-size: 7vw;
    }

    .header-inner {
        padding: 16px 32px;
    }
}