/*
 * Homepage -> category morph transition.
 * Loaded only by index.html. The actual category content still comes from the
 * canonical category documents, so direct URLs remain fully functional.
 */

html.home-root,
html.home-root body {
    overflow: hidden !important;
}

body.home-page .content-column {
    cursor: pointer;
}

body.home-page .content-column:focus-visible {
    outline: 2px solid rgba(255,255,255,.9);
    outline-offset: -5px;
}

body.home-page .content-column .overlay-control {
    transition: transform .35s ease, opacity .35s ease;
}

body.home-page .content-wrapper.home-transition-source .content-column {
    pointer-events: none;
    transition: opacity .42s ease, filter .42s ease, transform .58s cubic-bezier(.22,.76,.28,1);
}

body.home-page .content-wrapper.home-transition-source .content-column:not(.home-transition-selected) {
    opacity: 0;
    filter: brightness(.45) blur(4px);
    transform: scale(.985);
}

body.home-page .content-wrapper.home-transition-source .content-column.home-transition-selected {
    opacity: .16;
}

body.home-page.home-transition-active > .footer {
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease;
}

.category-transition-panel {
    position: fixed !important;
    z-index: 1800;
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    overflow: hidden;
    pointer-events: none;
    will-change: left, top, width, height, clip-path, background-size, background-position, opacity;
    box-shadow: 0 28px 85px rgba(0,0,0,.48);
    transition:
        left .72s cubic-bezier(.22,.78,.24,1),
        top .72s cubic-bezier(.22,.78,.24,1),
        width .72s cubic-bezier(.22,.78,.24,1),
        height .72s cubic-bezier(.22,.78,.24,1),
        clip-path .72s cubic-bezier(.22,.78,.24,1),
        background-size .72s cubic-bezier(.22,.78,.24,1),
        background-position .72s cubic-bezier(.22,.78,.24,1),
        border-radius .72s cubic-bezier(.22,.78,.24,1),
        opacity .42s ease;
}

.category-transition-panel .overlay {
    clip-path: inherit;
    transition: background-color .45s ease, backdrop-filter .45s ease;
}

.category-transition-panel .overlay-control {
    width: min(92vw, 980px);
    transition: transform .72s cubic-bezier(.22,.78,.24,1), opacity .35s ease;
}

.category-transition-panel .overlay-control h2 {
    margin-inline: auto;
    transition: font-size .72s cubic-bezier(.22,.78,.24,1), letter-spacing .72s ease, transform .72s ease;
}

.category-transition-panel .overlay-button {
    transition: opacity .24s ease, transform .35s ease !important;
}

.category-transition-panel.is-expanded {
    border-radius: 0;
    background-size: cover !important;
    background-position: center !important;
}

.category-transition-panel.is-expanded .overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.32) 58%, rgba(0,0,0,.72));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.category-transition-panel.is-expanded .overlay-control {
    transform: translateY(-4px);
}

.category-transition-panel.is-expanded .overlay-control h2 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.35rem, 5vw, 4.6rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.045em;
    text-shadow: 0 4px 28px rgba(0,0,0,.55);
}

.category-transition-panel.is-expanded .overlay-button {
    opacity: 0;
    transform: translateY(12px);
}

.category-transition-panel.is-waiting .overlay-control::after {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    margin: 24px auto 0;
    border: 2px solid rgba(255,255,255,.24);
    border-top-color: #fff;
    border-radius: 50%;
    animation: categoryTransitionSpin .7s linear infinite;
}

.category-transition-panel.is-dissolving {
    opacity: 0;
}

@keyframes categoryTransitionSpin {
    to { transform: rotate(360deg); }
}

/* Injected canonical category content starts underneath the expanded panel. */
body.inner-page #wrapper-container.category-transition-content {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .62s ease, transform .78s cubic-bezier(.22,.78,.24,1);
}

body.inner-page #wrapper-container.category-transition-content.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

body.inner-page > .footer.category-transition-footer {
    opacity: 0;
    transition: opacity .45s ease .18s;
}

body.inner-page > .footer.category-transition-footer.is-revealed {
    opacity: 1;
}

