/* =========================================================
   OCCASPÊCHE — PAGE EN CONSTRUCTION SPATIALE
   Design et développement : Exora Technologie
   ========================================================= */

/* =========================================================
   1. VARIABLES PRINCIPALES
   ========================================================= */

:root {
    --space-dark: #020611;
    --space: #030817;
    --space-soft: #07152f;
    --space-blue: #0a2450;

    --navy: #0a2450;
    --navy-light: #174078;

    --orange: #f8600a;
    --orange-light: #ffae7c;
    --orange-glow: rgba(248, 96, 10, 0.55);

    --white: #ffffff;
    --cream: #f8f4f1;

    --text: #ffffff;
    --text-soft: rgba(255, 255, 255, 0.7);
    --text-muted: rgba(255, 255, 255, 0.46);

    --border: rgba(255, 255, 255, 0.12);
    --glass: rgba(7, 21, 47, 0.58);

    /*
     * Ces deux variables seront modifiées
     * automatiquement par le JavaScript.
     */
    --progress-angle: 36deg;
    --progress-percent: 10%;
}

/* =========================================================
   2. RÉINITIALISATION
   ========================================================= */

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

html {
    min-width: 320px;
    background: var(--space-dark);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    background: var(--space-dark);
    color: var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
textarea,
select {
    font: inherit;
}

/* =========================================================
   3. ACCESSIBILITÉ
   ========================================================= */

.skip-link {
    position: fixed;
    z-index: 1000;
    top: 1rem;
    left: 1rem;
    padding: 0.8rem 1rem;
    border-radius: 10px;
    background: var(--orange);
    color: white;
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-180%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* =========================================================
   4. STRUCTURE GÉNÉRALE
   ========================================================= */

.cosmic-site {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 73% 35%,
            rgba(20, 65, 130, 0.3),
            transparent 31rem
        ),
        radial-gradient(
            circle at 14% 22%,
            rgba(248, 96, 10, 0.09),
            transparent 24rem
        ),
        linear-gradient(
            180deg,
            #020510 0%,
            #030a1d 52%,
            #06142d 100%
        );
}

.cosmic-site::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    content: "";
    opacity: 0.25;
    pointer-events: none;
}

.topbar,
.hero,
.project-status,
.site-footer {
    width: min(1280px, calc(100% - 64px));
    margin-inline: auto;
}

/* =========================================================
   5. DÉCOR SPATIAL
   ========================================================= */

.space-background {
    position: absolute;
    z-index: -4;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.nebula {
    position: absolute;
    border-radius: 50%;
    filter: blur(25px);
}

.nebula-one {
    top: -17rem;
    right: -13rem;
    width: 48rem;
    height: 48rem;
    background:
        radial-gradient(
            circle,
            rgba(30, 99, 196, 0.3),
            rgba(10, 36, 80, 0.12) 45%,
            transparent 72%
        );
}

.nebula-two {
    top: 28rem;
    left: -19rem;
    width: 44rem;
    height: 44rem;
    background:
        radial-gradient(
            circle,
            rgba(248, 96, 10, 0.11),
            transparent 70%
        );
}

.stars {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    pointer-events: none;
}

.stars-small {
    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.7) 1px,
            transparent 1.4px
        );
    background-size: 51px 51px;
    background-position: 8px 14px;
    opacity: 0.35;
    animation: stars-drift 65s linear infinite;
}

.stars-medium {
    background-image:
        radial-gradient(
            circle,
            rgba(138, 187, 255, 0.85) 1.3px,
            transparent 1.8px
        );
    background-size: 113px 113px;
    background-position: 34px 61px;
    opacity: 0.4;
    animation: stars-drift 95s linear infinite reverse;
}

.stars-large {
    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.95) 1.8px,
            transparent 2.4px
        );
    background-size: 197px 197px;
    background-position: 81px 29px;
    opacity: 0.5;
    animation: stars-pulse 4.5s ease-in-out infinite;
}

.shooting-star {
    position: absolute;
    width: 130px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.85),
            transparent
        );
    opacity: 0;
    transform: rotate(-28deg);
}

.shooting-star::after {
    position: absolute;
    top: -2px;
    right: 13px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: white;
    box-shadow:
        0 0 12px white,
        0 0 24px rgba(108, 174, 255, 0.9);
    content: "";
}

.shooting-star-one {
    top: 16%;
    left: 72%;
    animation: shooting-star 9s ease-in-out 2s infinite;
}

.shooting-star-two {
    top: 44%;
    left: 18%;
    animation: shooting-star 12s ease-in-out 6s infinite;
}

/* =========================================================
   6. EN-TÊTE
   ========================================================= */

.topbar {
    position: relative;
    z-index: 20;
    display: flex;
    min-height: 118px;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    border-bottom: 1px solid var(--border);
}

.project-identity {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

.project-symbol {
    display: grid;
    width: 47px;
    height: 47px;
    place-items: center;
    border: 1px solid rgba(255, 174, 124, 0.35);
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(248, 96, 10, 0.22),
            rgba(248, 96, 10, 0.04)
        );
    color: var(--orange-light);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    box-shadow:
        inset 0 0 18px rgba(248, 96, 10, 0.12),
        0 0 25px rgba(248, 96, 10, 0.08);
}

