/* =========================================================
   AISHWARYA NAGCHANDI
   Editorial Intelligence × Data
   Complete Shared Design System
   ========================================================= */

:root{
    --bg:#f7f6f2;
    --text:#171717;
    --muted:#686868;
    --line:#d9d8d3;
    --accent:#173f63;
    --soft:#eeede8;

    --nav-h:72px;
    --content:1180px;
    --gutter:6vw;
    --section-y:68px;
}


/* =========================================================
   RESET
   ========================================================= */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--nav-h) + 24px);
    scrollbar-gutter:stable;
}

[id]{
    scroll-margin-top:calc(var(--nav-h) + 24px);
}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'DM Sans',sans-serif;
    line-height:1.65;
    overflow-x:clip;
}

h1,
h2,
h3,
h4,
p{
    margin-top:0;
}

h1,
h2,
h3{
    font-family:'Playfair Display',Georgia,serif;
    font-weight:600;
    line-height:1.12;
    letter-spacing:-.035em;
}

p{
    color:var(--muted);
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

img{
    max-width:100%;
    height:auto;
}

::selection{
    background:var(--accent);
    color:#fff;
}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:4px;
}

.skip-link{
    position:fixed;
    left:10px;
    top:-80px;
    z-index:2000;
    background:var(--accent);
    color:#fff;
    padding:10px;
}

