/* =========================================================
   CELANYA LINKS
   ECLIPSE.CSS

   Éclipse cinématique
   + astéroïdes
   + météores
   + poussières spatiales
========================================================= */


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

.eclipse-intro {
    --eclipse-progress: 0;
    --eclipse-darkness: 0;
    --eclipse-stars: 0;
    --eclipse-corona: 0;
    --asteroid-visibility: 0;

    --eclipse-size: clamp(260px, 27vw, 430px);

    --moon-start-x: min(-65vw, -800px);
    --moon-start-y: -8px;

    --gold: #D6B76A;
    --gold-light: #F4E6B5;

    --orange: #FF8A38;
    --orange-light: #FFB45E;
    --orange-dark: #B63E22;

    --night: #020308;
}


/* =========================================================
   INTRO
========================================================= */

.eclipse-intro {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100dvh;

    min-height: 100vh;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(111, 40, 24, .18),
            transparent 36%
        ),

        radial-gradient(
            ellipse at 50% 100%,
            rgba(87, 30, 30, .14),
            transparent 48%
        ),

        linear-gradient(
            180deg,
            #07080E,
            #03040A 52%,
            #010207
        );

    opacity: 1;

    visibility: visible;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}


.eclipse-intro,
.eclipse-intro * {
    box-sizing: border-box;

    user-select: none;

    -webkit-user-select: none;
}


/* =========================================================
   ASSOMBRISSEMENT
========================================================= */

.eclipse-intro::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -10;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(122, 52, 28, .16),
            transparent 30%
        ),

        linear-gradient(
            rgba(0, 0, 0, .15),
            rgba(0, 0, 0, .90)
        );

    opacity:
        var(--eclipse-darkness);
}


/* =========================================================
   BRUME ORANGE
========================================================= */

.eclipse-intro::after {
    content: "";

    position: absolute;

    left: 15%;
    right: 15%;

    top: 20%;

    height: 60%;

    z-index: -8;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse,
            rgba(194, 73, 32, .15),
            rgba(105, 38, 29, .07) 38%,
            transparent 70%
        );

    filter: blur(40px);

    opacity:
        calc(
            .25 +
            var(--eclipse-darkness) * .75
        );
}


/* =========================================================
   CIEL
========================================================= */

.eclipse-intro__sky {
    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;
}


/* =========================================================
   ÉTOILES
========================================================= */

.eclipse-intro__star {
    position: absolute;

    z-index: 2;

    color: #FFE2A0;

    opacity:
        calc(
            var(--eclipse-stars) * .95
        );

    text-shadow:
        0 0 5px #FFF5CC,
        0 0 13px rgba(255, 190, 91, .75),
        0 0 30px rgba(255, 139, 54, .30);

    animation:
        eclipseStarTwinkle
        2.8s
        ease-in-out
        infinite;
}


.eclipse-intro__star--1 {
    top: 15%;
    left: 20%;
}


.eclipse-intro__star--2 {
    top: 24%;
    right: 18%;

    animation-delay: -.7s;
}


.eclipse-intro__star--3 {
    top: 69%;
    left: 17%;

    animation-delay: -1.3s;
}


.eclipse-intro__star--4 {
    right: 22%;
    bottom: 17%;

    animation-delay: -.4s;
}


.eclipse-intro__star--5 {
    top: 11%;
    right: 37%;

    animation-delay: -1.8s;
}


.eclipse-intro__star--6 {
    bottom: 12%;
    left: 37%;

    animation-delay: -1s;
}


/* =========================================================
   POUSSIÈRE SPATIALE
========================================================= */

.eclipse-dust {
    position: absolute;

    inset: 0;

    z-index: 3;

    overflow: hidden;

    pointer-events: none;

    opacity:
        calc(
            var(--asteroid-visibility) * .75
        );
}


.eclipse-dust-particle {
    position: absolute;

    left: var(--dust-x);
    top: var(--dust-y);

    width: var(--dust-size);
    height: var(--dust-size);

    border-radius: 50%;

    background:
        #D5793B;

    box-shadow:
        0 0 5px
        rgba(255, 126, 54, .65);

    animation:
        eclipseDustMove
        var(--dust-duration)
        linear
        var(--dust-delay)
        infinite;
}


