@import url("./styles/fonts.css?v=1a");
@import url("./styles/section.css?v=1a");
@import url("./styles/hero.css?v=1a");

*,
*:after,
*:before {
    box-sizing: inherit;
}

:root {
    --scaler: calc((100vw - 32rem) / 66);

    --c-base: #ffffff;
    --c-base-f: #000000;

    --ff:
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
        "Helvetica Neue", sans-serif;

    /* ---- Fallbacks: Start ----- */
    --c-b-secondary: hsl(0, 0%, 85%);
    --c-b-page: hsl(0, 0%, 85%);
    --c-b-page-transparent: hsla(0, 0%, 85%, 0);
    --c-b-modal: hsl(0, 0%, 85%);
    --c-f-primary: hsl(0, 0%, 0%, 70%);
    --c-f-secondary: hsl(0, 0%, 53%);
    --c-f-hero: hsla(0, 0%, 0%, 50%);
    --c-brand: #4190f1;
    /* ---- Fallbacks: End ----- */

    --c-b-primary: var(--c-base);
    --c-b-secondary: oklch(from var(--c-base) calc(l * 0.85) c h);
    --c-b-page: oklch(from var(--c-base) calc(l * 0.85) c h);
    --c-b-page-transparent: oklch(from var(--c-base) l c h / 0);
    --c-b-modal: oklch(from var(--c-base) calc(l * 0.85) c h);
    --c-f-primary: oklch(from var(--c-base-f) l c h / 0.7);
    --c-f-secondary: oklch(from var(--c-base-f) l c h / 0.53);
    --c-f-hero: oklch(from var(--c-base-f) l c h / 0.5);

    --maxWidth: 98rem;
    --maxWidth-text: 74rem;
    --animationEase: 500ms cubic-bezier(0.32, 0.24, 0.15, 1);

    --m: 2rem;
    --l: 4rem;

    --topAngle: 90deg;
    --bottomAngle: 270deg;
}

.dark {
    --c-base: #111111;
    --c-base-f: #ffffff;

    /* ---- Fallbacks: Start ----- */
    --c-b-primary: hsl(0, 0%, 15%);
    --c-b-secondary: hsl(0, 0%, 25%);
    --c-b-page: hsla(0, 0%, 20%, 1);
    --c-b-page-transparent: hsla(0, 0%, 20%, 0);
    --c-b-modal: hsla(0, 0%, 20%, 0.98);
    --c-f-primary: hsl(0, 0%, 0%, 90%);
    --c-f-secondary: hsl(0, 0%, 70%);
    --c-f-hero: hsla(0, 0%, 0%, 70%);
    --c-brand: #4190f1;
    /* ---- Fallbacks: End ----- */

    --c-b-primary: oklch(from var(--c-base) calc(l + 0.15) c h);
    --c-b-secondary: oklch(from var(--c-base) calc(l + 0.25) c h);
    --c-b-page: oklch(from var(--c-base) calc(l + 0.2) c h);
    --c-b-page-transparent: oklch(from var(--c-base) calc(l + 0.2) c h / 0);
    --c-b-modal: oklch(from var(--c-base) calc(l + 0.2) c h);
    --c-f-primary: oklch(from var(--c-base-f) l c h / 0.9);
    --c-f-secondary: oklch(from var(--c-base-f) l c h / 0.7);
    --c-f-hero: oklch(from var(--c-base-f) l c h / 0.7);
}

html {
    background: var(--c-b-page);
    box-sizing: border-box;
    font-family: var(--ff);
    font-size: 62.5%;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    width: 100dvw;
    overflow-x: clip;
}

body {
    color: var(--c-f-secondary);
    margin: 0;
    padding: 0;
}

::-moz-selection {
    background: var(--c-brand);
    color: var(--c-base-f);
    text-shadow: none;
}

::selection {
    background: var(--c-brand);
    color: var(--c-base-f);
    text-shadow: none;
}

