/* ═══════════════════════════════════════════════════════════
   About Section
   All classes are namespaced .about-* to stay isolated
   from the rest of the layout.
═══════════════════════════════════════════════════════════ */

/* ── About section min-height — ensures it fills the viewport ── */
/* Remove this rule when timeline + projects are re-enabled       */
#section-about {
    min-height: 100dvh;
}

/* ── Root container + about-specific structural variables ── */
.about-layout {
    /* Structural values unique to this section */
    --about-avatar:         148px;
    --about-skill-bar:      2px;
    --about-skill-name-col: 155px;
    --about-timeline-yr:    52px;
    --about-layout-gap:     56px;
    --about-block-pt:       36px;
    --about-block-gap:      24px;

    display: flex;
    flex-direction: column;
    gap: var(--about-layout-gap);
    padding-bottom: 80px;
    margin-top: var(--padding);
    will-change: transform;
}

/* ── Shared block wrapper (border + label + content) ─────── */
.about-block {
    display: flex;
    flex-direction: column;
    gap: var(--about-block-gap);
    padding-top: var(--about-block-pt);
    border-top: 1px solid var(--color-border);
}

.about-block-label {
    font-size:      var(--text-caption);
    font-weight:    var(--text-caption-weight);
    letter-spacing: var(--text-caption-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    opacity: 0.35;
}

/* ── Hero ─────────────────────────────────────────────────── */
.about-hero {
    display:               grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:   "personal avatar online";
    gap:                   40px;
    align-items:           center;
}

/* ── Left column: personal ── */
.about-hero-personal {
    grid-area:      personal;
    display:        flex;
    flex-direction: column;
    gap:            14px;
}

/* ── Right column: online ── */
.about-hero-online {
    grid-area:      online;
    display:        flex;
    flex-direction: column;
    align-items:    flex-end;
    text-align:     right;
    gap:            14px;
}

.about-hero-online .email-row {
    justify-content: flex-end;
}

.about-hero-online .about-hero-socials {
    justify-content: flex-end;
}

.about-hero-contact {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.about-hero-socials {
    display:         flex;
    flex-direction:  row;
    gap:             var(--gap);
    justify-content: flex-end;
}

.about-hero-social-link {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    filter:          brightness(0) invert(1);
    opacity:         0.7;
    transition:      filter 0.2s ease-out, opacity 0.2s ease-out;
}

.about-hero-social-link:hover {
    filter:  none;
    opacity: 1;
}

.about-hero-social-link img {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}

/* ── Center column: avatar ── */
.about-avatar {
    grid-area:    avatar;
    justify-self: center;
    align-self:   center;
    position:     relative;
    width:        var(--about-avatar);
    aspect-ratio: 1 / 1;
    border-radius: var(--radius);
    overflow:      hidden;
    border:        1px solid var(--color-border);
    background:    var(--color-panel-1);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.03),
        0 0 64px rgba(255, 255, 255, 0.08);
}

.about-avatar-slide {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    opacity:    0;
    transition: opacity 1.2s ease-in-out;
}

.about-avatar-slide.active {
    opacity: 0.45;
}

.about-avatar-logo {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: contain;
    padding:    18%;
    box-sizing: border-box;
    z-index:    1;
}


.about-name {
    margin:         0;
    font-size:      var(--text-heading);
    font-weight:    var(--text-heading-weight);
    letter-spacing: var(--text-heading-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    line-height:    1;
    text-shadow:    var(--title-shadow);
}

.about-tagline {
    margin:         0;
    font-size:      var(--text-caption);
    font-weight:    var(--text-caption-weight);
    letter-spacing: var(--text-eyebrow-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    opacity: 0.4;
}

.about-bio {
    margin:      0;
    font-size:   var(--text-body);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
    color:       var(--color-title);
    opacity:     0.6;
}

.about-meta {
    margin:         4px 0 0;
    font-size:      var(--text-caption);
    font-weight:    var(--text-caption-weight);
    letter-spacing: var(--text-caption-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    opacity: 0.3;
}

/* ── Skills ───────────────────────────────────────────────── */
.about-skills-list {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

.about-skill {
    display:               grid;
    grid-template-columns: var(--about-skill-name-col) 1fr 32px;
    gap:                   16px;
    align-items:           center;
}

.about-skill-name {
    font-size:      var(--text-label);
    font-weight:    var(--text-label-weight);
    letter-spacing: var(--text-label-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    opacity: 0.55;
}

.about-skill-track {
    height:     var(--about-skill-bar);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 1px;
    position:   relative;
}

.about-skill-fill {
    position: absolute;
    inset:    0 auto 0 0;
    width:    0;                        /* animated to --pct */
    border-radius: 1px;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.85)
    );
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3), 0 0 28px rgba(255, 255, 255, 0.08);
    animation: about-skill-grow 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes about-skill-grow {
    to { width: var(--pct); }
}

.about-skill-pct {
    font-size:      var(--text-caption);
    font-weight:    var(--text-caption-weight);
    letter-spacing: 0.04em;            /* intentionally tight for numbers */
    color:          var(--color-title);
    opacity: 0.22;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── Projects ─────────────────────────────────────────────── */
.about-projects-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   32px;
}

.about-project-col {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.about-project-col-label {
    font-size:      var(--text-caption);
    font-weight:    var(--text-caption-weight);
    letter-spacing: var(--text-caption-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    opacity: 0.28;
    margin-bottom: 2px;
}

.about-project-card {
    padding:        14px 16px;
    border:         1px solid rgba(255, 255, 255, 0.1);
    border-radius:  var(--radius);
    display:        flex;
    flex-direction: column;
    gap:            5px;
    text-decoration: none;
    cursor: default;
    transition:
        background   0.2s ease-out,
        border-color 0.2s ease-out,
        transform    0.2s ease-out;
}

a.about-project-card { cursor: pointer; }

a.about-project-card:hover {
    background:   rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.28);
    transform:    translateY(-2px);
}

.about-project-name {
    font-size:      var(--text-label);
    font-weight:    var(--text-label-weight);
    letter-spacing: var(--text-label-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    opacity: 0.85;
}

.about-project-desc {
    font-size:   var(--text-body);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
    color:       var(--color-title);
    opacity: 0.38;
}

/* ── Timeline ─────────────────────────────────────────────── */
.about-timeline-list {
    display:        flex;
    flex-direction: column;
    margin-left:    8px;
    padding-left:   20px;
    border-left:    1px solid rgba(255, 255, 255, 0.1);
}

.about-timeline-item {
    display:               grid;
    grid-template-columns: var(--about-timeline-yr) 1fr;
    gap:                   20px;
    padding:               14px 0;
    border-bottom:         1px solid rgba(255, 255, 255, 0.04);
    position:              relative;
    align-items:           start;
}

.about-timeline-item:last-child { border-bottom: none; }

/* Dot on the left border line */
.about-timeline-item::before {
    content:       '';
    position:      absolute;
    left:          -24px;
    top:           20px;
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    rgba(255, 255, 255, 0.22);
    box-shadow:    0 0 8px rgba(255, 255, 255, 0.15);
}

.about-timeline-year {
    font-size:            var(--text-label);
    font-weight:          var(--text-label-weight);
    letter-spacing:       var(--text-label-spacing);
    color:                var(--color-title);
    opacity: 0.25;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
}

.about-timeline-content {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.about-timeline-title {
    font-size:      var(--text-label);
    font-weight:    var(--text-label-weight);
    letter-spacing: var(--text-label-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    opacity: 0.8;
}

.about-timeline-desc {
    font-size:   var(--text-body);
    font-weight: var(--text-body-weight);
    line-height: var(--text-body-line-height);
    color:       var(--color-title);
    opacity: 0.38;
}

/* ── Contact ──────────────────────────────────────────────── */
.about-contact {
    align-items: center;
    text-align:  center;
    padding-top: 56px;
}

.about-email {
    display:        inline-block;
    font-size:      var(--text-sub);
    font-weight:    var(--text-sub-weight);
    letter-spacing: var(--text-sub-spacing);
    color:          var(--color-title);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity 0.2s ease-out, text-shadow 0.2s ease-out;
    text-shadow: var(--title-shadow);
}

.about-email:hover {
    opacity:     1;
    text-shadow: var(--title-shadow), 0 0 40px rgba(255, 255, 255, 0.2);
}

.email-row {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
}

.email-copy-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    font-size:       var(--text-caption);
    font-weight:     var(--text-caption-weight);
    letter-spacing:  var(--text-caption-spacing);
    text-transform:  uppercase;
    color:           var(--color-title);
    opacity:         0.4;
    background:      none;
    border:          1px solid var(--color-border);
    border-radius:   calc(var(--radius) / 2);
    padding:         4px 12px;
    cursor:          pointer;
    transition:      opacity 0.2s ease-out, border-color 0.2s ease-out;
}

.email-copy-btn:hover,
.email-copy-btn--copied {
    opacity:      1;
    border-color: var(--color-border-highlight);
}

.about-contact-note {
    margin:         0;
    font-size:      var(--text-caption);
    font-weight:    var(--text-caption-weight);
    letter-spacing: var(--text-caption-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    opacity: 0.28;
}

/* ── Socials ──────────────────────────────────────────────── */
.about-socials-list {
    display:   flex;
    flex-wrap: wrap;
    gap:       10px;
}

.about-social-link {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 18px;
    border:          1px solid rgba(255, 255, 255, 0.12);
    border-radius:   999px;
    text-decoration: none;
    transition:
        background   0.2s ease-out,
        border-color 0.2s ease-out;
}

.about-social-link:hover {
    background:   rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.32);
}

.about-social-link img {
    width:   16px;
    height:  16px;
    filter:  brightness(0) invert(1);
    opacity: 0.55;
}

.about-social-link span {
    font-size:      var(--text-caption);
    font-weight:    var(--text-caption-weight);
    letter-spacing: var(--text-caption-spacing);
    text-transform: uppercase;
    color:          var(--color-title);
    opacity: 0.55;
}