.project-identity div {
    display: grid;
    gap: 0.16rem;
}

.project-identity small,
.construction-badge small {
    color: var(--text-muted);
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.project-identity strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: -0.025em;
}

.construction-badge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.72rem 1rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(4, 13, 31, 0.52);
    box-shadow:
        inset 0 0 18px rgba(255, 255, 255, 0.025),
        0 12px 35px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(15px);
}

.construction-badge div {
    display: grid;
    gap: 0.08rem;
}

.construction-badge strong {
    color: white;
    font-size: 0.72rem;
}

.status-light {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow:
        0 0 0 7px rgba(248, 96, 10, 0.1),
        0 0 20px rgba(248, 96, 10, 0.7);
    animation: status-pulse 2.2s ease-in-out infinite;
}

/* =========================================================
   7. SECTION PRINCIPALE
   ========================================================= */

.hero {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns:
        minmax(0, 0.78fr)
        minmax(560px, 1.22fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
    min-height: 790px;
    padding-block: clamp(4rem, 8vw, 7rem);
}

.hero-copy {
    position: relative;
    z-index: 5;
    max-width: 570px;
}

.eyebrow,
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: var(--orange-light);
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.eyebrow::before,
.section-label::before {
    width: 25px;
    height: 1px;
    background: var(--orange);
    box-shadow: 0 0 8px rgba(248, 96, 10, 0.8);
    content: "";
}

.hero-copy h1 {
    max-width: 620px;
    margin: 1.45rem 0 1.7rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3.7rem, 5.7vw, 6.15rem);
    font-weight: 400;
    letter-spacing: -0.062em;
    line-height: 0.92;
}

.hero-copy h1 em {
    display: block;
    margin-top: 0.13em;
    color: var(--orange);
    font-weight: 400;
    text-shadow:
        0 0 22px rgba(248, 96, 10, 0.3);
}

.hero-intro {
    max-width: 560px;
    margin: 0;
    color: var(--text-soft);
    font-size: clamp(1rem, 1.5vw, 1.12rem);
    line-height: 1.75;
}

.hero-message {
    max-width: 500px;
    margin: 1.1rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    line-height: 1.65;
}

.update-information {
    display: inline-grid;
    gap: 0.22rem;
    margin-top: 2.1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--orange);
}

.update-information span {
    color: var(--text-muted);
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.update-information strong {
    color: white;
    font-size: 0.78rem;
}

/* =========================================================
   8. SCÈNE COSMIQUE
   ========================================================= */

.cosmic-stage {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 650px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 48px;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(30, 87, 165, 0.22),
            transparent 17rem
        ),
        radial-gradient(
            circle at 20% 80%,
            rgba(248, 96, 10, 0.07),
            transparent 18rem
        ),
        rgba(2, 8, 23, 0.66);
    box-shadow:
        inset 0 0 90px rgba(30, 87, 165, 0.09),
        0 42px 95px rgba(0, 0, 0, 0.38);
    backdrop-filter: blur(8px);
}

.cosmic-stage::before {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(255, 255, 255, 0.035) 50%,
            transparent 50.2%
        ),
        linear-gradient(
            transparent 49.8%,
            rgba(255, 255, 255, 0.035) 50%,
            transparent 50.2%
        );
    content: "";
    opacity: 0.48;
}

.cosmic-stage::after {
    position: absolute;
    z-index: -2;
    top: 50%;
    left: 50%;
    width: 530px;
    height: 530px;
    border: 1px dashed rgba(255, 255, 255, 0.055);
    border-radius: 50%;
    content: "";
    transform: translate(-50%, -50%);
}

.stage-label {
    position: absolute;
    z-index: 20;
    top: 1.75rem;
    left: 1.9rem;
    display: grid;
    gap: 0.18rem;
}

