/* ============================================================
   datatelomere.com - Styles
   Renaissance cartographer's study in digital space
   ============================================================ */

/* ---- CSS Custom Properties ---- */
:root {
    /* Color Palette */
    --aged-vellum: #F2E6D0;
    --deep-terracotta: #B85C38;
    --burnt-umber: #6B3A2A;
    --codex-black-brown: #2A1810;
    --walnut-ink: #3D2B1F;
    --faded-iron-gall: #7A6855;
    --gilded-ochre: #C8963E;
    --verdigris: #5B8A72;
    --carrara-white: #EDE8E0;
    --lampblack: #1A1512;

    /* Diagonal Angles */
    --angle-neg5: -5deg;
    --angle-pos4: 4deg;
    --angle-neg6: -6deg;
    --angle-pos3: 3deg;
    --angle-neg4: -4deg;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--aged-vellum);
    color: var(--walnut-ink);
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    line-height: 1.65;
    overflow-x: hidden;
}

/* ---- Typography ---- */
h1, h2, h3 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.6rem, 3.5vw, 3rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 2.4rem;
}

a {
    color: var(--gilded-ochre);
    text-decoration: none;
}

a:visited {
    color: var(--verdigris);
}

blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
}

/* ---- Paper-Aged Texture System ---- */
.section--inscription,
.strata--archive,
.strata--cartography {
    position: relative;
    background-color: var(--aged-vellum);
}

.section--inscription::before,
.strata--archive::before,
.strata--cartography::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 600px 400px at 30% 40%, rgba(61, 43, 31, 0.02) 0%, transparent 70%),
                radial-gradient(ellipse 400px 300px at 70% 60%, rgba(61, 43, 31, 0.02) 0%, transparent 70%),
                radial-gradient(ellipse 200px 200px at 50% 20%, rgba(61, 43, 31, 0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.section--inscription::after,
.strata--archive::after,
.strata--cartography::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0.8deg,
        transparent,
        transparent 3px,
        rgba(61, 43, 31, 0.015) 3px,
        rgba(61, 43, 31, 0.015) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Conic gradient for tonal variation on light sections */
.strata--archive,
.strata--cartography {
    background-image: conic-gradient(
        from 45deg at 50% 50%,
        var(--aged-vellum) 0deg,
        #EFE1C8 90deg,
        var(--aged-vellum) 180deg,
        #F5EAD6 270deg,
        var(--aged-vellum) 360deg
    );
}


/* ============================================================
   SECTION 1: INSCRIPTION (100vh)
   ============================================================ */
.section--inscription {
    height: 100vh;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.inscription__upper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background-color: var(--aged-vellum);
    background-image: conic-gradient(
        from 120deg at 30% 40%,
        var(--aged-vellum) 0deg,
        #EFE1C8 120deg,
        var(--aged-vellum) 240deg,
        #F5EAD6 360deg
    );
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10vh 8vw;
    z-index: 2;
}

.inscription__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: clamp(3rem, 8vw, 6rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--walnut-ink);
    text-shadow: 1px 1px 0 #EDE8E0, -1px -1px 0 #6B3A2A;
    line-height: 1.1;
    max-width: 50vw;
}

.inscription__subtitle {
    font-family: 'Lora', serif;
    font-weight: 400;
    font-size: clamp(0.9rem, 2vw, 1.3rem);
    color: var(--faded-iron-gall);
    margin-top: 1.5rem;
    letter-spacing: 0.04em;
    max-width: 40vw;
}

.inscription__lower {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    background-color: var(--deep-terracotta);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

/* Diagonal dividing line SVG */
.inscription__divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.inscription__label {
    font-family: 'Caveat', cursive;
    font-size: 18px;
    fill: var(--faded-iron-gall);
}


/* ---- Marble Sphere ---- */
.marble-sphere {
    width: clamp(160px, 25vw, 320px);
    height: clamp(160px, 25vw, 320px);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    background: radial-gradient(
        circle at 35% 35%,
        #EDE8E0 0%,
        #D4CFC5 20%,
        #B8B0A4 40%,
        #9E9488 60%,
        #7A6855 80%,
        #6B3A2A 100%
    );
    box-shadow: inset -20px -20px 40px rgba(26, 21, 18, 0.3),
                inset 10px 10px 30px rgba(237, 232, 224, 0.2);
    animation: sphereRotate 20s linear infinite;
}

.marble-sphere__inner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
}

.marble-sphere__vein {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.marble-sphere__vein--1 {
    background: radial-gradient(
        ellipse 80% 20% at 30% 50%,
        rgba(237, 232, 224, 0.25) 0%,
        transparent 70%
    );
    animation: veinDrift1 15s ease-in-out infinite;
}

.marble-sphere__vein--2 {
    background: radial-gradient(
        ellipse 60% 15% at 60% 40%,
        rgba(237, 232, 224, 0.2) 0%,
        transparent 70%
    );
    animation: veinDrift2 18s ease-in-out infinite;
}

.marble-sphere__vein--3 {
    background: radial-gradient(
        ellipse 40% 25% at 50% 65%,
        rgba(237, 232, 224, 0.15) 0%,
        transparent 70%
    );
    animation: veinDrift3 22s ease-in-out infinite;
}

.marble-sphere__highlight {
    position: absolute;
    top: 15%;
    left: 20%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(237, 232, 224, 0.4) 0%,
        transparent 70%
    );
}

@keyframes sphereRotate {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

@keyframes veinDrift1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(10px, -5px) rotate(5deg); }
}

