/* Who Are You homepage only. White, black, Inter, with a personality sequence. */

body.way-home {
    background: #ffffff !important;
    color: #5c5c5c !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}

body.way-home h1,
body.way-home h2,
body.way-home h3,
body.way-home p,
body.way-home a,
body.way-home button {
    font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

body.way-home .way-public-nav {
    background: #000000 !important;
    border-bottom: 0 !important;
    backdrop-filter: none;
}

body.way-home .way-public-nav__item,
body.way-home .way-public-nav__item--login {
    color: #ffffff !important;
    letter-spacing: 0.02em;
    text-transform: none;
    font-weight: 500;
    border-radius: 999px;
    border-color: transparent !important;
}

body.way-home .way-public-nav__item:hover,
body.way-home .way-public-nav__item.is-active {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.14) !important;
}

body.way-home .way-public-nav__item--cta {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #ffffff !important;
}

body.way-home .way-public-nav__item--cta:hover {
    background: #f3f3f3 !important;
    color: #111111 !important;
}

body.way-home .way-public-nav__toggle span {
    background: #ffffff !important;
}

body.way-home .way-hero {
    position: relative;
    overflow: hidden;
    background: #ffffff !important;
}

body.way-home .way-hero > :not(.way-home-world) {
    position: relative;
    z-index: 2;
}

body.way-home .way-home-world {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: 0;
    top: 0;
    width: min(640px, 48vw);
    height: 88%;
    -webkit-mask-image:
        linear-gradient(180deg, #000 0%, #000 62%, transparent 100%),
        linear-gradient(90deg, #000 0%, #000 48%, transparent 86%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(180deg, #000 0%, #000 62%, transparent 100%),
        linear-gradient(90deg, #000 0%, #000 48%, transparent 86%);
    mask-composite: intersect;
}

body.way-home .way-home-scene {
    position: absolute;
    inset: 0;
    width: 118%;
    height: 100%;
    object-fit: cover;
    object-position: 24% center;
    opacity: 0;
    animation: way-scene 12s ease-in-out infinite;
}

body.way-home .way-home-scene:nth-child(1) { animation-delay: 0s; }
body.way-home .way-home-scene:nth-child(2) { animation-delay: -9.6s; }
body.way-home .way-home-scene:nth-child(3) { animation-delay: -7.2s; }
body.way-home .way-home-scene:nth-child(4) { animation-delay: -4.8s; }
body.way-home .way-home-scene:nth-child(5) { animation-delay: -2.4s; }

body.way-home .way-hero::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    right: -12%;
    top: -8%;
    width: min(820px, 58vw);
    height: 92%;
    background:
        radial-gradient(circle at 72% 28%, rgba(96, 150, 230, 0.55), transparent 58%),
        radial-gradient(circle at 48% 48%, rgba(198, 176, 242, 0.42), transparent 62%),
        radial-gradient(circle at 80% 70%, rgba(166, 224, 204, 0.28), transparent 60%);
    filter: blur(28px);
    animation: way-haze 16s ease-in-out infinite;
}

@keyframes way-scene {
    0% { opacity: 1; transform: scale(1.04) translate3d(0, 0, 0); }
    14% { opacity: 1; transform: scale(1.08) translate3d(-1.2%, -1%, 0); }
    20%, 94% { opacity: 0; transform: scale(1.08) translate3d(-1.2%, -1%, 0); }
    100% { opacity: 1; transform: scale(1.04) translate3d(0, 0, 0); }
}

@keyframes way-haze {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}

body.way-home .way-hero__welcome-title,
body.way-home .way-hero__welcome-accent,
body.way-home .way-hero__headline,
body.way-home .way-section__title,
body.way-home .way-pillar__label,
body.way-home .way-step-card h3,
body.way-home .way-step-card h3 .highlight,
body.way-home .way-wheel__segment,
body.way-home .way-wheel-reveal__title,
body.way-home .way-wheel-reveal__title span {
    color: #111111 !important;
    font-weight: 700;
}

body.way-home .way-hero__welcome-lead,
body.way-home .way-hero__verse,
body.way-home .way-section__subtitle,
body.way-home .way-wheel__hint,
body.way-home .way-wheel-reveal__body,
body.way-home .way-step-card p {
    color: #5c5c5c !important;
}

body.way-home .way-btn--gold,
body.way-home .way-btn--gold:hover {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    border-radius: 999px !important;
}

body.way-home .way-btn--outline,
body.way-home .way-btn--outline:hover {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #111111 !important;
    border-radius: 999px !important;
}

body.way-home .way-wheel-reveal__card {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
    box-shadow: 0 12px 32px rgba(17, 17, 17, 0.06) !important;
}

body.way-home .way-wheel-reveal__tag {
    color: #111111 !important;
    border-color: #e6e6e6 !important;
}

body.way-home .way-pillars {
    border-top-color: #e6e6e6;
}

body.way-home .way-pillar__num {
    border-color: #111111;
    color: #111111;
}

body.way-home .way-section--mid,
body.way-home .way-cta-band {
    background: #f6f6f6 !important;
    border-top: 0 !important;
}

body.way-home .way-step-card {
    background: #ffffff !important;
    border: 1px solid #e6e6e6 !important;
}

body.way-home .way-footer {
    background: #000000 !important;
    border-top: 0 !important;
    color: rgba(255, 255, 255, 0.72) !important;
}

@media (max-width: 900px) {
    body.way-home .way-home-world {
        width: 108%;
        height: 36%;
        left: -4%;
        -webkit-mask-image:
            linear-gradient(180deg, #000 0%, #000 24%, transparent 70%),
            linear-gradient(90deg, #000 0%, #000 36%, transparent 78%);
        mask-image:
            linear-gradient(180deg, #000 0%, #000 24%, transparent 70%),
            linear-gradient(90deg, #000 0%, #000 36%, transparent 78%);
    }

    body.way-home .way-hero::after {
        width: 100%;
        opacity: 0.55;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.way-home .way-home-scene,
    body.way-home .way-hero::after {
        animation: none;
    }

    body.way-home .way-home-scene {
        opacity: 0;
    }

    body.way-home .way-home-scene:first-child {
        opacity: 1;
    }
}