.stage-label span {
    color: var(--text-muted);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.stage-label strong {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.67rem;
}

/* =========================================================
   9. ORBITES
   ========================================================= */

.orbit {
    position: absolute;
    z-index: 1;
    top: 48%;
    left: 50%;
    border: 1px solid rgba(141, 190, 255, 0.13);
    border-radius: 50%;
    pointer-events: none;
}

.orbit::before {
    position: absolute;
    border-radius: 50%;
    background: var(--orange-light);
    box-shadow:
        0 0 10px rgba(255, 174, 124, 0.9),
        0 0 24px rgba(248, 96, 10, 0.55);
    content: "";
}

.orbit-one {
    width: 510px;
    height: 285px;
    transform:
        translate(-50%, -50%)
        rotate(-15deg);
    animation: orbit-breathe 5s ease-in-out infinite;
}

.orbit-one::before {
    top: 49%;
    right: -4px;
    width: 7px;
    height: 7px;
}

.orbit-two {
    width: 410px;
    height: 480px;
    border-style: dashed;
    transform:
        translate(-50%, -50%)
        rotate(31deg);
    opacity: 0.55;
    animation: orbit-breathe 7s ease-in-out infinite reverse;
}

.orbit-two::before {
    bottom: 8%;
    left: 19%;
    width: 5px;
    height: 5px;
    background: #8ebcff;
    box-shadow:
        0 0 10px #8ebcff,
        0 0 20px rgba(83, 143, 226, 0.6);
}

.hook-orbit {
    position: absolute;
    z-index: 2;
    top: 48%;
    left: 50%;
    width: 575px;
    height: 205px;
    border-top: 1px solid rgba(248, 96, 10, 0.11);
    border-right: 1px solid rgba(248, 96, 10, 0.36);
    border-bottom: 1px solid rgba(248, 96, 10, 0.11);
    border-left: 1px solid transparent;
    border-radius: 50%;
    opacity: 0.7;
    pointer-events: none;
    transform:
        translate(-50%, -50%)
        rotate(17deg);
}

.hook-orbit span {
    position: absolute;
    right: 8px;
    bottom: 18px;
    width: 24px;
    height: 31px;
    border-right: 2px solid var(--orange);
    border-bottom: 2px solid var(--orange);
    border-radius: 0 0 17px 0;
    box-shadow: 4px 6px 15px rgba(248, 96, 10, 0.2);
    transform: rotate(22deg);
}

/* =========================================================
   10. CONSTELLATION EN FORME DE POISSON
   ========================================================= */

.fish-constellation {
    position: absolute;
    z-index: 3;
    top: 20%;
    right: 7%;
    width: 145px;
    height: 90px;
    opacity: 0.58;
    pointer-events: none;
    transform: rotate(-6deg);
}

.constellation-point {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a9cbff;
    box-shadow:
        0 0 7px #a9cbff,
        0 0 16px rgba(132, 180, 255, 0.65);
    opacity: 0;
    transform: scale(0);
    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.constellation-point.is-visible {
    opacity: 1;
    transform: scale(1);
}

.constellation-line {
    position: absolute;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            rgba(154, 196, 255, 0.1),
            rgba(154, 196, 255, 0.65),
            rgba(154, 196, 255, 0.1)
        );
    opacity: 0;
    transform-origin: left center;
    transition: opacity 0.8s ease;
}

.constellation-line.is-visible {
    opacity: 0.72;
}

.point-one {
    top: 42px;
    left: 8px;
}

.point-two {
    top: 20px;
    left: 38px;
}

.point-three {
    top: 39px;
    left: 67px;
}

.point-four {
    top: 59px;
    left: 38px;
}

.point-five {
    top: 39px;
    left: 105px;
}

.point-six {
    top: 18px;
    left: 134px;
}

.point-seven {
    top: 66px;
    left: 134px;
}

.line-one {
    top: 43px;
    left: 10px;
    width: 36px;
    transform: rotate(-36deg);
}

.line-two {
    top: 22px;
    left: 40px;
    width: 37px;
    transform: rotate(35deg);
}

.line-three {
    top: 41px;
    left: 67px;
    width: 39px;
    transform: rotate(0deg);
}

.line-four {
    top: 59px;
    left: 40px;
    width: 35px;
    transform: rotate(-32deg);
}

.line-five {
    top: 40px;
    left: 106px;
    width: 37px;
    transform: rotate(-35deg);
}

.line-six {
    top: 41px;
    left: 106px;
    width: 39px;
    transform: rotate(42deg);
}

/* =========================================================
   11. ÉTOILE EN CONSTRUCTION
   ========================================================= */

.creation-star {
    position: absolute;
    z-index: 4;
    top: 48%;
    left: 50%;
    width: 130px;
    height: 130px;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.star-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(248, 96, 10, 0.25) 0%,
            rgba(255, 174, 124, 0.1) 25%,
            rgba(38, 108, 209, 0.06) 48%,
            transparent 70%
        );
    filter: blur(5px);
    transform: translate(-50%, -50%);
    animation: star-glow 3.6s ease-in-out infinite;
}

.star-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 92px;
    height: 92px;
    background:
        radial-gradient(
            circle at 40% 37%,
            #fff9ec 0%,
            #ffcf9c 16%,
            var(--orange) 43%,
            #cf3e00 74%
        );
    clip-path:
        polygon(
            50% 0%,
            60% 34%,
            86% 14%,
            69% 42%,
            100% 50%,
            68% 59%,
            86% 86%,
            59% 68%,
            50% 100%,
            41% 68%,
            14% 86%,
            32% 59%,
            0% 50%,
            32% 41%,
            14% 14%,
            41% 34%
        );
    box-shadow:
        0 0 18px rgba(255, 174, 124, 0.95),
        0 0 45px rgba(248, 96, 10, 0.75),
        0 0 95px rgba(248, 96, 10, 0.38);
    transform: translate(-50%, -50%);
    animation: star-core 7s linear infinite;
}

.star-ray {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 150px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.85),
            rgba(255, 174, 124, 0.48),
            transparent
        );
    opacity: 0;
    filter: drop-shadow(0 0 7px rgba(255, 174, 124, 0.7));
    transform-origin: 50% 100%;
    transition:
        opacity 0.8s ease,
        scale 0.8s ease;
    scale: 1 0.12;
}

.star-ray.is-visible {
    opacity: 0.72;
    scale: 1 1;
}

.ray-one {
    transform:
        translate(-50%, -100%)
        rotate(0deg);
}

.ray-two {
    height: 118px;
    transform:
        translate(-50%, -100%)
        rotate(36deg);
}

.ray-three {
    height: 150px;
    transform:
        translate(-50%, -100%)
        rotate(72deg);
}

