/* =========================================================
   DPT MATHEMATICS
   Neutral / Monochrome Scientific Interface
========================================================= */


/* =========================================================
   PAGE VARIABLES
========================================================= */

:root {

    --math-black: #080808;
    --math-black-soft: #0d0d0d;
    --math-charcoal: #141414;

    --math-paper: #f4f3f0;
    --math-white: #ffffff;

    --math-text: #151515;
    --math-muted: #727272;

    --math-border-dark:
        rgba(255,255,255,.12);

    --math-border-light:
        rgba(15,15,15,.13);

    --math-shadow:
        0 30px 80px
        rgba(0,0,0,.08);

}


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

.math-hero {

    position: relative;

    min-height: 100vh;

    padding:
        145px 20px 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    color: #ffffff;

    text-align: center;

    background:
        linear-gradient(
            rgba(5,5,5,.52),
            rgba(5,5,5,.902)
        ),
        url("../assets/images/formulas.jpg");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}


/* subtle static mathematical grid */

.math-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .18;

    background-image:

        linear-gradient(
            rgba(255,255,255,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.035) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 87%
        );

}


/* subtle vignette */

.math-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at center,
            transparent 45%,
            rgba(0,0,0,.45) 100%
        );

}


.math-hero .hero-container {

    position: relative;

    z-index: 2;

    width:
        min(
            1180px,
            100%
        );

    margin: auto;

}


.math-hero .hero-tag,
.section-tag {

    color: currentColor;

    opacity: .58;

    font-size: .7rem;

    font-weight: 800;

    letter-spacing: .24em;

    text-transform: uppercase;

}


.math-hero .hero-tag {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 15px;

}


.math-hero .hero-tag::before,
.math-hero .hero-tag::after {

    content: "";

    width: 40px;
    height: 1px;

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

}


.math-hero h1 {

    margin:
        28px 0 10px;

    font:
        700
        clamp(4rem,8vw,7.5rem)
        /.9
        var(--display-font);

    letter-spacing:
        -.065em;

    text-shadow:

        0 2px 12px
        rgba(255,255,255,.08),

        0 0 45px
        rgba(255,255,255,.035);

}


.math-hero h2 {

    font:
        500
        clamp(1.15rem,2.4vw,2rem)
        var(--display-font);

    letter-spacing: .18em;

    text-transform: uppercase;

    color:
        rgba(255,255,255,.62);

}


.math-hero .hero-description {

    max-width: 760px;

    margin:
        38px auto 0;

    color:
        rgba(255,255,255,.59);

    font-size: 1.02rem;

}


.math-hero blockquote {

    margin:
        43px 0 30px;

    color:
        rgba(255,255,255,.68);

    font:
        700
        .71rem
        var(--display-font);

    font-style: normal;

    letter-spacing: .19em;

}


/* =========================================================
   DIMENSION BUTTONS
========================================================= */

.math-hero .begin-button {

    position: relative;

    min-width: 175px;

    min-height: 49px;

    margin:
        6px 4px;

    padding:
        0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    color: #ffffff;

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

    border:
        1px solid
        rgba(255,255,255,.19);

    border-radius: 4px;

    font-size: .78rem;

    font-weight: 800;

    transition:

        transform .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}


.math-hero .begin-button::before {

    content: "";

    position: absolute;

    inset: 0;

    opacity: 0;

    background:

        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255,255,255,.12),
            transparent 80%
        );

    transform:
        translateX(-100%);

    transition:
        transform .45s ease,
        opacity .3s ease;

}


.math-hero .begin-button:hover {

    transform:
        translateY(-4px);

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

}


.math-hero .begin-button:hover::before {

    opacity: 1;

    transform:
        translateX(100%);

}


/* dimensional color appears ONLY here */

.math-hero
.begin-button:nth-of-type(1):hover {

    border-color: #ff3b24;

    box-shadow:
        0 10px 35px
        rgba(255,59,36,.14);

}


.math-hero
.begin-button:nth-of-type(2):hover {

    border-color: #ffd54d;

    box-shadow:
        0 10px 35px
        rgba(255,213,77,.13);

}