/* =========================================================
   ASTÉROÏDES
========================================================= */

.eclipse-asteroids {
    position: absolute;

    inset: 0;

    z-index: 5;

    overflow: hidden;

    pointer-events: none;

    opacity:
        var(--asteroid-visibility);
}


.eclipse-asteroid {
    position: absolute;

    left: 0;
    top: 0;

    width: var(--size);
    height: calc(var(--size) * .78);

    opacity: var(--opacity);

    border-radius:
        47% 53% 39% 61% /
        56% 41% 59% 44%;

    background:
        radial-gradient(
            circle at 29% 27%,
            rgba(255, 143, 70, .32) 0 5%,
            transparent 6%
        ),

        radial-gradient(
            circle at 66% 58%,
            #080707 0 10%,
            transparent 11%
        ),

        radial-gradient(
            circle at 43% 72%,
            #100A08 0 8%,
            transparent 9%
        ),

        linear-gradient(
            135deg,
            #342019 0%,
            #1A1110 28%,
            #090809 67%,
            #020204 100%
        );

    box-shadow:
        inset 5px 4px 8px
        rgba(255, 119, 56, .12),

        inset -8px -8px 15px
        rgba(0, 0, 0, .88),

        -3px -2px 9px
        rgba(255, 100, 39, .15),

        8px 9px 18px
        rgba(0, 0, 0, .55);

    filter:
        drop-shadow(
            0 8px 9px
            rgba(0, 0, 0, .70)
        );

    transform:
        translate3d(
            var(--start-x),
            var(--start-y),
            0
        );

    animation:
        eclipseAsteroidTravel
        var(--duration)
        linear
        var(--delay)
        infinite;

    will-change:
        transform;
}


/* =========================================================
   ASTÉROÏDES INTERMÉDIAIRES
========================================================= */

.eclipse-asteroid--medium {
    filter:
        blur(.4px)
        drop-shadow(
            0 10px 14px
            rgba(0,0,0,.7)
        );
}


/* =========================================================
   ASTÉROÏDES PREMIER PLAN
========================================================= */

.eclipse-asteroid--foreground {
    z-index: 100;

    opacity:
        calc(
            var(--opacity) * .72
        );

    filter:
        blur(3px)
        drop-shadow(
            0 20px 25px
            rgba(0,0,0,.85)
        );
}


/* =========================================================
   MÉTÉORES
========================================================= */

.eclipse-meteors {
    position: absolute;

    inset: 0;

    z-index: 8;

    overflow: hidden;

    pointer-events: none;

    opacity:
        var(--asteroid-visibility);
}


.eclipse-meteor {
    position: absolute;

    left: var(--meteor-x);
    top: var(--meteor-y);

    width: var(--meteor-length);
    height: 2px;

    border-radius: 999px;

    transform:
        rotate(42deg);

    transform-origin:
        right center;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 95, 31, .15) 35%,
            rgba(255, 154, 55, .75) 72%,
            #FFF1B8 94%,
            #FFFFFF 100%
        );

    filter:
        drop-shadow(
            0 0 5px
            rgba(255, 124, 40, .85)
        );

    opacity: 0;

    animation:
        eclipseMeteorFall
        var(--meteor-duration)
        linear
        var(--meteor-delay)
        infinite;
}


.eclipse-meteor::after {
    content: "";

    position: absolute;

    right: -3px;
    top: 50%;

    width: 6px;
    height: 6px;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background: #FFF7D0;

    box-shadow:
        0 0 7px #FFFFFF,
        0 0 15px #FFB14D,
        0 0 28px #FF6E28;
}


/* =========================================================
   ZONE ÉCLIPSE
========================================================= */

.eclipse-intro__eclipse {
    position: relative;

    z-index: 40;

    flex: 0 0 auto;

    width: var(--eclipse-size);
    height: var(--eclipse-size);

    margin: 0;
    padding: 0;

    border: 0;

    border-radius: 50%;

    outline: none;

    appearance: none;

    background: transparent;

    overflow: visible;

    cursor: default;

    filter:
        drop-shadow(
            0 25px 50px
            rgba(0,0,0,.65)
        );
}


