/**
 * Don Camillo — History / Archive
 * ONE STICKY CINEMATIC STORY
 * 1979 intro + chapters 01–06
 */


/* ==========================================================
   ROOT
========================================================== */

.dc-history {
    --history-navy: #061923;
    --history-cream: #f5efe5;
    --history-gold: #c8a96a;
    --history-red: #a61927;

    position: relative;
    width: 100%;

    background: var(--history-navy);
    color: var(--history-cream);

    overflow-x: clip;
}


.dc-history,
.dc-history * {
    box-sizing: border-box;
}


/* ==========================================================
   1979 ORIGIN
========================================================== */

.dc-history__origin {
    position: relative;

    min-height: 110svh;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding:
        clamp(120px, 14svh, 190px)
        7%
        clamp(140px, 18svh, 230px);

    text-align: center;

    background: var(--history-navy);
}


.dc-history__line {
    position: absolute;

    top: 0;
    left: 50%;

    width: 1px;
    height: clamp(85px, 12svh, 150px);

    transform: translateX(-50%);

    transform-origin: top center;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(200,169,106,.65)
        );
}


.dc-history__year-wrap {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: clamp(45px,7svh,90px);

    will-change:
        transform,
        opacity;
}


.dc-history__since {
    display: block;

    margin-bottom: 8px;

    color: var(--history-gold);

    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: .42em;
}


.dc-history__year {
    margin: 0;

    color: var(--history-cream);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(88px,13vw,210px);

    font-weight: 400;
    line-height: .82;

    letter-spacing: -.065em;
}


.dc-history__origin-copy {
    position: relative;

    width: min(920px,100%);

    will-change:
        transform,
        opacity;
}


.dc-history__eyebrow {
    margin: 0 0 24px;

    color: var(--history-red);

    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .34em;
}


.dc-history__title {
    margin: 0;

    color: var(--history-cream);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(45px,6.3vw,96px);

    font-weight: 400;
    line-height: .98;

    letter-spacing: -.045em;
}


.dc-history__description {
    width: min(590px,100%);

    margin:
        clamp(34px,5svh,55px)
        auto
        0;

    color:
        rgba(245,239,229,.62);

    font-family: Arial, sans-serif;

    font-size:
        clamp(14px,1.05vw,17px);

    font-weight: 400;
    line-height: 1.85;
}


.dc-history__continue {
    position: absolute;

    left: 50%;
    bottom: 38px;

    display: flex;
    flex-direction: column;
    align-items: center;

    transform: translateX(-50%);

    will-change: opacity;
}


.dc-history__continue span {
    margin-bottom: 12px;

    color:
        rgba(245,239,229,.35);

    font-family: Arial, sans-serif;

    font-size: 8px;
    line-height: 1;

    letter-spacing: .34em;
}


.dc-history__continue i {
    display: block;

    width: 1px;
    height: 38px;

    background:
        linear-gradient(
            to bottom,
            var(--history-gold),
            transparent
        );
}


/* ==========================================================
   MASTER STORY
   6 chapters inside ONE sticky stage
========================================================== */

.dc-history__story {
    position: relative;

    /*
     * Approx. 85svh of scroll travel per chapter.
     *
     * 100svh visible screen
     * + ~425svh animation travel.
     */
    height: 525svh;

    background:
        radial-gradient(
            circle at 69% 43%,
            rgba(200,169,106,.045),
            transparent 33%
        ),
        var(--history-navy);
}


.dc-history__story-sticky {
    position: sticky;

    top: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;

    isolation: isolate;

    background: var(--history-navy);
}


/* ==========================================================
   BACKGROUND YEAR
========================================================== */

.dc-history__story-year {
    position: absolute;

    z-index: 0;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%);

    color:
        rgba(245,239,229,.025);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(220px,35vw,600px);

    font-weight: 400;
    line-height: .7;

    letter-spacing: -.08em;

    white-space: nowrap;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


/* ==========================================================
   LEFT COPY
========================================================== */

.dc-history__story-copy {
    position: absolute;

    z-index: 20;

    left: max(6vw,40px);

    top: 50%;

    width:
        min(420px,32vw);

    transform:
        translateY(-50%);

    pointer-events: none;
}


.dc-history__story-kicker {
    display: flex;

    align-items: center;

    gap: 18px;

    margin: 0 0 25px;

    color: var(--history-gold);

    font-family: Arial,sans-serif;

    font-size: 9px;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: .38em;
}


.dc-history__story-kicker i {
    display: block;

    flex: 0 0 34px;

    width: 34px;
    height: 1px;

    background:
        rgba(200,169,106,.65);
}


.dc-history__story-kicker span {
    display: inline-block;

    will-change:
        transform,
        opacity;
}


