:root {
    --beige: #F6E5BA;
    --black: #333333;
    --white: #f8f8f8;
    --indigo: #322c4d;
    --teal: #00ada7;
    --orange: #FAC898;
    --red: #f70002;
    --pink: #ed6a9a;
    --green: #95c460;
    --canal-blue: #6eabbf;
    --future-green: #BDE3B4;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
    min-width: 350px;
}

#hero {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: var(--beige); 
    overflow: hidden;
    z-index: 10;
    animation: bgColorChange 0.1s 4s steps(1) forwards;
}

#intro-text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    height: 100vh;
    width: 100vw;
    text-align: center;
}

#intro-title {
    color: var(--white);
    font-weight: bold;
    font-size: clamp(3rem, 10vw, 6rem);
    line-height: 1;
    width: 65%;
    height: calc(fit-content + 20px);
    margin: 0 auto;
    
    opacity: 1; 
    clip-path: inset(50% 0 50% 0); 
    

    animation: centerSplitReveal 1.2s 5.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;

    will-change: clip-path;
}

#intro-subtitle {
    color: var(--white);
    font-weight: 500;
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-top: 1.5rem;

    opacity: 0;
    animation: subtitleFadeIn 1s 6.9s ease-out forwards;
}

#tunnel {
    position: absolute;
    height: 140vh; 
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    object-fit: cover;
    animation: layerFadeOut 0.8s 3s ease-in forwards;
    overflow: hidden;
}

#hero-train {
    position: absolute;
    height: 25vh;
    width: auto;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center center;

    z-index: 3;
    opacity: 1;
    animation: fullTrainSequence 5s 0.5s cubic-bezier(0.7, 0, 0.84, 0) forwards;
    will-change: transform, opacity;
}

#hero-graphics-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* --- Animations --- */

@keyframes fullTrainSequence {
    0% { 
        transform: translate(-50%, -50%) scale(1); 
        opacity: 1; 
        filter: blur(0px);
    }

    85% {
        transform: translate(-50%, 500px) scale(55); 
        opacity: 1;
        filter: blur(0px); 
    }
    100% { 
        transform: translate(-50%, 500px) scale(55); 
        opacity: 0; 
        filter: blur(10px);
        visibility: hidden;
    }
}

@keyframes textFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes subtitleFadeIn {
    0%{
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 0.8;
        transform: translateY(0);
    }
}

@keyframes centerSplitReveal {
    0% {
        clip-path: inset(50% 0 50% 0);
        filter: brightness(2); 
    }
    40% {
        clip-path: inset(48% 0 48% 0);
    }
    100% {
        /* Fully revealed */
        clip-path: inset(-10% 0 -10% 0);
        filter: brightness(1);
    }
}

@keyframes layerFadeOut {
    0% { opacity: 1; visibility: visible; }
    100% { opacity: 0; visibility: hidden; }
}

@keyframes bgColorChange {
    0% { background-color: var(--canal-blue); }
    100% { background-color: var(--canal-blue); }
}

.scroll-lock {
    overflow: hidden;
    height: 100vh;
    width: 100%;
    position: fixed; /* Extra layer of protection for mobile */
}

.horizontal-section {
    width: 100%;
    height: 100vh;
    overflow: hidden; 
    position: relative;
}

.scroll-content {
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    height: 100vh;
    will-change: transform;
}

.scroll-content img {
    height: 100vh;
    width: auto;
    display: block;
} 

.canalboat-wrap-text {
    float: right;
    width: 100%;
    margin-right: -60%;
    shape-outside: url('../graphics/canalboat.png');
    shape-margin: 20px;
    shape-image-threshold: 0.5;
    overflow: hidden;
}

.transition {
    height: 400px;
    width: 100%;
}

#canal-subway {
    background: linear-gradient(180deg, var(--canal-blue) 0%, #F6E5BA 100%);
}

#subway-highway {
    background: linear-gradient(180deg, #F6E5BA 0%, #A77BB3 40.87%, #322C4D 81.73%);
}

