/* xity.one - Wabi-sabi digital archaeology */

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

:root {
    --aged-plaster: #F5EBD9;
    --kiln-clay: #C2774E;
    --charred-earth: #3A2A1E;
    --burnt-sienna: #A0522D;
    --patina-copper: #7A8B6F;
    --warm-fog: #E8DCC8;
    --ember-glow: #D4883A;
    --deep-ochre: #8B6914;
    --mortar-gap: clamp(12px, 2vw, 24px);
    --tile-padding: clamp(24px, 4vw, 48px);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.6vw, 1.1rem);
    line-height: 1.76;
    letter-spacing: 0.015em;
    color: var(--charred-earth);
    background-color: var(--aged-plaster);
    overflow-x: hidden;
}

/* Mortar pattern background */
.mortar-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Pulse lines */
.pulse-lines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.pulse-line {
    position: absolute;
    width: 100%;
    height: 4px;
    opacity: 0.02;
    animation: pulseOpacity 8s ease-in-out infinite;
}

.pulse-line-1 {
    top: 25%;
    animation-delay: 0s;
}

.pulse-line-2 {
    top: 55%;
    animation-delay: 2.5s;
}

.pulse-line-3 {
    top: 80%;
    animation-delay: 5s;
}

@keyframes pulseOpacity {
    0%, 100% { opacity: 0.01; }
    50% { opacity: 0.03; }
}

@keyframes pulseOpacityAwake {
    0%, 100% { opacity: 0.02; }
    50% { opacity: 0.05; }
}

/* Radial echoes */
.radial-echo {
    position: fixed;
    width: 300px;
    height: 300px;
    pointer-events: none;
    z-index: 1;
}

.radial-echo-1 {
    top: 30%;
    left: 10%;
}

.radial-echo-2 {
    top: 60%;
    right: 5%;
}

/* ====== THRESHOLD ====== */
.threshold {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background-color: var(--aged-plaster);
}

.threshold-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.threshold-title {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(5rem, 14vw, 12rem);
    letter-spacing: -0.02em;
    color: var(--charred-earth);
    position: relative;
    top: -5%;
}

.letter {
    display: inline-block;
    opacity: 0;
    animation: letterFadeIn 0.5s ease forwards;
    animation-delay: calc(var(--i) * 0.4s);
}

@keyframes letterFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.threshold-line {
    width: clamp(200px, 40vw, 400px);
    height: 4px;
    opacity: 0;
    animation: lineDrawIn 1.2s ease forwards;
    animation-delay: 1.5s;
}

.threshold-line path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawLine 1.2s ease forwards;
    animation-delay: 1.5s;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes lineDrawIn {
    to {
        opacity: 1;
    }
}

.threshold-phrase {
    font-family: 'Karla', sans-serif;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.4vw, 1.1rem);
    color: var(--burnt-sienna);
    letter-spacing: 0.05em;
    opacity: 0;
    animation: phraseIn 1s ease forwards;
    animation-delay: 2.5s;
}

@keyframes phraseIn {
    to {
        opacity: 1;
    }
}

.lattice-svg {
    position: absolute;
    bottom: 8%;
    width: clamp(280px, 50vw, 600px);
    height: auto;
    opacity: 0.12;
    pointer-events: none;
}

/* ====== TILE WALL ====== */
.tile-wall {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--mortar-gap);
    padding: var(--mortar-gap);
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 10vh;
}

/* Tile base */
.tile {
    position: relative;
    background-color: var(--tile-bg, var(--warm-fog));
    padding: var(--tile-padding);
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: calc(var(--tile-index, 0) * 80ms);
    clip-path: polygon(
        1px 2px,
        calc(100% - 2px) 0px,
        calc(100% - 1px) calc(100% - 1px),
        2px calc(100% - 2px)
    );
    box-shadow: 0 2px 8px rgba(58, 42, 30, 0.08);
}

.tile.visible {
    opacity: 1;
    transform: scale(1);
}

@media (hover: hover) {
    .tile:hover {
        transform: scale(1.025);
        box-shadow: 0 6px 20px rgba(58, 42, 30, 0.15);
        transition-duration: 400ms;
    }

    .tile:hover .fragment {
        opacity: 1;
    }

    .tile:hover .annotation {
        color: var(--ember-glow);
    }
}

/* Tile sizes - Desktop */
.tile-large {
    grid-column: span 6;
    grid-row: span 2;
    min-height: 320px;
}

.tile-narrow {
    grid-column: span 3;
    grid-row: span 2;
    min-height: 280px;
}

.tile-small {
    grid-column: span 3;
    grid-row: span 1;
    min-height: 160px;
}