.dc-history__story-title {
    margin: 0;

    color: var(--history-cream);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(48px,5.1vw,80px);

    font-weight: 400;

    line-height: .96;

    letter-spacing: -.05em;

    will-change:
        transform,
        opacity;
}


.dc-history__story-description {
    width: min(410px,100%);

    margin: 31px 0 0;

    color:
        rgba(245,239,229,.58);

    font-family:
        Arial,
        sans-serif;

    font-size:
        clamp(13px,.95vw,16px);

    font-weight: 400;

    line-height: 1.8;

    will-change:
        transform,
        opacity;
}


/* ==========================================================
   RIGHT VISUAL STAGE
========================================================== */

.dc-history__visual {
    position: absolute;

    z-index: 10;

    left: 42%;
    right: 5.5%;

    top: 50%;

    height:
        min(65svh,680px);

    transform:
        translateY(-50%);

    pointer-events: none;
}


.dc-history__visual-scene {
    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}


.dc-history__visual-scene.is-active {
    opacity: 1;
    visibility: visible;
}


/* ==========================================================
   SHARED PHOTO
========================================================== */

.dc-history__visual-photo {
    position: absolute;

    margin: 0;

    will-change:
        transform,
        opacity;
}


.dc-history__visual-frame {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #10232b;

    box-shadow:
        0 42px 100px
        rgba(0,0,0,.38),

        0 8px 30px
        rgba(0,0,0,.25);
}


.dc-history__visual-frame img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        saturate(.84)
        contrast(1.02)
        brightness(.92);

    transform: scale(1.03);

    will-change:
        transform,
        opacity;
}


.dc-history__visual-glass {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            rgba(255,255,255,.055),
            transparent 28%
        ),

        linear-gradient(
            to top,
            rgba(6,25,35,.13),
            transparent 40%
        );

    opacity: .55;
}


.dc-history__visual-photo figcaption {
    display: flex;

    justify-content:
        space-between;

    gap: 24px;

    margin-top: 13px;

    color:
        rgba(245,239,229,.35);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    line-height: 1.3;

    letter-spacing: .27em;
}


/* ==========================================================
   SCENE 01
========================================================== */

.dc-history__visual-scene--01
.dc-history__visual-photo--hero {
    inset: 0;

    width: 100%;
    height: 100%;
}


/* ==========================================================
   SCENE 02
========================================================== */

.dc-history__visual-scene--02
.dc-history__visual-photo--primary {
    left: 0;
    top: 0;

    width: 79%;
    height: 88%;

    z-index: 1;
}


.dc-history__visual-scene--02
.dc-history__visual-photo--secondary {
    right: 0;
    bottom: 0;

    width: 48%;
    height: 55%;

    z-index: 4;
}


.dc-history__visual-scene--02
.dc-history__visual-photo--secondary
.dc-history__visual-frame {
    border:
        1px solid
        rgba(245,239,229,.12);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.52);
}


/* ==========================================================
   SCENE 03 — NEWSPAPERS
========================================================== */

.dc-history__visual-paper {
    position: absolute;

    margin: 0;

    background: #d9d1c3;

    box-shadow:
        0 35px 80px
        rgba(0,0,0,.48);

    will-change:
        transform,
        opacity;
}


.dc-history__visual-paper
.dc-history__visual-frame {
    box-shadow: none;
}


.dc-history__visual-paper
.dc-history__visual-frame img {
    object-fit: contain;

    background: #d9d1c3;

    filter:
        saturate(.72)
        contrast(1.03)
        brightness(.93);
}


.dc-history__visual-paper--01 {
    z-index: 1;

    left: 3%;
    top: 4%;

    width: 45%;
    height: 82%;

    transform:
        rotate(-4deg);
}


.dc-history__visual-paper--02 {
    z-index: 3;

    left: 30%;
    top: 8%;

    width: 43%;
    height: 84%;

    transform:
        rotate(2deg);
}


.dc-history__visual-paper--03 {
    z-index: 2;

    right: 1%;
    top: 2%;

    width: 42%;
    height: 80%;

    transform:
        rotate(5deg);
}


/* ==========================================================
   SCENE 04 — ENCOUNTERS
========================================================== */

.dc-history__visual-scene--04
.dc-history__visual-photo--primary {
    left: 0;
    top: 0;

    width: 76%;
    height: 87%;

    z-index: 1;
}


.dc-history__visual-scene--04
.dc-history__visual-photo--portrait {
    right: 0;
    bottom: 0;

    width: 39%;
    height: 62%;

    z-index: 4;

    transform:
        rotate(2.5deg);
}