.skip-link:focus{
    top:10px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container{
    width:min(
        var(--content),
        calc(100% - 2 * var(--gutter))
    );

    margin-inline:auto;
    min-width:0;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.site-nav{
    position:fixed;
    inset:0 0 auto;

    height:var(--nav-h);

    background:rgba(247,246,242,.95);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    border-bottom:1px solid var(--line);

    z-index:1000;
}

.nav-inner{
    width:min(
        var(--content),
        calc(100% - 2 * var(--gutter))
    );

    height:100%;

    margin:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:20px;
}

.logo{
    font-weight:700;
    letter-spacing:.1em;
    font-size:16px;
}

.nav-links{
    display:flex;
    align-items:center;

    gap:clamp(
        11px,
        1.7vw,
        25px
    );
}

.nav-links>a{
    font-size:12px;
    white-space:nowrap;
    color:#555;
    transition:color .2s ease;
}

.nav-links>a:hover,
.nav-links>a.active{
    color:var(--text);
}

.nav-links>a.active{
    font-weight:700;
}

.nav-links .resume-btn{
    border:1px solid var(--text);
    padding:8px 12px;
    color:var(--text);
}

.nav-links .resume-btn:hover{
    background:var(--text);
    color:var(--bg);
}

.menu-button{
    display:none;

    border:0;
    background:transparent;

    font-size:26px;

    cursor:pointer;

    padding:6px;

    line-height:1;
}


/* =========================================================
   MAIN
   ========================================================= */

main{
    padding-top:var(--nav-h);
}


/* =========================================================
   TYPE UTILITIES
   ========================================================= */

.eyebrow,
.section-label,
.kicker{
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    line-height:1.6;
}

.eyebrow,
.kicker{
    color:var(--accent);
}

.section-label{
    color:var(--muted);
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.reveal{
    opacity:0;
    transform:translateY(15px);

    transition:
        opacity .6s ease,
        transform .6s ease;
}

.reveal.visible{
    opacity:1;
    transform:none;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
    padding:
        clamp(65px,7.5vw,110px)
        0
        clamp(62px,7vw,98px);

    border-bottom:1px solid var(--line);
}

.hero-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(0,.85fr);

    gap:clamp(
        40px,
        6vw,
        90px
    );

    align-items:end;
}

.hero-grid>*{
    min-width:0;
}

.hero h1{
    font-size:clamp(
        56px,
        6.5vw,
        99px
    );

    line-height:1.01;

    margin:20px 0 0;

    overflow-wrap:normal;
}

.hero h1 em{
    font-weight:500;
}

.hero-copy{
    padding-bottom:5px;
}

.hero-copy>p{
    font-size:clamp(
        16px,
        1.5vw,
        19px
    );

    line-height:1.75;

    max-width:450px;
}

.hero-line{
    margin-top:30px;

    padding-top:16px;

    border-top:1px solid var(--line);

    font-size:12px;

    letter-spacing:.035em;

    color:var(--muted);
}


/* =========================================================
   HOME HERO
   ========================================================= */

.home-hero{
    padding:
        clamp(75px,9vw,130px)
        0;
}

.home-hero h1{
    font-size:clamp(
        54px,
        5.9vw,
        91px
    );
}

.home-hero .kicker{
    margin-bottom:22px;
}

.small-note{
    font-size:13px !important;
    margin-top:22px;
    line-height:1.7 !important;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:25px;

    flex-wrap:wrap;

    margin-top:28px;
}

.button-dark{
    display:inline-block;

    background:var(--text);
    color:#fff;

    padding:12px 18px;

    font-size:13px;
}

.button-dark:hover{
    background:var(--accent);
}

.text-link{
    display:inline-block;

    color:var(--accent);

    font-size:13px;

    font-weight:700;

    border-bottom:1px solid var(--accent);

    padding-bottom:4px;
}

.text-link:hover{
    color:var(--text);
    border-color:var(--text);
}


/* =========================================================
   GENERAL SPLIT SECTIONS
   ========================================================= */

.split-section{
    padding:var(--section-y) 0;

    border-bottom:1px solid var(--line);
}

.split-section.soft,
.soft{
    background:var(--soft);
}

.split-grid,
.closing-grid{
    display:grid;

    grid-template-columns:
        minmax(190px,.37fr)
        minmax(0,1fr);

    gap:clamp(
        38px,
        5.5vw,
        85px
    );

    align-items:start;
}

.split-grid>*,
.closing-grid>*{
    min-width:0;
}

.split-content h2,
.closing h2{
    font-size:clamp(
        39px,
        4.4vw,
        66px
    );

    line-height:1.1;

    margin:0 0 28px;

    overflow-wrap:normal;
}

.split-content>p{
    max-width:710px;

    font-size:16px;

    line-height:1.8;

    margin:0 0 17px;
}

.split-content>p:last-child{
    margin-bottom:0;
}


/* =========================================================
   HOME DIMENSIONS
   ========================================================= */

.three-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:22px;

    margin-top:38px;
}

.three-grid>div{
    border-top:1px solid var(--line);
    padding-top:15px;
}

.three-grid h3{
    font-size:29px;
    margin:12px 0;
}

.three-grid p{
    font-size:13px;
    line-height:1.8;
}

.item-no{
    font-size:11px;
    color:var(--accent);
    font-weight:700;
}


/* =========================================================
   PROOF BAND
   ========================================================= */

.proof-band{
    background:var(--accent);
    color:#fff;

    padding:29px 0;
}

.proof-grid{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:20px;
}

.proof-grid>div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.proof-grid strong{
    font-family:'Playfair Display',Georgia,serif;

    font-size:clamp(
        29px,
        3vw,
        43px
    );

    font-weight:600;
}

.proof-grid span{
    font-size:11px;
    color:#d6e0e7;
    letter-spacing:.03em;
}


/* =========================================================
   LIST ROWS
   ========================================================= */

.list-stack{
    border-top:1px solid var(--line);
}

.linked-row{
    display:grid;

    grid-template-columns:
        65px
        minmax(0,1fr)
        25px;

    gap:18px;

    align-items:start;

    border-bottom:1px solid var(--line);

    padding:25px 0;
}

.linked-row:hover strong,
.linked-row:hover .arrow{
    color:var(--accent);
}

.linked-row strong{
    font-family:'Playfair Display',Georgia,serif;

    font-size:29px;

    display:block;

    line-height:1.3;
}

.linked-row small{
    display:block;

    color:var(--muted);

    font-size:13px;

    line-height:1.8;

    margin-top:6px;
}

.row-year,
.arrow{
    font-size:13px;
    color:var(--accent);
}

.below-link{
    margin-top:24px;
}


/* =========================================================
   PROJECT PREVIEWS
   ========================================================= */

.project-list{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:15px;
}

.project-preview{
    min-width:0;

    border:1px solid var(--line);

    padding:25px 20px;

    display:flex;
    flex-direction:column;

    min-height:285px;

    transition:
        border-color .2s,
        transform .2s;
}


/* =========================================================
   CENTER THIRD PROJECT
   ========================================================= */

.project-preview:nth-child(3){
    grid-column:1 / -1;

    width:calc(50% - 7.5px);

    justify-self:center;
}


/* =========================================================
   PROJECT HOVER
   ========================================================= */

.project-preview:hover{
    border-color:var(--accent);
    transform:translateY(-3px);
}

.project-preview span{
    font-size:10px;

    color:var(--accent);

    font-weight:700;

    letter-spacing:.09em;
}

.project-preview h3{
    font-size:28px;
    margin:25px 0 12px;
}

.project-preview p{
    font-size:13px;
    line-height:1.75;
}

.project-preview b{
    margin-top:auto;
    color:var(--accent);
    font-size:12px;
}


/* =========================================================
   FACT ROWS
   ========================================================= */

.fact-row{
    display:grid;

    grid-template-columns:
        110px
        minmax(0,1fr);

    gap:20px;

    padding:23px 0;

    border-bottom:1px solid var(--line);
}

.fact-row>span{
    font-size:11px;

    font-weight:700;

    color:var(--accent);

    letter-spacing:.09em;
}

.fact-row h3{
    font-size:27px;
    margin-bottom:7px;
}

.fact-row p{
    font-size:14px;
    line-height:1.8;
    margin:0;
}

.role-line{
    font-size:12px;
    color:var(--accent);
    margin-bottom:9px;
}

.mini-facts,
.tagline{
    margin-top:27px;

    padding-top:17px;

    border-top:1px solid var(--line);

    display:flex;

    gap:13px 23px;

    flex-wrap:wrap;

    font-size:11px;

    color:var(--accent);

    letter-spacing:.07em;

    font-weight:700;
}


/* =========================================================
   VALUE GRID
   ========================================================= */

.value-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:27px 30px;
}

