/**
 * About Timeline Page Styles
 *
 * @package birrapeja-xyz
 */

/* Custom Properties */
:root {
  --fs--3: clamp(0.512rem, 0.6338rem + -0.497vw, 0.6333rem);
  --fs--2: clamp(0.64rem, 0.845rem + -0.8366vw, 0.8442rem);
  --fs--1: clamp(0.8rem, 1.1266rem + -1.3329vw, 1.1253rem);
  --fs-0: clamp(1rem, 1.502rem + -2.0488vw, 1.5rem);
  --fs-1: clamp(1.25rem, 2.0024rem + -3.0712vw, 1.9995rem);
  --fs-2: clamp(1.5625rem, 2.6697rem + -4.5191vw, 2.6653rem);
  --fs-3: clamp(1.9531rem, 3.5592rem + -6.5553vw, 3.5529rem);
  --fs-4: clamp(2.4414rem, 4.745rem + -9.4025vw, 4.736rem);
  --fs-5: clamp(3.0518rem, 6.3259rem + -13.3639vw, 6.3131rem);
  --fs-6: clamp(3.8147rem, 8.4334rem + -18.852vw, 8.4153rem);
  --fs-7: clamp(4.7684rem, 11.243rem + -26.4272vw, 11.2177rem);
  --fs-8: clamp(5.9605rem, 14.9885rem + -36.8492vw, 14.9531rem);

  /* Space */
  --space-3xs: clamp(0.25rem, 0.3755rem + -0.5122vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.751rem + -1.0244vw, 0.75rem);
  --space-xs: clamp(0.75rem, 1.1265rem + -1.5366vw, 1.125rem);
  --space-s: clamp(1rem, 1.502rem + -2.0488vw, 1.5rem);
  --space-m: clamp(1.5rem, 2.253rem + -3.0733vw, 2.25rem);
  --space-l: clamp(2rem, 3.0039rem + -4.0977vw, 3rem);
  --space-xl: clamp(3rem, 4.5059rem + -6.1465vw, 4.5rem);
  --space-2xl: clamp(4rem, 6.0079rem + -8.1954vw, 6rem);
  --space-3xl: clamp(6rem, 9.0118rem + -12.2931vw, 9rem);

  /* Grid */
  --grid-max-width: 100%;
  --grid-gutter: var(--space-s-l, clamp(1rem, 0.2847rem + 2.9197vw, 3rem));
  --site-margin: var(--grid-gutter);
  --panel-radius: var(--space-s-l);

  --font-pixel: "OggRg", "JetBrains Mono", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap');

/* === Hero Section === */
.about-hero {
    padding: var(--space-xl) 0;
    /* background: transparent; */
}

.about-hero-content {
    margin-bottom: var(--space-xl);
}

.about-hero-title {
    font-family: var(--serif);
    font-weight: var(--black);
    font-size: var(--fs-8);
    /* font-weight: 900; */
    line-height: 0.9;
    /* letter-spacing: -0.02em; */
    color: var(--white-color, #fff);
    text-transform: uppercase;
    margin: 0;
}

.about-hero-video {
    margin-bottom: var(--space-xl);
    border-radius: var(--panel-radius);
    overflow: hidden;
    background: var(--main-red, #D6001C);
}

.hero-video {
    width: 100%;
    height: auto;
    min-height: 50vh;
    object-fit: cover;
    display: block;
}

/* === Intro Content === */
.about-intro-content {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gutter);
    margin-bottom: var(--space-xl);
}

.about-intro-left {
    flex: 1;
}

.about-intro-title {
    font-family: var(--serif);
    font-weight: var(--medium);
    font-size: var(--fs-4);
    font-weight: 700;
    line-height: 1;
    color: var(--white-color, #fff);
    margin: 0;
    /* max-width: 20ch; */
    letter-spacing: 0.075em;
}

.about-intro-right {
    flex: 1;
}

.about-intro-text {
    font-family: var(--sans);
    font-weight: var(--light);
    font-size: var(--fs-1);
    line-height: 1.125;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 40ch;
}

/* === Content Grid === */
.about-content-grid {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gutter);
    margin-bottom: 20vw;
}

.about-content-text {
    position: sticky;
    top: var(--space-xs);
    align-self: flex-start;
    flex: 1;
}

.about-content-title {
    font-family: var(--serif);
    font-weight: var(--medium);
    font-size: var(--fs-4);
    color: var(--white-color, #fff);
    margin: 0 0 var(--space-s) 0;
}

.about-content-description {
    font-family: var(--sans);
    font-weight: var(--light);
    font-size: var(--fs-1);
    line-height: 1.125;
    color: rgba(255, 255, 255, 0.9);
    max-width: 40ch;
}

.about-content-description p {
    margin: 0 0 var(--space-s) 0;
}

.about-content-description p:last-child {
    margin-bottom: 0;
}

.about-content-image {
    flex: 1;
}

.about-content-image img {
    width: 100%;
    height: auto;
    border-radius: var(--panel-radius);
    border: 2px solid var(--main-red-3, #7D0012);
}

/* === Timeline === */
.about-timeline {
    position: relative;
}

.year-number {
    position: sticky;
    top: 10vh;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 8vw;
    margin: 0;
    padding: 0;
    font-family: var(--font-pixel);
    line-height: 1;
    color: #fff;
    font-weight: 900;
}

.digit {
    display: inline-block;
    /* overflow: hidden; */
    /* line-height: 90%; */
    /* width: 0.875ch; */
    position: relative;
}

/* === Year Sections === */
.year-section {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl) var(--site-margin) var(--space-l);
}

.year-section-grid {
    display: grid;
    grid-template-rows: 1fr auto;
    grid-template-columns: 1fr;
    gap: var(--space-l);
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

/* === Media Stack === */
.media-stack {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-l);
    order: 1;
}

.media-item {
    position: absolute;
    max-height: 80%;
    max-width: 80%;
    object-fit: contain;
    border-radius: 8px;
    opacity: 0;
    transform: scale(0.95);
}

.media-placeholder {
    width: 300px;
    height: 600px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--accent, #baad6a);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.placeholder-text {
    font-family: var(--font-pixel);
    font-size: 2rem;
    color: var(--accent, #baad6a);
    font-weight: 700;
}

/* === Year Content === */
.year-content {
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    align-self: center;
}

.year-content-inner {
    text-align: left;
}

.year-title {
    font-family: var(--serif);
    font-weight: var(--medium);
    font-size: var(--fs-3);
    font-weight: 700;
    margin: var(--space-l) 0;
    line-height: 1;
    color: var(--white-color, #fff);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.year-description {
    font-family: var(--sans);
    font-weight: var(--light);
    font-size: var(--fs-1);
    line-height: 1.125;
    max-width: 40ch;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
}

/* === Footer Spacer === */
.about-footer-spacer {
    height: 100vh;
    background: var(--main-red, #D6001C);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-footer-text {
    font-family: var(--serif);
    font-weight: var(--medium);
    font-size: var(--fs-2);
    font-weight: 700;
    color: var(--white-color, #fff);
    margin: 0;
}

/* === Responsive Design === */
@media (min-width: 768px) {
    .about-intro-content {
        flex-direction: row;
        align-items: baseline;
    }

    .about-content-grid {
        flex-direction: row;
    }

    .year-section-grid {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 2fr;
    }

    .media-stack {
        order: 2;
        padding: var(--space-l);
    }

    .year-content {
        order: 1;
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .about-hero-title {
        font-size: var(--fs-6);
    }

    .about-intro-title {
        font-size: var(--fs-3);
    }

    .about-intro-text {
        font-size: var(--fs-0);
    }

    .year-number {
        font-size: 12vw;
    }

    .year-title {
        font-size: var(--fs-2);
    }

    .year-description {
        font-size: var(--fs-0);
    }
}

@media (max-width: 480px) {
    .year-section {
        padding: var(--space-l) var(--space-m) var(--space-s);
    }

    .media-stack {
        padding: var(--space-m);
    }

    .year-number {
        font-size: 15vw;
    }
}

/* === Smooth Body Transitions === */
body {
    transition: background-color 0.6s ease;
}

/* === Content Animation States === */
.content {
    transform: scale(0.95);
    opacity: 0;
}