.accordion {
    transition: grid-template-rows .35s ease;
}

.accordion[aria-expanded="true"] {
    grid-template-rows: 1fr;
}

.accordion[aria-expanded="false"] {
    grid-template-rows: 0fr;
}

.fadeOut {
    opacity: 0;
    transition: opacity 2000ms ease;
}

.fadeIn {
    opacity: 1;
    transition: opacity 1s ease;
}

.dockable {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.8s cubic-bezier(.16, 1, .3, 1), opacity 0.5s ease;
}

.dock-done {
    transform: none !important;
    opacity: 0;
}

.great-vibes-regular {
    font-family: "Great Vibes", cursive;
    font-weight: 400;
    font-style: normal;
}

.caveat {
    font-family: "Caveat", cursive;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

#logo {
    transition: opacity 1s ease;
    /* 1 second fade */
}

header,
#pillRow,
#cards {
    transition: background-color 0.8s ease, border-color 0.8s ease;
}

/* ---- Gallery layout + animation ---- */
.gal-img {
    position: absolute;
    border-radius: 1rem;
    object-fit: cover;
    pointer-events: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .20);
    transition: transform .8s cubic-bezier(.16, 1, .3, 1), opacity .6s ease, box-shadow .3s ease, filter .6s ease;
    will-change: transform, filter;
}

/* default sizes (overridden by position classes) */
.gal-img {
    width: 65%;
    height: 85%;
}

.gal-left,
.gal-right {
    filter: blur(3px) brightness(0.95);
    /* 👈 main effect */
}

/* Center image must stay crisp */
.gal-center {
    filter: none;
}

/* positions from your sketch */
.gal-left {
    transform: translateX(-38%) scale(.78);
    z-index: 5;
    opacity: .85;
}

.gal-center {
    transform: translateX(0) scale(1.08);
    z-index: 10;
    opacity: 1;
}

.gal-right {
    transform: translateX(38%) scale(.78);
    z-index: 5;
    opacity: .85;
}

/* small flourish */
.gal-center:hover {
    transform: translateX(0) scale(1.12);
    box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
}

/* float effect */
@keyframes gentleFloat {
    0% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-6px)
    }

    100% {
        transform: translateY(0)
    }
}

#trio {
    animation: gentleFloat 6s ease-in-out infinite;
}

/* pagination dots */
.gdot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #d6d3d1;
    opacity: .8;
    transition: transform .2s ease, background .2s ease
}

.gdot.active {
    background: #0ea5e9;
    transform: scale(1.2);
}

.gal-img {
    -webkit-user-drag: none;
    user-select: none;
}

#inlineSearchInput {
    transition:
        width .28s cubic-bezier(.16, 1, .3, 1),
        opacity .20s ease,
        padding .28s cubic-bezier(.16, 1, .3, 1);
    overflow: hidden;
    /* text jump avoid */
}

.pills-sticky {
    position: sticky;
    left: 0;
    z-index: 30;
}

mark {
    background: #fff3a3;
    padding: 0 .15em;
    border-radius: .2em;
}