@import '@app/sass/app';

@mixin home-dark {
    .home-shell {
        background:
            radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.02), transparent 40%),
            radial-gradient(circle at 80% 80%, rgba(52, 64, 82, 0.5), transparent 40%),
            linear-gradient(155deg, #0f131a 0%, #131720 50%, #151922 100%);
    }

    .home-grid {
        background-image:
            linear-gradient(rgba(52, 64, 82, 0.35) 1px, transparent 1px),
            linear-gradient(90deg, rgba(52, 64, 82, 0.35) 1px, transparent 1px);
    }

    .home-orb {
        &--a { background: radial-gradient(circle, rgba(52, 64, 82, 0.3) 0%, transparent 65%); }
        &--b { background: radial-gradient(circle, rgba(24, 30, 40, 0.6) 0%, transparent 65%); }
    }

    .home-corner {
        &::before,
        &::after { background: rgba(148, 163, 184, 0.4); }
    }

    .home-kicker {
        color: #94a3b8;

        &__line    { background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.35)); }
        &__line--r { background: linear-gradient(90deg, rgba(148, 163, 184, 0.35), transparent); }
        &__dot     { background: rgba(148, 163, 184, 0.5); }
    }

    .home-quote {
        color: #f3f6fb;
        text-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
    }

    .home-sep {
        > span {
            background: rgba(52, 64, 82, 0.9);
            box-shadow: 0 0 8px rgba(52, 64, 82, 0.5);

            &:nth-child(odd):not(.home-sep__pulse) {
                background: linear-gradient(90deg, transparent, rgba(52, 64, 82, 0.6), transparent);
                box-shadow: none;
            }
        }
    }

    .home-btn {
        background: linear-gradient(135deg, #212938 0%, #1d2431 100%);
        border: 1px solid #344052;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);

        &:hover,
        &:focus {
            box-shadow:
                0 6px 28px rgba(0, 0, 0, 0.45),
                0 0 0 3px rgba(52, 64, 82, 0.5);
        }
    }
}

.home-shell {
    --home-btn-height: 3.6rem;
    --home-btn-radius: 1.4rem;

    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.55), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(45, 49, 66, 0.08), transparent 40%),
        linear-gradient(155deg, #e8edf8 0%, #eef2ff 45%, #dfe6f5 100%);
}

.home-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(27, 58, 107, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 58, 107, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
}

.home-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);

    &--a {
        top: -14rem;
        right: -14rem;
        width: 52rem;
        height: 52rem;
        background: radial-gradient(circle, rgba(45, 49, 66, 0.07) 0%, transparent 65%);
        animation: home-breathe 8s ease-in-out infinite;
    }

    &--b {
        bottom: -12rem;
        left: -12rem;
        width: 44rem;
        height: 44rem;
        background: radial-gradient(circle, rgba(45, 49, 66, 0.05) 0%, transparent 65%);
        animation: home-breathe 11s ease-in-out infinite reverse;
    }
}

@keyframes home-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.12); opacity: 0.75; }
}

.home-corner {
    position: absolute;
    width: 2.2rem;
    height: 2.2rem;
    pointer-events: none;
    opacity: 0.4;

    &::before,
    &::after {
        content: '';
        position: absolute;
        background: rgba(45, 49, 66, 0.7);
    }

    &::before {
        width: 100%;
        height: 1.5px;
        top: 0;
        left: 0;
    }

    &::after {
        width: 1.5px;
        height: 100%;
        top: 0;
        left: 0;
    }

    &--tl { top: 1.8rem; left: 1.8rem; }
    &--tr { top: 1.8rem; right: 1.8rem; transform: scaleX(-1); }
    &--bl { bottom: 1.8rem; left: 1.8rem; transform: scaleY(-1); }
    &--br { bottom: 1.8rem; right: 1.8rem; transform: scale(-1); }
}

.home-body {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.home-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.4rem;
    max-width: min(900px, 92vw);
    text-align: center;
}

.home-kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(45, 49, 66, 0.75);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;

    &__line {
        display: block;
        height: 1px;
        width: 2.8rem;
        background: linear-gradient(90deg, transparent, rgba(45, 49, 66, 0.4));

        &--r {
            background: linear-gradient(90deg, rgba(45, 49, 66, 0.4), transparent);
        }
    }

    &__dot {
        display: block;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(45, 49, 66, 0.6);
    }
}

.home-quote {
    margin: 0;
    font-size: clamp(2rem, 4.8vw, 4.2rem);
    font-weight: 300;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #1b3a6b;
    text-wrap: balance;
    text-shadow: 0 2px 24px rgba(27, 58, 107, 0.08);
}

.home-sep {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    > span {
        display: block;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: rgba(45, 49, 66, 0.55);
        box-shadow: 0 0 8px rgba(45, 49, 66, 0.25);

        &:nth-child(odd):not(.home-sep__pulse) {
            width: 5rem;
            height: 1px;
            border-radius: 0;
            box-shadow: none;
            background: linear-gradient(90deg, transparent, rgba(27, 58, 107, 0.15), transparent);
        }
    }

    &__pulse {
        width: 7px !important;
        height: 7px !important;
        animation: home-dot-pulse 2.4s ease-in-out infinite;
    }
}

@keyframes home-dot-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(45, 49, 66, 0.4); transform: scale(1); }
    50%       { box-shadow: 0 0 16px rgba(45, 49, 66, 0.6), 0 0 32px rgba(45, 49, 66, 0.2); transform: scale(1.3); }
}

.home-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    height: var(--home-btn-height);
    padding: 0 3rem;
    background: linear-gradient(135deg, #2d3142 0%, #1e2233 100%);
    border: none;
    border-radius: var(--home-btn-radius);
    color: #fff;
    font-size: 1.32rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 4px 18px rgba(45, 49, 66, 0.25);
    transition: opacity 0.25s, box-shadow 0.25s, transform 0.2s;

    > span {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
        transform: translateX(-100%);
        animation: home-scan 3.5s ease-in-out infinite;
    }

    > svg {
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    &:hover,
    &:focus {
        outline: none;
        opacity: 0.92;
        transform: translateY(-1px);
        box-shadow:
            0 6px 28px rgba(45, 49, 66, 0.35),
            0 0 0 3px rgba(45, 49, 66, 0.12);

        > svg {
            transform: translateX(5px);
        }
    }
}

@keyframes home-scan {
    0%       { transform: translateX(-100%); }
    60%, 100% { transform: translateX(200%); }
}

[data-theme='dark'] {
    @include home-dark;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme]) {
        @include home-dark;
    }
}

@media (max-width: 768px) {
    .home-shell {
        --home-btn-height: 3.2rem;
    }

    .home-corner {
        width: 1.6rem;
        height: 1.6rem;
    }

    .home-quote {
        font-size: 2rem;
    }

    .home-btn {
        padding: 0 2rem;
    }
}