/* =========================================================
   ✦ LUXURY DREAMSCAPE — FINAL EDITION
   Editorial / Coffee / Book / Cinema
   ========================================================= */


/* =========================================================
   01 — COLORS
   ========================================================= */

:root {
    --black: #0b0a09;
    --black-soft: #141210;
    --espresso: #211912;
    --coffee: #2b1b13;
    --coffee-light: #4a2d1d;

    --cream: #f4efe5;
    --paper: #eee5d5;
    --paper-light: #faf6ed;

    --gold: #c6a15b;
    --gold-light: #e4c987;
    --gold-dark: #95733b;

    --bronze: #a47c43;

    --text: #5f584e;
    --text-light: #d8d0c2;

    --border:
            rgba(198,161,91,0.25);

    --shadow:
            0 20px 55px rgba(35,25,15,0.13);

    --shadow-dark:
            0 25px 65px rgba(0,0,0,0.35);

    --ease:
            cubic-bezier(.22,1,.36,1);
}


/* =========================================================
   02 — RESET
   ========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    font-family:
            "Inter",
            "Helvetica Neue",
            Arial,
            sans-serif;

    color: var(--text);

    background:
            radial-gradient(
                    circle at 10% 0%,
                    rgba(198,161,91,.07),
                    transparent 25%
            ),
            radial-gradient(
                    circle at 90% 60%,
                    rgba(120,80,40,.05),
                    transparent 25%
            ),
            var(--paper-light);

    line-height: 1.7;

    overflow-x: hidden;
}


/* =========================================================
   03 — TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3 {
    font-family:
            Georgia,
            "Times New Roman",
            serif;

    font-weight: 400;
}


/* MAIN TITLE */

h1 {
    padding:
            45px
            7%
            25px;

    color:
            var(--gold-dark);

    font-size:
            clamp(2.2rem, 4vw, 4.2rem);

    line-height:
            .95;

    letter-spacing:
            -1px;

    text-transform:
            uppercase;

    animation:
            titleReveal
            1.3s
            var(--ease)
            both;
}

h1::after {
    content: "";

    display: block;

    width: 65px;
    height: 1px;

    margin-top: 22px;

    background:
            linear-gradient(
                    90deg,
                    var(--gold),
                    transparent
            );

    animation:
            lineReveal
            1.4s
            .35s
            var(--ease)
            both;
}


/* SECTION TITLES */

h2 {
    margin-bottom:
            18px;

    color:
            var(--gold-dark);

    font-size:
            clamp(1.9rem, 3vw, 3.2rem);

    line-height:
            1.05;

    letter-spacing:
            -.8px;
}

h3 {
    margin-bottom:
            10px;

    color:
            var(--bronze);

    font-size:
            1.2rem;

    letter-spacing:
            .3px;
}

p {
    color:
            var(--text);

    font-size:
            .96rem;
}

strong {
    color:
            var(--espresso);
}


/* =========================================================
   04 — TITLE ANIMATIONS
   ========================================================= */

@keyframes titleReveal {

    from {
        opacity: 0;

        transform:
                translateY(35px);

        filter:
                blur(8px);
    }

    to {
        opacity: 1;

        transform:
                translateY(0);

        filter:
                blur(0);
    }
}

@keyframes lineReveal {

    from {
        width:
                0;

        opacity:
                0;
    }

    to {
        width:
                65px;

        opacity:
                1;
    }
}


/* =========================================================
   05 — HEADER
   ========================================================= */

header {
    position: relative;

    width: 78%;

    min-height: 210px;

    margin:
            0
            0
            65px
            6%;

    padding:
            50px
            7%;

    display:
            flex;

    flex-direction:
            column;

    justify-content:
            center;

    color:
            var(--cream);

    background:
            linear-gradient(
                    135deg,
                    #11100e,
                    #251e17
            );

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

    border-left:
            3px solid
            var(--gold);

    border-radius:
            3px
            55px
            3px
            55px;

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

    overflow:
            hidden;

    animation:
            headerReveal
            1.2s
            .15s
            var(--ease)
            both;
}

