:root {
    --carvpl-bg: #10152f;
    --carvpl-ice: #eefbff;
    --carvpl-cyan: #25d8f5;
    --carvpl-indigo: #5963ff;
}

html.carvpl-lock,
body.carvpl-lock {
    overflow: hidden !important;
    overscroll-behavior: none;
}

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

.carvpl {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    isolation: isolate;
    pointer-events: all;
    background: #080d22;
}

/* First-paint state: deliberately quiet. The richer CARV background is introduced by GSAP. */
.carvpl::before {
    content: '';
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: 26vmax;
    height: 26vmax;
    transform: translate(-50%, -50%) scale(.42);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle, rgba(89, 99, 255, .16) 0%, rgba(37, 216, 245, .055) 32%, rgba(8, 13, 34, 0) 72%);
    filter: blur(12px);
    animation: carvpl-boot-bloom 1.45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes carvpl-boot-bloom {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.42); }
    35% { opacity: .72; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}

.carvpl__veil,
.carvpl__ambient,
.carvpl__particles,
.carvpl__core,
.carvpl__interaction {
    position: absolute;
    inset: 0;
}

.carvpl__veil {
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    opacity: 0;
    transform: scale(1.035);
    transform-origin: 50% 50%;
    filter: blur(12px) saturate(.88);
    will-change: opacity, transform, filter;
}

/* Original CARV navy / indigo / cyan atmosphere. */
.carvpl__ambient {
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    will-change: opacity;
}

.carvpl__orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    opacity: 0;
    filter: blur(2px);
    will-change: transform, opacity;
}

.carvpl__orb--a {
    width: min(52vw, 780px);
    aspect-ratio: 1;
    left: -12vw;
    top: 15vh;
    background: radial-gradient(circle, rgba(89, 99, 255, .14) 0%, rgba(89, 99, 255, 0) 66%);
}

.carvpl__orb--b {
    width: min(42vw, 640px);
    aspect-ratio: 1;
    right: -8vw;
    top: -8vh;
    background: radial-gradient(circle, rgba(37, 216, 245, .12) 0%, rgba(37, 216, 245, 0) 67%);
}

.carvpl__orb--c {
    width: min(34vw, 520px);
    aspect-ratio: 1;
    left: 50%;
    bottom: -22vh;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(94, 105, 255, .16) 0%, rgba(94, 105, 255, 0) 66%);
}

.carvpl__particles {
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    opacity: 0;
    transform: scale(.985);
    transform-origin: 50% 50%;
    filter: blur(1.6px);
    will-change: opacity, transform, filter;
}

.carvpl__logo-source {
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.carvpl__brand {
    position: absolute;
    left: 50%;
    top: calc(50% - 26px);
    z-index: 2;
    width: min(17.5vw, 210px);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.carvpl__brand-logo {
    display: block;
    width: 100%;
    height: auto;
    max-height: 22vh;
    object-fit: contain;
    opacity: 0;
    visibility: hidden;
    transform: scale(.965);
    transform-origin: 50% 50%;
    filter: blur(8px) contrast(1.22);
    will-change: opacity, transform, filter;
    user-select: none;
    -webkit-user-drag: none;
}

.carvpl__core {
    --carvpl-ring-size: min(46vw, 700px);
    --carvpl-inner-ring-size: min(31vw, 470px);
    z-index: 3;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.carvpl__halo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.2);
    opacity: 0;
    will-change: transform, opacity, border-color, box-shadow, filter;
}

/* Both circles are intentionally more visible than in 1.4.3. */
.carvpl__halo--outer {
    width: var(--carvpl-ring-size);
    aspect-ratio: 1;
    border: 1px solid rgba(108, 122, 255, .30);
    box-shadow:
        0 0 105px rgba(89, 99, 255, .10),
        inset 0 0 72px rgba(37, 216, 245, .05);
}

.carvpl__halo--inner {
    width: var(--carvpl-inner-ring-size);
    aspect-ratio: 1;
    border: 1px solid rgba(56, 205, 241, .34);
    box-shadow: 0 0 58px rgba(37, 216, 245, .14);
}

/* A short moving arc draws each ring into view before the normal pulse takes over. */
.carvpl__ring-sweep {
    position: absolute;
    inset: -2px;
    display: block;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: rgba(239, 248, 255, .94);
    border-right-color: rgba(73, 213, 246, .42);
    opacity: 0;
    transform: rotate(-120deg);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 6px rgba(83, 124, 255, .48));
    pointer-events: none;
    will-change: transform, opacity;
}

.carvpl__halo--inner .carvpl__ring-sweep {
    border-top-color: rgba(224, 251, 255, .96);
    border-right-color: rgba(37, 216, 245, .48);
    filter: drop-shadow(0 0 5px rgba(37, 216, 245, .42));
}

.carvpl__orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: var(--carvpl-ring-size);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

.carvpl__orbit-spinner {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    transform-origin: 50% 50%;
    will-change: transform;
}

.carvpl__orbit-marker {
    position: absolute;
    left: 50%;
    top: -2px;
    width: 4px;
    height: 4px;
    transform: translateX(-50%) scale(.72);
    transform-origin: 50% 50%;
    border-radius: 50%;
    background: #e4eaff;
    opacity: 0;
    will-change: opacity, transform, filter, box-shadow;
    box-shadow:
        0 0 7px rgba(172, 184, 255, .58),
        0 0 14px rgba(96, 119, 255, .25);
}