.value-grid>div{
    padding-top:13px;

    border-top:1px solid var(--line);
}

.value-grid span{
    font-size:11px;
    color:var(--accent);
}

.value-grid h3{
    font-size:25px;
    margin:12px 0;
}

.value-grid p{
    font-size:13px;
    line-height:1.75;
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.experience-section{
    padding:65px 0;
}

.experience-detail{
    display:grid;

    grid-template-columns:
        minmax(145px,.3fr)
        minmax(0,1fr);

    gap:clamp(
        25px,
        5vw,
        75px
    );

    padding:50px 0;

    border-bottom:1px solid var(--line);
}

.experience-meta{
    display:flex;
    flex-direction:column;
    gap:8px;

    color:var(--muted);

    font-size:11px;

    font-weight:700;

    letter-spacing:.07em;
}

.experience-body{
    min-width:0;
}

.experience-body h2{
    font-size:clamp(
        48px,
        5vw,
        72px
    );

    margin:13px 0 5px;
}

.experience-body h3{
    font-family:'DM Sans',sans-serif;

    font-size:15px;

    letter-spacing:0;

    font-weight:600;

    margin-bottom:23px;
}

.experience-body>p{
    max-width:760px;
    line-height:1.8;
}

.work-grid{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px 30px;

    margin-top:33px;
}

.work-grid>div{
    border-top:1px solid var(--line);
    padding-top:13px;
}

.work-grid h4{
    font-size:14px;
    margin:0 0 8px;
}

.work-grid p{
    font-size:13px;
    line-height:1.8;
    margin:0;
}

.learning{
    font-size:14px;
    margin-top:24px;
}

.learning strong{
    color:var(--text);
}

.metrics{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:15px;

    margin:28px 0;
}

.metrics>div{
    border-top:1px solid var(--line);
    padding-top:12px;
}

.metrics strong{
    font-family:'Playfair Display',Georgia,serif;

    font-size:32px;

    display:block;
}

.metrics span{
    display:block;

    font-size:11px;

    color:var(--muted);
}


/* =========================================================
   PROJECTS
   ========================================================= */

.project-index{
    padding:36px 0 43px;
}

.index-links{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:12px 30px;

    margin-top:20px;
}

.index-links a{
    border-bottom:1px solid var(--line);

    padding:10px 0;

    font-size:13px;
}

.index-links a:hover{
    color:var(--accent);
}

.project-detail{
    padding:70px 0;

    border-bottom:1px solid var(--line);
}

.project-detail:nth-of-type(even){
    background:var(--soft);
}

.project-detail-grid{
    display:grid;

    grid-template-columns:
        minmax(190px,.37fr)
        minmax(0,1fr);

    gap:clamp(
        35px,
        5vw,
        80px
    );
}

.project-aside{
    min-width:0;
}

.project-serial{
    font-family:'Playfair Display',Georgia,serif;

    font-size:clamp(
        80px,
        12vw,
        155px
    );

    color:#d8d7d1;

    line-height:1.3;
}

.project-main{
    min-width:0;
}

.project-main h2{
    font-size:clamp(
        42px,
        5vw,
        73px
    );

    margin:0 0 14px;
}

.project-lead{
    font-size:17px !important;

    max-width:700px;

    line-height:1.8;
}

.project-facts{
    border-top:1px solid var(--line);

    margin-top:25px;
}

.project-facts>div{
    display:grid;

    grid-template-columns:
        minmax(110px,.28fr)
        minmax(0,1fr);

    gap:22px;

    padding:17px 0;

    border-bottom:1px solid var(--line);
}

.project-facts h3{
    font-family:'DM Sans',sans-serif;

    font-size:12px;

    letter-spacing:0;

    margin:0;
}

.project-facts p{
    font-size:14px;

    line-height:1.8;

    margin:0;
}

.project-metrics{
    margin:22px 0;

    padding:15px 0;

    border-block:1px solid var(--line);

    display:flex;

    gap:20px;

    align-items:baseline;
}

.project-metrics strong{
    font-family:'Playfair Display',Georgia,serif;
    font-size:36px;
}

.project-metrics span{
    font-size:12px;
    color:var(--muted);
}


/* =========================================================
   BEYOND + SKILLS
   ========================================================= */

.theme-section:nth-of-type(even),
.skill-category:nth-of-type(even){
    background:var(--soft);
}

.skill-category{
    padding:52px 0;

    border-bottom:1px solid var(--line);
}

.tag-cloud{
    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:25px;
}

.tag-cloud span{
    border:1px solid var(--line);

    padding:7px 12px;

    font-size:12px;

    background:rgba(255,255,255,.3);

    max-width:100%;

    overflow-wrap:anywhere;
}

.evidence{
    display:grid;

    grid-template-columns:
        90px
        minmax(0,1fr);

    gap:15px;

    margin-top:26px;

    padding-top:14px;

    border-top:1px solid var(--line);

    font-size:12px;
}

.evidence strong{
    color:var(--text);
}

.evidence span{
    color:var(--muted);
}


/* =========================================================
   PROCESS
   ========================================================= */

.process-list{
    border-top:1px solid var(--line);
}

.process-list>div{
    display:grid;

    grid-template-columns:
        42px
        minmax(100px,.3fr)
        minmax(0,1fr);

    gap:15px;

    align-items:start;

    border-bottom:1px solid var(--line);

    padding:15px 0;
}

.process-list span{
    font-size:11px;
    color:var(--accent);
}

.process-list strong{
    font-size:15px;
}

.process-list p{
    font-size:13px;
    margin:0;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact-list{
    border-top:1px solid var(--line);
}

.contact-list>a{
    display:grid;

    grid-template-columns:
        90px
        minmax(0,1fr)
        20px;

    gap:20px;

    align-items:start;

    padding:19px 0;

    border-bottom:1px solid var(--line);
}

.contact-list>a:hover strong,
.contact-list>a:hover b{
    color:var(--accent);
}

.contact-list span{
    font-size:12px;
    color:var(--muted);
}

.contact-list strong{
    font-size:clamp(
        13px,
        1.5vw,
        18px
    );

    overflow-wrap:anywhere;

    font-weight:600;
}

.contact-list b{
    color:var(--accent);
    font-size:15px;
}


/* =========================================================
   CLOSING
   ========================================================= */

.closing{
    padding:70px 0;

    background:var(--accent);

    color:#fff;
}

.closing .section-label,
.closing p{
    color:#cbd9e3;
}

.closing h2{
    color:#fff;
    margin-bottom:16px;
}

.closing p{
    font-size:15px;
    max-width:590px;
}

.closing .text-link{
    color:#fff;
    border-color:#fff;
    margin-top:13px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.site-footer{
    border-top:1px solid var(--line);

    padding:24px 0;
}

.footer-inner{
    display:flex;

    justify-content:space-between;

    gap:20px;

    align-items:center;

    color:var(--muted);

    font-size:11px;
}

.footer-links{
    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

.footer-links a:hover{
    color:var(--accent);
}


/* =========================================================
   TABLET
   ========================================================= */

@media(max-width:1100px){

    .nav-links{
        gap:12px;
    }

    .nav-links>a{
        font-size:11px;
    }

    .hero h1{
        font-size:clamp(
            54px,
            6vw,
            76px
        );
    }

    .split-grid,
    .closing-grid,
    .project-detail-grid{
        grid-template-columns:
            minmax(155px,.31fr)
            minmax(0,1fr);

        gap:35px;
    }

    .project-list{
        gap:10px;
    }

    .project-preview{
        padding:19px 15px;
    }

}


/* =========================================================
   MOBILE NAVIGATION + TABLET
   ========================================================= */

@media(max-width:900px){

    :root{
        --section-y:55px;
    }

    .menu-button{
        display:block;
    }

    .nav-links{
        display:none;

        position:absolute;

        top:var(--nav-h);

        left:0;
        right:0;

        max-height:
            calc(100dvh - var(--nav-h));

        overflow-y:auto;

        padding:
            18px
            var(--gutter)
            26px;

        background:var(--bg);

        border-bottom:1px solid var(--line);

        box-shadow:
            0 15px 25px rgba(0,0,0,.05);

        flex-direction:column;

        align-items:stretch;

        gap:0;
    }

    .nav-links.open{
        display:flex;
    }

    .nav-links>a{
        padding:12px 0;

        border-bottom:1px solid var(--line);

        font-size:14px;
    }

    .nav-links .resume-btn{
        align-self:flex-start;

        margin-top:15px;

        padding:10px 15px;
    }


    .hero-grid{
        grid-template-columns:
            minmax(0,1fr);

        gap:25px;
    }

    .hero{
        padding:65px 0;
    }

    .hero h1,
    .home-hero h1{
        font-size:clamp(
            52px,
            9vw,
            82px
        );
    }

    .hero-copy>p{
        max-width:680px;
    }


    .split-grid,
    .closing-grid,
    .project-detail-grid{
        grid-template-columns:
            minmax(0,1fr);

        gap:23px;
    }

    .split-grid>*,
    .closing-grid>*,
    .project-detail-grid>*{
        min-width:0;
        max-width:100%;
    }


    .split-content h2,
    .closing h2{
        font-size:clamp(
            40px,
            7vw,
            64px
        );
    }


    .three-grid{
        gap:15px;
    }


    /*
       Keep the two-column project layout
       until the mobile breakpoint at 600px.
    */

    .project-list{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .experience-detail{
        grid-template-columns:
            minmax(120px,.28fr)
            minmax(0,1fr);

        gap:28px;
    }

    .project-serial{
        display:none;
    }

    .project-detail{
        padding:50px 0;
    }

    .project-detail-grid{
        gap:12px;
    }

    .project-main h2{
        font-size:clamp(
            42px,
            7vw,
            64px
        );
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    :root{
        --section-y:48px;
        --gutter:6vw;
    }


    .container,
    .nav-inner{
        width:calc(100% - 12vw);
    }


    .hero{
        padding:
            53px 0
            49px;
    }

    .hero h1,
    .home-hero h1{
        font-size:clamp(
            46px,
            11.7vw,
            68px
        );

        line-height:1.05;
    }

    .hero-copy>p{
        font-size:16px;
    }


    .split-content h2,
    .closing h2{
        font-size:clamp(
            37px,
            9.6vw,
            54px
        );

        line-height:1.14;

        letter-spacing:-.035em;
    }

    .split-content>p{
        font-size:15px;
    }


    .proof-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:19px;
    }

    .proof-grid strong{
        font-size:31px;
    }


    .three-grid,
    .project-list,
    .value-grid,
    .work-grid,
    .index-links{
        grid-template-columns:
            minmax(0,1fr);
    }


    .three-grid{
        margin-top:25px;
    }


    .project-preview{
        min-height:225px;
    }


    /*
       On mobile the third project becomes
       a normal full-width card.
    */

    .project-preview:nth-child(3){
        width:100%;
    }


    .linked-row{
        grid-template-columns:
            42px
            minmax(0,1fr)
            15px;

        gap:10px;
    }

    .linked-row strong{
        font-size:25px;
    }


    .fact-row{
        grid-template-columns:
            minmax(0,1fr);

        gap:7px;
    }


    .experience-detail{
        grid-template-columns:
            minmax(0,1fr);

        gap:17px;

        padding:38px 0;
    }

    .experience-meta{
        flex-direction:row;

        flex-wrap:wrap;

        gap:6px 14px;
    }

    .experience-body h2{
        font-size:50px;
    }


    .metrics{
        gap:10px;
    }

    .metrics strong{
        font-size:27px;
    }


    .project-facts>div{
        grid-template-columns:
            minmax(0,1fr);

        gap:7px;
    }

    .project-main h2{
        font-size:clamp(
            39px,
            10vw,
            56px
        );
    }


    .project-metrics{
        flex-direction:column;
        gap:0;
    }

    .project-metrics strong{
        font-size:32px;
    }


    .process-list>div{
        grid-template-columns:
            30px
            minmax(0,1fr);

        gap:5px 10px;
    }

    .process-list p{
        grid-column:2;
    }


    .contact-list>a{
        grid-template-columns:
            minmax(0,1fr)
            20px;

        gap:5px;
    }

    .contact-list span{
        grid-column:1/-1;
    }

    .contact-list strong{
        font-size:14px;
    }


    .footer-inner{
        flex-direction:column;

        align-items:flex-start;

        gap:9px;
    }


    .closing{
        padding:56px 0;
    }


    .mini-facts{
        gap:10px;
    }


    .tag-cloud span{
        font-size:11px;
    }


    .skill-category{
        padding:44px 0;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    html{
        scroll-behavior:auto;
    }

    .reveal{
        opacity:1;
        transform:none;
        transition:none;
    }

    *,
    *::before,
    *::after{
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
    }

}