.ray-four {
    height: 105px;
    transform:
        translate(-50%, -100%)
        rotate(108deg);
}

.ray-five {
    height: 145px;
    transform:
        translate(-50%, -100%)
        rotate(144deg);
}

.ray-six {
    height: 118px;
    transform:
        translate(-50%, -100%)
        rotate(180deg);
}

.ray-seven {
    height: 150px;
    transform:
        translate(-50%, -100%)
        rotate(216deg);
}

.ray-eight {
    height: 108px;
    transform:
        translate(-50%, -100%)
        rotate(252deg);
}

.ray-nine {
    height: 142px;
    transform:
        translate(-50%, -100%)
        rotate(288deg);
}

.ray-ten {
    height: 120px;
    transform:
        translate(-50%, -100%)
        rotate(324deg);
}

/* =========================================================
   12. CERCLE DE PROGRESSION
   ========================================================= */

.progress-halo {
    position: absolute;
    z-index: 10;
    top: 48%;
    left: 50%;
    display: grid;
    width: min(72%, 440px);
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(3, 10, 29, 0.92) 0%,
            rgba(3, 10, 29, 0.78) 44%,
            rgba(7, 25, 58, 0.45) 63%,
            transparent 70%
        );
    box-shadow:
        inset 0 0 55px rgba(30, 87, 165, 0.13),
        0 0 75px rgba(6, 22, 52, 0.52);
    transform: translate(-50%, -50%);
}

.progress-halo::before {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from -90deg,
            var(--orange) 0deg,
            var(--orange-light) var(--progress-angle),
            rgba(255, 255, 255, 0.09) var(--progress-angle),
            rgba(255, 255, 255, 0.09) 360deg
        );
    content: "";

    /*
     * Transforme le cercle en anneau.
     */
    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 7px),
            black calc(100% - 6px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 7px),
            black calc(100% - 6px)
        );

    filter:
        drop-shadow(
            0 0 8px
            rgba(248, 96, 10, 0.4)
        );
}

.progress-halo::after {
    position: absolute;
    inset: 17px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    content: "";
    animation: halo-rotation 35s linear infinite;
}

/* =========================================================
   13. NOM QUI SE RÉVÈLE
   ========================================================= */

.brand-word {
    position: relative;
    z-index: 15;
    display: flex;
    max-width: 90%;
    align-items: center;
    justify-content: center;
    overflow: visible;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.45rem, 4.2vw, 4.15rem);
    font-weight: 500;
    letter-spacing: -0.075em;
    line-height: 1;
    text-align: center;
    text-shadow:
        0 0 13px rgba(255, 255, 255, 0.25),
        0 0 32px rgba(85, 147, 238, 0.2);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.brand-letter {
    display: inline-block;
    flex: 0 0 auto;
    max-width: 0;
    overflow: hidden;
    color: white;
    opacity: 0;
    filter: blur(8px);
    transform:
        translateY(12px)
        scale(0.65);
    transition:
        max-width 0.75s ease,
        opacity 0.75s ease,
        filter 0.75s ease,
        transform 0.75s ease;
}

.brand-letter.is-visible {
    max-width: 1.25em;
    opacity: 1;
    filter: blur(0);
    transform:
        translateY(0)
        scale(1);
}

.brand-letter:first-child {
    color: white;
    text-shadow:
        0 0 12px white,
        0 0 28px rgba(116, 173, 255, 0.75),
        0 0 55px rgba(73, 134, 224, 0.48);
}

.brand-letter-accent {
    color: var(--orange-light);
    text-shadow:
        0 0 14px rgba(248, 96, 10, 0.55),
        0 0 34px rgba(248, 96, 10, 0.28);
}

/* =========================================================
   14. LOGO FINAL À 100 %
   ========================================================= */

.final-logo {
    position: absolute;
    z-index: 17;
    display: grid;
    width: min(72%, 310px);
    place-items: center;
    padding: 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 22px;
    background: var(--cream);
    box-shadow:
        0 0 35px rgba(255, 255, 255, 0.26),
        0 0 85px rgba(248, 96, 10, 0.3);
    opacity: 0;
    pointer-events: none;
    filter: blur(12px);
    transform: scale(0.65);
    transition:
        opacity 1s ease,
        filter 1s ease,
        transform 1s ease;
}

.final-logo img {
    width: 100%;
    height: auto;
    border-radius: 13px;
}

.cosmic-site.is-complete .brand-word {
    opacity: 0;
    transform: scale(1.13);
}

.cosmic-site.is-complete .final-logo {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* =========================================================
   15. POURCENTAGE
   ========================================================= */

.progress-readout {
    position: absolute;
    z-index: 21;
    right: 1.9rem;
    bottom: 1.7rem;
    display: grid;
    justify-items: end;
}

.progress-readout strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: -0.07em;
    line-height: 1;
}

