.home h2 {
    font-family: Pickathon;
}

.home {
    --palette-yellow  : #EEDF13;
    --palette-cyan    : #79EBFA;
    --palette-white   : #EEE;
    --palette-pink    : #ED2A79;
    --palette-body    : #4A4A4A;
    background-color: var(--palette-white);
}

.home .promo,
.neighborhoods-intro
{
    padding: 2em;
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    color: var(--palette-body);
    max-width: 970px;
    margin: auto;
}
.neighborhoods-intro {
    flex-direction: row-reverse;
}

.home .promo h2,
.neighborhoods-intro h2 {
    font-size: 64px;
}
.neighborhoods-intro h2 {
    color: var(--palette-body);
}
.home .promo h2 {
    color: var(--palette-pink);
}

.home .promo section, .home .promo aside,
.neighborhoods-intro section, .neighborhoods-intro aside {
    flex: 1;
}
.home .promo aside, .neighborhoods-intro aside {
    display: flex;
    align-items: center;
    justify-content: center;
}

.home .promo aside {
    max-height: 500px;
    align-items: flex-start;
}

.home .promo aside img,
.neighborhoods-intro aside img {
    width: 100%;
    min-width: 300px;
    transform: rotate(-1.7deg);
    box-shadow: 0 0 36px 6px #0004
}

.home .promo aside img {
    transform-origin: top right;
}
.neighborhoods-intro aside a {
    position: relative;
}
.neighborhoods-intro .see-full,
.neighborhood .see-full
{
    display: inline-block;
    position: absolute;
    width: auto;
    height: fit-content;
    background: var(--palette-pink);
    color: white;
    font-family: Pickathon;
    padding: 0.5em;
    border: 3px solid white;
    border-radius: 3px;
    white-space: nowrap;
    text-decoration: none;
}
.neighborhoods-intro .see-full {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.neighborhoods-title {
    display: flex;
    justify-content: center;
}
.neighborhoods-title h2 {
    font-size: 48px;
    color: var(--palette-body);
    text-align: center;
}

/* Fit to single column for mobile */
@media (max-width: 480px) {
    .home .promo aside {
        max-height: 420px;
    }
    .home .promo h2,
    .city h2, .neighborhoods-title h2 {
        font-size: 40px;
        text-align: center;
    }

    .neighborhoods-intro {
        flex-direction: row;
    }
    .home .promo section, .home .promo aside,
    .neighborhoods-intro section, .neighborhoods-intro aside {
        flex: 100%;
    }
}

.neighborhoods {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 3em;
    padding: 2em;
}

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

.city-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    --breakpoint-1: 700px;
    --breakpoint-2: 1200px;
    --breakpoint-3: 70%;
    --breakpoint-4: 85%;

    background-image:
        url(images/2025/city-background-watermark-top-right.svg),
        url(images/2025/city-background-watermark-top-left.svg),
        url(images/2025/city-background-watermark-bottom-right.svg),
        url(images/2025/city-background-watermark-bottom-left.svg),
        linear-gradient(182deg, var(--palette-cyan) var(--breakpoint-1), #0000 calc(var(--breakpoint-1) + 2px)),
        linear-gradient(174deg, var(--palette-yellow) var(--breakpoint-2), #0000 calc(var(--breakpoint-2) + 2px)),
        linear-gradient(178deg, #0000 var(--breakpoint-4), var(--palette-yellow) calc(var(--breakpoint-4) + 2px)),
        linear-gradient(186deg, #0000 var(--breakpoint-3), var(--palette-pink) calc(var(--breakpoint-3) + 2px))
        ;
    background-repeat: no-repeat;
    background-position:
        top 100px right,
        top left,
        bottom right,
        bottom 100px left,
        top, top, top, top;
    background-size: 250px, 150px, 250px, 50px, auto, auto, auto, auto;
}

.neighborhood-tile {
    --angle: -4deg;
    --bar-height: 160px;
    --icon-size: 124px;
    flex-grow: 1;
    aspect-ratio: 1 / 1;
    min-width: calc( min( 100vw / 3, 330px) );
    min-height: 250px;
    max-width: 400px;
    max-height: 400px;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: white !important;
    font-family: "Open Sans", sans-serif;
    box-shadow: 0px 8px 16px 0px #0004;
}

.neighborhood-tile .bar-clip {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--bar-height);
    overflow: hidden;
    z-index: 2;
    pointer-events: none;
}

.neighborhood-tile .color-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 120%;
    background-color: #0DE1E780;
    backdrop-filter: blur(27px);
    transform: rotate(var(--angle));
    transform-origin: bottom left;
    z-index: 1;
}

.neighborhood-tile .body-copy {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0.5em;
    margin-right: 1em;
    margin-left: calc(var(--icon-size) + 0.5em);
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 80%;
    justify-content: center;
}

.neighborhood-tile .body-copy p {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.neighborhood-tile .icon {
    position: absolute;
    top: 0px;
    left: 50px;
    margin-top: calc(var(--bar-height) - var(--icon-size) + 0.5em);
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: rotate(var(--angle));
    z-index: 3;
    pointer-events: none;
}

.neighborhood-tile .icon img {
    margin-bottom: 0.5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.75));
    transform: scale(1.9375);
    transform-origin: top right;
}

.neighborhood-tile .caption {
    text-align: center;
    max-width: var(--icon-size);
    display: flex;
    justify-content: center;
    margin: 0 auto;
    font-size: 30px;
    text-transform: uppercase;
    text-shadow: 4px 4px 4px black;

     /* TODO KRIS:
        Right now, the icon .svg files just contain the icon, not the text, and the
        caption is rendered using the Pickathon font.  Should we use the actual font
        used by in the map pdf design? Or should we extract out the caption for these
        icons from the SVG files in the Figma design?  Or should we just use the
        Pickathon font?
    */
    font-family: Pickathon;
}

/* Bottom text position variant */
.neighborhood-tile.text-position-bottom .bar-clip {
    top: auto;
    bottom: 0;
}
.neighborhood-tile.text-position-bottom .icon {
    top: auto;
    bottom: 57px;
}

.neighborhood-tile.text-position-bottom .color-bar {
    transform-origin: bottom right;
}

.neighborhood-tile.text-position-bottom .body-copy {
    margin-top: 1.0em;
}

/* ----------------------------------- */
#header-carousel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

html {
    margin: auto;
}

#header-carousel .glide__arrow--prev {
    left: 1em;
}
#header-carousel .glide__arrow--next {
    right: 1em;
}
#header-carousel .glide__track {
    height: 100%;
}
#header-carousel .glide__slides {
    height: 100%;
    list-style: none;
}
#header-carousel .glide__slide {
    background: #ccc;
    position: relative;
}
#header-carousel .glide__slide .background {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
}
#header-carousel .glide__slide .content {
    background: #FFFC;
    position: absolute;
    right: 1em;
    bottom: 2em;
    width: 50%;
    padding: 1em;
    margin: 0;
}
#header-carousel .glide__slide .content .desc {
    color: var(--palette-body);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}