.math-hero
.begin-button:nth-of-type(3):hover {

    border-color: #3cff76;

    box-shadow:
        0 10px 35px
        rgba(60,255,118,.12);

}


.math-hero
.begin-button:nth-of-type(4):hover {

    border-color: #49a4ff;

    box-shadow:
        0 10px 35px
        rgba(73,164,255,.13);

}


.math-hero
.begin-button:nth-of-type(5):hover {

    border-color: #b168ff;

    box-shadow:
        0 10px 35px
        rgba(177,104,255,.14);

}



/* =========================================================
   GENERAL SECTION SPACING
========================================================= */

.foundations,
.equations,
.framework,
.formula-explorer,
.hierarchy,
.math-lab,
.math-model,
.ste-model,
.matrix-section,
.space-time,
.space-volume {

    position: relative;

    padding:
        112px 0;

    overflow: hidden;

}



/* =========================================================
   SUBTLE PAPER GRID ON LIGHT SECTIONS
========================================================= */

.section-light,
.section-white {

    position: relative;

}


.section-light::before,
.section-white::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .55;

    background-image:

        linear-gradient(
            rgba(0,0,0,.018) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0,0,0,.018) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

}



/* =========================================================
   CONTENT WIDTH
========================================================= */

.section-title,
.section-description,
.foundation-grid,
.equation-card,
.framework-container,
.explorer-container,
.hierarchy-tree,
.lab-container,
.model-card,
.ste-diagram,
.ste-grid,
.matrix-box,
.matrix-grid,
.function-card,
.function-grid,
.volume-equation-box,
.volume-grid {

    position: relative;

    z-index: 2;

    width:
        min(
            1180px,
            calc(100% - 40px)
        );

    margin-left: auto;

    margin-right: auto;

}



/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-title {

    margin-bottom: 18px;

    text-align: left;

}


.section-title h2 {

    position: relative;

    max-width: 850px;

    margin-top: 8px;

    font:
        700
        clamp(2.5rem,5vw,4.7rem)
        /.98
        var(--display-font);

    letter-spacing:
        -.055em;

}


.section-title h2::after {

    content: "";

    display: block;

    width: 0;
    height: 2px;

    margin-top: 22px;

    background:
        currentColor;

    opacity: .18;

    transition:
        width .8s ease;

}


.section-visible
.section-title h2::after {

    width: 80px;

}


.section-description {

    max-width: 850px;

    margin-bottom: 60px;

    color: inherit;

    opacity: .61;

}



/* =========================================================
   CARDS — BASE STYLE
========================================================= */

.foundation-card,
.equation-card,
.framework-box,
.formula-display,
.node,
.lab-output,
.model-card,
.ste-card,
.matrix-card,
.function-box,
.volume-card {

    position: relative;

    overflow: hidden;

    border-radius: 0;

    transition:

        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease,
        background .28s ease;

}


/* mouse spotlight */

.foundation-card::before,
.equation-card::before,
.framework-box::before,
.node::before,
.ste-card::before,
.matrix-card::before,
.function-box::before,
.volume-card::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:

        radial-gradient(
            350px circle
            at var(--mouse-x,50%)
            var(--mouse-y,50%),

            rgba(255,255,255,.11),

            transparent 45%
        );

    transition:
        opacity .25s ease;

}


.section-light
.foundation-card::before,
.section-white
.foundation-card::before,
.section-light
.equation-card::before,
.section-white
.equation-card::before,
.section-light
.framework-box::before,
.section-white
.framework-box::before,
.section-light
.node::before,
.section-white
.node::before,
.section-light
.ste-card::before,
.section-white
.ste-card::before,
.section-light
.matrix-card::before,
.section-white
.matrix-card::before,
.section-light
.function-box::before,
.section-white
.function-box::before,
.section-light
.volume-card::before,
.section-white
.volume-card::before {

    background:

        radial-gradient(
            350px circle
            at var(--mouse-x,50%)
            var(--mouse-y,50%),

            rgba(0,0,0,.055),

            transparent 46%
        );

}