a {
    color: var(--c-base-f);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: underline;
    text-decoration-color: var(--c-brand);
    text-decoration-thickness: 0.08em;
    text-decoration-skip-ink: none;
    text-decoration-style: wavy;
    text-underline-offset: 0.3em;
    position: relative;
    outline: none !important;
}

a:before {
    content: "";
    border-radius: 1rem;
    border: 0.3rem solid var(--c-brand);
    display: inline-block;
    height: calc(100% + 2rem);
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity var(--animationEase);
    width: calc(100% + 2rem);
    z-index: -1;
    will-change: opacity;
    contain: layout style;
}

a:visited {
    color: var(--c-base-f);
    text-decoration-color: var(--c-brand);
}

a:hover {
    color: var(--c-brand);
    transition: 250ms color ease-out;
    text-decoration-color: var(--c-brand);
}

a:hover:before,
a:active:before {
    opacity: 0 !important;
}

a:focus:before {
    opacity: 1;
}

.ToolsContainer {
    max-width: var(--maxWidth-text);
    margin: 0 auto;
    padding: 0 4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.ToolsRow {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: var(--m);
}

.ToolsRow a {
    font-size: 1.6rem;
}

.Welcome {
    min-height: unset;
    align-items: unset;
    max-width: var(--maxWidth);
    margin-left: auto;
    margin-right: auto;
    padding-right: var(--l);
    padding-left: var(--l);
    padding-top: clamp(15rem, calc(15rem + 5 * var(--scaler)), 20rem);
    padding-bottom: clamp(0rem, calc(3rem + 9 * var(--scaler)), 12rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-rows: auto;
    gap: var(--l);
    z-index: 200;
}

.Welcome p {
    grid-row: span 2;
}

.ThankYouFooter {
    min-height: unset;
    align-items: unset;
    max-width: var(--maxWidth);
    margin-left: auto;
    margin-right: auto;
    padding-right: var(--l);
    padding-left: var(--l);
    padding-top: clamp(15rem, calc(15rem + 5 * var(--scaler)), 20rem);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
    padding-bottom: 40dvh;
    z-index: 0;
}

.ThankYouFooter:before {
    height: 100%;
}

.Thanks--animated {
    opacity: 0;
    transform: translateY(5rem);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
    will-change: opacity, transform;
    contain: layout style;
}

.Thanks--visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

.ThankYouFooter p {
    opacity: 0;
    transform: translateY(3rem);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
    transition-delay: 0.3s;
    will-change: opacity, transform;
    contain: layout style;
}

.ThankYouFooter.footer-animated p {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

.ThankYouFooter a {
    z-index: 3;
}

.Welcome {
    pointer-events: none;
}

.Welcome > * {
    pointer-events: auto;
}

.Welcome h2 {
    opacity: 0;
    transform: translateY(5rem);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
    will-change: opacity, transform;
    contain: layout style;
}

.Welcome h2.welcome-h2-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

.Welcome-span1,
.Welcome-span2,
.Welcome-span3 {
    display: inline-block;
    opacity: 0;
    transform: translateY(5rem);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
    will-change: opacity, transform;
    contain: layout style;
}

.Welcome-span1 {
    transition-delay: 0.2s;
}

.Welcome-span2 {
    transition-delay: 0.4s;
}

.Welcome-span3 {
    transition-delay: 0.6s;
}

.Welcome.welcome-animated .Welcome-span1,
.Welcome.welcome-animated .Welcome-span2,
.Welcome.welcome-animated .Welcome-span3 {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation-duration: 300ms;
}

.panel-location-mobile {
    display: inline;
}

.panel-location-desktop {
    display: none;
}

@media (min-width: 820px) {
    .panel-location-mobile {
        display: none;
    }

    .panel-location-desktop {
        display: inline;
    }
}

.Truepad {
    position: relative;
    z-index: 1;
}

.Zenlist {
    position: relative;
    z-index: 2;
}

.Realtor {
    position: relative;
    z-index: 3;
}