.progress-readout span {
    margin-top: 0.22rem;
    color: var(--text-muted);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.progress-levels {
    position: absolute;
    z-index: 21;
    bottom: 1.8rem;
    left: 1.9rem;
    display: flex;
    align-items: center;
    gap: 0.42rem;
}

.progress-levels span {
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition:
        background 0.45s ease,
        border-color 0.45s ease,
        box-shadow 0.45s ease,
        transform 0.45s ease;
}

.progress-levels span.is-active {
    border-color: var(--orange-light);
    background: var(--orange);
    box-shadow: 0 0 9px rgba(248, 96, 10, 0.75);
    transform: scale(1.2);
}

.reveal-information {
    position: absolute;
    z-index: 21;
    right: 1.9rem;
    bottom: 7.1rem;
    max-width: 210px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.58rem;
    line-height: 1.5;
    text-align: right;
}

/* =========================================================
   16. ÉTAT DU PROJET
   ========================================================= */

.project-status {
    position: relative;
    z-index: 7;
    display: grid;
    grid-template-columns:
        minmax(260px, 0.65fr)
        minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
    padding: clamp(2.5rem, 5vw, 4rem);
    border: 1px solid var(--border);
    border-radius: 38px;
    background:
        linear-gradient(
            135deg,
            rgba(9, 27, 60, 0.85),
            rgba(4, 13, 32, 0.76)
        );
    box-shadow:
        inset 0 0 50px rgba(255, 255, 255, 0.02),
        0 30px 70px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(13px);
}

.status-heading h2 {
    max-width: 370px;
    margin: 1rem 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3vw, 3.1rem);
    font-weight: 400;
    letter-spacing: -0.05em;
    line-height: 1.04;
}

.status-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.status-card {
    display: grid;
    min-height: 205px;
    align-content: start;
    gap: 1.35rem;
    padding: 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.035);
}

.current-step-card {
    border-color: rgba(248, 96, 10, 0.28);
    background:
        linear-gradient(
            145deg,
            rgba(248, 96, 10, 0.1),
            rgba(255, 255, 255, 0.025)
        );
}

.card-number {
    color: var(--orange-light);
    font-size: 0.61rem;
    font-weight: 850;
    letter-spacing: 0.14em;
}

.status-card div {
    display: grid;
    gap: 0.55rem;
}

.status-card small {
    color: var(--text-muted);
    font-size: 0.56rem;
    font-weight: 820;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.status-card h3 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.025em;
}

.status-card p {
    margin: 0;
    color: var(--text-soft);
    font-size: 0.76rem;
    line-height: 1.65;
}

/* =========================================================
   17. SURFACE DE LA LUNE
   ========================================================= */

.moon-surface {
    position: absolute;
    z-index: 0;
    right: -8%;
    bottom: -190px;
    left: -8%;
    height: 430px;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50% 50% 0 0;
    background:
        radial-gradient(
            circle at 24% 20%,
            rgba(255, 255, 255, 0.17),
            transparent 7rem
        ),
        radial-gradient(
            circle at 77% 11%,
            rgba(255, 255, 255, 0.08),
            transparent 9rem
        ),
        linear-gradient(
            180deg,
            #566071 0%,
            #2b3446 42%,
            #151d2e 100%
        );
    box-shadow:
        0 -30px 85px rgba(124, 173, 242, 0.12),
        inset 0 28px 60px rgba(255, 255, 255, 0.055);
    pointer-events: none;
}

.moon-surface::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle,
            rgba(3, 8, 23, 0.2) 0 12px,
            transparent 13px
        );
    background-size: 91px 91px;
    content: "";
    opacity: 0.18;
}

.moon-glow {
    position: absolute;
    top: -25px;
    left: 50%;
    width: 70%;
    height: 75px;
    border-radius: 50%;
    background: rgba(161, 202, 255, 0.12);
    filter: blur(21px);
    transform: translateX(-50%);
}

.crater {
    position: absolute;
    border: 1px solid rgba(4, 10, 24, 0.18);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 35% 34%,
            rgba(255, 255, 255, 0.06),
            rgba(7, 14, 31, 0.19) 67%,
            rgba(2, 7, 18, 0.3)
        );
    box-shadow:
        inset 7px 9px 15px rgba(0, 0, 0, 0.15),
        3px 3px 8px rgba(255, 255, 255, 0.025);
}

.crater-one {
    top: 72px;
    left: 16%;
    width: 94px;
    height: 42px;
    transform: rotate(-7deg);
}

.crater-two {
    top: 125px;
    left: 48%;
    width: 130px;
    height: 55px;
    transform: rotate(8deg);
}

.crater-three {
    top: 55px;
    right: 14%;
    width: 72px;
    height: 31px;
    transform: rotate(-5deg);
}

.crater-four {
    top: 184px;
    right: 32%;
    width: 53px;
    height: 24px;
}

/* =========================================================
   18. PIED DE PAGE
   ========================================================= */

.site-footer {
    position: relative;
    z-index: 10;
    display: flex;
    min-height: 195px;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 3rem;
    padding-bottom: 1.6rem;
    color: var(--text-muted);
}

.footer-project {
    display: grid;
    gap: 0.35rem;
}

.footer-project p {
    margin: 0;
    font-size: 0.67rem;
    line-height: 1.5;
}

.exora-credit {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.exora-credit > span {
    max-width: 145px;
    color: rgba(255, 255, 255, 0.43);
    font-size: 0.53rem;
    font-weight: 820;
    letter-spacing: 0.12em;
    line-height: 1.5;
    text-align: right;
    text-transform: uppercase;
}

.exora-badge {
    display: grid;
    width: 165px;
    min-height: 58px;
    place-items: center;
    padding: 0.35rem 0.6rem;
    border: 1px solid rgba(94, 147, 255, 0.18);
    border-radius: 16px;
    background: #070821;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.3),
        0 0 24px rgba(52, 114, 224, 0.1);
}

.exora-badge img {
    width: 100%;
    height: auto;
}

/* =========================================================
   19. ANIMATIONS
   ========================================================= */

@keyframes status-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.55;
        transform: scale(0.82);
    }
}

