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

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

:root {
    --background: #0b101b;
    --background-secondary: #111827;
    --surface: #151e30;
    --surface-light: #1b263b;

    --text-primary: #f4f6fb;
    --text-secondary: #9da8ba;
    --text-muted: #707b8e;

    --primary: #7568ff;
    --primary-light: #9a91ff;
    --primary-dark: #574bd9;

    --border: rgba(255, 255, 255, 0.08);
    --border-light: rgba(255, 255, 255, 0.12);

    --success: #58d68d;
}

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    min-height: 100vh;

    font-family: "Lato", sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;

    color: var(--text-primary);

    background:
        radial-gradient(
            circle at 10% 15%,
            rgba(30, 112, 150, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(117, 104, 255, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #080c14 0%,
            #0d1422 45%,
            #10101d 100%
        );

    overflow-x: hidden;
}


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

.redirect-page {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    align-items: center;

    padding: 3rem 2rem 2.5rem;
}


/* =========================================
   SUBTLE BACKGROUND GRID
========================================= */

.redirect-page::before {
    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    opacity: 0.25;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.8),
            transparent
        );

    z-index: 0;
}


/* =========================================
   BRAND / LOGO
========================================= */

.brand {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 115rem;

    display: flex;
    align-items: center;

    margin-bottom: 2.5rem;
}

.datavoid-logo {
    width: 22rem;
    max-width: 100%;

    height: auto;

    display: block;

    object-fit: contain;
}


/* =========================================
   REDIRECT CARD
========================================= */

.redirect-card {
    position: relative;

    z-index: 1;

    width: 100%;
    max-width: 115rem;

    overflow: hidden;

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

    border-radius: 2.8rem;

    background:
        linear-gradient(
            135deg,
            rgba(23, 32, 50, 0.92),
            rgba(12, 18, 30, 0.94)
        );

    box-shadow:
        0 3rem 10rem rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.03);

    backdrop-filter: blur(20px);
}


/* =========================================
   CONTENT LAYOUT
========================================= */

.content-wrapper {
    position: relative;

    min-height: 58rem;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    align-items: center;
}


/* =========================================
   TEXT CONTENT
========================================= */

.text-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 60rem;

    padding: 7rem;
}


/* =========================================
   SECURE REDIRECT BADGE
========================================= */

.status {
    display: inline-flex;

    align-items: center;

    gap: 0.9rem;

    padding: 0.9rem 1.5rem;

    border: 1px solid rgba(117, 104, 255, 0.22);

    border-radius: 10rem;

    background:
        rgba(117, 104, 255, 0.08);

    color: var(--primary-light);

    font-size: 1.15rem;
    font-weight: 900;

    letter-spacing: 0.15rem;
}

.status-dot {
    width: 0.8rem;
    height: 0.8rem;

    border-radius: 50%;

    background: var(--success);

    box-shadow:
        0 0 0 0.4rem rgba(88, 214, 141, 0.1),
        0 0 1.2rem rgba(88, 214, 141, 0.6);

    animation:
        pulse 1.8s infinite;
}


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

.text-content h1 {
    margin-top: 2.8rem;

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

    font-weight: 900;

    line-height: 1.05;

    letter-spacing: -0.25rem;

    color: var(--text-primary);
}

.text-content h1::first-line {
    color: var(--text-primary);
}


/* =========================================
   DESCRIPTION
========================================= */

.description {
    max-width: 47rem;

    margin-top: 2rem;

    font-size: 1.75rem;

    line-height: 1.75;

    color: var(--text-secondary);
}


/* =========================================
   DESTINATION BOX
========================================= */

.destination {
    position: relative;

    margin-top: 3.2rem;

    padding:
        1.6rem
        2rem;

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

    border-radius: 1.2rem;

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

    overflow: hidden;
}

.destination::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0.4rem;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            var(--primary-light),
            var(--primary)
        );
}