header::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    right:
            -100px;

    top:
            -100px;

    border-radius:
            50%;

    background:
            radial-gradient(
                    circle,
                    rgba(228,201,135,.3),
                    transparent 65%
            );

    animation:
            headerGlow
            8s
            ease-in-out
            infinite;
}

header::after {
    content:
            "✦";

    position:
            absolute;

    right:
            45px;

    bottom:
            20px;

    color:
            var(--gold-light);

    font-size:
            65px;

    opacity:
            .12;

    animation:
            starFloat
            6s
            ease-in-out
            infinite;
}

header h2,
header h3,
header p {
    position:
            relative;

    z-index:
            2;

    color:
            var(--cream);
}


/* =========================================================
   06 — HEADER ANIMATION
   ========================================================= */

@keyframes headerReveal {

    from {
        opacity: 0;

        transform:
                translateX(-60px)
                scale(.98);
    }

    to {
        opacity: 1;

        transform:
                translateX(0)
                scale(1);
    }
}

@keyframes headerGlow {

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

    50% {
        transform:
                translate(-35px,30px)
                scale(1.15);
    }
}

@keyframes starFloat {

    0%,
    100% {
        transform:
                translateY(0)
                rotate(0);
    }

    50% {
        transform:
                translateY(-8px)
                rotate(15deg);
    }
}


/* =========================================================
   07 — NAVIGATION
   ========================================================= */

nav {
    position:
            sticky;

    top:
            15px;

    z-index:
            1000;

    width:
            86%;

    margin:
            0
            0
            65px
            3%;

    padding:
            6px;

    background:
            rgba(17,15,13,.94);

    border:
            1px solid
            rgba(198,161,91,.25);

    border-radius:
            80px;

    box-shadow:
            0
            15px
            45px
            rgba(0,0,0,.18);

    backdrop-filter:
            blur(18px);

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

    animation:
            navReveal
            1s
            .25s
            var(--ease)
            both;
}

ul {
    display:
            flex;

    justify-content:
            flex-start;

    align-items:
            center;

    gap:
            3px;

    flex-wrap:
            wrap;

    list-style:
            none;
}

ul li {
    list-style:
            none;
}

ul li a {
    position:
            relative;

    display:
            block;

    padding:
            10px
            19px;

    color:
            #bdb4a5;

    text-decoration:
            none;

    font-size:
            .75rem;

    font-weight:
            600;

    letter-spacing:
            1.4px;

    text-transform:
            uppercase;

    border-radius:
            50px;

    transition:
            color .4s var(--ease),
            background .4s var(--ease),
            transform .4s var(--ease);
}

ul li a::after {
    content:
            "";

    position:
            absolute;

    left:
            50%;

    bottom:
            4px;

    width:
            0;

    height:
            1px;

    background:
            var(--gold-light);

    transform:
            translateX(-50%);

    transition:
            width .4s var(--ease);
}

ul li a:hover {
    color:
            white;

    background:
            rgba(198,161,91,.11);

    transform:
            translateY(-2px);
}

ul li a:hover::after {
    width:
            25px;
}

@keyframes navReveal {

    from {
        opacity:
                0;

        transform:
                translateY(-25px);
    }

    to {
        opacity:
                1;

        transform:
                translateY(0);
    }
}


/* =========================================================
   08 — GENERAL SECTION
   ========================================================= */

section {
    position:
            relative;

    transition:
            transform .6s var(--ease),
            box-shadow .6s var(--ease),
            border-color .6s ease;

    text-align:
            left;
}


/* =========================================================
   09 — OSA 1
   EDITORIAL
   ========================================================= */

section#osa1 {
    width:
            64%;

    margin:
            0
            0
            85px
            7%;

    padding:
            55px
            12%
            55px
            6%;

    background:
            #fffdf8;

    border:
            1px solid
            rgba(60,45,25,.10);

    border-left:
            3px solid
            var(--gold);

    border-radius:
            2px
            45px
            2px
            45px;

    box-shadow:
            var(--shadow);

    overflow:
            hidden;

    animation:
            osa1Reveal
            1.1s
            .3s
            var(--ease)
            both;
}

section#osa1::before {
    content:
            "01";

    position:
            absolute;

    top:
            22px;

    right:
            30px;

    color:
            var(--gold);

    font-family:
            Georgia,
            serif;

    font-size:
            .75rem;

    letter-spacing:
            3px;
}

