/*=========================================
ABOUT HERO
=========================================*/
.about-hero{
    width:100%;
    min-height:90vh;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-3xl);
    border-radius:
        var(--radius-xl) 
        var(--radius-circle);
    padding:var(--space-3xl) 8%;
    position:relative;
    margin-top: var(--space-lg);
    animation:
        fadeUp 
        var(--motion-upperslow) 
        var(--ease-smooth) 
        forwards;
}

/*=========================================
ABOUT LEFT
=========================================*/
.about-left{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin-top: -30px;
}

/*=========================================
TAG
=========================================*/
.about-tag{
    display:inline-flex;
    align-items:center;
    width:max-content;
    padding:var(--space-sm) var(--space-md);
    margin-bottom:var(--space-lg);
    border-radius:var(--radius-xl);
    border:2px solid var(--color-border);
    background:var(--glass-bg-strong);
    color:var(--color-primary-hover);
    text-shadow: 5px 5px 2px var(--color-background);
    font-size:var(--text-small);
    letter-spacing:var(--tracking-ultra);
    font-weight:var(--weight-bold);
    text-transform:uppercase;
}

/*=========================================
TITLE
=========================================*/
.about-left h2{
    font-size:var(--text-clampsmall);
    line-height:var(--leading-tight);
    font-weight:var(--weight-bold);
    color:var(--color-text);
    margin-bottom:var(--space-lg);
}

/*=========================================
SUBTITLE
=========================================*/
.about-left h3{
    font-size:var(--text-h3);
    font-weight:var(--weight-medium);
    color:var(--color-text-secondary);
    line-height:var(--leading-body);
    margin-bottom:var(--space-lg);
}

/*=========================================
DESCRIPTION
=========================================*/
.about-left p{
    max-width:620px;
    font-size:var(--text-large);
    line-height:var(--leading-body);
    color:var(--color-text-secondary);
    margin-bottom:var(--space-xl);
}

/*=========================================
ABOUT RIGHT
=========================================*/
.about-right{
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

/*=========================================
ILLUSTRATION
=========================================*/
.about-illustration{
    width:100%;
    max-width:520px;
    aspect-ratio:5/5;
    border-radius:var(--radius-xl);
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(
            145deg,
            #181818,
            #0b0b0b
        );
    border:2px solid var(--glass-border);
    box-shadow:
            var(--shadow-large);
    animation:
        floatIllustration
        6s
        ease-in-out
        infinite;
    
    transition:
        transform var(--motion-upperslow) var(--ease-smooth),
        box-shadow var(--motion-upperslow) var(--ease-smooth);
}

.about-illustration img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.about-illustration::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle,
            rgba(56, 0, 0, 0.256),
            transparent 70%
        );
}

/*=========================================
OUR STORY
=========================================*/
.about-story{
    width:100%;
    border-radius:var(--radius-xl);
    min-height:90vh;
    display:flex;
    margin-top: var(--space-sm);
    justify-content:space-between;
    align-items:center;
    text-align:center;
    gap:var(--space-3xl);
    padding:var(--space-3xl) 8%;
    animation:
        fadeUp 
        var(--motion-upperslow) 
        var(--ease-smooth) 
        forwards;
}

.story-image{
    position: absolute;
    display:flex;
    opacity: 12%;
    justify-content:center;
    align-items:center;
    margin-top: 450px;
    max-width: 900px;
    width: 100%;
    pointer-events:none;
}

.story-content{
    flex:3;
}

.story-content h2{
    font-size:var(--text-clampsmall);
    line-height:var(--leading-tight);
    color:var(--color-text);
    margin-bottom:var(--space-3xl);
    animation:
        fadeUp 
        var(--motion-upperslow) 
        var(--ease-smooth) 
        forwards;
}

.story-content p{
    max-width:620px;
    color:var(--color-text-secondary);
    line-height:var(--leading-body);
    margin-bottom:var(--space-lg);
}

/*=========================================
SIGNATURE
=========================================*/
.story-signature{
    margin-top:var(--space-3xl);
    display:flex;
    flex-direction:column;
    gap:var(--space-lg);
    align-items:flex-start;
}

.signature-line{
    width:90px;
    height:2px;
    background:
        linear-gradient(
            90deg,
            var(--color-primary-hover),
            transparent
        );

}

.story-signature blockquote{
    font-size:var(--text-large);
    line-height:var(--leading-body);
    color:var(--color-text-secondary);
    font-style:italic;
    max-width:560px;
}

.signature-author{
    display:flex;
    flex-direction:column;
    gap:var(--space-sm);
}

.signature-image{
    width:180px;
    object-fit:contain;
    opacity:.90;
    margin-top: -20px;
    margin-bottom: -20px;
}

.signature-author span{
    font-size:var(--text-uppersmall);
    letter-spacing:var(--tracking-ultra);
    text-transform:uppercase;
    color:var(--color-text-dark);
}

/*=========================================
TIMELINE
=========================================*/
.about-timeline{
    margin-top: var(--space-sm);
    border-radius:var(--radius-lg) var(--radius-circle);
    
    animation:
        fadeUp 
        var(--motion-upperslow) 
        var(--ease-smooth) 
        forwards;
}
.about-timeline h2{
    text-align: center;
}