.foundation-card:hover::before,
.equation-card:hover::before,
.framework-box:hover::before,
.node:hover::before,
.ste-card:hover::before,
.matrix-card:hover::before,
.function-box:hover::before,
.volume-card:hover::before {

    opacity: 1;

}



/* =========================================================
   LIGHT CARDS
========================================================= */

.section-light
.foundation-card,

.section-light
.equation-card,

.section-light
.framework-box,

.section-light
.formula-display,

.section-light
.node,

.section-light
.lab-output,

.section-light
.model-card,

.section-light
.ste-card,

.section-light
.matrix-card,

.section-light
.function-box,

.section-light
.volume-card,

.section-white
.foundation-card,

.section-white
.equation-card,

.section-white
.framework-box,

.section-white
.formula-display,

.section-white
.node,

.section-white
.lab-output,

.section-white
.model-card,

.section-white
.ste-card,

.section-white
.matrix-card,

.section-white
.function-box,

.section-white
.volume-card {

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

    border:
        1px solid
        rgba(20,20,20,.13);

}



/* =========================================================
   DARK CARDS
========================================================= */

.section-dark
.foundation-card,

.section-dark
.equation-card,

.section-dark
.framework-box,

.section-dark
.formula-display,

.section-dark
.node,

.section-dark
.lab-output,

.section-dark
.model-card,

.section-dark
.ste-card,

.section-dark
.matrix-card,

.section-dark
.function-box,

.section-dark
.volume-card,

.section-black
.foundation-card,

.section-black
.equation-card,

.section-black
.framework-box,

.section-black
.formula-display,

.section-black
.node,

.section-black
.lab-output,

.section-black
.model-card,

.section-black
.ste-card,

.section-black
.matrix-card,

.section-black
.function-box,

.section-black
.volume-card {

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

    border:
        1px solid
        rgba(255,255,255,.12);

}



/* =========================================================
   FOUNDATION GRID
========================================================= */

.foundation-grid {

    display: grid;

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

    gap: 18px;

}


.foundation-card {

    min-height: 280px;

    padding: 30px;

    cursor: default;

}


.foundation-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--math-shadow);

}


.section-light
.foundation-card:hover,
.section-white
.foundation-card:hover {

    border-color:
        rgba(0,0,0,.35);

}


.section-dark
.foundation-card:hover,
.section-black
.foundation-card:hover {

    border-color:
        rgba(255,255,255,.35);

}


.foundation-icon {

    width: 60px;
    height: 60px;

    display: grid;

    place-items: center;

    border:
        1px solid currentColor;

    border-radius: 50%;

    font-weight: 700;

    transition:

        transform .35s ease,
        background .35s ease,
        color .35s ease;

}


.foundation-card:hover
.foundation-icon {

    transform:
        scale(1.08)
        rotate(-5deg);

}


.section-light
.foundation-card:hover
.foundation-icon,

.section-white
.foundation-card:hover
.foundation-icon {

    color: #ffffff;

    background: #111111;

}


.section-dark
.foundation-card:hover
.foundation-icon,

.section-black
.foundation-card:hover
.foundation-icon {

    color: #111111;

    background: #ffffff;

}


.foundation-card h3 {

    margin:
        50px 0 10px;

    font:
        700 1.35rem
        var(--display-font);

}


.foundation-card p {

    opacity: .62;

    font-size: .88rem;

}



/* =========================================================
   EQUATION CARDS
========================================================= */

.equation-card {

    padding: 50px;

    margin-bottom: 22px;

}


.equation-card:hover {

    transform:
        translateY(-4px);

}


.section-dark
.equation-card:hover {

    border-color:
        rgba(255,255,255,.3);

}


.equation-header {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    align-items: center;

}


.equation-header h3 {

    font:
        700 1.8rem
        var(--display-font);

}


.equation-formula,
.formula,
.model-formula,
.matrix-equation,
.function-equation,
.volume-equation {

    position: relative;

    margin:
        35px 0;

    text-align: center;

    font-family:
        "Cambria Math",
        serif;

    font-size:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    letter-spacing: -.025em;

}