section#osa1::after {
    content:
            "";

    position:
            absolute;

    right:
            -70px;

    bottom:
            -70px;

    width:
            150px;

    height:
            150px;

    border:
            1px solid
            rgba(198,161,91,.35);

    border-radius:
            50%;

    animation:
            ringPulse
            7s
            ease-in-out
            infinite;
}

section#osa1:hover {
    transform:
            translateY(-6px);
}

@keyframes osa1Reveal {

    from {
        opacity:
                0;

        transform:
                translateX(-60px);
    }

    to {
        opacity:
                1;

        transform:
                translateX(0);
    }
}


/* =========================================================
   10 — OSA 2
   DARK LUXURY
   ========================================================= */

section#osa2 {
    width:
            50%;

    margin:
            0
            8%
            90px
            auto;

    padding:
            50px
            15%
            50px
            6%;

    color:
            var(--cream);

    background:
            linear-gradient(
                    135deg,
                    #12110f,
                    #281f17
            );

    border:
            1px solid
            rgba(198,161,91,.24);

    border-right:
            3px solid
            var(--gold);

    border-radius:
            45px
            3px
            45px
            3px;

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

    animation:
            osa2Reveal
            1.15s
            .4s
            var(--ease)
            both;
}

section#osa2 h2,
section#osa2 h3,
section#osa2 p {
    color:
            var(--cream);
}

section#osa2 h2 {
    color:
            var(--gold-light);
}

section#osa2 h3 {
    color:
            var(--gold);
}

section#osa2::before {
    content:
            "✦";

    position:
            absolute;

    left:
            25px;

    top:
            22px;

    color:
            var(--gold);

    opacity:
            .65;

    animation:
            starFloat
            6s
            ease-in-out
            infinite;
}

@keyframes osa2Reveal {

    from {
        opacity:
                0;

        transform:
                translateX(60px);
    }

    to {
        opacity:
                1;

        transform:
                translateX(0);
    }
}


/* =========================================================
   11 — OSA 3
   THE BOOK
   ========================================================= */

section#osa3 {
    position:
            relative;

    width:
            68%;

    margin:
            0
            auto
            100px
            8%;

    padding:
            75px
            16%
            75px
            7%;

    background:
            linear-gradient(
                    105deg,
                    #e9dfce,
                    #f8f1e3 45%,
                    #e4d6bf
            );

    border:
            1px solid
            rgba(120,90,50,.18);

    border-left:
            7px solid
            #c9b99b;

    border-radius:
            3px
            35px
            35px
            3px;

    box-shadow:
            12px 18px 0 rgba(120,90,50,.08),
            var(--shadow);

    overflow:
            hidden;

    animation:
            bookReveal
            1.1s
            var(--ease)
            both;
}

section#osa3::before {
    content:
            "";

    position:
            absolute;

    left:
            27px;

    top:
            0;

    width:
            1px;

    height:
            100%;

    background:
            linear-gradient(
                    transparent,
                    rgba(120,90,50,.25),
                    transparent
            );
}

section#osa3::after {
    content:
            "";

    position:
            absolute;

    right:
            0;

    top:
            0;

    width:
            90px;

    height:
            90px;

    background:
            linear-gradient(
                    135deg,
                    transparent 50%,
                    #d8c8ad 51%
            );

    opacity:
            .65;
}

section#osa3 h2 {
    position:
            relative;

    color:
            #654c31;

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

    letter-spacing:
            -1.5px;

    margin-bottom:
            25px;
}

section#osa3 h2::after {
    content:
            "";

    display:
            block;

    width:
            55px;

    height:
            1px;

    margin-top:
            18px;

    background:
            var(--gold-dark);

    transition:
            width .6s var(--ease);
}

section#osa3:hover h2::after {
    width:
            110px;
}

section#osa3 p {
    position:
            relative;

    max-width:
            650px;

    margin-left:
            0;

    margin-right:
            auto;

    color:
            #665846;

    font-family:
            Georgia,
            "Times New Roman",
            serif;

    font-size:
            1.05rem;

    line-height:
            2;

    text-align:
            left;
}