.eclipse-intro--ready
.eclipse-intro__eclipse {
    cursor: pointer;
}


/* =========================================================
   SOLEIL
========================================================= */

.eclipse-intro__sun {
    position: absolute;

    inset: 0;

    z-index: 10;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 38% 34%,
            #FFFCE8 0%,
            #FFF0A0 16%,
            #FFD05F 34%,
            #FF9B3D 57%,
            #EE672E 78%,
            #B93D25 100%
        );

    box-shadow:
        0 0 7px #FFF8C9,
        0 0 18px #FFD274,
        0 0 38px rgba(255, 145, 55, .96),
        0 0 70px rgba(246, 94, 36, .82),
        0 0 115px rgba(225, 71, 29, .60),
        0 0 180px rgba(176, 48, 30, .40),
        0 0 270px rgba(126, 35, 30, .24);

    animation:
        eclipseSunGlow
        3s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   TEXTURE SOLAIRE
========================================================= */

.eclipse-intro__sun::before {
    content: "";

    position: absolute;

    inset: 2%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 25% 31%,
            rgba(255,255,220,.45) 0 1.5%,
            transparent 3%
        ),

        radial-gradient(
            circle at 67% 23%,
            rgba(255,230,130,.40) 0 2%,
            transparent 4%
        ),

        radial-gradient(
            circle at 75% 63%,
            rgba(173,58,30,.30) 0 3%,
            transparent 6%
        );
}


/* =========================================================
   ATMOSPHÈRE ORANGE
========================================================= */

.eclipse-intro__sun::after {
    content: "";

    position: absolute;

    inset: -13%;

    z-index: -1;

    border-radius: 50%;

    border:
        2px solid
        rgba(255, 173, 72, .60);

    box-shadow:
        0 0 14px rgba(255, 222, 135, .95),
        0 0 30px rgba(255, 164, 64, .90),
        0 0 62px rgba(242, 103, 43, .75),
        0 0 110px rgba(213, 67, 36, .54),
        0 0 190px rgba(170, 51, 38, .32);

    animation:
        eclipseOrangeAtmosphere
        3.4s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   COURONNE
========================================================= */

.eclipse-intro__corona {
    position: absolute;

    inset: -14%;

    z-index: 7;

    border-radius: 50%;

    pointer-events: none;

    opacity:
        var(--eclipse-corona);

    background:
        radial-gradient(
            circle,
            transparent 0 43%,

            rgba(255, 245, 198, .95) 47%,

            rgba(255, 177, 80, .72) 50%,

            rgba(245, 108, 44, .42) 54%,

            rgba(193, 61, 34, .20) 61%,

            transparent 73%
        );

    box-shadow:
        0 0 16px rgba(255, 239, 181, .75),
        0 0 42px rgba(255, 160, 66, .60),
        0 0 85px rgba(238, 91, 37, .43),
        0 0 145px rgba(180, 50, 31, .28),
        0 0 230px rgba(122, 34, 29, .16);
}


/* =========================================================
   RAYONS IRRÉGULIERS
========================================================= */

.eclipse-intro__corona::before {
    content: "";

    position: absolute;

    inset: -17%;

    border-radius: 50%;

    background:
        conic-gradient(
            from 4deg,

            transparent 0 7deg,
            rgba(255,143,55,.42) 9deg,
            transparent 13deg 27deg,

            rgba(255,211,129,.55) 30deg,
            transparent 35deg 51deg,

            rgba(235,92,39,.42) 54deg,
            transparent 59deg 76deg,

            rgba(255,188,86,.52) 80deg,
            transparent 85deg 103deg,

            rgba(255,117,43,.42) 108deg,
            transparent 114deg 135deg,

            rgba(255,211,129,.48) 140deg,
            transparent 146deg 166deg,

            rgba(239,93,39,.42) 171deg,
            transparent 178deg 200deg,

            rgba(255,190,88,.48) 205deg,
            transparent 211deg 231deg,

            rgba(238,92,39,.38) 236deg,
            transparent 243deg 266deg,

            rgba(255,210,125,.50) 271deg,
            transparent 277deg 299deg,

            rgba(245,105,43,.38) 304deg,
            transparent 312deg 334deg,

            rgba(255,184,80,.50) 340deg,
            transparent 347deg 360deg
        );

    filter: blur(7px);

    animation:
        eclipseCoronaBreathe
        3.5s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   HALO EXTÉRIEUR
========================================================= */

.eclipse-intro__corona::after {
    content: "";

    position: absolute;

    inset: -30%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            transparent 45%,
            rgba(255,154,59,.13) 56%,
            rgba(222,74,35,.08) 66%,
            transparent 78%
        );

    filter: blur(12px);
}


/* =========================================================
   LUNE
========================================================= */

.eclipse-intro__moon {
    position: absolute;

    left: 0;
    top: 0;

    z-index: 30;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    transform:
        translate3d(
            calc(
                var(--moon-start-x) *
                (
                    1 -
                    var(--eclipse-progress)
                )
            ),

            calc(
                var(--moon-start-y) *
                (
                    1 -
                    var(--eclipse-progress)
                )
            ),

            0
        );

    background:
        radial-gradient(
            circle at 31% 29%,
            #171A22,
            #0A0D14 37%,
            #04060C 70%,
            #010207
        );

    box-shadow:
        inset -15px -10px 30px
        rgba(0,0,0,.75),

        inset 5px 4px 12px
        rgba(255,255,255,.025);

    will-change: transform;
}


/* =========================================================
   CRATÈRES
========================================================= */

.eclipse-intro__moon::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 28%,
            rgba(255,255,255,.025) 0 5%,
            transparent 6%
        ),

        radial-gradient(
            circle at 66% 60%,
            rgba(0,0,0,.27) 0 8%,
            transparent 9%
        ),

        radial-gradient(
            circle at 44% 72%,
            rgba(255,255,255,.018) 0 4%,
            transparent 5%
        );
}


