:root {
    --animation-height: 90vh;
}


/* =====================================
MARK: General detail page styling
===================================== */
.animation-section {
    font-family: var(--font-animation-family);
    height: var(--animation-height, 100vh);
    width: 100vw;
    margin: 0;
    padding: 0;
    overflow: clip;
}

.banner-text {
    font-family: var(--font-animation-family);
}


/* =====================================
MARK: Section components
===================================== */

/* ---------- Layout Container ---------- */
.page {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 2rem;
    padding: 2rem 0;
    position: relative;
}

/* Vertical lines at the .page container edges */
.page-detail::before, .page-detail::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 1px solid var(--color-border);
    pointer-events: none;
}

.page-detail::before { left: 0; }
.page-detail::after  { right: 0; }

.page .block {
    border: 1px solid var(--color-border);
}

/* Base grid layout applied to all rows and headers */
.page .row, .page .block-header {
    margin-top: -1px;
    margin-inline: clamp(1rem, 1rem + 3vw, 4rem);
    position: relative;
}

/* Extend grid lines outward to viewport edges */
.page-detail .row::before, .page-detail .row::after,
.page-detail .block-header::before, .page-detail .block-header::after {
    content: "";
    position: absolute;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    pointer-events: none;
}

/* Rows have no border — align with block edges */
.page-detail .row::before, .page-detail .row::after {
    top: 0;
    bottom: 0;
}

/* Block-headers have their own border — extend past it */
.page-detail .block-header::before, .page-detail .block-header::after {
    top: -1px;
    bottom: -1px;
}

.page-detail .row::before, .page-detail .block-header::before {
    right: 100%;
    left: calc(-1 * (50vw - 50%));
    border-left: 1px solid var(--color-border);
}

.page-detail .row::after, .page-detail .block-header::after {
    left: 100%;
    right: calc(-1 * (50vw - 50%));
    border-right: 1px solid var(--color-border);
}

.page .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

/* Layout overrides */
.page .row-full { display: block; }
.page .row-stacked { display: flex; flex-direction: column; }
.row-text-columns .block-text-large:last-child { margin-left: -1px; }
.row-stacked .block-text-large { margin-top: -1px; }

/* ---------- Header ---------- */
.block-header { padding: 1rem 1.2rem; }
.block-header h2 {
    font-size: clamp(1.3rem, 1rem + 1.5vw, 1.8rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    font-family: var(--inter-regular);
    text-transform: uppercase;
}
.block-header-right { text-align: right; }

/* ---------- Text Blocks ---------- */
.row-text-side { display: flex; flex-direction: column; }

.block-text-large { flex: 1; padding: 1.5rem; }
.block-text-full { padding: 2rem 1.5rem; }
.block-text-small { padding: 0.8rem 1.5rem; margin-top: -1px; }

.block-text-large p,
.block-text-large blockquote {
    font-size: var(--font-body-text-size);
    font-family: var(--font-body-text-family);
    text-align: justify;
    hyphens: auto;
    margin: 0;
    padding: 0;
    padding-bottom: 1rem;
    border: none;
}

.block-text-large p:last-of-type {
    padding: 0;
}

.block-text-large p.block-author {
    /* margin-top: 1rem; */
    font-size: 0.85rem;
    font-family: var(--inter-regular);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
}

/* Combine small text elements */
.block-text-small p, .block-text-small cite, .block-text-small a, .block-cite {
    font-size: 0.75rem;
    line-height: 1.5;
    font-family: var(--font-body-text-family);
}
.block-text-small cite, .block-cite { font-style: normal; display: block; }
.block-text-small a, .block-cite a { word-break: break-all; }
.block-cite { margin-top: 1rem; }

/* ---------- Image Blocks ---------- */
.block-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin-left: -1px; /* collapse border with text neighbour */
}
.block-image-full { margin-left: 0; padding: 1rem; }

.block-image img, .block-image video,
.block-image-full img, .block-image-full video { width: 100%; }

.block-image img, .block-image video { height: 100%; object-fit: contain; }
.block-image-full img, .block-image-full video { max-height: 500px; object-fit: cover; }

/* Reversed row */
.page .row-reversed .block-image {
    order: -1;
    margin-inline: 0 -1px;
}

/* =====================================
MARK: Scroll Animations
===================================== */
@media (prefers-reduced-motion: no-preference) {
    /* The grid borders remain static. Only the content inside animates. */
    .animate-on-scroll > * {
        opacity: 0;
        transform: translateY(40px); /* Default slide up */
        transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .animate-on-scroll.is-visible > * { opacity: 1; transform: translate(0, 0) !important; }
    
    /* Staggered delay for multiple elements */
    .animate-on-scroll > *:nth-child(2) { transition-delay: 0.1s; }
    .animate-on-scroll > *:nth-child(3) { transition-delay: 0.2s; }
    .animate-on-scroll > *:nth-child(4) { transition-delay: 0.3s; }
    
    /* Side slides for columns */
    .page .row > :first-child .animate-on-scroll > *, 
    .page .row > .animate-on-scroll:first-child > * { transform: translateX(-60px); }
    
    .page .row > :last-child .animate-on-scroll > *, 
    .page .row > .animate-on-scroll:last-child > * { transform: translateX(60px); }
    
    /* Reversed row logic */
    .page .row-reversed > :first-child .animate-on-scroll > *, 
    .page .row-reversed > .animate-on-scroll:first-child > * { transform: translateX(60px); }
    
    .page .row-reversed > :last-child .animate-on-scroll > *, 
    .page .row-reversed > .animate-on-scroll:last-child > * { transform: translateX(-60px); }
}

/* =====================================
MARK: Responsive
===================================== */
@media (max-width: 768px) {
    .page .row { grid-template-columns: 1fr; }
    
    .page .block-image { margin-left: 0; margin-top: -1px; }

    .page .row-reversed .block-image {
        margin-right: 0;
        margin-top: 0;
        order: -1;
    }

    .page .row-reversed .row-text-side, 
    .row-text-columns .block-text-large:last-child {
        margin-top: -1px;
        margin-left: 0;
    }

    .block-header h2 { font-size: 1.3rem; }
}



/* =====================================
MARK: Animation button
===================================== */
.hidden-section {
    position: relative;

    .animation-button {
        background: var(--black);
        position: absolute;
        z-index: 10000;
        appearance: none;
        border: none;
        right: 20px;
        top: 20px;
        border-radius: 50%;
        width: 3.5rem;
        height: 3.5rem;
        place-items: center;

        cursor: pointer;

        span {
            display: inline-block;
            width: 80%;
            height: 80%;
            
            background-position: center;
            
            background-repeat: no-repeat;

            
        }

        &.stop-animation span {
            background-image: url("/assets/media/start.svg");
            background-size: 80%;
        }

        &.play-animation span {
            background-image: url("/assets/media/stop.svg");
            background-size: 100%;
        }
    }
}

/* hidden by default */
.animation-button {
    display: none;
}

/* only show the animation start-stop button when the JS is initialized in the page (adds the play/stop-animation classes) */
.animation-button.play-animation,
.animation-button.stop-animation {
    display: grid; 
}

/* pause/start animation */
.animation-section:has(.stop-animation) * {
    animation-play-state: paused !important;
    transition: none;
}