@keyframes veinDrift2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(-8px, 7px) rotate(-3deg); }
}

@keyframes veinDrift3 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5px, 8px) rotate(4deg); }
}


/* ============================================================
   STRATA SECTIONS - Diagonal Bands
   ============================================================ */
.section--strata {
    position: relative;
    overflow: hidden;
}

/* Scroll-triggered reveal initial state */
.section--strata,
.section--colophon {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.section--strata.revealed,
.section--colophon.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Individual strata band containers */
.strata__band {
    position: relative;
    padding: 8vh 0;
    z-index: 2;
}

/* Diagonal angles applied via clip-path on the section */
.strata--archive {
    min-height: 95vh;
    clip-path: polygon(0 8%, 100% 0, 100% 92%, 0 100%);
    margin-top: -8vh;
    padding: 12vh 0;
}

.strata--preservation {
    min-height: 95vh;
    background-color: var(--deep-terracotta);
    clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 94%);
    margin-top: -10vh;
    padding: 12vh 0;
}

.strata--cartography {
    min-height: 100vh;
    clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
    margin-top: -10vh;
    padding: 14vh 0;
}

.strata--chamber {
    min-height: 90vh;
    background-color: var(--burnt-umber);
    clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
    margin-top: -8vh;
    padding: 12vh 0;
}

.strata--stone {
    min-height: 95vh;
    clip-path: polygon(0 7%, 100% 0, 100% 93%, 0 100%);
    margin-top: -8vh;
    padding: 12vh 0;
    position: relative;
}

/* Split background for The Living Stone */
.strata--stone {
    background: linear-gradient(to right, var(--aged-vellum) 50%, var(--deep-terracotta) 50%);
    background-image: none;
}

.strata--stone::before,
.strata--stone::after {
    display: none;
}

/* Strata band rotations for inner content */
.strata__band--neg5 .strata__content {
    transform: rotate(0deg);
}

.strata__band--pos4 .strata__content {
    transform: rotate(0deg);
}

.strata__band--neg6 .strata__content {
    transform: rotate(0deg);
}

.strata__band--pos3 .strata__content {
    transform: rotate(0deg);
}

.strata__band--neg4 .strata__content {
    transform: rotate(0deg);
}

