/* infra.limited - Pastoral-Romantic Meditation on Hidden Systems */

:root {
    --color-vellum: #F5EDE0;
    --color-fog: #EDE3D0;
    --color-parchment: #D4C5A9;
    --color-umber: #3E2F1C;
    --color-dusk: #5C4F3D;
    --color-bronze: #8A7D6B;
    --color-harvest: #C49A3C;
    --color-sienna: #A0522D;
    --color-clay: #B87D6A;

    --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, serif;
    --font-body: 'Nunito Sans', 'Inter', -apple-system, sans-serif;
    --font-accent: 'Source Serif 4', 'Cormorant Garamond', Georgia, serif;

    --ease-pastoral: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --shadow-warm: 0 8px 32px rgba(180, 155, 110, 0.15);
    --shadow-bloom: 0 4px 20px rgba(196, 154, 60, 0.12);
}

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

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

body {
    font-family: var(--font-body);
    background-color: var(--color-vellum);
    color: var(--color-dusk);
    overflow-x: hidden;
    line-height: 1.72;
    font-weight: 400;
    min-height: 100vh;
    background-image:
        radial-gradient(ellipse at top left, rgba(196, 154, 60, 0.04), transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(184, 125, 106, 0.05), transparent 50%);
    background-attachment: fixed;
}

/* Linen weave micro-texture overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        repeating-linear-gradient(45deg, rgba(138, 125, 107, 0.03) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-45deg, rgba(138, 125, 107, 0.03) 0 1px, transparent 1px 3px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

.site-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* ===== Header ===== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 22px 48px 18px;
    background: linear-gradient(to bottom, rgba(245, 237, 224, 0.92), rgba(245, 237, 224, 0.4) 80%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(138, 125, 107, 0.12);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.site-title {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--color-bronze);
    text-transform: lowercase;
}

.scroll-indicator {
    width: 28px;
    height: 28px;
    position: relative;
    transition: transform 600ms var(--ease-pastoral);
}

.scroll-indicator.pulsing {
    animation: gentle-pulse 1800ms ease-in-out infinite;
}

@keyframes gentle-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.progress-arc {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-circle {
    fill: none;
    stroke: var(--color-harvest);
    stroke-width: 1.5;
    stroke-dasharray: 175.9;
    stroke-dashoffset: 175.9;
    transition: stroke-dashoffset 240ms linear;
    opacity: 0.85;
}

/* Background plane (Z-0) */
.background-plane {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    transform: translateY(calc(var(--scroll, 0) * 0.3px));
    will-change: transform;
}

.background-gradient {
    position: absolute;
    inset: -10vh;
    background:
        radial-gradient(ellipse 80% 60% at 30% 20%, rgba(212, 197, 169, 0.55), transparent 70%),
        radial-gradient(ellipse 90% 70% at 80% 80%, rgba(237, 227, 208, 0.7), transparent 60%),
        linear-gradient(160deg, var(--color-vellum) 0%, var(--color-fog) 60%, var(--color-parchment) 110%);
    filter: blur(3px);
}

/* Contour lines */
.contour-lines {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.45;
}

.contour-svg {
    width: 100%;
    height: 100%;
    transform: translateX(var(--contour-shift, 0));
    transition: transform 400ms var(--ease-pastoral);
}

.contour-path {
    fill: none;
    stroke: var(--color-parchment);
    stroke-width: 1.2;
    stroke-opacity: 0.5;
}

/* Main content */
.main-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* ===== Sections ===== */
.section {
    position: relative;
    min-height: 100vh;
    padding: 120px 48px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.section-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1.2s var(--ease-pastoral);
}

.section-opening .section-background {
    background:
        radial-gradient(circle at 20% 30%, rgba(196, 154, 60, 0.08), transparent 55%),
        linear-gradient(180deg, var(--color-fog) 0%, var(--color-vellum) 100%);
}

.section-vista .section-background {
    background:
        radial-gradient(ellipse at 70% 40%, rgba(184, 125, 106, 0.06), transparent 55%),
        linear-gradient(180deg, var(--color-vellum) 0%, var(--color-fog) 100%);
}

.section-study .section-background {
    background:
        radial-gradient(ellipse at 30% 60%, rgba(212, 197, 169, 0.4), transparent 60%),
        linear-gradient(180deg, var(--color-fog) 0%, var(--color-vellum) 100%);
}

.section-detail .section-background {
    background:
        radial-gradient(circle at 50% 50%, rgba(237, 227, 208, 0.6), transparent 70%),
        linear-gradient(180deg, var(--color-vellum) 0%, var(--color-fog) 100%);
}