@keyframes stars-drift {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(-120px, 70px);
    }
}

@keyframes stars-pulse {
    0%,
    100% {
        opacity: 0.34;
    }

    50% {
        opacity: 0.65;
    }
}

@keyframes shooting-star {
    0%,
    78% {
        opacity: 0;
        transform:
            translate(0, 0)
            rotate(-28deg);
    }

    82% {
        opacity: 0.75;
    }

    92% {
        opacity: 0;
        transform:
            translate(-240px, 140px)
            rotate(-28deg);
    }

    100% {
        opacity: 0;
    }
}

@keyframes star-glow {
    0%,
    100% {
        opacity: 0.62;
        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    50% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}

@keyframes star-core {
    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg);
    }
}

@keyframes halo-rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes orbit-breathe {
    0%,
    100% {
        opacity: 0.43;
    }

    50% {
        opacity: 0.78;
    }
}

/* =========================================================
   20. TABLETTES
   ========================================================= */

@media (max-width: 1080px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .hero-copy {
        max-width: 720px;
    }

    .cosmic-stage {
        width: min(100%, 760px);
        margin-inline: auto;
    }

    .project-status {
        grid-template-columns: 1fr;
    }

    .status-heading h2 {
        max-width: 580px;
    }
}

/* =========================================================
   21. TÉLÉPHONES
   ========================================================= */

@media (max-width: 720px) {
    .topbar,
    .hero,
    .project-status,
    .site-footer {
        width: min(100% - 32px, 1280px);
    }

    .topbar {
        min-height: 102px;
    }

    .construction-badge {
        padding: 0.72rem;
    }

    .construction-badge div {
        display: none;
    }

    .hero {
        gap: 3rem;
        min-height: 0;
        padding-block: 3.5rem 4.5rem;
    }

    .hero-copy h1 {
        font-size: clamp(3.3rem, 15vw, 5rem);
    }

    .hero-intro {
        font-size: 0.98rem;
    }

    .cosmic-stage {
        min-height: 590px;
        border-radius: 30px;
    }

    .cosmic-stage::after {
        width: 410px;
        height: 410px;
    }

    .stage-label {
        top: 1.35rem;
        left: 1.35rem;
    }

    .orbit-one {
        width: 440px;
        height: 245px;
    }

    .orbit-two {
        width: 340px;
        height: 410px;
    }

    .hook-orbit {
        width: 470px;
        height: 180px;
    }

    .progress-halo {
        top: 47%;
        width: min(78%, 390px);
    }

    .creation-star {
        top: 47%;
    }

    .orbit,
    .hook-orbit {
        top: 47%;
    }

    .fish-constellation {
        top: 20%;
        right: 2%;
        scale: 0.82;
    }

    .progress-readout {
        right: 1.35rem;
        bottom: 1.35rem;
    }

    .progress-readout strong {
        font-size: 2.15rem;
    }

    .progress-levels {
        bottom: 1.45rem;
        left: 1.35rem;
        gap: 0.32rem;
    }

    .progress-levels span {
        width: 6px;
        height: 6px;
    }

    .reveal-information {
        right: 1.35rem;
        bottom: 6.15rem;
    }

    .status-content {
        grid-template-columns: 1fr;
    }

    .status-card {
        min-height: 0;
    }

    .site-footer {
        min-height: 230px;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 1.35rem;
        padding-block: 3rem;
    }

    .exora-credit {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.55rem;
    }

    .exora-credit > span {
        max-width: none;
        text-align: left;
    }

    .moon-surface {
        bottom: -230px;
    }
}

/* =========================================================
   22. PETITS TÉLÉPHONES
   ========================================================= */

@media (max-width: 480px) {
    .project-symbol {
        width: 42px;
        height: 42px;
    }

    .project-identity strong {
        font-size: 0.95rem;
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 15vw, 4.1rem);
    }

    .cosmic-stage {
        min-height: 525px;
    }

    .cosmic-stage::after {
        width: 325px;
        height: 325px;
    }

    .progress-halo {
        width: min(82%, 315px);
    }

    .brand-word {
        font-size: clamp(2rem, 10vw, 2.85rem);
    }

    .orbit-one {
        width: 345px;
        height: 195px;
    }

    .orbit-two {
        width: 280px;
        height: 335px;
    }

    .hook-orbit {
        width: 365px;
        height: 145px;
    }

    .star-ray {
        height: 112px;
    }

    .ray-two,
    .ray-four,
    .ray-six,
    .ray-eight,
    .ray-ten {
        height: 85px;
    }

    .creation-star {
        width: 105px;
        height: 105px;
    }

    .star-core {
        width: 72px;
        height: 72px;
    }

    .star-glow {
        width: 260px;
        height: 260px;
    }

    .fish-constellation {
        display: none;
    }

    .reveal-information {
        display: none;
    }

    .progress-readout span {
        font-size: 0.46rem;
    }

    .project-status {
        padding: 2rem 1.2rem;
        border-radius: 28px;
    }

    .status-heading h2 {
        font-size: 2.1rem;
    }

    .status-card {
        padding: 1.35rem;
        border-radius: 21px;
    }

    .exora-badge {
        width: 155px;
    }
}