/* Strata content layout */
.strata__content {
    max-width: clamp(28rem, 70vw, 60rem);
    margin: 0 auto;
    padding: 4vh 3vw;
    position: relative;
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 2rem;
}

.strata__main {
    position: relative;
}

/* ---- Margin Notes ---- */
.margin-note {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: start;
    position: relative;
}

.margin-note__text {
    font-family: 'Caveat', cursive;
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    color: var(--faded-iron-gall);
    line-height: 1.45;
    max-width: 180px;
    padding-right: 1rem;
    border-right: 1px solid var(--faded-iron-gall);
}

.margin-note__text em {
    font-style: normal;
    color: var(--gilded-ochre);
}

/* Main content area */
.strata__main {
    grid-column: 2;
}

.strata__heading {
    color: var(--walnut-ink);
}

.strata__body {
    margin-bottom: 2.4rem;
    max-width: 48rem;
}

.strata__body em {
    font-weight: 600;
    font-style: italic;
}

.strata__body--light {
    color: var(--carrara-white);
}


/* ============================================================
   SECTION 2: STRATA I - The Archive
   ============================================================ */
.strata--archive .strata__content {
    grid-template-columns: 180px 1fr auto;
}

.illustration--helix {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
}

.helix-svg {
    width: clamp(100px, 12vw, 180px);
    height: auto;
    transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.helix-svg:hover {
    transform: scale(1.08);
}


/* ============================================================
   SECTION 3: STRATA II - The Preservation
   ============================================================ */
.strata--preservation {
    color: var(--carrara-white);
}

.strata--preservation .strata__heading {
    color: var(--carrara-white);
}

.strata--preservation .margin-note__text {
    color: var(--carrara-white);
    border-right-color: rgba(237, 232, 224, 0.3);
}

.strata--preservation .margin-note__text em {
    color: var(--gilded-ochre);
}

.marble-veins {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.marble-veins--preservation {
    opacity: 0.6;
}

.marble-vein-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: marbleVeinGrow 30s linear infinite;
}

@keyframes marbleVeinGrow {
    0% {
        stroke-dashoffset: 1000;
    }
    100% {
        stroke-dashoffset: 0;
    }
}


/* ============================================================
   SECTION 4: STRATA III - The Cartography
   ============================================================ */
.illustration--map {
    grid-column: 1 / -1;
    margin-top: 2.4rem;
}

.map-svg {
    width: 100%;
    max-width: 600px;
    height: auto;
}

.map-region {
    cursor: default;
    transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
}

.map-region:hover {
    transform: scale(1.08);
}

.map-label {
    transition: opacity 600ms ease;
    pointer-events: none;
}

.map-region:hover .map-label {
    opacity: 1;
}


/* ============================================================
   SECTION 5: STRATA IV - The Inscription Chamber
   ============================================================ */
.strata--chamber {
    color: var(--carrara-white);
}

.strata--chamber .strata__heading {
    color: var(--carrara-white);
}

.strata--chamber .margin-note__text {
    color: rgba(237, 232, 224, 0.7);
    border-right-color: rgba(237, 232, 224, 0.2);
}

.strata--chamber .strata__content {
    grid-template-columns: 180px 1fr;
    position: relative;
}

.strata__pullquote {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.4rem);
    line-height: 1.4;
    color: var(--carrara-white);
    padding: 2.4rem 0;
    max-width: 42rem;
}

.strata__pullquote p {
    margin: 0;
}

.strata__rule {
    border: none;
    height: 3px;
    background-color: var(--gilded-ochre);
    margin: 1.2rem 0;
    position: relative;
}

.strata__rule::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--gilded-ochre);
}

.strata__rule::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--gilded-ochre);
}

/* Entablature SVG */
.entablature {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 1.2rem;
}

/* Column Capitals */
.column-capital {
    position: absolute;
    width: 60px;
    height: auto;
    z-index: 1;
}

.column-capital--left {
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
}