.equation-content {

    display: grid;

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

    gap: 35px;

}


.equation-content h4 {

    margin-bottom: 8px;

    font:
        700 .74rem
        var(--display-font);

    letter-spacing: .12em;

    text-transform: uppercase;

}


.equation-content p,
.equation-content li,
.framework-box p,
.formula-display p,
.formula-display li,
.model-grid p,
.model-grid li,
.ste-card p,
.matrix-card p,
.matrix-card li,
.function-box p,
.function-box li,
.volume-card p,
.volume-card li {

    opacity: .62;

}



/* =========================================================
   COPY EQUATION BUTTON
========================================================= */

.copy-equation {

    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 6;

    min-height: 34px;

    padding:
        0 12px;

    color: inherit;

    background: transparent;

    border:
        1px solid currentColor;

    opacity: .42;

    cursor: pointer;

    font-size: .66rem;

    font-weight: 700;

    transition:
        opacity .25s ease,
        transform .25s ease,
        background .25s ease,
        color .25s ease;

}


.copy-equation:hover {

    opacity: 1;

    transform:
        translateY(-2px);

}


.section-light
.copy-equation:hover,

.section-white
.copy-equation:hover {

    color: #ffffff;

    background: #111111;

}



/* =========================================================
   FRAMEWORK
========================================================= */

.framework-container {

    max-width: 700px;

}


.framework-box,
.node {

    padding: 30px;

    text-align: center;

}


.framework-box {

    cursor: pointer;

}


.framework-box:hover {

    transform:
        scale(1.025);

}


.framework-box span,
.node span {

    width: 52px;
    height: 52px;

    margin-bottom: 18px;

    display: inline-grid;

    place-items: center;

    border:
        1px solid currentColor;

    border-radius: 50%;

    transition:
        .3s ease;

}


.framework-box:hover span,
.node.active span {

    color: #111111;

    background: #ffffff;

}


.section-white
.framework-box:hover span,

.section-light
.framework-box:hover span,

.section-white
.node.active span,

.section-light
.node.active span {

    color: #ffffff;

    background: #111111;

}


.framework-box h3,
.node h3 {

    font:
        700 1.35rem
        var(--display-font);

}


.framework-arrow {

    position: relative;

    margin:
        14px 0;

    text-align: center;

    font-size: 1.6rem;

    opacity: .22;

    transition:
        opacity .3s ease,
        transform .3s ease;

}


.framework-arrow.active {

    opacity: .8;

    transform:
        translateY(3px);

}



/* =========================================================
   FORMULA EXPLORER
========================================================= */

.explorer-container {

    display: grid;

    grid-template-columns:
        300px 1fr;

    gap: 30px;

}


.formula-list {

    display: grid;

    gap: 8px;

}


.formula-btn {

    position: relative;

    padding:
        16px 15px;

    overflow: hidden;

    color: inherit;

    background:
        transparent;

    border:
        1px solid currentColor;

    opacity: .48;

    cursor: pointer;

    text-align: left;

    font-weight: 700;

    transition:
        opacity .25s ease,
        padding .25s ease,
        background .25s ease,
        color .25s ease;

}


.formula-btn::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 100%;

    background:
        currentColor;

    transform:
        scaleY(0);

    transition:
        transform .25s ease;

}


.formula-btn:hover {

    opacity: .82;

    padding-left: 20px;

}


.formula-btn.active {

    opacity: 1;

    background: currentColor;

    color: #111111;

}


.formula-btn.active::before {

    transform:
        scaleY(1);

}


.section-light
.formula-btn.active,

.section-white
.formula-btn.active {

    color: #ffffff;

    background: #111111;

}


.formula-display {

    min-height: 480px;

    padding: 40px;

    transition:
        opacity .22s ease,
        transform .22s ease;

}


.formula-display.switching {

    opacity: 0;

    transform:
        translateY(8px);

}


.formula-display h3 {

    font:
        700 1.8rem
        var(--display-font);

}



/* =========================================================
   HIERARCHY
========================================================= */

.hierarchy-tree {

    max-width: 700px;

}