#highway-graffiti {
    background: linear-gradient(180deg, #322C4D 0%, #333333 100%);
}

#graffiti-future {
    background: linear-gradient(180deg, #333333 0%, #3E6357 46.63%, #BDE3B4 100%);
}

#sources-jess {
    background: linear-gradient(180deg, var(--future-green) 0%, var(--orange) 100%);
}

.timeline-section {
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr min(70ch, 100%) 1fr;
    padding-top: 50px;
    overflow: hidden;
    margin-top: -1px;
    margin-bottom: -1px;
    padding-bottom: 1px;

    grid-template-areas: "left center right";
}

.canal{
    background-color: var(--canal-blue);
}


.graphics-left {
    grid-area: left;
    align-self: stretch;
    position: relative;
    margin-right: 40px;
}

.graphics-right {
    grid-area: right;
    align-self: stretch;
    position: relative;
    margin-left: 40px;
}

.parallax-object {
    position: absolute;
}

.content-container {
    width: 70ch;
    margin: auto;
    position: relative;
    height: fit-content;
    grid-area: center;
}

.canal #rock1 {
    position: absolute;
    right: 0;
    top: 20%;
    width: 246.35px;
    height: 186px;
    transform: rotate(42.72deg);
}

.canal #rock2 {
    right: 130px;
    top: 43%;
    position: absolute;
    width: 125.88px;
    height: 65.82px;
    transform: rotate(26.67deg);
}

.canal #rock3 {
    right: 20px;
    top: 52%;
    position: absolute;
    width: 170.31px;
    height: 128.59px;
    transform: rotate(0deg);
}

.canal #rock4 {
    left: 40px;
    top: 5%;
    width: 175px;
    position: absolute;
    filter: grayscale();
}

#lighterFrames {
    right: 70px;
    bottom: 25%;
    transform: rotate(-22deg);
    position: absolute;
    width: 350px;
    height: auto;
    object-fit: contain;
}

.frame {
    width: 100%;
    position: absolute;
    
}

#subway-car-side {
    height: 100%;
}

.subway{
    background-color: var(--beige);
}

.subway #rock5 {
    width: 172px;
    height: auto;
    top: 12%;
    right: 80px;
}

.subway #rock6 {
    width: 150px;
    height: auto;
    top: 17.5%;
    right: 15px;
}

.subway #rock7 {
    width: 220px;
    height: auto;
    top: 15%;
    right: 145px;
}

.subway #rock8 {
    width: 130px;
    height: auto;
    top: 20%;
    right: 105px;
}

.token {
    width: 150px;
    height: auto;
}

.subway #token1 {
    top: 5%;
    left: 115px;
}

.subway #token2 {
    top: 2.5%;
    left: 15px;
}

.subway #rock9 {
    width: 220px;
    height: auto;
    top: 28%;
    left: 105px;
}

.subway #rock10 {
    width: 170px;
    height: auto;
    top: 32%;
    left: 55px;
}

.subway #token3 {
    top: 55%;
    right: 115px;
    scale: 1.3;
}

.subway #token4 {
    top: 52%;
    right: 25px;
    scale: 1.3;
}

.subway #rock11 {
    width: 170px;
    height: auto;
    top: 65%;
    left: 125px;
}

.subway #rock12 {
    width: 210px;
    height: auto;
    top: 68%;
    left: 55px;
}

.subway #rock13 {
    width: 260px;
    top: 70%;
    right: 55px;
}

#newspaper-graphic-vertical {
    display: none;
}

.highway{
    background-color: var(--indigo);
    color: var(--white);
    overflow: visible;
}

#street-light {
    position: relative;
    height: 200%;
    left: 0px;
    top: -10%;
    margin: 0;
}

#stop-light {
    position: absolute;
    height: 800px;
    left: 20px;
    transform: rotate(15deg);
    top: 5%;
}

#inner-loop{
    position: absolute;
    top: 45%;
    right: -20px;
    rotate: -45deg;
    width: 130%;
    overflow: visible;
}