.column-capital--right {
    right: -80px;
    top: 50%;
    transform: translateY(-50%);
}


/* ============================================================
   SECTION 6: STRATA V - The Living Stone
   ============================================================ */
.strata--stone .strata__heading {
    color: var(--walnut-ink);
}

.strata--stone .strata__body {
    color: var(--walnut-ink);
}

.strata--stone .margin-note__text {
    color: var(--faded-iron-gall);
    border-right-color: var(--faded-iron-gall);
}

.strata--stone .strata__content {
    grid-template-columns: 180px 1fr auto;
}

.illustration--cracked-sphere {
    grid-column: 3;
    grid-row: 1 / -1;
    align-self: center;
}

.cracked-sphere-svg {
    width: clamp(180px, 20vw, 280px);
    height: auto;
}

.sphere-outer,
.sphere-vines {
    transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center center;
}

.sphere-outer:hover {
    transform: scale(1.06);
}

.sphere-vines:hover {
    transform: scale(1.1);
}

.vine-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: vineGrow 4s ease-out forwards;
}

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


/* ============================================================
   SECTION 7: COLOPHON
   ============================================================ */
.section--colophon {
    min-height: 80vh;
    background-color: var(--codex-black-brown);
    position: relative;
    overflow: hidden;
    padding: 10vh 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.colophon__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    width: 100%;
}

.marble-veins--colophon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.4;
}

.colophon__map {
    margin: 4rem auto;
    max-width: 800px;
}

.colophon-map-svg {
    width: 100%;
    height: auto;
    opacity: 0.7;
}

.colophon__attribution {
    margin-top: 4rem;
}

.colophon__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 3rem);
    letter-spacing: 0.15em;
    color: var(--carrara-white);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}

.colophon__text {
    font-family: 'Lora', serif;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    color: var(--faded-iron-gall);
    margin-bottom: 0.8rem;
}

.colophon__text--small {
    font-size: clamp(0.8rem, 1.2vw, 0.95rem);
    color: var(--faded-iron-gall);
    opacity: 0.7;
}

.colophon__finis {
    font-family: 'Caveat', cursive;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    color: var(--gilded-ochre);
    margin-top: 4rem;
    letter-spacing: 0.05em;
}


/* ============================================================
   SCROLLWORK / DECORATION BETWEEN STRATA
   ============================================================ */

/* Seam decoration overlays */
.section--strata + .section--strata {
    position: relative;
}


/* ============================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================ */
@media (max-width: 768px) {
    .strata__content {
        grid-template-columns: 1fr;
        padding: 4vh 5vw;
    }

    .margin-note {
        grid-column: 1;
        grid-row: auto;
        max-width: 100%;
    }

    .margin-note__text {
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--faded-iron-gall);
        padding-right: 0;
        padding-bottom: 0.8rem;
        margin-bottom: 1.5rem;
    }

    .strata__main {
        grid-column: 1;
    }

    .strata--archive .strata__content,
    .strata--stone .strata__content {
        grid-template-columns: 1fr;
    }

    .illustration--helix,
    .illustration--cracked-sphere {
        grid-column: 1;
        grid-row: auto;
        text-align: center;
    }

    .inscription__title {
        max-width: 80vw;
    }

    .inscription__subtitle {
        max-width: 70vw;
    }

    .column-capital {
        display: none;
    }

    .strata--archive,
    .strata--preservation,
    .strata--cartography,
    .strata--chamber,
    .strata--stone {
        clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
        margin-top: -4vh;
    }
}

@media (max-width: 480px) {
    .inscription__upper {
        clip-path: polygon(0 0, 100% 0, 0 60%);
        padding: 8vh 6vw;
    }

    .inscription__lower {
        clip-path: polygon(100% 40%, 100% 100%, 0 100%);
    }

    .strata--archive,
    .strata--preservation,
    .strata--cartography,
    .strata--chamber,
    .strata--stone {
        clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
        margin-top: -2vh;
    }
}