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

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

html,
body {
    width: 100%;
    height: 100%;
    background: #A8FA5B;
}

body {
    overflow: hidden;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}


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

.transmission {

    position: relative;

    width: 100%;
    height: 100vh;

    min-height: 500px;

    overflow: hidden;

    display: flex;

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

    background: #A8FA5B;

    isolation: isolate;
}


/* =========================================
   AMBIENT
========================================= */

.ambient {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(255,255,255,0.12),
            transparent 35%
        ),

        radial-gradient(
            circle at 50% 50%,
            rgba(0,0,0,0.08),
            transparent 65%
        );

    opacity: 0.7;

    animation:
        ambientPulse
        4s
        ease-in-out
        infinite;
}


@keyframes ambientPulse {

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

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}


/* =========================================
   NOISE
========================================= */

.noise {

    position: absolute;

    inset: -100%;

    z-index: 5;

    pointer-events: none;

    opacity: 0.045;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");

    animation:
        noiseMove
        0.12s
        steps(2)
        infinite;
}


@keyframes noiseMove {

    0% {
        transform: translate(0,0);
    }

    25% {
        transform: translate(3%,-2%);
    }

    50% {
        transform: translate(-2%,4%);
    }

    75% {
        transform: translate(4%,1%);
    }

    100% {
        transform: translate(-3%,-3%);
    }
}


/* =========================================
   SCANLINES
========================================= */

.scanlines {

    position: absolute;

    inset: 0;

    z-index: 8;

    pointer-events: none;

    background:

        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 3px,
            rgba(0,0,0,0.035) 4px
        );
}


/* =========================================
   TECHNICAL SIGNAL
========================================= */

.signal {

    position: absolute;

    z-index: 20;

    font-family: monospace;

    font-size: 8px;

    letter-spacing: 0.35em;

    color:
        rgba(255,255,255,0.85);

    text-transform: uppercase;

    user-select: none;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,0.25);
}


.signal-top {

    top: 8%;

    left: 8%;
}


.signal-right {

    top: 50%;

    right: 4%;

    writing-mode:
        vertical-rl;

    transform:
        translateY(-50%);
}


.signal-bottom {

    bottom: 7%;

    left: 8%;
}


.signal-left {

    top: 50%;

    left: 4%;

    writing-mode:
        vertical-rl;

    transform:
        translateY(-50%)
        rotate(180deg);
}


/* =========================================
   REDIRECTION TITLE
========================================= */

.message {

    position: absolute;

    z-index: 45;

    top: 7.2%;

    left: 50%;

    transform:
        translateX(-50%)
        rotate(-1deg);

    width:
        min(900px, 94vw);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    color: #fff;

    user-select: none;

    overflow: visible;
}


/* =========================================
   SMALL LABEL
========================================= */

.redirect-small {

    position: relative;

    display: inline-block;

    margin-bottom: 4px;

    padding:
        3px 13px 3px 17px;

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 0.56em;

    line-height: 1;

    color: #fff;

    background: #000;

    text-transform: uppercase;

    transform:
        skewX(-8deg);

    text-shadow: none;
}


/* =========================================
   SMALL LABEL CUT
========================================= */

.redirect-small::before {

    content: "";

    position: absolute;

    left: -7px;

    top: 0;

    width: 12px;

    height: 100%;

    background: #6D1975;

    transform:
        skewX(-12deg);
}


.redirect-small::after {

    content: "";

    position: absolute;

    right: -8px;

    top: 0;

    width: 10px;

    height: 100%;

    background: #000;

    clip-path:
        polygon(
            30% 0,
            100% 0,
            70% 100%,
            0 100%
        );
}


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

.redirect-main {

    position: relative;

    display: inline-block;

    padding:
        5px 20px 7px 20px;

    font-size:
        clamp(22px, 4vw, 44px);

    font-weight: 950;

    line-height: 0.95;

    letter-spacing:
        0.045em;

    color: #fff;

    background: #000;

    text-transform: uppercase;

    transform:
        skewX(-4deg);

    text-shadow: none;

    box-shadow:
        8px 0 0 #6D1975;

    animation:
        redirectImpact
        4s
        steps(1)
        infinite;
}