.tile-medium {
    grid-column: span 5;
    grid-row: span 1;
    min-height: 220px;
}

.tile-wide {
    grid-column: span 7;
    grid-row: span 1;
    min-height: 220px;
}

/* Tile clip path variants for irregular edges */
.tile:nth-child(odd) {
    clip-path: polygon(
        0px 1px,
        calc(100% - 1px) 2px,
        calc(100% - 2px) calc(100% - 0px),
        1px calc(100% - 3px)
    );
}

.tile:nth-child(3n) {
    clip-path: polygon(
        2px 0px,
        calc(100% - 0px) 1px,
        calc(100% - 3px) calc(100% - 2px),
        0px calc(100% - 1px)
    );
}

/* Tile borders - inconsistent application */
.tile:nth-child(4n+1) {
    border-top: 1px solid rgba(58, 42, 30, 0.12);
    border-left: 1px solid rgba(58, 42, 30, 0.12);
    border-bottom: 1px solid rgba(58, 42, 30, 0.12);
}

.tile:nth-child(4n+2) {
    border-right: 1px solid rgba(58, 42, 30, 0.1);
    border-bottom: 1px solid rgba(58, 42, 30, 0.1);
}

.tile:nth-child(4n+3) {
    border-top: 1px solid rgba(58, 42, 30, 0.12);
    border-right: 1px solid rgba(58, 42, 30, 0.12);
}

/* Typography */
.tile h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: 0.01em;
    color: var(--charred-earth);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.tile p {
    margin-bottom: 0.75rem;
    color: var(--charred-earth);
}

.tile p:last-child {
    margin-bottom: 0;
}

.pull-quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    line-height: 1.5;
    color: var(--burnt-sienna);
}

.annotation {
    display: block;
    font-family: 'Caveat', cursive;
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    color: var(--burnt-sienna);
    margin-top: 0.75rem;
    transition: color 500ms ease;
}

.annotation-center {
    text-align: center;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: var(--deep-ochre);
}

/* Accent tiles */
.tile-accent {
    display: flex;
    align-items: center;
    justify-content: center;
}

.accent-char {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--aged-plaster);
    line-height: 1;
}

.accent-light {
    color: var(--aged-plaster);
}

.tile-accent[style*="--tile-bg:#C2774E"] .accent-char,
.tile-accent[style*="--tile-bg:#A0522D"] .accent-char,
.tile-accent[style*="--tile-bg:#3A2A1E"] .accent-char,
.tile-accent[style*="--tile-bg:#6B4F3A"] .accent-char {
    color: var(--aged-plaster);
}

/* Illustration tiles */
.tile-illustration {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.fragment {
    width: 100%;
    max-width: 200px;
    height: auto;
    opacity: 0.6;
    transition: opacity 500ms ease;
    transform: rotate(-1deg);
}

.tile:nth-child(even) .fragment {
    transform: rotate(2deg);
}

.fragment-float {
    float: left;
    width: 120px;
    max-width: 120px;
    margin-right: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Mixed tiles */
.mixed-content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.mixed-text {
    flex: 1;
}

/* Final tile */
.tile-final {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    grid-column: span 8;
    grid-column-start: 3;
}

/* ====== RESPONSIVE ====== */

/* Tablet */
@media (max-width: 960px) and (min-width: 601px) {
    .tile-wall {
        grid-template-columns: repeat(2, 1fr);
    }

    .tile-large,
    .tile-wide {
        grid-column: span 2;
        grid-row: span 1;
    }

    .tile-narrow,
    .tile-medium,
    .tile-small {
        grid-column: span 1;
        grid-row: span 1;
    }

    .tile-final {
        grid-column: span 2;
        grid-column-start: auto;
    }
}

/* Mobile */
@media (max-width: 600px) {
    .tile-wall {
        grid-template-columns: 1fr;
    }

    .tile-large,
    .tile-wide,
    .tile-narrow,
    .tile-medium,
    .tile-small,
    .tile-final {
        grid-column: span 1;
        grid-row: span 1;
        min-height: auto;
    }

    .tile-final {
        grid-column-start: auto;
    }

    .mixed-content {
        flex-direction: column;
    }

    .fragment-float {
        float: none;
        margin-right: 0;
        margin-bottom: 1rem;
        width: 100px;
    }

    .lattice-svg {
        opacity: 0.08;
    }
}

/* Touch devices - tap highlight instead of hover */
@media (hover: none) {
    .tile:active {
        background-color: rgba(212, 136, 58, 0.08);
        transition-duration: 100ms;
    }
}