.node {

    cursor: pointer;

    opacity: .72;

}


.node:hover,
.node.active {

    opacity: 1;

    transform:
        scale(1.025);

}


.connector {

    width: 1px;
    height: 42px;

    margin: auto;

    background:
        currentColor;

    opacity: .19;

    transform-origin:
        top;

    transition:
        opacity .3s ease,
        height .3s ease;

}


.connector.active {

    opacity: .75;

}



/* =========================================================
   MATHEMATICAL LAB
========================================================= */

.lab-container {

    display: grid;

    grid-template-columns:
        340px 1fr;

    gap: 30px;

}


.lab-controls {

    display: grid;

    align-content: start;

    gap: 12px;

}


.lab-controls label {

    margin-top: 6px;

    opacity: .6;

    font-size: .69rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

}


.lab-controls input,
.lab-controls select {

    padding: 13px;

    color: inherit;

    background: transparent;

    border:
        1px solid currentColor;

    outline: none;

    opacity: .75;

    transition:
        opacity .25s ease,
        border-color .25s ease;

}


.lab-controls input:focus,
.lab-controls select:focus {

    opacity: 1;

}


.lab-controls button {

    min-height: 48px;

    margin-top: 7px;

    color: #111111;

    background: #ffffff;

    border: 0;

    cursor: pointer;

    font-weight: 800;

    transition:
        transform .25s ease,
        opacity .25s ease;

}


.lab-controls button:hover {

    transform:
        translateY(-3px);

    opacity: .88;

}


.section-light
.lab-controls button,

.section-white
.lab-controls button {

    color: #ffffff;

    background: #111111;

}


.lab-output,
.model-card,
.function-card,
.volume-equation-box {

    padding: 45px;

}


.result-box {

    padding: 25px;

    border:
        1px solid currentColor;

    opacity: .67;

}


/* real graph area */

.graph-placeholder {

    position: relative;

    min-height: 300px;

    margin-top: 20px;

    padding: 0;

    overflow: hidden;

    border:
        1px solid currentColor;

    opacity: .75;

}


.math-lab-canvas {

    display: block;

    width: 100%;

    height: 300px;

}



/* =========================================================
   GENERAL TWO COLUMN GRIDS
========================================================= */

.model-grid,
.ste-grid,
.matrix-grid,
.function-grid,
.volume-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 18px;

}



/* =========================================================
   STE
========================================================= */

.ste-diagram {

    position: relative;

    max-width: 700px;

    padding:
        35px 0;

    text-align: center;

}


.ste-space,
.ste-time,
.ste-energy {

    position: relative;

    padding: 20px;

    border:
        1px solid currentColor;

    overflow: hidden;

    transition:

        transform .3s ease,
        background .3s ease,
        color .3s ease;

}


.ste-space {

    width: 240px;

    margin: auto;

}


.ste-row {

    display: flex;

    justify-content:
        space-between;

    margin-top: 50px;

}


.ste-time,
.ste-energy {

    width: 240px;

}


.ste-space:hover,
.ste-time:hover,
.ste-energy:hover {

    transform:
        translateY(-5px);

}


.section-black
.ste-space:hover,

.section-black
.ste-time:hover,

.section-black
.ste-energy:hover {

    color: #111111;

    background: #ffffff;

}



/* =========================================================
   MATRIX
========================================================= */

.matrix-box {

    position: relative;

    margin-bottom: 45px;

    overflow: hidden;

}


.matrix-box::after {

    content:
        "0  1  0  ∞  1  0  1  0  ∞  0  1  0  1  0  ∞  1  0  0  1  ∞  0  1  0";

    position: absolute;

    inset:
        auto 0 10px;

    padding:
        0 25px;

    overflow: hidden;

    color:
        currentColor;

    opacity: .08;

    white-space: nowrap;

    font-family:
        "Cambria Math",
        serif;

    font-size: .75rem;

    letter-spacing: .35em;

}



/* =========================================================
   FUNCTION + VOLUME
========================================================= */

.function-card,
.volume-equation-box {

    margin-bottom: 45px;

}


