body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
    font-family: 'Jura', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

:root {
    --bg-base: #1c0433;
    --bg-gradient-a: #3a0a6b;
    --bg-gradient-b: #280b45;
    --bg-gradient-c: #4c1187;
    --aqua-rgb: 168, 85, 247;
    --green-rgb: 217, 70, 239;
    --blue-rgb: 232, 121, 249;
    --teal-rgb: 232, 121, 249;
    --ribbon-light-rgb: 250, 235, 255;
}

.aero-bg {
    z-index: -1;
    background: linear-gradient(135deg, var(--bg-gradient-a) 0%, var(--bg-gradient-c) 50%, var(--bg-gradient-b) 100%);
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.aero-bg:before {
    content: "";
    background: radial-gradient(ellipse 70% 50% at 20% 30%, rgba(var(--aqua-rgb), 0.14) 0%, transparent 60%), radial-gradient(ellipse 60% 40% at 80% 70%, rgba(var(--green-rgb), 0.12) 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 60% 10%, rgba(var(--blue-rgb), 0.09) 0%, transparent 60%);
    animation: 18s ease-in-out infinite alternate aurora-shift;
    position: absolute;
    inset: -50%;
}

.aero-bg:after {
    content: "";
    background: radial-gradient(ellipse 45% 55% at 75% 25%, rgba(var(--teal-rgb), 0.09) 0%, transparent 55%), radial-gradient(ellipse 55% 35% at 25% 75%, rgba(var(--green-rgb), 0.07) 0%, transparent 55%);
    animation: 24s ease-in-out infinite alternate-reverse aurora-shift;
    position: absolute;
    inset: -50%;
}

@keyframes aurora-shift {
    0% { transform: translate(0%) rotate(0); }
    33% { transform: translate(3%, -4%) rotate(8deg); }
    66% { transform: translate(-4%, 3%) rotate(-5deg); }
    to { transform: translate(2%, -2%) rotate(12deg); }
}

.vista-ribbon-wrap {
    pointer-events: none;
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.vista-ribbon {
    mix-blend-mode: screen;
    pointer-events: none;
    border-radius: 2px;
    width: 240%;
    position: absolute;
    left: -70%;
}

.vista-ribbon-1 {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--aqua-rgb), 0) 5%, rgba(var(--aqua-rgb), 0.25) 22%, rgba(var(--ribbon-light-rgb), 0.55) 40%, rgba(var(--green-rgb), 0.3) 58%, rgba(var(--teal-rgb), 0.18) 74%, rgba(var(--aqua-rgb), 0) 90%, transparent 100%);
    filter: blur(12px);
    height: 110px;
    animation: 26s ease-in-out infinite ribbon-arc1;
    top: 58%;
    transform: rotate(-8deg);
    opacity: 0.8;
}

.vista-ribbon-2 {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--blue-rgb), 0) 8%, rgba(var(--blue-rgb), 0.22) 28%, rgba(var(--ribbon-light-rgb), 0.45) 48%, rgba(var(--aqua-rgb), 0.2) 66%, rgba(var(--blue-rgb), 0) 88%, transparent 100%);
    filter: blur(8px);
    height: 52px;
    animation: 34s ease-in-out -10s infinite ribbon-arc2;
    top: 45%;
    transform: rotate(-12deg);
    opacity: 0.75;
}

.vista-ribbon-3 {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--green-rgb), 0) 10%, rgba(var(--green-rgb), 0.2) 32%, rgba(var(--ribbon-light-rgb), 0.38) 50%, rgba(var(--teal-rgb), 0.18) 68%, rgba(var(--green-rgb), 0) 88%, transparent 100%);
    filter: blur(7px);
    height: 40px;
    animation: 42s ease-in-out -18s infinite ribbon-arc3;
    top: 74%;
    transform: rotate(-5deg);
    opacity: 0.7;
}

.vista-ribbon-4 {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--ribbon-light-rgb), 0) 15%, rgba(var(--ribbon-light-rgb), 0.32) 40%, rgba(var(--aqua-rgb), 0.22) 60%, rgba(var(--ribbon-light-rgb), 0) 85%, transparent 100%);
    filter: blur(5px);
    height: 22px;
    animation: 20s ease-in-out -6s infinite ribbon-arc1;
    top: 36%;
    transform: rotate(-15deg);
    opacity: 0.65;
}

.vista-flare {
    background: radial-gradient(ellipse 80% 70% at 50% 100%, rgba(var(--aqua-rgb), 0.2) 0%, rgba(var(--teal-rgb), 0.14) 30%, rgba(var(--blue-rgb), 0.08) 60%, transparent 100%);
    filter: blur(22px);
    mix-blend-mode: screen;
    pointer-events: none;
    width: 70vw;
    height: 50vh;
    animation: 14s ease-in-out infinite alternate flare-breathe;
    position: absolute;
    bottom: -25vh;
    left: 50%;
    transform: translate(-50%);
}

@keyframes ribbon-arc1 {
    0% { opacity: 0; transform: rotate(-8deg) translate(-4%); }
    8% { opacity: 1; }
    45% { opacity: 0.9; transform: rotate(-5deg) translate(3%); }
    55% { opacity: 0.85; transform: rotate(-6deg) translate(4%); }
    92% { opacity: 1; }
    to { opacity: 0; transform: rotate(-9deg) translate(-3%); }
}

@keyframes ribbon-arc2 {
    0% { opacity: 0; transform: rotate(-12deg) translate(5%); }
    8% { opacity: 0.9; }
    50% { opacity: 0.8; transform: rotate(-8deg) translate(-3%); }
    92% { opacity: 0.9; }
    to { opacity: 0; transform: rotate(-13deg) translate(4%); }
}

@keyframes ribbon-arc3 {
    0% { opacity: 0; transform: rotate(-5deg) translate(-6%); }
    10% { opacity: 0.85; }
    50% { opacity: 0.75; transform: rotate(-3deg) translate(5%); }
    90% { opacity: 0.85; }
    to { opacity: 0; transform: rotate(-6deg) translate(-5%); }
}

@keyframes flare-breathe {
    0% { opacity: 0.5; transform: translate(-50%) scale(0.92); }
    50% { opacity: 1; transform: translate(-50%) scale(1.08); }
    to { opacity: 0.6; transform: translate(-50%) scale(1); }
}

#center-image {
    z-index: 2;
    width: 9vw;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
    animation: fadeIn 2s ease-out;
}

#center-text {
    z-index: 2;
    font-size: clamp(1rem, 2vw, 1.6rem);
    font-weight: 300;
    letter-spacing: 3px;
    margin: 0;
    text-transform: lowercase;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
    background: linear-gradient(135deg, #fff 0%, #a0a0b0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    user-select: none;
    animation: fadeIn 2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}