@media (max-width: 1250px) {
    html.home-root,
    html.home-root body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    body.home-page.home-transition-active {
        overflow: hidden !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .category-transition-panel,
    .category-transition-panel *,
    body.home-page .content-wrapper.home-transition-source .content-column,
    body.inner-page #wrapper-container.category-transition-content,
    body.inner-page > .footer.category-transition-footer {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Category -> homepage reverse morph. */
.category-return-panel {
    position: fixed;
    z-index: 1800;
    overflow: hidden;
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 28px 85px rgba(0,0,0,.48);
    will-change: left, top, width, height, clip-path, background-size, background-position, opacity;
    transition:
        left .72s cubic-bezier(.22,.78,.24,1),
        top .72s cubic-bezier(.22,.78,.24,1),
        width .72s cubic-bezier(.22,.78,.24,1),
        height .72s cubic-bezier(.22,.78,.24,1),
        clip-path .72s cubic-bezier(.22,.78,.24,1),
        background-size .72s cubic-bezier(.22,.78,.24,1),
        background-position .72s cubic-bezier(.22,.78,.24,1),
        opacity .32s ease;
}

.category-return-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    background: linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,.30) 58%, rgba(0,0,0,.72));
}

.category-return-overlay h2 {
    width: min(92vw, 980px);
    margin: 0;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.35rem, 5vw, 4.6rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.045em;
    text-align: center;
    text-shadow: 0 4px 28px rgba(0,0,0,.55);
    transition: font-size .72s cubic-bezier(.22,.78,.24,1), transform .72s cubic-bezier(.22,.78,.24,1), opacity .35s ease;
}

.category-return-panel.is-collapsing .category-return-overlay {
    background: rgba(0,0,0,.22);
}

.category-return-panel.is-collapsing .category-return-overlay h2 {
    font-size: clamp(1.15rem, 2.2vw, 2rem);
}

.category-return-panel.is-dissolving {
    opacity: 0;
}

body.home-page .content-wrapper.home-return-content {
    opacity: 0;
    transition: opacity .42s ease;
}

body.home-page .content-wrapper.home-return-content.is-revealed {
    opacity: 1;
}

body.home-page .content-wrapper.home-return-content .content-column {
    transition: opacity .32s ease;
}

body.home-page .content-wrapper.home-return-content .content-column.home-return-selected {
    opacity: 0;
}

body.inner-page #wrapper-container.category-return-source,
body.inner-page > .footer.category-return-footer-source {
    opacity: .18;
    transition: opacity .25s ease;
}

@media (prefers-reduced-motion: reduce) {
    .category-return-panel,
    .category-return-panel *,
    body.home-page .content-wrapper.home-return-content {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* Header/footer route transitions on inner pages. */
.route-category-panel {
    position: fixed;
    z-index: 1850;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    clip-path: circle(0 at var(--route-x, 50vw) var(--route-y, 0px));
    will-change: clip-path, opacity;
    transition: clip-path .66s cubic-bezier(.22,.78,.24,1), opacity .4s ease;
}

.route-category-panel.is-open {
    clip-path: circle(160vmax at var(--route-x, 50vw) var(--route-y, 0px));
}

.route-category-panel.is-dissolving {
    opacity: 0;
}

.route-category-panel__title {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: start center;
    padding-top: clamp(110px, 18vh, 180px);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(2.35rem, 5vw, 4.6rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.045em;
    text-align: center;
    text-shadow: 0 4px 28px rgba(0,0,0,.55);
}

body.inner-page #wrapper-container.route-transition-source,
body.inner-page > .footer.route-transition-source {
    opacity: .16;
    transition: opacity .35s ease;
}

.route-home-veil {
    position: fixed;
    z-index: 1850;
    inset: 0;
    pointer-events: none;
    background: #000;
    clip-path: circle(0 at var(--route-x, 50vw) var(--route-y, 50vh));
    transition: clip-path .52s cubic-bezier(.22,.78,.24,1), opacity .38s ease;
}

.route-home-veil.is-open {
    clip-path: circle(160vmax at var(--route-x, 50vw) var(--route-y, 50vh));
}

.route-home-veil.is-dissolving {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .route-category-panel,
    .route-home-veil,
    body.inner-page #wrapper-container.route-transition-source,
    body.inner-page > .footer.route-transition-source {
        transition-duration: .01ms !important;
    }
}