/* =========================================================
   23. RÉDUCTION DES ANIMATIONS
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* =========================================================
   CORRECTION CINÉMATIQUE — OCCASPÊCHE
   ========================================================= */

/*
 * Ajoute directement la surface de la Lune
 * dans la scène principale.
 */

.cosmic-stage {
    min-height: 620px;

    background:
        /* Cratères */
        radial-gradient(
            ellipse 8% 2.8% at 23% 89%,
            rgba(2, 7, 18, 0.42) 0%,
            rgba(2, 7, 18, 0.34) 48%,
            rgba(255, 255, 255, 0.07) 53%,
            transparent 59%
        ),

        radial-gradient(
            ellipse 6% 2.2% at 69% 94%,
            rgba(2, 7, 18, 0.38) 0%,
            rgba(2, 7, 18, 0.28) 47%,
            rgba(255, 255, 255, 0.06) 53%,
            transparent 60%
        ),

        radial-gradient(
            ellipse 11% 3.5% at 84% 87%,
            rgba(2, 7, 18, 0.4) 0%,
            rgba(2, 7, 18, 0.29) 46%,
            rgba(255, 255, 255, 0.055) 52%,
            transparent 59%
        ),

        /* Horizon lunaire */
        radial-gradient(
            ellipse 110% 58% at 50% 128%,
            #747f8f 0%,
            #566174 34%,
            #374258 63%,
            #1b263d 96%,
            transparent 100%
        ),

        /* Lumière autour de l’étoile */
        radial-gradient(
            circle at 50% 45%,
            rgba(46, 111, 207, 0.25),
            transparent 17rem
        ),

        radial-gradient(
            circle at 22% 76%,
            rgba(248, 96, 10, 0.08),
            transparent 18rem
        ),

        rgba(2, 8, 23, 0.72);
}

/*
 * Cercle plus petit et moins imposant.
 */

.progress-halo {
    width: min(66%, 360px);

    background:
        radial-gradient(
            circle,
            rgba(3, 10, 29, 0.18) 0%,
            rgba(3, 10, 29, 0.28) 37%,
            rgba(7, 25, 58, 0.2) 60%,
            transparent 72%
        );

    box-shadow:
        inset 0 0 45px rgba(30, 87, 165, 0.1),
        0 0 65px rgba(6, 22, 52, 0.38);
}

/*
 * La progression orange commence maintenant
 * exactement en haut du cercle.
 */

.progress-halo::before {
    background:
        conic-gradient(
            from 0deg,
            var(--orange) 0deg,
            var(--orange-light) var(--progress-angle),
            rgba(255, 255, 255, 0.1) var(--progress-angle),
            rgba(255, 255, 255, 0.1) 360deg
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 6px),
            black calc(100% - 5px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 6px),
            black calc(100% - 5px)
        );
}

/*
 * Étoile plus grande et plus lumineuse.
 */

.star-core {
    width: 118px;
    height: 118px;

    box-shadow:
        0 0 20px rgba(255, 255, 255, 0.85),
        0 0 38px rgba(255, 174, 124, 0.95),
        0 0 75px rgba(248, 96, 10, 0.75),
        0 0 130px rgba(248, 96, 10, 0.42);
}

.star-glow {
    width: 410px;
    height: 410px;

    background:
        radial-gradient(
            circle,
            rgba(255, 245, 224, 0.24) 0%,
            rgba(248, 96, 10, 0.24) 17%,
            rgba(255, 174, 124, 0.12) 32%,
            rgba(38, 108, 209, 0.08) 52%,
            transparent 72%
        );
}

/*
 * Orbites mieux proportionnées autour
 * du nouveau cercle.
 */

.orbit-one {
    width: 445px;
    height: 250px;
}

.orbit-two {
    width: 350px;
    height: 410px;
}

.hook-orbit {
    width: 500px;
    height: 175px;
}

/*
 * Rend le O plus visible sur l’étoile.
 */

.brand-letter:first-child {
    text-shadow:
        0 0 7px #ffffff,
        0 0 18px #ffffff,
        0 0 38px rgba(116, 173, 255, 0.95),
        0 0 70px rgba(73, 134, 224, 0.75);
}

/*
 * Rend le pourcentage et les dix points
 * plus lisibles sur la Lune.
 */

.progress-readout {
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    background: rgba(2, 8, 23, 0.56);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
}

.progress-levels {
    padding: 0.58rem 0.72rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(2, 8, 23, 0.56);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
}

.reveal-information {
    padding: 0.5rem 0.65rem;
    border-radius: 10px;
    background: rgba(2, 8, 23, 0.4);
    backdrop-filter: blur(6px);
}

/*
 * Meilleur équilibre entre le texte
 * et la scène sur ordinateur.
 */