.carvpl__orbit-marker::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 1.5px;
    width: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(151, 164, 255, .48) 100%);
    transform-origin: 100% 50%;
    pointer-events: none;
}

.carvpl__interaction {
    z-index: 4;
    pointer-events: none;
}

/* Text-only interaction: the hit-area is comfortable but the visual remains minimal. */
.carvpl__enter {
    position: absolute;
    left: 50%;
    top: calc(50% + clamp(98px, 12vh, 138px));
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 52px;
    padding: 18px 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    will-change: transform, opacity;
    -webkit-tap-highlight-color: transparent;
}

.carvpl__enter-label {
    display: inline-block;
    font-size: clamp(10px, .76vw, 11.5px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: .325em;
    white-space: nowrap;
    color: transparent;
    background-image: linear-gradient(90deg, #8f9cff 0%, #f2f5ff 50%, #8998ff 100%);
    background-size: 100% 100%;
    background-position: 50% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    opacity: .48;
    transform: scale(.985);
    transform-origin: 50% 50%;
    filter: drop-shadow(0 0 2px rgba(89, 99, 255, .08));
    will-change: opacity, transform, filter;
}

.carvpl.carvpl--ready {
    cursor: pointer;
}

.carvpl__enter::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 0;
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(135, 149, 255, .62), transparent);
    opacity: 0;
    pointer-events: none;
}

.carvpl__enter:hover,
.carvpl__enter:focus-visible {
    outline: none;
}

.carvpl__enter:hover .carvpl__enter-label,
.carvpl__enter:focus-visible .carvpl__enter-label {
    opacity: 1 !important;
    filter: drop-shadow(0 0 14px rgba(102, 118, 255, .38)) !important;
}

.carvpl__enter:hover::after,
.carvpl__enter:focus-visible::after {
    width: 58%;
    opacity: .58;
    transition: width .34s ease, opacity .34s ease;
}

.carvpl__enter:focus-visible {
    box-shadow: 0 0 0 1px rgba(126, 139, 235, .20);
}

.carvpl__enter[disabled] {
    cursor: default;
}

@media (max-width: 1024px) {
    .carvpl__core {
        --carvpl-ring-size: min(64vw, 600px, 76vh);
        --carvpl-inner-ring-size: min(44vw, 410px, 56vh);
    }

    .carvpl__brand {
        top: calc(50% - 24px);
        width: min(24vw, 195px);
    }
}

@media (max-width: 767px) {
    .carvpl__orb--a {
        width: 92vw;
        left: -42vw;
        top: 22vh;
    }

    .carvpl__orb--b {
        width: 76vw;
        right: -34vw;
        top: -3vh;
    }

    .carvpl__orb--c {
        width: 72vw;
        bottom: -24vh;
    }

    .carvpl__core {
        --carvpl-ring-size: min(82vw, 500px, 72vh);
        --carvpl-inner-ring-size: min(58vw, 350px, 51vh);
    }

    .carvpl__brand {
        top: calc(50% - 22px);
        width: min(30vw, 132px, 23vh);
    }

    .carvpl__enter {
        top: calc(50% + clamp(54px, 8.5vh, 68px));
        min-width: 154px;
        min-height: 46px;
        max-width: calc(100vw - 28px);
        padding: 14px 14px;
    }

    .carvpl__enter-label {
        font-size: clamp(8.7px, 2.45vw, 9.8px);
        letter-spacing: .245em;
    }
}

@media (max-width: 420px) {
    .carvpl__core {
        --carvpl-ring-size: min(80vw, 390px, 68vh);
        --carvpl-inner-ring-size: min(56vw, 275px, 48vh);
    }

    .carvpl__brand {
        top: calc(50% - 20px);
        width: min(29vw, 118px, 21vh);
    }

    .carvpl__enter {
        top: calc(50% + clamp(48px, 8vh, 60px));
        min-width: 146px;
        min-height: 42px;
        max-width: calc(100vw - 22px);
        padding: 12px 10px;
    }

    .carvpl__enter-label {
        font-size: clamp(8.2px, 2.55vw, 9px);
        letter-spacing: .215em;
    }
}

/* Landscape phones / short screens. */
@media (max-height: 560px) {
    .carvpl__core {
        --carvpl-ring-size: min(70vh, 74vw, 430px);
        --carvpl-inner-ring-size: min(50vh, 52vw, 305px);
    }

    .carvpl__brand {
        top: calc(50% - 18px);
        width: min(23vh, 23vw, 132px);
    }

    .carvpl__enter {
        top: calc(50% + 46px);
        min-height: 38px;
        max-width: calc(100vw - 24px);
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .carvpl__enter-label {
        font-size: 8.6px;
        letter-spacing: .22em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carvpl::before {
        animation: none !important;
        display: none !important;
    }

    .carvpl__veil {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .carvpl__ambient {
        opacity: .35 !important;
    }

    .carvpl__particles {
        opacity: 0 !important;
        transform: none !important;
        filter: none !important;
    }

    .carvpl__brand-logo {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
    }

    .carvpl__enter-label {
        opacity: .84;
        filter: none !important;
    }
}