section#osa3 .book-number {
    position:
            absolute;

    right:
            35px;

    bottom:
            25px;

    color:
            var(--gold-dark);

    font-family:
            Georgia,
            serif;

    font-size:
            .7rem;

    letter-spacing:
            3px;
}

@keyframes bookReveal {

    from {
        opacity:
                0;

        transform:
                translateY(45px)
                rotate(-1deg);
    }

    to {
        opacity:
                1;

        transform:
                translateY(0)
                rotate(0);
    }
}


/* =========================================================
   12 — OSA 4
   COFFEE / ESPRESSO
   ========================================================= */

section#osa4 {
    position:
            relative;

    width:
            55%;

    min-height:
            390px;

    margin:
            0
            7%
            105px
            auto;

    padding:
            80px
            20%
            80px
            7%;

    display:
            flex;

    flex-direction:
            column;

    justify-content:
            center;

    background:
            radial-gradient(
                    circle at 70% 40%,
                    #563624 0%,
                    #2b1b13 35%,
                    #120d0a 80%
            );

    border:
            1px solid
            rgba(198,161,91,.25);

    border-right:
            3px solid
            var(--gold);

    border-radius:
            80px
            5px
            80px
            5px;

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

    overflow:
            hidden;

    animation:
            coffeeReveal
            1.15s
            .2s
            var(--ease)
            both;
}

section#osa4::before {
    content:
            "";

    position:
            absolute;

    width:
            330px;

    height:
            330px;

    right:
            -100px;

    top:
            50%;

    transform:
            translateY(-50%);

    border-radius:
            50%;

    background:
            radial-gradient(
                    circle,
                    rgba(198,161,91,.28),
                    rgba(100,60,30,.12) 35%,
                    transparent 70%
            );

    filter:
            blur(2px);

    animation:
            coffeeGlow
            8s
            ease-in-out
            infinite;
}

section#osa4::after {
    content:
            "";

    position:
            absolute;

    right:
            55px;

    top:
            50%;

    width:
            170px;

    height:
            170px;

    border:
            1px solid
            rgba(228,201,135,.18);

    border-radius:
            50%;

    transform:
            translateY(-50%);

    animation:
            coffeeRing
            7s
            ease-in-out
            infinite;
}

section#osa4 h2 {
    position:
            relative;

    z-index:
            2;

    color:
            var(--gold-light);

    font-size:
            clamp(2.5rem, 5vw, 4.5rem);

    letter-spacing:
            -1.5px;

    margin-bottom:
            20px;

    text-shadow:
            0 3px 20px rgba(0,0,0,.35);
}

section#osa4 p {
    position:
            relative;

    z-index:
            2;

    max-width:
            500px;

    margin-left:
            0;

    color:
            #d9cdbb;

    font-size:
            .98rem;

    line-height:
            1.9;
}

section#osa4 .coffee-word {
    position:
            absolute;

    right:
            65px;

    bottom:
            45px;

    color:
            rgba(244,239,229,.055);

    font-family:
            Georgia,
            serif;

    font-size:
            clamp(3rem, 7vw, 7rem);

    letter-spacing:
            -5px;

    pointer-events:
            none;

    user-select:
            none;

    transition:
            color .7s ease,
            transform .7s var(--ease);
}

section#osa4:hover .coffee-word {
    color:
            rgba(228,201,135,.10);

    transform:
            translateY(-8px);
}

@keyframes coffeeReveal {

    from {
        opacity:
                0;

        transform:
                translateX(65px)
                scale(.97);
    }

    to {
        opacity:
                1;

        transform:
                translateX(0)
                scale(1);
    }
}

@keyframes coffeeGlow {

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

    50% {
        transform:
                translateY(-50%)
                scale(1.15);
    }
}

@keyframes coffeeRing {

    0%,
    100% {
        transform:
                translateY(-50%)
                scale(1);

        opacity:
                .35;
    }

    50% {
        transform:
                translateY(-50%)
                scale(1.08);

        opacity:
                .65;
    }
}


/* =========================================================
   13 — OSA 5
   TEHTUD TOODE / CINEMA
   ========================================================= */