/* =========================================
   MAIN DOMAIN CUTS
========================================= */

.redirect-main::before {

    content: "";

    position: absolute;

    left: -14px;

    top: 0;

    width: 18px;

    height: 100%;

    background: #6D1975;

    clip-path:
        polygon(
            0 0,
            100% 0,
            72% 100%,
            0 100%
        );
}


.redirect-main::after {

    content: "";

    position: absolute;

    right: -16px;

    top: 0;

    width: 20px;

    height: 100%;

    background: #A8FA5B;

    clip-path:
        polygon(
            30% 0,
            100% 0,
            72% 100%,
            0 100%
        );
}


/* =========================================
   TITLE GLITCH
========================================= */

@keyframes redirectImpact {

    0%,
    71%,
    100% {

        transform:
            skewX(-4deg)
            translateX(0);

        clip-path:
            inset(0 0 0 0);
    }

    72% {

        transform:
            skewX(-5deg)
            translateX(-3px);

        clip-path:
            inset(0 12% 0 0);
    }

    73% {

        transform:
            skewX(-3deg)
            translateX(3px);

        clip-path:
            inset(0 0 0 8%);
    }

    74% {

        transform:
            skewX(-4deg)
            translateX(-1px);

        clip-path:
            inset(0 0 0 0);
    }
}


/* =========================================
   CENTRAL BRAND
========================================= */

.brand {

    position: relative;

    z-index: 30;

    width:
        min(560px, 78vw);

    aspect-ratio: 1 / 1;

    display: flex;

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

    animation:
        brandEnter
        1.1s
        cubic-bezier(.2,.8,.2,1)
        both;
}


@keyframes brandEnter {

    from {

        opacity: 0;

        transform:
            scale(0.86);
    }

    to {

        opacity: 1;

        transform:
            scale(1);
    }
}


/* =========================================
   BRAND MARK
========================================= */