.destination-label {
    display: block;

    margin-bottom: 0.5rem;

    font-size: 1.05rem;

    font-weight: 900;

    letter-spacing: 0.16rem;

    color: var(--text-muted);
}

.destination strong {
    font-size: 1.7rem;

    font-weight: 700;

    color: var(--text-primary);
}


/* =========================================
   PROGRESS SECTION
========================================= */

.progress-section {
    margin-top: 3.2rem;
}

.progress-info {
    display: flex;

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

    gap: 2rem;

    margin-bottom: 1.1rem;

    font-size: 1.3rem;

    color: var(--text-secondary);
}

.progress-info span:last-child {
    color: var(--primary-light);

    font-weight: 900;
}

.progress-track {
    position: relative;

    width: 100%;
    height: 0.9rem;

    overflow: hidden;

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

    border-radius: 10rem;

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

.progress-bar {
    position: relative;

    width: 0%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #536dff,
            #7568ff,
            #a576ff
        );

    box-shadow:
        0 0 1.8rem rgba(117, 104, 255, 0.7);

    transition:
        width 0.1s linear;

    overflow: hidden;
}


/* SHINE EFFECT */

.progress-bar::after {
    content: "";

    position: absolute;

    top: 0;
    left: -40%;

    width: 30%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent
        );

    animation:
        loadingShine 1.5s infinite linear;
}


/* =========================================
   COUNTDOWN
========================================= */

.countdown {
    margin-top: 1.5rem;

    font-size: 1.4rem;

    color: var(--text-muted);
}

.countdown strong {
    color: var(--primary-light);

    font-size: 1.65rem;
    font-weight: 900;
}


/* =========================================
   CONTINUE BUTTON
========================================= */

.continue-button {
    display: inline-flex;

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

    gap: 1rem;

    margin-top: 3rem;

    padding:
        1.5rem
        2.6rem;

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

    border-radius: 1.2rem;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    color: #ffffff;

    font-size: 1.5rem;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 1rem 3rem rgba(87, 75, 217, 0.25);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.continue-button:hover {
    transform:
        translateY(-0.3rem);

    filter:
        brightness(1.08);

    box-shadow:
        0 1.8rem 4rem rgba(87, 75, 217, 0.4);
}

.continue-button:active {
    transform:
        translateY(0);
}

.continue-button:focus-visible {
    outline:
        3px solid rgba(154, 145, 255, 0.6);

    outline-offset: 0.4rem;
}

.arrow {
    font-size: 2rem;

    line-height: 1;

    transition:
        transform 0.2s ease;
}

.continue-button:hover .arrow {
    transform:
        translateX(0.5rem);
}


/* =========================================
   SVG ILLUSTRATION AREA
========================================= */

.illustration {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 58rem;

    display: flex;

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

    padding: 4rem;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(117, 104, 255, 0.1),
            transparent 55%
        );
}


/* DIVIDING LINE */

.illustration::before {
    content: "";

    position: absolute;

    top: 10%;
    left: 0;

    width: 1px;
    height: 80%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, 0.08),
            transparent
        );
}


/* GLOW BEHIND SVG */

.illustration::after {
    content: "";

    position: absolute;

    width: 35rem;
    height: 35rem;

    border-radius: 50%;

    background:
        rgba(117, 104, 255, 0.1);

    filter:
        blur(8rem);

    pointer-events: none;

    z-index: 0;
}

.illustration svg {
    position: relative;

    z-index: 1;

    display: block;

    width: 100%;
    max-width: 50rem;

    height: auto;

    filter:
        drop-shadow(
            0 2rem 4rem
            rgba(0, 0, 0, 0.3)
        );
}


/* =========================================
   SECURITY NOTE
========================================= */

.security-note {
    position: relative;

    z-index: 2;

    margin-top: 2.5rem;

    font-size: 1.25rem;

    color: var(--text-muted);

    text-align: center;
}

.lock {
    margin-right: 0.6rem;

    font-size: 1.4rem;
}


