/* ABOUT PAGE ENTRANCE */

@property --about-scrollbar-opacity{
    syntax:"<number>";
    inherits:true;
    initial-value:0;
}

html{
    --about-scrollbar-opacity:0;
    overflow-y:scroll;
    scrollbar-gutter:stable;
    animation:aboutScrollbarFade .65s ease 1.55s forwards;
}

html::-webkit-scrollbar{ width:11px; }
html::-webkit-scrollbar-track{ background:transparent; }

html::-webkit-scrollbar-thumb{
    min-height:48px;
    border:3px solid transparent;
    border-radius:999px;
    background:rgba(17,17,17,var(--about-scrollbar-opacity));
    background-clip:padding-box;
}

body{
    overflow:auto;
    animation:aboutBodyLock 2.15s step-end;
}

.about-entry{
    position:fixed;
    inset:0;
    z-index:100000;
    display:grid;
    grid-template-columns:1fr 1fr;
    overflow:hidden;
    pointer-events:auto;
    transform-origin:center;
    will-change:transform,opacity;
    animation:
        aboutEntryZoomOut .86s cubic-bezier(.22,.61,.36,1) 1.16s forwards,
        aboutEntryHide .01s linear 2.08s forwards;
}

.about-entry__page{
    position:relative;
    min-width:0;
    overflow:visible;
    background:#f3f0e9;
}

.about-entry__page--left{
    z-index:1;
}

.about-entry__word{
    position:absolute;
    z-index:2;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    column-gap:.18em;
    min-width:0;
    overflow:visible;
    color:#111;
    pointer-events:none;
}

.about-entry__brand{
    position:absolute;
    z-index:3;
    top:clamp(42px,8vh,76px);
    left:50%;
    color:#111;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:.55em;
    line-height:1;
    opacity:0;
    transform:translate(-50%,-12px);
    animation:
        aboutBrandIn .55s cubic-bezier(.22,1,.36,1) .12s forwards,
        aboutBrandOut .24s ease 1.02s forwards;
}

.about-entry__part{
    display:block;
    white-space:nowrap;
    font-family:"Times New Roman",serif;
    font-size:clamp(72px,11vw,160px);
    font-weight:400;
    line-height:.76;
    letter-spacing:-.08em;
    opacity:0;
    animation:aboutWordIn .72s cubic-bezier(.16,1,.3,1) forwards;
}

.about-entry--publications .about-entry__part{
    font-size:clamp(46px,8vw,116px);
}

.about-entry--members .about-entry__part{
    font-size:clamp(58px,10vw,144px);
}

.about-entry--publications > .about-entry__page{
    display:flex;
    align-items:center;
    overflow:visible;
}

.about-entry--publications > .about-entry__page--left{
    justify-content:flex-end;
}

.about-entry--publications > .about-entry__page--right{
    justify-content:flex-start;
}

.about-entry--publications > .about-entry__page > .about-entry__part{
    position:relative;
    left:1.781em;
}

.about-entry--publications > .about-entry__page--left > .about-entry__part{
    margin-right:-.035em;
    transform:translateY(46px);
    animation-delay:.08s;
}

.about-entry--publications > .about-entry__page--right > .about-entry__part{
    margin-left:-.035em;
    transform:translateY(46px);
    animation-delay:.16s;
}

.about-entry__word .about-entry__part:first-child{
    transform:translateY(46px);
    animation-delay:.08s;
}

.about-entry__word .about-entry__part:last-child{
    transform:translateY(46px);
    animation-delay:.16s;
}

body > header{
    animation:aboutHeaderIn .62s cubic-bezier(.22,1,.36,1) 1.28s both;
}

.about-page .about-top > div:first-child{
    animation:aboutTextIn .9s cubic-bezier(.16,1,.3,1) 1.26s both;
}

.about-page .about-top > div:last-child{
    animation:aboutImageIn 1s cubic-bezier(.16,1,.3,1) 1.34s both;
}

.about-page .info-grid{
    animation:aboutCardsIn .8s cubic-bezier(.22,1,.36,1) 1.58s both;
}

.people-page .people-header{
    animation:aboutTextIn .9s cubic-bezier(.16,1,.3,1) 1.26s both;
}

.people-page .people-grid{
    animation:aboutCardsIn .8s cubic-bezier(.22,1,.36,1) 1.58s both;
}

.people-page .people-grid .person-card{
    animation:none;
}

@keyframes aboutBodyLock{
    0%,99.9%{ overflow:hidden; }
    100%{ overflow:auto; }
}

@keyframes aboutScrollbarFade{
    from{ --about-scrollbar-opacity:0; }
    to{ --about-scrollbar-opacity:.34; }
}

@keyframes aboutBrandIn{
    to{ opacity:1; transform:translate(-50%,0); }
}

@keyframes aboutBrandOut{
    to{ opacity:0; transform:translate(-50%,-8px); }
}

@keyframes aboutWordIn{
    to{ opacity:1; transform:translateY(0); }
}

@keyframes aboutEntryZoomOut{
    to{
        opacity:0;
        transform:scale(1.14);
    }
}

@keyframes aboutEntryHide{
    to{ opacity:0; visibility:hidden; pointer-events:none; }
}

@keyframes aboutHeaderIn{
    from{ opacity:0; transform:translateY(-16px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes aboutTextIn{
    from{ opacity:0; transform:translateX(-34px); }
    to{ opacity:1; transform:translateX(0); }
}

@keyframes aboutImageIn{
    from{
        opacity:0;
        transform:translateX(34px) scale(.975);
        clip-path:inset(0 0 0 32%);
    }
    to{
        opacity:1;
        transform:translateX(0) scale(1);
        clip-path:inset(0 0 0 0);
    }
}

@keyframes aboutCardsIn{
    from{ opacity:0; transform:translateY(26px); }
    to{ opacity:1; transform:translateY(0); }
}

@media(max-width:600px){
    .about-entry__part{
        font-size:clamp(42px,12vw,64px);
        letter-spacing:-.085em;
    }

    .about-entry__word .about-entry__part:first-child{
        transform:translateY(30px);
    }

    .about-entry__word .about-entry__part:last-child{
        transform:translateY(30px);
    }

    .about-entry__brand{
        top:48px;
        font-size:11px;
    }

    .about-entry--publications .about-entry__part{
        font-size:clamp(27px,7.4vw,44px);
    }

    .about-entry--publications > .about-entry__page--left > .about-entry__part,
    .about-entry--publications > .about-entry__page--right > .about-entry__part{
        transform:translateY(30px);
    }

    .about-entry--members .about-entry__part{
        font-size:clamp(38px,10.5vw,58px);
    }
}

@media(prefers-reduced-motion:reduce){
    html{
        --about-scrollbar-opacity:.34;
        animation:none;
    }

    body,
    body > header,
    .about-page .about-top > div:first-child,
    .about-page .about-top > div:last-child,
    .about-page .info-grid,
    .people-page .people-header,
    .people-page .people-grid{
        animation:none;
    }

    .about-entry{ display:none; }
}