.brand-mark {

    position: relative;

    width: 68%;

    aspect-ratio: 1 / 1;

    display: flex;

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


/* =========================================
   BABY
========================================= */

.baby {

    position: absolute;

    width: 72%;

    height: auto;

    display: block;

    object-fit: contain;

    user-select: none;

    -webkit-user-drag: none;
}


/* =========================================
   BABY BASE
========================================= */

.baby-base {

    z-index: 3;

    opacity: 1;

    filter:
        drop-shadow(
            0 0 18px
            rgba(91,23,100,0.15)
        );

    animation:
        babySignal
        4s
        ease-in-out
        infinite;
}


@keyframes babySignal {

    0%,
    100% {

        opacity: 1;

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

    48% {

        opacity: 1;

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

    49% {

        opacity: 0.94;

        transform:
            translateX(-1px)
            scale(1.002);
    }

    50% {

        opacity: 1;

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

    51% {

        transform:
            translateX(0);
    }
}


/* =========================================
   GLITCH LAYERS
========================================= */

.baby-glitch {

    z-index: 5;

    opacity: 0;

    pointer-events: none;

    mix-blend-mode: multiply;
}


/* =========================================
   GLITCH ONE
========================================= */

.baby-glitch-one {

    clip-path:
        polygon(
            0 8%,
            100% 8%,
            100% 24%,
            0 24%
        );

    animation:
        babyGlitchOne
        3.7s
        steps(1)
        infinite;
}


@keyframes babyGlitchOne {

    0%,
    76%,
    100% {

        opacity: 0;

        transform:
            translateX(0);
    }

    77% {

        opacity: 0.7;

        transform:
            translateX(-8px);
    }

    78% {

        opacity: 0;
    }

    79% {

        opacity: 0.5;

        transform:
            translateX(5px);
    }

    80% {

        opacity: 0;
    }
}


/* =========================================
   GLITCH TWO
========================================= */

.baby-glitch-two {

    clip-path:
        polygon(
            0 62%,
            100% 62%,
            100% 76%,
            0 76%
        );

    animation:
        babyGlitchTwo
        3.1s
        steps(1)
        infinite;
}


@keyframes babyGlitchTwo {

    0%,
    64%,
    100% {

        opacity: 0;

        transform:
            translateX(0);
    }

    65% {

        opacity: 0.75;

        transform:
            translateX(9px);
    }

    66% {

        opacity: 0;
    }

    67% {

        opacity: 0.55;

        transform:
            translateX(-6px);
    }

    68% {

        opacity: 0;
    }
}


/* =========================================
   ORBITS
========================================= */

.orbit {

    position: absolute;

    left: 50%;
    top: 50%;

    border:
        1px solid
        rgba(255,255,255,0.32);

    border-radius: 50%;

    transform:
        translate(-50%,-50%)
        rotate(-15deg);

    pointer-events: none;
}


.orbit-one {

    width: 88%;

    height: 42%;

    border-color:
        rgba(255,255,255,0.38);

    border-left-color:
        rgba(255,255,255,0.75);

    border-right-color:
        rgba(255,255,255,0.22);

    animation:
        orbitOne
        9s
        linear
        infinite;
}


.orbit-two {

    width: 70%;

    height: 70%;

    border-color:
        rgba(255,255,255,0.22);

    border-top-color:
        rgba(255,255,255,0.7);

    border-bottom-color:
        rgba(255,255,255,0.35);

    animation:
        orbitTwo
        13s
        linear
        infinite;
}


@keyframes orbitOne {

    from {

        transform:
            translate(-50%,-50%)
            rotate(-15deg);
    }

    to {

        transform:
            translate(-50%,-50%)
            rotate(345deg);
    }
}


@keyframes orbitTwo {

    from {

        transform:
            translate(-50%,-50%)
            rotate(35deg);
    }

    to {

        transform:
            translate(-50%,-50%)
            rotate(-325deg);
    }
}


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

.status {

    position: absolute;

    z-index: 40;

    left: 50%;

    bottom: 15%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 18px;

    white-space: nowrap;
}


.status-text {

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.55em;

    color:
        rgba(255,255,255,0.9);

    text-transform: uppercase;

    text-shadow:
        0 1px 3px
        rgba(0,0,0,0.3);

    animation:
        statusFlicker
        2.8s
        infinite;
}


.status-line {

    width: 34px;

    height: 1px;

    background:
        rgba(255,255,255,0.65);
}


@keyframes statusFlicker {

    0%,
    7%,
    12%,
    100% {

        opacity: 0.65;
    }

    8% {

        opacity: 0.15;
    }

    9% {

        opacity: 1;
    }

    10% {

        opacity: 0.3;
    }
}


/* =========================================
   LOADING
========================================= */

.loading {

    position: absolute;

    z-index: 40;

    left: 50%;

    bottom: 10.5%;

    transform:
        translateX(-50%);

    width:
        min(260px, 45vw);

    height: 2px;

    background:
        rgba(255,255,255,0.3);

    overflow: hidden;
}


.loading-track {

    display: block;

    width: 0%;

    height: 100%;

    background: #fff;

    box-shadow:
        0 0 6px
        rgba(255,255,255,0.7);

    animation:
        loading
        6s
        linear
        forwards;
}


@keyframes loading {

    from {

        width: 0%;
    }

    to {

        width: 100%;
    }
}


/* =========================================
   COUNTER
========================================= */

.counter {

    position: absolute;

    z-index: 40;

    left: 50%;

    bottom: 6.8%;

    transform:
        translateX(-50%);

    display: flex;

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

    min-width: 58px;

    height: 30px;

    padding: 0 12px;

    font-family: monospace;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.18em;

    color: #fff;

    background: #6D1975;

    border:
        1px solid
        rgba(255,255,255,0.45);

    box-shadow:
        0 0 14px
        rgba(109,25,117,0.28);

    text-shadow:
        0 0 2px
        rgba(255,255,255,0.5);

    animation:
        counterPulse
        1s
        infinite;
}


@keyframes counterPulse {

    0%,
    100% {
        opacity: 0.82;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================
   FIRST DISTURBANCE
========================================= */

.signal-disturbance-one .baby-base {

    transform:
        translateX(-2px);
}


.signal-disturbance-one .baby-glitch-one {

    opacity: 0.85;

    transform:
        translateX(-7px);
}


.signal-disturbance-one .signal {

    opacity: 0.95;
}


.signal-disturbance-one .redirect-main {

    transform:
        skewX(-5deg)
        translateX(-3px);
}


/* =========================================
   SECOND DISTURBANCE
========================================= */

.signal-disturbance-two .baby-base {

    transform:
        translateX(3px);
}


.signal-disturbance-two .baby-glitch-two {

    opacity: 0.9;

    transform:
        translateX(8px);
}


.signal-disturbance-two .orbit-one {

    border-left-color:
        rgba(255,255,255,0.95);
}


.signal-disturbance-two .redirect-main {

    transform:
        skewX(-3deg)
        translateX(4px);
}


/* =========================================
   WARNING — 02
========================================= */

.signal-warning .baby-base {

    filter:
        contrast(1.25)

        drop-shadow(
            0 0 25px
            rgba(91,23,100,0.35)
        );
}


.signal-warning .baby-glitch-one,
.signal-warning .baby-glitch-two {

    animation-duration:
        0.22s;
}


.signal-warning .signal {

    color:
        rgba(255,255,255,0.95);
}


.signal-warning .redirect-main {

    animation:
        redirectWarning
        0.2s
        steps(2)
        infinite;
}


@keyframes redirectWarning {

    0%,
    100% {

        transform:
            skewX(-4deg)
            translateX(0);
    }

    50% {

        transform:
            skewX(-7deg)
            translateX(-4px);
    }
}


/* =========================================
   CRITICAL — 01
========================================= */

.critical {

    animation:
        criticalPulse
        0.16s
        steps(2)
        infinite;
}


@keyframes criticalPulse {

    0% {

        filter:
            brightness(1);
    }

    50% {

        filter:
            brightness(1.35)
            contrast(1.15);
    }

    100% {

        filter:
            brightness(0.9);
    }
}


.critical .baby-base {

    filter:
        contrast(1.4)

        drop-shadow(
            0 0 35px
            rgba(91,23,100,0.55)
        );
}


.critical .baby-glitch-one {

    opacity: 0.75;

    animation:
        criticalGlitchOne
        0.12s
        steps(2)
        infinite;
}


.critical .baby-glitch-two {

    opacity: 0.65;

    animation:
        criticalGlitchTwo
        0.15s
        steps(2)
        infinite;
}


.critical .redirect-main {

    animation:
        redirectCritical
        0.16s
        steps(2)
        infinite;
}


@keyframes redirectCritical {

    0% {

        transform:
            skewX(-4deg)
            translateX(0)
            scaleX(1);
    }

    25% {

        transform:
            skewX(-8deg)
            translateX(-7px)
            scaleX(1.04);
    }

    50% {

        transform:
            skewX(-2deg)
            translateX(8px)
            scaleX(0.98);
    }

    75% {

        transform:
            skewX(-6deg)
            translateX(-4px)
            scaleX(1.02);
    }

    100% {

        transform:
            skewX(-4deg)
            translateX(0)
            scaleX(1);
    }
}


@keyframes criticalGlitchOne {

    0% {

        transform:
            translateX(-12px);
    }

    50% {

        transform:
            translateX(10px);
    }

    100% {

        transform:
            translateX(-6px);
    }
}


@keyframes criticalGlitchTwo {

    0% {

        transform:
            translateX(11px);
    }

    50% {

        transform:
            translateX(-9px);
    }

    100% {

        transform:
            translateX(7px);
    }
}


/* =========================================
   COLLAPSE
========================================= */

.collapse {

    animation:
        collapseScreen
        0.72s
        steps(12)
        forwards;
}


.collapse .brand {

    animation:
        collapseBrand
        0.72s
        steps(10)
        forwards;
}


.collapse .signal {

    animation:
        collapseSignals
        0.72s
        steps(8)
        forwards;
}


.collapse .status,
.collapse .loading,
.collapse .counter {

    animation:
        collapseInterface
        0.72s
        steps(8)
        forwards;
}


.collapse .message {

    animation:
        collapseHeader
        0.72s
        steps(8)
        forwards;
}


@keyframes collapseHeader {

    0% {
        opacity: 1;
    }

    18% {

        transform:
            translateX(-50%)
            rotate(-1deg)
            skewX(-4deg);
    }

    30% {
        opacity: 0.15;
    }

    45% {

        opacity: 1;

        transform:
            translateX(-50%)
            rotate(1deg)
            skewX(5deg);
    }

    60% {
        opacity: 0.2;
    }

    78% {

        opacity: 1;

        transform:
            translateX(-50%)
            rotate(-2deg)
            skewX(-7deg)
            scaleY(1.12);
    }

    100% {
        opacity: 0;
    }
}


/* =========================================
   SCREEN COLLAPSE
========================================= */

@keyframes collapseScreen {

    0% {

        background: #A8FA5B;

        filter:
            contrast(1);
    }

    8% {

        background:
            #6d1975;

        filter:
            contrast(2);
    }

    15% {

        background: #000;

        filter:
            contrast(4);
    }

    24% {

        background:
            #A8FA5B;

        filter:
            contrast(2.5);
    }

    32% {

        background: #000;

        filter:
            contrast(5);
    }

    43% {

        background:
            #6d1975;

        filter:
            contrast(3);
    }

    55% {

        background: #000;

        filter:
            contrast(6);
    }

    68% {

        background:
            #A8FA5B;

        filter:
            contrast(4);
    }

    79% {

        background: #000;

        filter:
            contrast(7);
    }

    90% {

        background: #fff;

        filter:
            contrast(3);
    }

    100% {

        background: #000;

        filter:
            brightness(0);
    }
}


/* =========================================
   BRAND COLLAPSE
========================================= */

@keyframes collapseBrand {

    0% {

        transform:
            scale(1)
            translateX(0);

        filter:
            contrast(1);
    }

    12% {

        transform:
            scale(1.04)
            translateX(-10px);

        filter:
            contrast(2);
    }

    25% {

        transform:
            scale(0.96)
            translateX(13px);

        filter:
            contrast(3);
    }

    38% {

        transform:
            scale(1.08)
            translateX(-14px);

        filter:
            contrast(2);
    }

    52% {

        transform:
            scale(0.9)
            translateX(10px);

        filter:
            contrast(4);
    }

    68% {

        transform:
            scale(1.14)
            translateX(-7px);

        filter:
            contrast(3);
    }

    82% {

        transform:
            scale(0.65)
            translateX(4px);

        opacity: 0.5;
    }

    100% {

        transform:
            scale(0.05)
            translateX(0);

        opacity: 0;
    }
}


/* =========================================
   FINAL BABY DESTRUCTION
========================================= */

.collapse .baby-base {

    animation:
        babyCollapse
        0.72s
        steps(10)
        forwards;
}


.collapse .baby-glitch-one {

    opacity: 1;

    animation:
        collapseGlitchOne
        0.72s
        steps(8)
        forwards;
}


.collapse .baby-glitch-two {

    opacity: 1;

    animation:
        collapseGlitchTwo
        0.72s
        steps(8)
        forwards;
}


@keyframes babyCollapse {

    0% {

        transform:
            translateX(0)
            scale(1);

        opacity: 1;
    }

    12% {

        transform:
            translateX(-18px)
            scale(1.03);

        opacity: 1;
    }

    25% {

        transform:
            translateX(20px)
            scale(0.97);

        opacity: 0.95;
    }

    40% {

        transform:
            translateX(-15px)
            scale(1.06);

        opacity: 0.8;
    }

    55% {

        transform:
            translateX(13px)
            scale(0.92);

        opacity: 0.65;
    }

    70% {

        transform:
            translateX(-9px)
            scale(1.12);

        opacity: 0.4;
    }

    85% {

        transform:
            translateX(5px)
            scale(0.7);

        opacity: 0.18;
    }

    100% {

        transform:
            translateX(0)
            scale(0);

        opacity: 0;
    }
}


@keyframes collapseGlitchOne {

    0% {
        transform:
            translateX(-15px);
    }

    20% {
        transform:
            translateX(25px);
    }

    40% {
        transform:
            translateX(-30px);
    }

    60% {
        transform:
            translateX(20px);
    }

    80% {
        transform:
            translateX(-12px);
    }

    100% {
        transform:
            translateX(0)
            scale(0);
    }
}


@keyframes collapseGlitchTwo {

    0% {
        transform:
            translateX(17px);
    }

    20% {
        transform:
            translateX(-27px);
    }

    40% {
        transform:
            translateX(32px);
    }

    60% {
        transform:
            translateX(-18px);
    }

    80% {
        transform:
            translateX(11px);
    }

    100% {
        transform:
            translateX(0)
            scale(0);
    }
}


/* =========================================
   SIGNAL COLLAPSE
========================================= */

@keyframes collapseSignals {

    0% {

        opacity: 1;

        transform:
            translate(0,0);
    }

    15% {

        opacity: 0;

        transform:
            translate(-20px,0);
    }

    30% {

        opacity: 1;

        transform:
            translate(30px,0);
    }

    45% {

        opacity: 0;

        transform:
            translate(-40px,0);
    }

    60% {

        opacity: 1;

        transform:
            translate(20px,0);
    }

    75% {

        opacity: 0;

        transform:
            translate(-60px,0);
    }

    100% {

        opacity: 0;
    }
}


/* =========================================
   INTERFACE COLLAPSE
========================================= */

@keyframes collapseInterface {

    0% {
        opacity: 1;
    }

    30% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }

    70% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* =========================================
   FINAL STATIC
========================================= */

.final-static {

    position: absolute;

    inset: 0;

    z-index: 100;

    pointer-events: none;

    opacity: 0;

    background:

        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,0.1) 0px,
            rgba(255,255,255,0.1) 1px,
            transparent 1px,
            transparent 3px
        );
}


.collapse .final-static {

    opacity: 0.7;

    animation:
        staticBurst
        0.72s
        steps(5)
        forwards;
}


@keyframes staticBurst {

    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    40% {
        opacity: 0.2;
    }

    60% {
        opacity: 0.9;
    }

    80% {
        opacity: 0.4;
    }

    100% {
        opacity: 0;
    }
}


/* =========================================
   BLACKOUT
========================================= */

.blackout {

    background: #000 !important;

    filter:
        brightness(0) !important;
}


.blackout > * {

    opacity: 0 !important;
}


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

@media (max-width: 600px) {

    .brand {
        width: 88vw;
    }

    .brand-mark {
        width: 74%;
    }

    .baby {
        width: 76%;
    }

    .signal {

        font-size: 6px;

        letter-spacing: 0.2em;
    }

    .signal-top {

        top: 5%;

        left: 5%;
    }

    .signal-bottom {

        bottom: 5%;

        left: 5%;
    }

    .signal-right {
        right: 2%;
    }

    .signal-left {
        left: 2%;
    }


    /* -----------------------------------------
       REDIRECTION TITLE
    ----------------------------------------- */

    .message {

        top: 5.5%;

        width: 96%;
    }


    .redirect-small {

        font-size: 6px;

        letter-spacing: 0.42em;

        padding:
            3px 10px 3px 13px;
    }


    .redirect-main {

        font-size: 18px;

        padding:
            5px 13px 7px 13px;

        letter-spacing:
            0.025em;
    }


    .redirect-main::before {

        left: -10px;

        width: 13px;
    }


    .redirect-main::after {

        right: -12px;

        width: 15px;
    }


    /* -----------------------------------------
       STATUS
    ----------------------------------------- */

    .status {

        bottom: 16%;

        gap: 10px;
    }

    .status-text {

        font-size: 6px;

        letter-spacing: 0.35em;
    }

    .status-line {

        width: 18px;
    }


    /* -----------------------------------------
       LOADING
    ----------------------------------------- */

    .loading {

        bottom: 11%;

        width: 150px;
    }


    /* -----------------------------------------
       COUNTER
    ----------------------------------------- */

    .counter {

        bottom: 6.8%;

        min-width: 52px;

        height: 27px;

        padding: 0 10px;

        font-size: 12px;

        background: #6D1975;
    }
}