#header-carousel .glide__slide .content .noticebut {
    background: #523D32;
}

.header-carousel.controls {
    position: absolute;
    bottom: 1em;
    width: fit-content;
    height: 44px;
    background: #FFFC;
    box-shadow: 0px 2px 12px 0px #0004;
    display: flex;
    border-radius: 0 24px 24px 0;
    --color: #067435;
}
.header-carousel.controls .next-prev {
    display: flex;
    position: absolute;
    left: 30px;
    right: 14px;
    height: 100%;
    justify-content: space-between;
}

.header-carousel.controls .glide__arrow {
    color: var(--color);
    background: transparent;
    min-width: 18px;
    min-height: 18px;
    padding: 0;
    border: 0;
    cursor: pointer;
}
.header-carousel.controls .glide__arrow i {
    font-size: 20px;
}

.header-carousel.controls .glide__bullets {
    display: inline-flex;
    align-items: center;
    margin: 0 56px 0 72px;
    z-index: 1;
    gap: 14px
}
.header-carousel.controls .glide__bullet {
    background-color: rgba(white, 20%);
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid var(--color);
    transition: all 100ms ease-in-out;
    cursor: pointer;
    box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.1);
}
.header-carousel.controls .glide__bullet--active {
    background: var(--color);
}

/* Force the main nav to be on top of carousel */
.neighborhood .headnav,
.home .headnav {
    position: relative;
    z-index: 1;
}

/* Override the min-height for home page carousel */
.neighborhood .frame_top,
.home .frame_top {
    min-height: 480px;
}

/* Move carousel controls out of way for mobile */
@media screen and (max-width: 480px) {
    #header-carousel .headnotice_mobile {
        position: absolute;
        bottom: 3em;
        margin: 0;
        width: 100%;
    }
    .header-carousel.controls {
        bottom: 0;
        left: initial;
        right: initial;
        border-radius: 20px;
        transform: translateX(-50%) translateY( 50% );
        left: 50%;
    }
    .header-carousel.controls .next-prev {
        left: 14px;
        right: 14px;
    }
    .header-carousel.controls .glide__bullets {
        margin: 0 52px;
    }
}

/* Cute animation for home page */
@keyframes tada {
    from     { transform: scale3d(1, 1, 1); }
    20%      { transform: scale3d(1.00, 1.00, 1.00) rotate3d(0, 0, 1, -0.5deg); }
    30%      { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 0.5deg); }
    50%, 60% { transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -0.5deg); }
    to       { transform: scale3d(1, 1, 1); }
}
[data-animate-on][data-animation-delay='1'] {
    transition-delay: 50ms;
}
[data-animate-on][data-animation-delay='2'] {
    transition-delay: 100ms;
}
[data-animate-on][data-animation-delay='3'] {
    transition-delay: 150ms;
}
[data-animate-on][data-animation-delay='4'] {
    transition-delay: 200ms;
}
[data-animate-on][data-animation-delay='5'] {
    transition-delay: 250ms;
}
[data-animate-on][data-animation-delay='6'] {
    transition-delay: 300ms;
}
[data-animate-on][data-animation-delay='7'] {
    transition-delay: 350ms;
}
[data-animate-on][data-animation-delay='8'] {
    transition-delay: 400ms;
}
[data-animate-on][data-animation-delay='9'] {
    transition-delay: 450ms;
}
[data-animate-on][data-animation-delay='10'] {
    transition-delay: 500ms;
}

[data-animate-on=tada].animate-on {
    animation-name: tada;
    animation-delay: 0.25s;
    animation-duration: 0.9s;
}

[data-animate-on] {
    transition-duration: 500ms;
    pointer-events: none;
}
[data-animate-on].animate-on {
    pointer-events: auto;
}

[data-animate-on=zoom-in-up] {
    transform: translate3d(0, 75px, 0) scale(.9);
    transition-property: transform;
}
[data-animate-on=zoom-in-up].animate-on {
    transform: translate3d(0, 0, 0) scale(1);
}