/* =========================================
   EXISTING SVG ANIMATIONS
========================================= */

#clock {
    animation:
        clockHand 5s infinite linear;

    transform-box: fill-box;
    transform-origin: bottom;
}

#leftTree,
#righTree {
    animation:
        tree 2s ease-in-out infinite alternate;

    transform-box: fill-box;
    transform-origin: bottom;
}

#man {
    animation:
        manBody 1s ease-in-out infinite alternate;

    transform-box: fill-box;
    transform-origin: bottom;
}

#pc-circle {
    fill: #6ace66;

    stroke-width: 4;

    animation:
        change-light 4s linear infinite alternate;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes clockHand {

    from {
        transform:
            rotateZ(0deg);
    }

    to {
        transform:
            rotateZ(-360deg);
    }

}


@keyframes manBody {

    from {
        transform:
            rotateX(0deg);
    }

    to {
        transform:
            rotateX(10deg);
    }

}


@keyframes tree {

    from {
        transform:
            rotateZ(10deg);
    }

    to {
        transform:
            rotateZ(-20deg);
    }

}


@keyframes change-light {

    0% {
        stroke: #cd61f8;
    }

    25% {
        stroke: #6ace66;
    }

    75% {
        stroke: #2995c0;
    }

    100% {
        stroke: #e92949;
    }

}


@keyframes pulse {

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

        opacity: 1;
    }

    50% {
        transform:
            scale(1.35);

        opacity: 0.55;
    }

}


@keyframes loadingShine {

    from {
        left: -40%;
    }

    to {
        left: 120%;
    }

}


/* =========================================
   LARGE SCREENS
========================================= */

@media (min-width: 1400px) {

    .redirect-card {
        max-width: 125rem;
    }

    .text-content {
        padding: 8rem;
    }

    .illustration svg {
        max-width: 55rem;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .content-wrapper {
        grid-template-columns: 1fr;

        min-height: auto;
    }

    .text-content {
        max-width: 70rem;

        margin: auto;

        padding:
            6rem
            6rem
            5rem;
    }

    .illustration {
        min-height: 42rem;

        padding:
            4rem
            6rem;
    }

    .illustration::before {
        top: 0;
        left: 10%;

        width: 80%;
        height: 1px;

        background:
            linear-gradient(
                to right,
                transparent,
                rgba(255, 255, 255, 0.08),
                transparent
            );
    }

    .illustration svg {
        max-width: 42rem;
    }

}


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

@media (max-width: 650px) {

    html {
        font-size: 58%;
    }

    .redirect-page {
        padding:
            2rem
            1.4rem;
    }

    .brand {
        margin-bottom: 2rem;
    }

    .datavoid-logo {
        width: 18rem;
    }

    .redirect-card {
        border-radius: 2rem;
    }

    .text-content {
        padding:
            4rem
            2.5rem;
    }

    .text-content h1 {
        margin-top: 2.2rem;

        font-size: 4.5rem;

        letter-spacing: -0.15rem;
    }

    .description {
        font-size: 1.6rem;
    }

    .destination {
        margin-top: 2.6rem;
    }

    .progress-section {
        margin-top: 2.8rem;
    }

    .progress-info {
        font-size: 1.2rem;
    }

    .continue-button {
        width: 100%;

        padding:
            1.6rem
            2rem;
    }

    .illustration {
        min-height: auto;

        padding:
            4rem
            2rem;
    }

    .illustration svg {
        max-width: 32rem;
    }

    .security-note {
        padding-bottom: 1rem;
    }

}


/* =========================================
   SMALL MOBILE DEVICES
========================================= */

@media (max-width: 400px) {

    .text-content {
        padding:
            3.5rem
            2rem;
    }

    .text-content h1 {
        font-size: 4rem;
    }

    .datavoid-logo {
        width: 16rem;
    }

    .destination strong {
        font-size: 1.5rem;
    }

}


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

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }

}