/* =========================================================
   PROTUBÉRANCES
========================================================= */

.eclipse-intro__fire {
    position: absolute;

    z-index: 25;

    width: 12%;
    height: 6%;

    border-radius:
        70% 30% 65% 35%;

    opacity: 0;

    background:
        radial-gradient(
            ellipse,
            #FFD38A,
            #FF8C46 38%,
            #D44C32 72%,
            transparent 75%
        );

    filter:
        drop-shadow(
            0 0 8px
            rgba(255,91,43,.9)
        );

    transition:
        opacity .5s ease;
}


.eclipse-intro__fire--1 {
    left: -3%;
    top: 49%;

    transform:
        rotate(-82deg);
}


.eclipse-intro__fire--2 {
    right: 7%;
    top: 2%;

    transform:
        rotate(28deg)
        scale(.75);
}


.eclipse-intro__fire--3 {
    left: 44%;
    bottom: -1%;

    transform:
        rotate(96deg)
        scale(.65);
}


.eclipse-intro--almost-total
.eclipse-intro__fire,

.eclipse-intro--total
.eclipse-intro__fire {
    opacity: .9;
}


/* =========================================================
   DIAMOND RING
========================================================= */

.eclipse-intro__eclipse::before {
    content: "";

    position: absolute;

    z-index: 50;

    top: 43%;
    right: -2%;

    width: 7%;
    height: 7%;

    border-radius: 50%;

    opacity: 0;

    background: #FFFDE7;

    box-shadow:
        0 0 5px #FFF,
        0 0 14px #FFF1B5,
        0 0 30px #FFB44F,
        0 0 60px rgba(255,112,40,.8);
}


.eclipse-intro--diamond
.eclipse-intro__eclipse::before {
    animation:
        eclipseDiamond
        1.05s
        ease-in-out
        forwards;
}


/* =========================================================
   ÉCLIPSE TOTALE
========================================================= */