@media (min-width: 1081px) {
    .hero {
        grid-template-columns:
            minmax(390px, 0.88fr)
            minmax(540px, 1.12fr);

        gap: clamp(3rem, 5vw, 5rem);
        min-height: 740px;
    }

    .hero-copy {
        padding-left: clamp(1rem, 1.8vw, 1.7rem);
    }

    .hero-copy h1 {
        font-size: clamp(3.5rem, 4.8vw, 5.15rem);
        line-height: 0.95;
    }
}

/*
 * Tablettes.
 */

@media (min-width: 721px) and (max-width: 1080px) {
    .hero-copy {
        padding-left: 0;
    }

    .cosmic-stage {
        min-height: 610px;
    }

    .progress-halo {
        width: min(64%, 360px);
    }
}

/*
 * Téléphones.
 */

@media (max-width: 720px) {
    .hero-copy {
        padding-left: 0;
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 14vw, 4.35rem);
    }

    .cosmic-stage {
        min-height: 555px;
    }

    .progress-halo {
        width: min(76%, 315px);
    }

    .star-core {
        width: 92px;
        height: 92px;
    }

    .star-glow {
        width: 310px;
        height: 310px;
    }

    .orbit-one {
        width: 370px;
        height: 205px;
    }

    .orbit-two {
        width: 295px;
        height: 350px;
    }

    .hook-orbit {
        width: 405px;
        height: 150px;
    }

    .progress-readout {
        padding: 0.5rem 0.6rem;
    }

    .progress-levels {
        padding: 0.48rem 0.58rem;
    }
}

/*
 * Petits téléphones.
 */

@media (max-width: 480px) {
    .cosmic-stage {
        min-height: 515px;
    }

    .progress-halo {
        width: min(78%, 275px);
    }

    .star-core {
        width: 78px;
        height: 78px;
    }

    .star-glow {
        width: 255px;
        height: 255px;
    }

    .orbit-one {
        width: 315px;
        height: 175px;
    }

    .orbit-two {
        width: 250px;
        height: 300px;
    }

    .hook-orbit {
        width: 330px;
        height: 125px;
    }
}

/* Meilleure lisibilité du pied de page sur la Lune */

.footer-project {
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.exora-credit > span {
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* =========================================================
   JOURNAL DE MISSION — PROGRESSION EN 10 ÉTAPES
   ========================================================= */

.project-status {
    column-gap: clamp(2.5rem, 6vw, 6rem);
    row-gap: 2.2rem;
}

.mission-progress {
    --mission-track-edge: 0.75rem;

    display: grid;
    grid-column: 1 / -1;
    gap: 0.72rem;
    width: 100%;
    padding-bottom: 1.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.mission-progress-meta {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.mission-progress-meta span {
    color: var(--text-muted);
    font-size: 0.58rem;
    font-weight: 820;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mission-progress-meta strong {
    color: var(--orange-light);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.045em;
    line-height: 1;
    text-shadow: 0 0 18px rgba(248, 96, 10, 0.35);
}

.mission-progress-track {
    position: relative;
    width: auto;
    height: 4px;
    margin-inline: var(--mission-track-edge);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

.mission-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--progress-percent);
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            var(--orange),
            var(--orange-light)
        );
    box-shadow:
        0 0 10px rgba(248, 96, 10, 0.48),
        0 0 22px rgba(248, 96, 10, 0.2);
    transition: width 0.75s ease;
}

.mission-progress-marker {
    position: absolute;
    top: 50%;
    left: var(--progress-percent);
    width: 14px;
    height: 14px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--orange);
    box-shadow:
        0 0 0 6px rgba(248, 96, 10, 0.11),
        0 0 18px rgba(248, 96, 10, 0.75);
    transform: translate(-50%, -50%);
    transition: left 0.75s ease;
}

.mission-progress-steps {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0;
    width: auto;
    margin-inline: var(--mission-track-edge);
}

.mission-progress-steps span {
    position: relative;
    justify-self: end;
    padding-top: 0.48rem;
    color: rgba(255, 255, 255, 0.28);
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-align: center;
    transform: translateX(50%);
    transition:
        color 0.45s ease,
        transform 0.45s ease;
}

.mission-progress-steps span::before {
    position: absolute;
    top: -1px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    content: "";
    transform: translateX(-50%);
    transition:
        background 0.45s ease,
        box-shadow 0.45s ease;
}

.mission-progress-steps span.is-reached {
    color: rgba(255, 174, 124, 0.72);
}

.mission-progress-steps span.is-reached::before {
    background: var(--orange);
}

.mission-progress-steps span.is-current {
    color: #ffffff;
    transform: translate(50%, -1px);
}

.mission-progress-steps span.is-current::before {
    background: var(--orange-light);
    box-shadow:
        0 0 0 4px rgba(248, 96, 10, 0.12),
        0 0 10px rgba(248, 96, 10, 0.7);
}

@media (max-width: 720px) {
    .project-status {
        row-gap: 1.8rem;
    }

    .mission-progress {
        gap: 0.62rem;
        padding-bottom: 1.25rem;
    }

    .mission-progress-meta strong {
        font-size: 1.5rem;
    }

    .mission-progress-steps span {
        font-size: 0.44rem;
        letter-spacing: 0;
    }
}

@media (max-width: 480px) {
    .mission-progress-marker {
        width: 12px;
        height: 12px;
        border-width: 2px;
    }

    .mission-progress-steps {
        gap: 0;
    }
}