.dc-history__visual-scene--04
.dc-history__visual-photo--portrait
.dc-history__visual-frame {
    border:
        1px solid
        rgba(245,239,229,.12);

    background: #ece5d9;
}


/* ==========================================================
   SCENE 05 + 06
========================================================== */

.dc-history__visual-scene--05
.dc-history__visual-photo--hero,

.dc-history__visual-scene--06
.dc-history__visual-photo--hero {
    inset: 0;

    width: 100%;
    height: 100%;
}


/* ==========================================================
   BOTTOM LINE
========================================================== */

.dc-history__story-line {
    position: absolute;

    z-index: 2;

    left: 50%;
    bottom: 0;

    width: 1px;
    height: 16svh;

    background:
        linear-gradient(
            to bottom,
            rgba(200,169,106,.22),
            transparent
        );

    pointer-events: none;
}


/* ==========================================================
   INDEX
========================================================== */

.dc-history__story-index {
    position: absolute;

    z-index: 25;

    right:
        max(5.5vw,40px);

    bottom:
        max(4svh,28px);

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(200,169,106,.42);

    font-family:
        Arial,
        sans-serif;

    font-size: 7px;

    line-height: 1;

    letter-spacing: .28em;

    pointer-events: none;
}


.dc-history__story-index i {
    display: block;

    width: 23px;
    height: 1px;

    background:
        rgba(200,169,106,.32);
}


.dc-history__story-index
[data-history-index] {
    color:
        rgba(200,169,106,.75);

    will-change:
        transform,
        opacity;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .dc-history__story {
        height: 500svh;
    }


    .dc-history__story-copy {
        left: 7vw;
        right: 7vw;

        top: 12svh;

        width: auto;

        transform: none;
    }


    .dc-history__story-title {
        font-size:
            clamp(42px,9vw,64px);
    }


    .dc-history__story-description {
        width:
            min(520px,88%);
    }


    .dc-history__visual {
        left: 7vw;
        right: 7vw;

        top: auto;
        bottom: 9svh;

        height: 46svh;

        transform: none;
    }


    .dc-history__story-year {
        top: 52%;

        font-size: 67vw;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .dc-history__origin {
        min-height: 100svh;

        padding:
            110px
            7%
            125px;
    }


    .dc-history__year-wrap {
        margin-bottom: 52px;
    }


    .dc-history__year {
        font-size:
            clamp(82px,27vw,125px);
    }


    .dc-history__title {
        font-size:
            clamp(40px,12vw,58px);
    }


    .dc-history__description {
        max-width: 390px;

        font-size: 14px;

        line-height: 1.75;
    }


    .dc-history__story {
        height: 470svh;
    }


    .dc-history__story-copy {
        top: 9svh;
    }


    .dc-history__story-kicker {
        gap: 12px;

        margin-bottom: 17px;

        font-size: 7px;

        letter-spacing: .25em;
    }


    .dc-history__story-kicker i {
        flex-basis: 22px;

        width: 22px;
    }


    .dc-history__story-title {
        font-size:
            clamp(37px,10.5vw,50px);
    }


    .dc-history__story-description {
        width: 96%;

        margin-top: 19px;

        font-size: 12.5px;

        line-height: 1.65;
    }


    .dc-history__visual {
        left: 6vw;
        right: 6vw;

        bottom: 9svh;

        height: 41svh;
    }


    .dc-history__visual-scene--02
    .dc-history__visual-photo--primary {
        width: 88%;
        height: 77%;
    }


    .dc-history__visual-scene--02
    .dc-history__visual-photo--secondary {
        width: 57%;
        height: 48%;
    }


    .dc-history__visual-paper--01 {
        width: 55%;
    }


    .dc-history__visual-paper--02 {
        left: 23%;
        width: 54%;
    }


    .dc-history__visual-paper--03 {
        width: 52%;
    }


    .dc-history__visual-scene--04
    .dc-history__visual-photo--primary {
        width: 86%;
        height: 78%;
    }


    .dc-history__visual-scene--04
    .dc-history__visual-photo--portrait {
        width: 49%;
        height: 54%;
    }


    .dc-history__story-index {
        right: 6vw;

        bottom: 3.2svh;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .dc-history__story {
        height: 100svh;

        min-height: 760px;
    }


    .dc-history__story-sticky {
        position: relative;
    }


    .dc-history__visual-scene {
        display: none;
    }


    .dc-history__visual-scene--01 {
        display: block;

        visibility: visible;

        opacity: 1;
    }

}
/* Keep chapter text/image swaps out of browser scroll anchoring. */
.dc-history { overflow-anchor: none; }
/* Composite the sticky surface itself, avoiding touch-scroll repaint jitter. */
.dc-history__story-sticky { transform: translateZ(0); backface-visibility: hidden; }