#inner-loop-path {
    stroke-width: 20px;
    stroke-linecap: round;
}

#interstate-shield {
    position: absolute;
    top: 60%;
    left: 30px;
}

#parking-meter {
    position: absolute;
    bottom: -10%;
    right: -190px;
    height: 800px;
    transform: rotate(45deg);
    filter: brightness(0.7);
    z-index: 5;
}

.graffiti{
    background-color: var(--black);
    color: var(--white);
    overflow: visible;
}

#sprayPaintFrames {
    position: relative;
    top: -11%;
    left: -10%;
    transform: scaleX(-1);
    rotate: 20deg;
}

#tag1 {
    position: absolute;
    top: 15%;
    width: 500px;
    right: 20px;
    rotate: -20deg;
}

#tag2 {
    position: absolute;
    top: 40%;
    width: 500px;
    left: 20px;
    rotate: 20deg;
}

#rocLogo1 {
    position: absolute;
    top: 50%;
    width: 210px;
    right: 180px;
}

#rock14 {
    position: absolute;
    width: 160px;
    top: 60%;
    right: 30px;
}

#rock15 {
    position: absolute;
    width: 120px;
    top: 63%;
    right: 220px;
}

#rocLogo2 {
    position: absolute;
    bottom: 10%;
    left: 40px;
    width: 270px;
}

#rock16 {
    bottom: 7%;
    left: 300px;
    width: 130px;
}

.future{
    background-color: var(--future-green);
    padding-bottom: 150px;
}

#walkSignFrames {
    position: relative;
    left: 0px;
    top: 0%;
    height: 110%;
}

#walkSignFrames .frame {
    height: 110%;
    width: auto;
}

#street-sign {
    position: absolute;
    width: 400px;
    top: 10%;
    rotate: -20deg;
    left: 20px;
}

#crossing-sign {
    position: absolute;
    top: 30%;
    right: 60px;
    width: 600px;
    rotate: -5deg;
}

#bike-lane-sign {
    position: absolute;
    top: 55%;
    left: 30px;
    width: 450px;
    rotate: -5deg;
}

#fuel-can {
    position: absolute;
    bottom: 5%;
    right: -30px;
    width: 460px;
    rotate: 5deg;
}

.fade-bottom {
  /* Standard property */
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  
  /* Required for Safari support */
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

bdi {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.letter {
    float: left;
    width: 20ch;
    margin-right: 1ch;
}

.highway .letter, .graffiti .letter {
    filter: invert();
}

p {
    padding: 0px;
    padding-bottom: 20px;
    margin: auto;
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    line-height: 24px;
}

h1, h2, h3, h4, h5 {
    font-family: "Libre Bodoni", serif;
}

h1 {
    font-weight: 800;
    margin: 0;
}

.quote-block {
    position: relative;
    width: 750px;
    left: 50%;
    transform: translate(-50%, 25%);
    height: 500px;
}

.quote {
    font-family: 'Libre Bodoni', serif;
    font-size: 48px;
    line-height: 1.25;
    text-align: center;
    color: var(--beige);
    z-index: 2;
}

.author {
    font-family: 'Libre Bodoni', serif;
    font-size: 32px;
    line-height: 1.25;
    text-align: right;
    color: var(--beige);
    z-index: 100;
}

#smokeFrames {
    position: absolute;
    width: 135%;
    height: 140%;
    object-fit: contain;
    left: 50%;
    top: -25%;
    transform: translate(-50%, 0);
    z-index: -1;
}

#rrxFrames {
    bottom: 850px;
    right: -140px;
    position: absolute;
    width: 900px;
    height: auto;
    object-fit: contain;
    transform: rotate(-5deg);
}

img {
    display: block;
    margin: auto;
}

.figure {
    position: relative;
    display: inline-block;
    --extra-space: 0px;
}

figure::before,
figure::after {
  content: "";
  display: block;
  /* Use the variable set by JavaScript */
  height: var(--extra-space);
  width: 100%;
}