.timeline{
    position:relative;
    margin-top:var(--space-3xl);
    display:flex;
    flex-direction:column;
    gap:var(--space-3xl);
}

.timeline::before{
    content:"";
    position:absolute;
    left:18px;
    top:0;
    bottom:0;
    width:2px;
    background:
        linear-gradient(
            to bottom,
            rgba(209, 0, 0, 0.107),
            #a20000,
            rgba(209, 0, 0, 0.076)
        );
}

.timeline.timeline-visible::before{
    height:100%;
}

/*=========================================
TIMELINE ITEM
=========================================*/
.timeline-item{
    max-width:900px;
    width:80%;
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:var(--space-xl);
}

/*=========================================
TIMELINE DOT
=========================================*/
.timeline-dot{
    position:relative;
    width:38px;
    display:flex;
    justify-content:center;
}

.timeline-dot::before{
    content:"";
    width:18px;
    height:18px;
    border-radius: var(--radius-ssm) var(--radius-circle);
    background: var(--color-background-foot);
    border:4px solid var(--color-primary-hover);
    display:block;
    z-index:2;
}

.timeline-dot::after{
    content:"";
    position:absolute;
    width:32px;
    height:32px;
    border-radius: var(--radius-circle);
    background:
        var(--color-shadow-red);
    filter:
        blur(var(--footer-blur));
    z-index:1;
}

.timeline-dot{
    transition:
        transform 
        var(--motion-slow) 
        var(--ease-smooth);
}

.timeline-item:hover .timeline-dot{
    transform:
        scale(1.12);
}

.timeline-item:hover .timeline-dot::after{
    background:
        var(--color-primary-hover);
}

/*=========================================
TIMELINE CONTENT
=========================================*/
.timeline-content{
    max-width:90%;
    line-height:var(--leading-body);
    flex:1;
    padding:
        var(--space-xl) var(--space-xl);
    border-radius:var(--glass-radius);
    background:var(--color-card);
    border:2px solid var(--glass-highlight);
    backdrop-filter:
        blur(var(--footer-blur));
    -webkit-backdrop-filter: 
        blur(var(--footer-blur));
    transition:
        transform var(--motion-upperslow) var(--ease-smooth),
        box-shadow var(--motion-upperslow) var(--ease-smooth),
        border-color var(--motion-upperslow) var(--ease-smooth);
}

/*=========================================
YEAR
=========================================*/
.timeline-year{
    display:inline-block;
    margin-bottom:var(--space-sm);
    color:var(--color-primary-hover);
    font-size:var(--text-large);
    font-weight:var(--weight-bold);
    text-shadow: 5px 5px 2px var(--color-background);
    letter-spacing:var(--tracking-ultra);
    text-transform:uppercase;
}

.timeline-content h3{
    margin-bottom:var(--space-md);
    font-size:var(--text-h3);
    color:var(--color-text);
    font-weight:var(--weight-bold);
}

.about-timeline h2{
    font-size: var(--text-clampsmall);
    color: var(--color-text)
}

.timeline-content p{
    color:var(--color-text-secondary);
    font-size:var(--text-large);
    font-weight:var(--weight-normal);
    line-height:var(--leading-body);
    margin-top:var(--space-sm);
}

.timeline-content:hover{
    transform:
        translateY(-6px);
    box-shadow:
        var(--shadow-large);
    border-color:
        var(--color-shadow-red);
}

.timeline-item:hover .timeline-dot::before{
    border-color:var(--color-primary-hover);
}

/*=========================================
SCROLL REVEAL
=========================================*/
.timeline-item{
    opacity:0;
    transition:
        opacity var(--motion-upperslow) var(--ease-smooth),
        transform var(--motion-upperslow) var(--ease-smooth);

}

.timeline-item.show{
    opacity:1;
}

/*=========================================
TIMELINE ALTERNATING
=========================================*/
.timeline-item:nth-child(odd){
    transform: translateX(-90px);
}

.timeline-item:nth-child(even){
    transform: translateX(90px);
}

.timeline-item.show{
    transform: translateX(0);
}

/*=========================================
ABOUT VALUES
=========================================*/
.about-values{
    width:100%;
    margin-top:var(--space-upperxl);
    text-align:center;
}

.about-values h2{
    margin-top:var(--space-2xl);
    margin-bottom:var(--space-md);
    font-size:var(--text-clampsmall);
    color:var(--color-text);
}

.about-values>p{
    max-width:700px;
    margin:auto;
    color:var(--color-text-secondary);
    line-height:var(--leading-body);
}

/*=========================================
ABOUT CTA
=========================================*/
.about-cta{
    margin-top:var(--space-upperxl);
    padding:var(--space-3xl) var(--space-xl);
    text-align:center;
    border-radius:var(--radius-xl);
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(
            circle at top,
            rgba(209, 0, 0, 0.15),
            transparent 60%
        ),
        var(--color-background);
}

.about-cta h2{
    font-size:
        var(--text-clamp);
    color:var(--color-text);
    margin:
        var(--space-md) 0;
}

.about-cta p{
    max-width:700px;
    margin:auto;
    color:var(--color-text-secondary);
    line-height:var(--leading-body);
}