.eclipse-intro--total
.eclipse-intro__corona {
    opacity: 1;

    animation:
        eclipseTotalCorona
        3.4s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   INFORMATIONS
========================================================= */

.eclipse-intro__info {
    position: relative;

    z-index: 150;

    display: flex;

    flex-direction: column;

    align-items: center;

    width:
        min(
            90vw,
            540px
        );

    margin-top:
        clamp(
            28px,
            4vh,
            46px
        );

    text-align: center;
}


/* =========================================================
   STATUS
========================================================= */

.eclipse-intro__status {
    margin:
        0 0 11px;

    color: #E4C476;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size:
        clamp(
            .60rem,
            1vw,
            .75rem
        );

    font-weight: 700;

    letter-spacing:
        .28em;

    text-transform:
        uppercase;

    text-shadow:
        0 0 15px
        rgba(255,153,62,.28);
}


/* =========================================================
   SÉPARATEUR
========================================================= */

.eclipse-intro__separator {
    display: flex;

    align-items: center;

    gap: 13px;

    width:
        min(
            90%,
            320px
        );

    margin:
        0 auto 13px;
}


.eclipse-intro__separator span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(214,183,106,.65)
        );
}


.eclipse-intro__separator span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(214,183,106,.65),
            transparent
        );
}


.eclipse-intro__separator i {
    color: #E8C66E;

    text-shadow:
        0 0 12px
        rgba(255,157,61,.55);
}


/* =========================================================
   TEXTE
========================================================= */

.eclipse-intro__text {
    margin: 0;

    color:
        rgba(244,237,215,.86);

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

    font-size:
        clamp(
            .85rem,
            1.4vw,
            1.05rem
        );

    font-style: italic;

    letter-spacing:
        .12em;

    line-height: 1.6;

    text-shadow:
        0 0 18px
        rgba(255,142,58,.18);
}


/* =========================================================
   PROGRESSION
========================================================= */

.eclipse-intro__progress {
    width:
        min(
            70%,
            220px
        );

    height: 1px;

    margin-top: 18px;

    overflow: hidden;

    background:
        rgba(214,183,106,.13);
}


.eclipse-intro__progress-value {
    display: block;

    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #A8492D,
            #E8C46C,
            #FFF0B2
        );

    box-shadow:
        0 0 8px
        rgba(255,138,53,.7);
}


.eclipse-intro--total
.eclipse-intro__progress {
    opacity: 0;
}


/* =========================================================
   READY
========================================================= */

.eclipse-intro--ready
.eclipse-intro__eclipse {
    animation:
        eclipseReady
        4s
        ease-in-out
        infinite alternate;
}


.eclipse-intro--ready
.eclipse-intro__eclipse:hover {
    filter:
        brightness(1.12)
        drop-shadow(
            0 0 25px
            rgba(255,120,44,.35)
        );
}


/* =========================================================
   FLASH
========================================================= */

.eclipse-intro__flash {
    position: absolute;

    inset: 0;

    z-index: 1000;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(255,248,215,1),
            rgba(255,180,82,.75) 12%,
            rgba(222,75,35,.30) 30%,
            transparent 62%
        );
}


.eclipse-intro--flash
.eclipse-intro__flash {
    animation:
        eclipseScreenFlash
        .85s
        ease-out
        forwards;
}


/* =========================================================
   SORTIE
========================================================= */