.ste-card,
.matrix-card,
.function-box,
.volume-card {

    padding: 28px;

}


.ste-card:hover,
.matrix-card:hover,
.function-box:hover,
.volume-card:hover {

    transform:
        translateY(-5px);

}



/* =========================================================
   SCROLL REVEAL
========================================================= */

.math-reveal {

    opacity: 0;

    transform:
        translateY(22px);

    transition:

        opacity .7s ease,
        transform .7s ease;

}


.math-reveal.math-visible {

    opacity: 1;

    transform: none;

}



/* =========================================================
   PAGE PROGRESS
========================================================= */

.math-progress {

    position: fixed;

    top: 0;
    right: 0;

    z-index: 1500;

    width: 3px;
    height: 0;

    pointer-events: none;

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

    mix-blend-mode:
        difference;

}



/* =========================================================
   SECTION INDEX NUMBERS
========================================================= */

.content-section::after {

    position: absolute;

    right:
        max(
            20px,
            calc(
                (
                    100vw - 1180px
                ) / 2
            )
        );

    top: 110px;

    z-index: 1;

    color:
        currentColor;

    opacity: .045;

    font:
        700
        clamp(5rem,10vw,9rem)
        var(--display-font);

    pointer-events: none;

}


.foundations::after {
    content: "01";
}

.equations::after {
    content: "02";
}

.framework::after {
    content: "03";
}

.formula-explorer::after {
    content: "04";
}

.hierarchy::after {
    content: "05";
}

.math-lab::after {
    content: "06";
}

.math-model::after {
    content: "07";
}

.ste-model::after {
    content: "08";
}

.matrix-section::after {
    content: "09";
}

.space-time::after {
    content: "10";
}

.space-volume::after {
    content: "11";
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .foundation-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .equation-content,
    .explorer-container,
    .lab-container {

        grid-template-columns:
            1fr;

    }


    .formula-list {

        grid-template-columns:
            1fr 1fr;

    }


    .content-section::after {

        display: none;

    }

}


@media (max-width: 600px) {

    .math-hero {

        padding-top: 125px;

    }


    .math-hero .begin-button {

        width: 100%;

        margin:
            5px 0;

    }


    .foundation-grid,
    .model-grid,
    .ste-grid,
    .matrix-grid,
    .function-grid,
    .volume-grid {

        grid-template-columns:
            1fr;

    }


    .formula-list {

        grid-template-columns:
            1fr;

    }


    .ste-row {

        gap: 14px;

        flex-direction: column;

    }


    .ste-time,
    .ste-energy,
    .ste-space {

        width: 100%;

    }


    .equation-card {

        padding: 30px 22px;

    }


    .formula-display {

        padding: 28px 22px;

    }

}



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

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

    .math-reveal {

        opacity: 1;

        transform: none;

    }


    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

    }

}

/* =========================================================
   DIMENSION BUTTON — ATTENTION ANIMATION
========================================================= */

.math-hero .begin-button {
    isolation: isolate;

    animation:
        dimensionAttention 1.7s ease-in-out infinite;

    box-shadow:
        0 0 8px rgba(255,255,255,.08);
}


/* Stagger each dimension */
.math-hero .begin-button:nth-of-type(1) {
    animation-delay: 0s;
}

.math-hero .begin-button:nth-of-type(2) {
    animation-delay: .15s;
}

.math-hero .begin-button:nth-of-type(3) {
    animation-delay: .30s;
}

.math-hero .begin-button:nth-of-type(4) {
    animation-delay: .45s;
}

.math-hero .begin-button:nth-of-type(5) {
    animation-delay: .60s;
}


/* =========================================================
   MOVEMENT
========================================================= */

@keyframes dimensionAttention {

    0%,
    55%,
    100% {
        transform:
            translateY(0)
            scale(1);
    }

    62% {
        transform:
            translateY(-7px)
            scale(1.045);
    }

    68% {
        transform:
            translateX(-3px)
            translateY(-7px)
            scale(1.045);
    }

    74% {
        transform:
            translateX(3px)
            translateY(-7px)
            scale(1.045);
    }

    80% {
        transform:
            translateX(-2px)
            translateY(-5px)
            scale(1.035);
    }

    87% {
        transform:
            translateX(2px)
            translateY(-3px)
            scale(1.02);
    }
}