section#osa5 {
    position:
            relative;

    width:
            76%;

    min-height:
            440px;

    /* PLOKK ROHKEM PAREMALE */
    margin:
            0
            7%
            120px
            auto;

    /* TEKST VASAKUL, PAREMAL ROHKEM RUUMI */
    padding:
            75px
            18%
            75px
            7%;

    display:
            flex;

    flex-direction:
            column;

    justify-content:
            center;

    color:
            var(--cream);

    background:
            linear-gradient(
                    120deg,
                    #0b0a09,
                    #191512 50%,
                    #0d0b09
            );

    border:
            1px solid
            rgba(198,161,91,.22);

    border-radius:
            4px;

    box-shadow:
            0 30px 80px rgba(0,0,0,.4);

    overflow:
            hidden;

    animation:
            cinemaReveal
            1.2s
            .25s
            var(--ease)
            both;

    text-align:
            left;
}

section#osa5 h2,
section#osa5 h3,
section#osa5 p {
    text-align:
            left;

    margin-left:
            0;

    margin-right:
            auto;
}


/* CINEMA LIGHT */

section#osa5::before {
    content:
            "";

    position:
            absolute;

    left:
            50%;

    top:
            50%;

    width:
            700px;

    height:
            700px;

    transform:
            translate(-50%,-50%);

    background:
            radial-gradient(
                    circle,
                    rgba(198,161,91,.12),
                    transparent 62%
            );

    pointer-events:
            none;
}


/* FILM STRIP */

section#osa5::after {
    content:
            "";

    position:
            absolute;

    left:
            0;

    top:
            22px;

    width:
            100%;

    height:
            22px;

    opacity:
            .35;

    background:
            repeating-linear-gradient(
                    90deg,
                    transparent 0 22px,
                    rgba(228,201,135,.45) 23px 31px,
                    transparent 32px 55px
            );

    border-top:
            1px solid
            rgba(228,201,135,.2);

    border-bottom:
            1px solid
            rgba(228,201,135,.2);
}


/* CINEMA CONTENT */

section#osa5 h2 {
    position:
            relative;

    z-index:
            2;

    color:
            var(--gold-light);

    font-size:
            clamp(2.5rem, 5vw, 5rem);

    letter-spacing:
            -2px;

    margin-bottom:
            22px;
}

section#osa5 h3 {
    position:
            relative;

    z-index:
            2;

    color:
            var(--gold);

    font-size:
            .75rem;

    letter-spacing:
            3px;

    text-transform:
            uppercase;

    margin-bottom:
            20px;
}

section#osa5 p {
    position:
            relative;

    z-index:
            2;

    max-width:
            650px;

    color:
            #c9c0b3;

    font-size:
            1rem;

    line-height:
            1.9;
}


/* CINEMA SYMBOL */

section#osa5 .cinema-symbol {
    position:
            absolute;

    right:
            10%;

    top:
            50%;

    width:
            95px;

    height:
            95px;

    display:
            flex;

    align-items:
            center;

    justify-content:
            center;

    border:
            1px solid
            rgba(228,201,135,.45);

    border-radius:
            50%;

    color:
            var(--gold-light);

    font-size:
            1.4rem;

    transform:
            translateY(-50%);

    transition:
            transform .6s var(--ease),
            background .6s ease,
            box-shadow .6s ease;
}

section#osa5:hover .cinema-symbol {
    transform:
            translateY(-50%)
            scale(1.08);

    background:
            rgba(198,161,91,.08);

    box-shadow:
            0 0 45px
            rgba(198,161,91,.12);
}

section#osa5:hover {
    border-color:
            rgba(198,161,91,.42);

    box-shadow:
            0 35px 90px rgba(0,0,0,.48);
}

@keyframes cinemaReveal {

    from {
        opacity:
                0;

        transform:
                translateY(55px)
                scale(.98);
    }

    to {
        opacity:
                1;

        transform:
                translateY(0)
                scale(1);
    }
}


/* =========================================================
   14 — KASULIKUD LINGID
   ILMA VÄIKESTE KASTIDETA
   ========================================================= */

section#osa6 {
    position:
            relative;

    width:
            76%;

    /* PAREMALE POOLE */
    margin:
            0
            7%
            120px
            auto;

    padding:
            65px
            18%
            65px
            7%;

    background:
            transparent;

    border:
            none;

    border-left:
            2px solid
            var(--gold);

    border-radius:
            0;

    box-shadow:
            none;

    text-align:
            left;
}