.section-closing .section-background {
    background:
        radial-gradient(ellipse at 50% 70%, rgba(196, 154, 60, 0.1), transparent 60%),
        linear-gradient(180deg, var(--color-fog) 0%, var(--color-parchment) 100%);
}

/* Content plane (Z-1) */
.content-plane {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.section-alternating-left {
    padding-left: 0;
    padding-right: 40%;
    margin-left: 8%;
}

.section-alternating-right {
    padding-left: 35%;
    padding-right: 0;
    margin-left: 0;
}

@media (max-width: 900px) {
    .section-alternating-left,
    .section-alternating-right {
        padding-left: 0;
        padding-right: 0;
        margin-left: 0;
    }
}

/* ===== Opening Section ===== */
.section-opening {
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
}

.vista-container {
    width: 100%;
    text-align: center;
    padding: 0 8%;
}

.opening-title-wrapper {
    margin-top: 38vh;
    transform: translateY(0);
}

.title-display {
    font-family: var(--font-display);
    font-size: clamp(48px, 7vw, 84px);
    font-weight: 300;
    color: var(--color-umber);
    letter-spacing: 0.12em;
    line-height: 1.15;
    opacity: 0;
    transition: opacity 1500ms var(--ease-pastoral),
                letter-spacing 800ms var(--ease-pastoral);
}

.title-display.title-revealed {
    opacity: 1;
    letter-spacing: 0.04em;
}

.opening-subtitle {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: clamp(16px, 1.4vw, 19px);
    color: var(--color-dusk);
    letter-spacing: 0.02em;
    margin-top: 32px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 1500ms var(--ease-pastoral),
                transform 1500ms var(--ease-pastoral);
    transition-delay: 1500ms;
    line-height: 1.6;
}

.opening-subtitle.subtitle-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Vista Section ===== */
.section-vista .content-block {
    padding: 56px 48px;
    background: rgba(245, 237, 224, 0.68);
    border-radius: 4px;
    box-shadow: var(--shadow-warm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(212, 197, 169, 0.4);
    position: relative;
}

.section-vista .content-block::before {
    content: "";
    position: absolute;
    top: 0;
    left: 32px;
    width: 36px;
    height: 1px;
    background: var(--color-harvest);
    opacity: 0.5;
    transform: translateY(-1px);
}

.heading-display {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(40px, 5vw, 64px);
    color: var(--color-umber);
    letter-spacing: 0.12em;
    line-height: 1.15;
    margin-bottom: 32px;
    transition: letter-spacing 800ms var(--ease-pastoral);
    transform-origin: left center;
}

.heading-display.heading-settled {
    letter-spacing: 0.04em;
}

.body-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.72;
    color: var(--color-dusk);
    margin-bottom: 24px;
}

.body-text:last-of-type {
    margin-bottom: 28px;
}

.caption-text {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 13px;
    color: var(--color-bronze);
    letter-spacing: 0.06em;
    font-style: italic;
    border-top: 1px solid rgba(138, 125, 107, 0.25);
    padding-top: 18px;
    margin-top: 24px;
}

/* Line-by-line text reveal */
.body-text .reveal-line,
.detail-text .reveal-line,
.closing-text .reveal-line,
.closing-subtitle .reveal-line {
    display: block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms var(--ease-pastoral),
                transform 600ms var(--ease-pastoral);
}

.body-text .reveal-line.line-revealed,
.detail-text .reveal-line.line-revealed,
.closing-text .reveal-line.line-revealed,
.closing-subtitle .reveal-line.line-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Study Section ===== */
.study-layout {
    display: grid;
    grid-template-columns: 61.8% 38.2%;
    gap: 56px;
    padding: 56px 48px;
    background: rgba(237, 227, 208, 0.6);
    border-radius: 4px;
    box-shadow: var(--shadow-warm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(212, 197, 169, 0.4);
    position: relative;
}

@media (max-width: 768px) {
    .study-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

.study-main .heading-display {
    margin-bottom: 24px;
}

.study-secondary {
    border-left: 1px solid rgba(196, 154, 60, 0.3);
    padding-left: 28px;
    padding-top: 24px;
    align-self: start;
}

.study-secondary .caption-text {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    font-size: 14px;
    line-height: 1.6;
}

/* ===== Arch Dividers ===== */
.arch-divider {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 80px;
    pointer-events: none;
    z-index: 3;
}

.arch-divider::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 80' fill='none' stroke='%23C49A3C' stroke-width='1' opacity='0.3'><path class='arch-stroke' d='M20 70 L20 40 Q20 10 60 10 Q100 10 100 40 L100 70 M100 70 L100 40 Q100 10 140 10 Q180 10 180 40 L180 70 M180 70 L180 40 Q180 10 220 10' stroke-dasharray='400' stroke-dashoffset='400'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.arch-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.arch-path {
    fill: none;
    stroke: var(--color-harvest);
    stroke-width: 1;
    stroke-opacity: 0.4;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke-dashoffset 1200ms var(--ease-pastoral);
}

.arch-path.arch-drawn {
    stroke-dashoffset: 0;
}

/* ===== Detail Section ===== */
.section-detail {
    padding-top: 22vh;
    padding-bottom: 22vh;
}

.detail-container {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 0 24px;
}

.detail-container .heading-display {
    text-align: center;
    margin-bottom: 48px;
    transform-origin: center;
}

.detail-text {
    font-size: 18px;
    line-height: 1.78;
    text-align: left;
    margin-bottom: 28px;
}

/* ===== Closing Section ===== */
.section-closing {
    align-items: center;
    padding: 18vh 48px;
    min-height: 90vh;
}

.closing-container {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.closing-text {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 4vw, 44px);
    color: var(--color-umber);
    letter-spacing: 0.06em;
    line-height: 1.4;
    margin-bottom: 32px;
}

.closing-subtitle {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: clamp(15px, 1.4vw, 18px);
    color: var(--color-dusk);
    letter-spacing: 0.04em;
    line-height: 1.7;
    max-width: 540px;
    margin: 0 auto;
}

/* ===== Foreground Plane (Z-2) - Botanicals ===== */
.foreground-elements {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.botanical-accent {
    position: absolute;
    width: 180px;
    height: 220px;
    opacity: 0.4;
    filter: blur(0.6px);
    transition: transform 100ms linear;
    background-repeat: no-repeat;
    background-size: contain;
    will-change: transform;
}

.botanical-01 {
    top: 12%;
    right: 6%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 220' fill='none' stroke='%238A7D6B' stroke-width='0.8' stroke-linecap='round'><path d='M90 220 Q88 180 92 140 Q86 100 90 60 Q88 30 92 10'/><path d='M90 180 Q60 170 40 150 Q60 165 88 178'/><path d='M90 150 Q120 140 140 120 Q120 138 92 148'/><path d='M90 120 Q60 110 45 90 Q62 105 88 118'/><path d='M90 90 Q120 80 138 60 Q120 78 92 88'/><path d='M90 60 Q70 52 55 38 Q72 50 88 58'/><circle cx='40' cy='150' r='4' opacity='0.5'/><circle cx='140' cy='120' r='4' opacity='0.5'/><circle cx='45' cy='90' r='3' opacity='0.5'/><circle cx='138' cy='60' r='3' opacity='0.5'/></svg>");
}

.botanical-02 {
    top: 8%;
    left: 4%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 220' fill='none' stroke='%238A7D6B' stroke-width='0.8' stroke-linecap='round'><path d='M30 220 Q40 180 50 140 Q45 100 55 60 Q60 30 70 10'/><path d='M50 200 Q70 195 90 185 Q72 198 52 202'/><path d='M55 160 Q80 150 100 135 Q82 152 58 162'/><path d='M50 120 Q35 110 18 95'/><path d='M58 80 Q80 70 96 55'/><ellipse cx='90' cy='185' rx='8' ry='3' opacity='0.4'/><ellipse cx='100' cy='135' rx='10' ry='3' opacity='0.4'/></svg>");
    width: 160px;
    height: 200px;
}

.botanical-03 {
    top: 14%;
    right: 8%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 220' fill='none' stroke='%238A7D6B' stroke-width='0.8' stroke-linecap='round'><path d='M120 220 Q115 170 125 130 Q118 90 130 50 Q126 25 138 8'/><path d='M125 180 Q100 175 80 160'/><path d='M125 150 Q150 140 170 122'/><path d='M125 120 Q100 110 78 90'/><path d='M128 90 Q150 78 168 60'/><path d='M132 60 Q110 52 92 38'/><circle cx='80' cy='160' r='3.5' opacity='0.4'/><circle cx='170' cy='122' r='3.5' opacity='0.4'/><circle cx='78' cy='90' r='3' opacity='0.4'/></svg>");
    width: 150px;
    height: 220px;
}

.botanical-04 {
    bottom: 12%;
    left: 5%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 220' fill='none' stroke='%238A7D6B' stroke-width='0.8' stroke-linecap='round'><path d='M40 220 Q35 180 45 140 Q40 95 50 50 Q45 20 55 5'/><path d='M50 190 Q70 188 90 178'/><path d='M48 150 Q80 140 105 122'/><path d='M50 110 Q35 102 20 88'/><path d='M52 70 Q75 62 92 48'/><circle cx='90' cy='178' r='3' opacity='0.5'/><circle cx='105' cy='122' r='4' opacity='0.5'/><circle cx='20' cy='88' r='3' opacity='0.5'/></svg>");
    width: 170px;
    height: 240px;
}

.botanical-05 {
    top: 18%;
    right: 5%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 220' fill='none' stroke='%238A7D6B' stroke-width='0.8' stroke-linecap='round'><path d='M90 220 Q88 175 92 130 Q86 85 90 40 Q88 15 92 5'/><path d='M90 175 Q60 170 38 152 M90 175 Q120 170 142 152'/><path d='M90 130 Q60 122 40 100 M90 130 Q120 122 140 100'/><path d='M90 85 Q65 78 48 60 M90 85 Q115 78 132 60'/><path d='M90 40 Q72 32 58 18 M90 40 Q108 32 122 18'/></svg>");
    width: 160px;
    height: 220px;
}

.botanical-06 {
    bottom: 8%;
    right: 6%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 220' fill='none' stroke='%238A7D6B' stroke-width='0.8' stroke-linecap='round'><path d='M140 220 Q135 180 145 140 Q138 95 148 55 Q142 25 152 8'/><path d='M142 190 Q115 188 92 175'/><path d='M144 155 Q170 145 175 125'/><path d='M144 115 Q118 105 96 86'/><path d='M148 75 Q172 65 178 48'/><circle cx='92' cy='175' r='3' opacity='0.4'/><circle cx='96' cy='86' r='3.5' opacity='0.4'/></svg>");
    width: 180px;
    height: 220px;
}

.botanical-07 {
    top: 10%;
    left: 8%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 220' fill='none' stroke='%238A7D6B' stroke-width='0.8' stroke-linecap='round'><path d='M20 220 Q24 180 30 140 Q26 100 32 60 Q28 30 34 10'/><path d='M28 180 Q50 175 70 165 M28 180 Q12 175 4 168'/><path d='M30 140 Q55 130 78 115 M30 140 Q14 132 6 124'/><path d='M30 100 Q52 90 72 75'/><path d='M32 60 Q50 52 65 40'/><circle cx='70' cy='165' r='3' opacity='0.5'/><circle cx='78' cy='115' r='3' opacity='0.5'/></svg>");
    width: 160px;
    height: 220px;
}

/* Image warm-up effect */
.warm-target {
    filter: saturate(0.7) brightness(0.95);
    transition: filter 1200ms var(--ease-pastoral);
}

.warm-target.warmed {
    filter: saturate(1) brightness(1);
}

/* Hover breath on captions and links */
.caption-text,
a {
    transition: transform 300ms ease-in-out, box-shadow 300ms ease-in-out;
}

a {
    color: var(--color-harvest);
    text-decoration: none;
    border-bottom: 1px solid rgba(196, 154, 60, 0.4);
    padding-bottom: 1px;
}

a:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-bloom);
    color: var(--color-sienna);
}

.content-block:hover,
.study-layout:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(180, 155, 110, 0.18);
    transition: transform 600ms var(--ease-pastoral), box-shadow 600ms var(--ease-pastoral);
}

/* Section reveal */
.section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s var(--ease-pastoral), transform 1.2s var(--ease-pastoral);
}

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

.section-opening {
    opacity: 1;
    transform: translateY(0);
}

/* Roman arch decorative SVG */
.arch-divider svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .section {
        padding: 80px 24px;
    }

    .header {
        padding: 18px 24px 14px;
    }

    .section-vista .content-block,
    .study-layout {
        padding: 36px 28px;
    }

    .botanical-accent {
        width: 100px;
        height: 130px;
        opacity: 0.25;
    }
}

/* Subtle scroll-into-view sub elements */
.content-block,
.study-layout,
.detail-container,
.closing-container {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1s var(--ease-pastoral), transform 1s var(--ease-pastoral);
}

.content-block.block-revealed,
.study-layout.block-revealed,
.detail-container.block-revealed,
.closing-container.block-revealed {
    opacity: 1;
    transform: translateY(0);
}