/* =========================================================
   DIMENSION COLOR PULSES
========================================================= */

/* 1D — RED */

.math-hero .begin-button:nth-of-type(1) {
    --dimension-color: 255, 59, 36;
}


/* 2D — YELLOW */

.math-hero .begin-button:nth-of-type(2) {
    --dimension-color: 255, 213, 77;
}


/* 3D — GREEN */

.math-hero .begin-button:nth-of-type(3) {
    --dimension-color: 60, 255, 118;
}


/* 4D — BLUE */

.math-hero .begin-button:nth-of-type(4) {
    --dimension-color: 73, 164, 255;
}


/* 5D — PURPLE */

.math-hero .begin-button:nth-of-type(5) {
    --dimension-color: 177, 104, 255;
}


/* =========================================================
   COLORED GLOW
========================================================= */

.math-hero .begin-button {
    animation-name:
        dimensionAttention,
        dimensionGlow;

    animation-duration:
        1.7s,
        1.7s;

    animation-timing-function:
        ease-in-out,
        ease-in-out;

    animation-iteration-count:
        infinite,
        infinite;
}


@keyframes dimensionGlow {

    0%,
    50%,
    100% {

        border-color:
            rgba(255,255,255,.19);

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

        box-shadow:
            0 0 5px
            rgba(
                var(--dimension-color),
                .05
            );
    }


    65% {

        border-color:
            rgb(var(--dimension-color));

        background:
            rgba(
                var(--dimension-color),
                .10
            );

        box-shadow:

            0 0 12px
            rgba(
                var(--dimension-color),
                .70
            ),

            0 0 30px
            rgba(
                var(--dimension-color),
                .35
            ),

            0 0 55px
            rgba(
                var(--dimension-color),
                .16
            );
    }


    82% {

        border-color:
            rgba(
                var(--dimension-color),
                .65
            );

        box-shadow:

            0 0 15px
            rgba(
                var(--dimension-color),
                .35
            );
    }
}


/* =========================================================
   FAST LIGHT SWEEP
========================================================= */

.math-hero .begin-button::after {

    content: "";

    position: absolute;

    top: -60%;
    left: -60%;

    width: 35%;
    height: 220%;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(
                var(--dimension-color),
                .95
            ),

            rgba(255,255,255,.9),

            transparent
        );

    transform:
        rotate(18deg);

    animation:
        dimensionSweep 1.7s
        ease-in-out infinite;
}


/* Same stagger */

.math-hero .begin-button:nth-of-type(1)::after {
    animation-delay: 0s;
}

.math-hero .begin-button:nth-of-type(2)::after {
    animation-delay: .15s;
}

.math-hero .begin-button:nth-of-type(3)::after {
    animation-delay: .30s;
}

.math-hero .begin-button:nth-of-type(4)::after {
    animation-delay: .45s;
}

.math-hero .begin-button:nth-of-type(5)::after {
    animation-delay: .60s;
}


@keyframes dimensionSweep {

    0%,
    52% {
        left: -60%;
        opacity: 0;
    }

    58% {
        opacity: 1;
    }

    78% {
        left: 130%;
        opacity: 1;
    }

    79%,
    100% {
        left: 130%;
        opacity: 0;
    }
}


/* =========================================================
   STRONG HOVER
========================================================= */

.math-hero .begin-button:hover {

    animation-play-state: paused;

    transform:
        translateY(-8px)
        scale(1.06);

    border-color:
        rgb(var(--dimension-color));

    background:
        rgba(
            var(--dimension-color),
            .13
        );

    box-shadow:

        0 0 15px
        rgba(
            var(--dimension-color),
            .75
        ),

        0 0 40px
        rgba(
            var(--dimension-color),
            .35
        ),

        0 15px 35px
        rgba(0,0,0,.4);
}


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

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

    .math-hero .begin-button,
    .math-hero .begin-button::after {

        animation: none !important;
    }
}