.eclipse-intro--leaving {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   ANIMATIONS — ASTÉROÏDES
========================================================= */

@keyframes eclipseAsteroidTravel {

    from {
        transform:
            translate3d(
                var(--start-x),
                var(--start-y),
                0
            )
            rotate(0deg);
    }

    to {
        transform:
            translate3d(
                calc(
                    var(--start-x) +
                    var(--travel-x)
                ),

                calc(
                    var(--start-y) +
                    var(--travel-y)
                ),

                0
            )
            rotate(
                var(--rotation)
            );
    }
}


/* =========================================================
   MÉTÉORES
========================================================= */

@keyframes eclipseMeteorFall {

    0% {
        opacity: 0;

        transform:
            translate3d(
                -25vw,
                -25vh,
                0
            )
            rotate(42deg);
    }

    7% {
        opacity: 1;
    }

    28% {
        opacity: .95;
    }

    42% {
        opacity: 0;

        transform:
            translate3d(
                55vw,
                55vh,
                0
            )
            rotate(42deg);
    }

    100% {
        opacity: 0;

        transform:
            translate3d(
                55vw,
                55vh,
                0
            )
            rotate(42deg);
    }
}


/* =========================================================
   POUSSIÈRES
========================================================= */

@keyframes eclipseDustMove {

    from {
        transform:
            translate3d(
                -5vw,
                -8vh,
                0
            );
    }

    to {
        transform:
            translate3d(
                18vw,
                25vh,
                0
            );
    }
}


/* =========================================================
   ÉTOILES
========================================================= */

@keyframes eclipseStarTwinkle {

    0%,
    100% {
        filter:
            brightness(.65);

        transform:
            scale(.85);
    }

    50% {
        filter:
            brightness(1.7);

        transform:
            scale(1.15);
    }
}


/* =========================================================
   SOLEIL
========================================================= */

@keyframes eclipseSunGlow {

    from {
        filter:
            brightness(.96)
            saturate(1);
    }

    to {
        filter:
            brightness(1.08)
            saturate(1.12);
    }
}


@keyframes eclipseOrangeAtmosphere {

    from {
        opacity: .70;

        transform:
            scale(.97);
    }

    to {
        opacity: 1;

        transform:
            scale(1.05);
    }
}


/* =========================================================
   COURONNE
========================================================= */

@keyframes eclipseCoronaBreathe {

    from {
        transform:
            scale(.97)
            rotate(-1deg);

        opacity: .72;
    }

    to {
        transform:
            scale(1.04)
            rotate(1deg);

        opacity: 1;
    }
}


@keyframes eclipseTotalCorona {

    from {
        filter:
            brightness(.95)
            saturate(1);

        transform:
            scale(.99);
    }

    to {
        filter:
            brightness(1.18)
            saturate(1.12);

        transform:
            scale(1.025);
    }
}


/* =========================================================
   DIAMOND RING
========================================================= */

@keyframes eclipseDiamond {

    0% {
        opacity: 0;

        transform:
            scale(.2);
    }

    20% {
        opacity: 1;

        transform:
            scale(1.5);
    }

    55% {
        opacity: 1;

        transform:
            scale(.9);
    }

    100% {
        opacity: 0;

        transform:
            scale(.1);
    }
}


/* =========================================================
   READY
========================================================= */

@keyframes eclipseReady {

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

    to {
        transform:
            translateY(-5px)
            scale(1.008);
    }
}


/* =========================================================
   FLASH
========================================================= */

@keyframes eclipseScreenFlash {

    0% {
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


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

@media (max-width: 900px) {

    .eclipse-intro {
        --eclipse-size:
            clamp(
                235px,
                46vw,
                360px
            );

        --moon-start-x:
            -80vw;
    }

}


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

@media (max-width: 600px) {

    .eclipse-intro {
        --eclipse-size:
            clamp(
                205px,
                64vw,
                285px
            );

        --moon-start-x:
            -100vw;
    }


    .eclipse-asteroid--foreground {
        display: none;
    }


    .eclipse-intro__info {
        width: 90vw;

        margin-top: 28px;
    }


    .eclipse-intro__status {
        font-size: .56rem;

        letter-spacing: .20em;
    }


    .eclipse-intro__text {
        font-size: .80rem;

        letter-spacing: .07em;
    }

}


/* =========================================================
   PETITE HAUTEUR
========================================================= */

@media (max-height: 700px) {

    .eclipse-intro {
        --eclipse-size:
            clamp(
                190px,
                35vh,
                290px
            );
    }


    .eclipse-intro__info {
        margin-top: 20px;
    }

}


/* =========================================================
   ACCESSIBILITÉ
========================================================= */

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

    .eclipse-asteroid,
    .eclipse-meteor,
    .eclipse-dust-particle {
        animation-duration:
            30s;
    }


    .eclipse-intro--ready
    .eclipse-intro__eclipse {
        animation: none;
    }

}