/* PEALKIRI */

section#osa6 h2 {
    margin-bottom:
            28px;

    color:
            var(--gold-dark);

    text-align:
            left;
}


/* LINKIDE LOEND */

section#osa6 ul {
    display:
            flex;

    flex-direction:
            column;

    align-items:
            flex-start;

    justify-content:
            flex-start;

    gap:
            8px;

    margin:
            0;

    padding:
            0;
}


/* LINGID */

section#osa6 ul li {
    list-style:
            none;
}

section#osa6 ul li a {
    position:
            relative;

    display:
            inline-block;

    padding:
            4px 0;

    color:
            var(--bronze);

    background:
            transparent;

    border:
            none;

    border-radius:
            0;

    text-decoration:
            none;

    font-size:
            .9rem;

    letter-spacing:
            1px;

    text-transform:
            uppercase;

    transition:
            color .4s var(--ease),
            transform .4s var(--ease);
}

section#osa6 ul li a:hover {
    color:
            var(--gold-dark);

    background:
            transparent;

    transform:
            translateX(7px);
}

section#osa6 ul li a::after {
    content:
            "";

    position:
            absolute;

    left:
            0;

    bottom:
            0;

    width:
            0;

    height:
            1px;

    background:
            var(--gold);

    transform:
            none;

    transition:
            width .4s var(--ease);
}

section#osa6 ul li a:hover::after {
    width:
            30px;
}


/* =========================================================
   15 — EXTRA SMOOTH EFFECT
   ========================================================= */

@keyframes ringPulse {

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

        opacity:
                .25;
    }

    50% {
        transform:
                scale(1.12);

        opacity:
                .55;
    }
}


/* =========================================================
   16 — MOBILE
   ========================================================= */

@media (max-width: 700px) {

    h1 {
        font-size:
                clamp(2rem, 9vw, 3rem);

        padding:
                35px
                6%
                20px;
    }

    nav {
        width:
                94%;

        top:
                10px;

        margin-bottom:
                45px;

        margin-left:
                3%;

        margin-right:
                0;

        border-radius:
                18px;
    }

    ul {
        justify-content:
                flex-start;
    }

    ul li a {
        padding:
                9px 12px;

        font-size:
                .62rem;

        letter-spacing:
                1px;
    }


    section#osa1,
    section#osa2,
    section#osa3,
    section#osa4,
    section#osa5,
    section#osa6 {

        width:
                92%;

        margin-left:
                auto;

        margin-right:
                auto;

        padding:
                50px 8%;

        border-radius:
                35px
                4px
                35px
                4px;

        text-align:
                left;
    }


    section#osa1,
    section#osa2 {
        min-height:
                auto;
    }


    section#osa3 {
        min-height:
                400px;
    }


    section#osa3 p {
        text-align:
                left;
    }


    section#osa4 {
        min-height:
                430px;
    }


    section#osa5 {
        min-height:
                400px;
    }


    section#osa5 p {
        text-align:
                left;
    }

    section#osa5{
        border-right:
    20px solid;
    }


    section#osa6 {
        border-left:
                20px solid
                var(--gold);

        border-radius:
                0;
    }


    section#osa6 ul {
        align-items:
                flex-start;
    }


    section#osa4::after {
        right:
                -40px;

        opacity:
                .5;
    }


    section#osa4 .coffee-word {
        right:
                20px;

        bottom:
                30px;

        font-size:
                4rem;
    }


    section#osa5 .cinema-symbol {
        position:
                relative;

        right:
                auto;

        top:
                auto;

        margin-top:
                35px;

        transform:
                none;
    }


    section#osa5:hover .cinema-symbol {
        transform:
                scale(1.08);
    }


    header {
        width:
                92%;


        margin-right:
                10px;

        border-radius:
                30px
                5px
                30px
                5px;
    }
}


/* =========================================================
   17 — ACCESSIBILITY
   ========================================================= */

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

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

        animation-iteration-count:
                1 !important;

        scroll-behavior:
                auto !important;

        transition-duration:
                .01ms !important;
    }
}