.content_img {
    width: 100%;
    border-style: solid;
    border-color: var(--white);
    border-width: 20px 20px 100px 20px;
    box-sizing: border-box;
}

figcaption {
    font-family: "Caveat", cursive;
    position: relative;
    bottom: 80px;
    z-index: 10;
    font-size: 18pt;
    width: 90%;
    text-align: center;
    display: block;
    color: var(--black);
    margin: 0 50%;
    transform: translatex(-50%);
}

.sources-container {
    background-color: var(--future-green);
    margin-top: -1px;
    margin-bottom: -1px;
    padding-bottom: 1px;
}

.sources {
    width: 70ch;
    margin: auto;
}

.sources h1 {
    text-align: center;
    font-size: 32px;
}

.source-link {
    font-family: 'Libre Bodoni', serif;
    text-decoration: underline;
    color: black;
    font-weight: bold;
}

.source-caption {
    padding-left: 20px;
    padding-right: 20px;
}

.special-thanks-wrapper {
    background-color: var(--orange);
}

.special-thanks {
    margin: 0 auto;
    width: 80ch;
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 10px 40px;
    margin-top: -1px;
    margin-bottom: -1px;
    padding-bottom: 1px;
}

.special-thanks h1 {
    height: fit-content;
    margin-bottom: 20px;
}

.special-thanks p {
    max-width: 100%;
}

.special-thanks img {
    width: 100%;
    grid-column: 1;
    grid-row: 1;
}
.special-thanks div {
    grid-column: 2;
}

.about-us-wrapper {
    background-color: var(--orange);
    margin-top: -1px;
    margin-bottom: -1px;
    padding-bottom: 1px;
}

.about-us {
    width: 85%;
    margin: 0 auto;
    padding: 200px 0;
}

.about-us h1 {
    text-align: center;
}

.name, .role {
    text-align: center;
    margin: 0;
}

.role {
    font-style: italic;
    font-weight: 300;
}

.profile {
    width: 50ch;
    display: grid;
    grid-template-rows: auto auto auto;
    grid-template-columns: 100%;
    gap: 5px;
    /* border: 2pt solid var(--black); */
    padding: 10px;

    background: rgba(229, 229, 229, .6);
    border-radius: 8px;
}

.profile-picture {
    height: 100%;
    width: 100%;
    object-fit: cover;
    display: none;
}

.profiles {
    margin-top: 20px;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

footer {
    background-color: var(--orange);
    width: 100vw;
    text-align: center;
}

@media screen and (max-width: 800px) {
    .content-container {
        width: 100%;
        max-width: none;
    }

    p {
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
    }
    .horizontal-section {
        display: none;
    }
    #newspaper-graphic-vertical {
        display: block;
        width: 100%;
        height: auto;
    }

    .graphics-left, .graphics-right {
        display: none;
    }
    .content_img {
        width: 95%;
    }
    .canal, .subway {
        display: block;
    }
    #tunnel {
        overflow-x: hidden;
    }

    .canalboat-wrap-text {
        width: 50%;
        margin-right: -20%;
    }

    figure {
        margin: 20px 0;
    }

    #intro-title {
        width: 85%;
    }

    .quote-block {
        position: static;
        width: 100%;
        transform: none;
        height: auto;
    }

    .quote {
        font-size: 28px;
        color: var(--black);
    }

    .author {
        font-size: 18px;
        color: var(--black);
    }

    #smokeFrames {
        display: none;
    }

    #street-light {
        width: 100vw;
        height: auto;
        left: -30VW;
        top: 20%;
    }

    #walkSignFrames, #walkSignFrames .frame {
        height: 100%;
    }

    .sources {
        width: 100%;
        padding: 20px;
    }

    .sources p {
        padding-left: 0;
    }

    .special-thanks h1 {
        padding: 0 20px;
    }

    .special-thanks {
        margin: 0 auto;
        width: 100%;
        display: block;
    }   

    .special-thanks img {
        width: 75%;
    }

    .letter {
        width: 12ch;
    }
}