@layer components {
    .bridge-hero {
        position: relative;
        overflow: hidden;
        background: var(--sky-deep);
        color: var(--paper);
        border-radius: var(--radius-l);
        padding: var(--space-6) var(--space-5) 0;
        display: grid;
        gap: var(--space-5);
    }

    .bridge-scene {
        position: absolute;
        inset: 0;
        pointer-events: none;
    }

    .bridge-hero::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        height: 45%;
        background: radial-gradient(120% 140% at 50% 100%, var(--wheat-tint) 0%, transparent 70%);
        opacity: 0.5;
        pointer-events: none;
    }

    .bridge-svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .bridge-pylons {
        translate: 0 var(--hero-pylon-shift, 0);
    }

    .bridge-pylon {
        fill: var(--wheat);
        opacity: 0.8;
        transform-origin: center 252px;
    }

    .bridge-cable {
        fill: none;
        stroke: var(--wheat);
        stroke-width: 4;
        stroke-linecap: round;
        translate: 0 var(--hero-cable-shift, 0);
    }

    .bridge-hangers line {
        stroke: var(--wheat);
        stroke-width: 1.5;
        opacity: 0.55;
    }

    .bridge-deck {
        stroke: var(--wheat);
        stroke-width: 5;
        stroke-linecap: round;
    }

    .bridge-copy {
        position: relative;
        display: grid;
        gap: var(--space-4);
        max-width: 36rem;
        padding-block: var(--space-6) var(--space-9);
    }

    .bridge-headline {
        margin: 0;
        font-family: var(--font-display);
        font-size: clamp(2.125rem, 1.35rem + 3.4vw, 4rem);
        line-height: var(--line-display);
        display: grid;
    }

    .bridge-headline-line {
        display: block;
        overflow: hidden;
    }

    .bridge-headline-mask {
        display: inline-block;
        will-change: transform;
    }

    .bridge-headline-accent {
        color: var(--wheat-tint);
    }

    .bridge-lead {
        margin: 0;
        color: var(--sky-tint);
        max-width: 44ch;
    }

    .bridge-search {
        display: flex;
        gap: var(--space-2);
        flex-wrap: wrap;
    }

    .bridge-search-field {
        display: flex;
    }

    .bridge-search-what {
        flex: 2 1 14rem;
    }

    .bridge-search-where {
        flex: 1 1 9rem;
    }

    .bridge-search input {
        flex: 1 1 auto;
        width: 100%;
        min-height: 44px;
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        font: inherit;
        color: var(--soil);
        background: var(--paper);
    }

    .bridge-search input:focus-visible {
        outline: 3px solid var(--wheat);
        outline-offset: 2px;
    }

    .bridge-counts {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
        background: var(--wheat-tint);
        color: var(--soil);
        margin-inline: calc(-1 * var(--space-5));
        padding: 0 var(--space-5) var(--space-5);
    }

    .bridge-counts .stat-plumb-label {
        color: var(--soil-2);
    }

    @media (min-width: 768px) {
        .bridge-counts {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        .bridge-cable {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
        }

        .bridge-deck {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
        }

        .bridge-pylon {
            transform: scaleY(0);
        }

        .bridge-hangers {
            opacity: 0;
        }

        .bridge-headline-mask {
            transform: translateY(110%);
        }

        .bridge-counts .stat-plumb {
            opacity: 0;
            transform: translateY(-18px);
        }

        .is-loaded .bridge-cable,
        .is-loaded .bridge-deck {
            animation: bridge-draw 500ms ease-out forwards;
        }

        .is-loaded .bridge-pylon {
            animation: pylon-rise 300ms ease-out 120ms forwards;
        }

        .is-loaded .bridge-hangers {
            animation: hanger-fade 200ms ease-out 480ms forwards;
        }

        .is-loaded .bridge-headline-line:nth-child(1) .bridge-headline-mask {
            animation: headline-rise 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 460ms forwards;
        }

        .is-loaded .bridge-headline-line:nth-child(2) .bridge-headline-mask {
            animation: headline-rise 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 560ms forwards;
        }

        .is-loaded .bridge-counts .stat-plumb {
            animation: plumb-drop 400ms cubic-bezier(0.34, 1.4, 0.44, 1) forwards;
        }

        .is-loaded .bridge-counts .stat-plumb:nth-child(1) {
            animation-delay: 400ms;
        }

        .is-loaded .bridge-counts .stat-plumb:nth-child(2) {
            animation-delay: 460ms;
        }

        .is-loaded .bridge-counts .stat-plumb:nth-child(3) {
            animation-delay: 520ms;
        }

        .is-loaded .bridge-counts .stat-plumb:nth-child(4) {
            animation-delay: 580ms;
        }
    }

    @keyframes bridge-draw {
        to {
            stroke-dashoffset: 0;
        }
    }

    @keyframes pylon-rise {
        to {
            transform: scaleY(1);
        }
    }

    @keyframes hanger-fade {
        to {
            opacity: 1;
        }
    }

    @keyframes headline-rise {
        to {
            transform: translateY(0);
        }
    }

    @keyframes plumb-drop {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .home-section {
        margin-block-start: var(--space-8);
        display: grid;
        gap: var(--space-5);
    }

    .category-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
        gap: var(--space-3);
    }

    .category-tile {
        position: relative;
        display: grid;
        justify-items: start;
        gap: var(--space-2);
        padding: var(--space-4);
        min-height: 44px;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        text-decoration: none;
        color: inherit;
        overflow: hidden;
        transition: translate 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }

    .category-tile::after {
        content: "";
        position: absolute;
        inset-block-start: 0;
        inset-inline: 0;
        height: 3px;
        background: var(--wheat);
        scale: 0 1;
        transform-origin: left;
        transition: scale 200ms ease;
    }

    .category-tile:hover,
    .category-tile:focus-visible {
        translate: 0 -3px;
        border-color: var(--sky);
        box-shadow: var(--shadow-2);
    }

    .category-tile:hover::after,
    .category-tile:focus-visible::after {
        scale: 1 1;
    }

    .category-tile-icon {
        display: inline-flex;
        transition: translate 200ms ease, color 200ms ease;
    }

    .category-tile:hover .category-tile-icon {
        translate: 0 -2px;
    }

    .category-tile .icon {
        color: var(--sky);
    }

    .category-tile-invite-card {
        background: var(--haze);
        border-style: dashed;
    }

    .category-tile-invite-card .icon {
        color: var(--moss);
    }

    .category-tile-name {
        font-weight: 600;
    }

    .category-tile-count {
        font-family: var(--font-data);
        color: var(--sky-deep);
        font-size: var(--size-small);
        font-weight: 500;
    }

    .category-tile-invite {
        color: var(--moss);
        font-size: var(--size-small);
    }

    .strip-row {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
        gap: var(--space-3);
    }

    .strip-card {
        display: grid;
        gap: var(--space-1);
        padding: var(--space-4);
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
        text-decoration: none;
        color: inherit;
        transition: transform 120ms ease, border-color 120ms ease;
    }

    .strip-card:hover,
    .strip-card:focus-visible {
        transform: translateY(-2px);
        border-color: var(--sky);
    }

    .strip-card-when {
        font-family: var(--font-data);
        color: var(--sky-deep);
        font-size: var(--size-small);
    }

    .strip-card-title {
        font-weight: 600;
    }

    .strip-card-where {
        color: var(--fog);
        font-size: var(--size-small);
    }

    .map-teaser {
        grid-template-columns: 1fr;
        align-items: center;
        background: var(--sky-tint);
        border-radius: var(--radius-l);
        padding: var(--space-6);
    }

    .map-teaser-copy {
        display: grid;
        gap: var(--space-3);
        justify-items: start;
    }

    .map-teaser-art {
        display: none;
        color: var(--sky);
    }

    .map-teaser-art .icon {
        width: 96px;
        height: 96px;
    }

    @media (min-width: 768px) {
        .map-teaser {
            grid-template-columns: 1fr auto;
        }

        .map-teaser-art {
            display: block;
        }
    }

    .add-band {
        background: var(--soil);
        color: var(--haze);
        border-radius: var(--radius-l);
        padding: var(--space-6);
        justify-items: start;
        gap: var(--space-3);
    }

    .add-band h2 {
        margin: 0;
        color: var(--paper);
    }

    .add-band p {
        margin: 0;
    }

    .span-marker {
        display: none;
    }

    @media (min-width: 1024px) {
        .span-marker {
            display: block;
            position: absolute;
            inset-inline-start: -8px;
            top: calc(var(--span-progress, 0) * 100%);
            width: 14px;
            height: 14px;
            border-radius: var(--radius-round);
            background: var(--wheat);
            border: 3px solid var(--paper);
            box-shadow: var(--shadow-1);
        }
    }
}