:root {
    --oircle-pop: cubic-bezier(.614, -1.553, 0, 2.313);
    --oircle-smooth: cubic-bezier(.2, .8, .2, 1);

    --oircle-speed-fast: 220ms;
    --oircle-speed: 1000ms;
    --oircle-speed-slow: 700ms;

    --oircle-radius-sm: 14px;
    --oircle-radius: 22px;
    --oircle-radius-lg: 32px;

    --oircle-morph-speed: 850ms;
}

/* 
    Core Oircle motion class.
    Use this on anything that should feel alive.
*/

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

.o-pop {
    transition:
        opacity var(--oircle-speed) var(--oircle-smooth),
        transform .4s var(--oircle-pop),
        width var(--oircle-speed) var(--oircle-pop),
        height var(--oircle-speed) var(--oircle-pop),
        max-width var(--oircle-speed) var(--oircle-pop),
        max-height var(--oircle-speed) var(--oircle-pop),
        border-radius var(--oircle-speed) var(--oircle-pop),
        background-color var(--oircle-speed) var(--oircle-smooth),
        border-color var(--oircle-speed) var(--oircle-smooth),
        box-shadow var(--oircle-speed) var(--oircle-smooth);
    will-change: transform;
}

.o-clickable {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.o-clickable:active {
    transform: scale(0.96);
}

/* Accessibility */
.o-clickable:focus-visible {
    outline: 2px solid var(--oircle-text);
}

/* Respect people who reduce motion */
@media (prefers-reduced-motion: reduce) {
    .o-pop,
    .o-pop * {
        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }
}

/* ----------------------------- */
/* Expanding Button */
/* ----------------------------- */

.o-expand-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 54px;
    height: 54px;
    padding: 0 18px;

    border: 1px solid var(--oircle-border);
    border-radius: 999px;

    background: var(--oircle-surface);
    color: var(--oircle-text);

    font: inherit;
    font-weight: 700;

    overflow: hidden;
    backdrop-filter: blur(18px);
}

.o-expand-button__icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    font-size: 18px;
}

.o-expand-button__label {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;
    transform: translateX(-8px);

    transition:
        max-width var(--oircle-speed) var(--oircle-pop),
        opacity var(--oircle-speed-fast) ease,
        transform .4s var(--oircle-pop);
}

.o-expand-button:hover,
.o-expand-button.is-open {
    background: var(--oircle-surface-strong);
    border-color: var(--oircle-border);
    transform: scale(1.04);
}

.o-expand-button:hover .o-expand-button__label,
.o-expand-button.is-open .o-expand-button__label {
    max-width: 220px;
    opacity: 1;
    transform: translateX(0);
}

/* ----------------------------- */
/* Expanding Menu */
/* ----------------------------- */

.o-expand-menu {
    position: relative;
    display: inline-block;
}

.o-expand-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    height: 54px;
    padding: 0 18px;

    border: 1px solid var(--oircle-border);
    border-radius: 999px;

    background: var(--oircle-surface);
    color: var(--oircle-text);

    font: inherit;
    font-weight: 800;

    backdrop-filter: blur(18px);
}

.o-expand-menu__panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;

    width: 280px;
    padding: 10px;

    border: 1px solid var(--oircle-border);
    border-radius: var(--oircle-radius);

    background: var(--oircle-glass-readable-bg);
    backdrop-filter: blur(24px);

    opacity: 0;
    transform: translateY(-8px) scale(0.92);
    pointer-events: none;

    box-shadow: var(--oircle-glass-shadow-strong);
    z-index: 50;
}

.o-expand-menu:hover .o-expand-menu__panel,
.o-expand-menu.is-open .o-expand-menu__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.o-expand-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    width: 100%;
    padding: 14px;

    border-radius: 16px;

    color: var(--oircle-text);
    text-decoration: none;

    transition:
        background-color var(--oircle-speed-fast) ease,
        transform .4s var(--oircle-pop);
}

.o-expand-menu__item:hover {
    background: var(--oircle-surface-strong);
    transform: scale(1.03);
}

.o-expand-menu__item span {
    color: var(--oircle-muted);
    font-size: 0.85rem;
}

/* ----------------------------- */
/* Expanding Card */
/* ----------------------------- */

.o-expand-card {
    width: min(100%, 360px);
    min-height: 160px;
    padding: 22px;

    border: 1px solid var(--oircle-border);
    border-radius: var(--oircle-radius-lg);

    background:
        radial-gradient(circle at top left, var(--oircle-tile-highlight), transparent 38%),
        var(--oircle-surface);

    color: var(--oircle-text);
    overflow: hidden;
    backdrop-filter: blur(18px);
}

.o-expand-card:hover,
.o-expand-card.is-open {
    transform: scale(1.035);
    min-height: 230px;
    background:
        radial-gradient(circle at top left, var(--oircle-tile-highlight), transparent 42%),
        var(--oircle-surface-strong);
}

.o-expand-card__title {
    margin: 0 0 8px;
    font-size: 1.4rem;
}

.o-expand-card__preview {
    margin: 0;
    color: var(--oircle-muted);
}

.o-expand-card__hidden {
    max-height: 0;
    opacity: 0;
    transform: translateY(10px);
    overflow: hidden;

    transition:
        max-height var(--oircle-speed) var(--oircle-pop),
        opacity var(--oircle-speed-fast) ease,
        transform .4s var(--oircle-pop);
}

.o-expand-card:hover .o-expand-card__hidden,
.o-expand-card.is-open .o-expand-card__hidden {
    max-height: 220px;
    opacity: 1;
    transform: translateY(0);
}

/* ----------------------------- */
/* Expanding Pill Navigation */
/* ----------------------------- */

.o-pill-nav {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 8px;

    border: 1px solid var(--oircle-border);
    border-radius: 999px;

    background: var(--oircle-glass-readable-bg);
    backdrop-filter: blur(18px);
}

.o-pill-nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-width: 42px;
    height: 42px;
    padding: 0 13px;

    border-radius: 999px;

    color: var(--oircle-muted);
    text-decoration: none;
    font-weight: 700;

    overflow: hidden;

    transition:
        background-color var(--oircle-speed-fast) ease,
        color var(--oircle-speed-fast) ease,
        transform .4s var(--oircle-pop);
}

.o-pill-nav a:hover,
.o-pill-nav a.is-active {
    background: var(--oircle-surface-strong);
    color: var(--oircle-text);
    transform: scale(1.08);
}

.o-pill-nav span {
    max-width: 0;
    opacity: 0;
    white-space: nowrap;

    transition:
        max-width var(--oircle-speed) var(--oircle-pop),
        opacity var(--oircle-speed-fast) ease;
}

.o-pill-nav a:hover span,
.o-pill-nav a.is-active span {
    max-width: 140px;
    opacity: 1;
}

/* ----------------------------- */
/* Oircle Morph Menu */
/* ----------------------------- */

.o-morph-menu {
    position: absolute;
    z-index: 20;

    --closed-size: 45px;
    --open-width: min(400px, calc(100vw - 24px));
    --open-height: min(700px, calc(100dvh - 24px));

    width: var(--closed-size);
    height: var(--closed-size);
    min-width: var(--closed-size);
    min-height: var(--closed-size);

    border: 1px solid var(--oircle-border);
    border-radius: 22.5px;

    background:
        radial-gradient(circle at top left, var(--oircle-tile-highlight), transparent 38%),
        var(--oircle-glass-readable-bg);

    color: var(--oircle-text);
    overflow: hidden;

    backdrop-filter: blur(22px);
    box-shadow: var(--oircle-glass-readable-shadow);
    

    transition:
        width var(--oircle-speed) var(--oircle-pop) 0ms,
        height var(--oircle-speed) var(--oircle-pop) 0ms,
        border-radius var(--oircle-speed) var(--oircle-smooth) 0ms,
        background-color var(--oircle-speed) ease-in-out 0ms,
        box-shadow var(--oircle-speed) ease-in-out 0ms,
        transform .4s var(--oircle-pop);

    will-change: width, height, border-radius, transform;
}

.o-morph-menu.left {
    left: -150px;
}

.o-morph-menu.center-left {
    left: -100px;
}

.o-morph-menu.center {
    left: 0px;
}

.o-morph-menu.center-right {
    left: 100px;
}

.o-morph-menu.right {
    left: 150px;
}

.o-morph-menu.is-open {
    width: var(--open-width);
    height: var(--open-height);
    border-radius: 34px;

    background:
        radial-gradient(circle at top left, var(--oircle-tile-highlight), transparent 42%),
        var(--oircle-glass-readable-bg);

    box-shadow: var(--oircle-glass-shadow-strong);

    transition:
        width var(--oircle-speed) var(--oircle-pop) 0ms,
        height var(--oircle-speed) var(--oircle-pop) 0ms,
        border-radius var(--oircle-speed) var(--oircle-smooth) 0ms,
        background-color var(--oircle-speed) ease 0ms,
        box-shadow var(--oircle-speed) ease 0ms,
        transform .4s var(--oircle-pop);
}

.o-morph-menu__button {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: var(--closed-size);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    padding: 0;

    border: 0;
    border-radius: 999px;

    background: transparent;
    color: var(--oircle-text);

    font: inherit;
    font-size: 18px;
    font-weight: 900;

    cursor: pointer;
    z-index: 2;

    white-space: nowrap;
    overflow: hidden;
}

.o-morph-menu__icon {
    position: absolute;
    top: 50%;
    left: 50%;

    display: inline-grid;
    place-items: center;

    opacity: 1;
    transform: translate(-50%, -50%) scale(1);

    transition:
        opacity 220ms ease,
        transform .4s var(--oircle-pop),
        max-width 420ms var(--oircle-pop),
        margin 420ms var(--oircle-pop);
}

/* Only for image-based morph icons */
.o-morph-menu__image-icon {
    width: 30px;
    height: 30px;
    max-width: 100%;
    max-height: 100%;
    display: block;
    object-fit: contain;
}

.o-morph-menu.is-open .o-morph-menu__image-icon {
    opacity: 0;
    max-width: 0;
    margin: 0;
    transform: translate(-50%, -50%) scale(0.5);
    pointer-events: none;
}

.o-morph-menu.is-open .o-morph-menu__icon {
    opacity: 0;
    max-width: 0;
    margin: 0;
    transform: translate(-50%, -50%) scale(0.5);
    pointer-events: none;
}

.o-morph-menu__content {
    width: 100%;
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    opacity: 0;
    transform: translateY(14px) scale(0.96);
    pointer-events: none;

    transition:
        opacity 520ms ease 420ms,
        transform 650ms var(--oircle-pop) 180ms;
}

.o-morph-menu.is-open .o-morph-menu__content {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.o-morph-menu.is-open .o-morph-menu__content {
    pointer-events: auto;
}

.o-morph-menu__title {
    margin: 0 0 8px;
    font-size: 1.6rem;
    letter-spacing: -0.04em;
}

.o-morph-menu__text {
    margin: 0 0 22px;
    color: var(--oircle-muted);
    line-height: 1.5;
}

.o-morph-menu__list {
    display: grid;
    gap: 10px;

    min-height: 0;
    overflow-y: auto;
    padding: 35px 35px 35px;
    margin: 0 -20px;
}

.o-morph-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 14px;

    border: 1px solid var(--oircle-glass-readable-border);
    border-radius: 999px;

    background: var(--oircle-surface);
    color: var(--oircle-text);
    text-decoration: none;

    transition:
        transform .4s var(--oircle-pop),
        background-color 220ms ease,
        border-color 220ms ease;
}

.o-morph-menu__item:hover {
    transform: scale(1.035);
    background: var(--oircle-surface-strong);
    border-color: var(--oircle-border);
}

.o-morph-menu__item small {
    display: block;
    margin-top: 3px;
    color: var(--oircle-muted);
}

.o-morph-menu__footer {
    margin-top: auto;
    padding-top: 18px;
}

.o-morph-menu__cta {
    width: 100%;
    height: 52px;

    display: grid;
    place-items: center;

    border: 0;
    border-radius: 999px;

    background: var(--oircle-control-bg);
    color: var(--oircle-control-text);

    font: inherit;
    font-weight: 900;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform .4s var(--oircle-pop),
        opacity 220ms ease;
}

.o-morph-menu__cta:hover {
    transform: scale(1.035);
}

.o-morph-menu:hover:not(.is-open):not(.is-previewing) {
    transform: translateY(-4px) scale(1.04);
    box-shadow: var(--oircle-glass-shadow);
}

/* ----------------------------- */
/* Morph menu contextual preview */
/* ----------------------------- */

.o-morph-menu__preview-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;

    color: var(--oircle-text);

    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-shadow: var(--oircle-text-shadow-soft);

    transform: translateX(-6px) scale(0.86);
    transform-origin: left center;

    pointer-events: none;

    transition:
        max-width 520ms var(--oircle-pop),
        opacity 180ms ease 120ms,
        transform 420ms var(--oircle-pop),
        margin-left 420ms var(--oircle-pop);
}

.o-morph-menu.is-previewing:not(.is-open) {
    width: min(160px, calc(100vw - 24px));
    height: var(--closed-size);
    border-radius: 999px;

    transform: translateY(-4px) scale(1.04);

    background:
        radial-gradient(circle at top left, var(--oircle-tile-highlight), transparent 42%),
        var(--oircle-glass-readable-bg);

    box-shadow: var(--oircle-glass-shadow);
}

.o-morph-menu.is-previewing:not(.is-open) .o-morph-menu__content {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    pointer-events: none;
}

.o-morph-menu.is-previewing:not(.is-open) .o-morph-menu__icon {
    transform: scale(1.05);
}

.o-morph-menu.is-previewing:not(.is-open) .o-morph-menu__preview-text {
    max-width: 190px;
    opacity: 1;
    margin-left: 9px;
    transform: translateX(0) scale(1);
}

.o-morph-menu.is-open .o-morph-menu__preview-text {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
    transform: translateX(-6px) scale(0.86);
}

@media (hover: none) {
    .o-morph-menu.is-previewing:not(.is-open) {
        width: var(--closed-size);
        transform: none;
    }

    .o-morph-menu.is-previewing:not(.is-open) .o-morph-menu__preview-text {
        max-width: 0;
        opacity: 0;
        margin-left: 0;
    }
}

.o-morph-menu__section {
    padding: 12px 6px 4px;
    color: var(--oircle-text);
}

.o-morph-menu__section strong {
    display: block;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.o-morph-menu__section small {
    display: block;
    margin-top: 4px;
    color: var(--oircle-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.o-morph-menu__divider {
    height: 1px;
    margin: 8px 4px;
    background: var(--oircle-border);
}

.o-morph-menu__app-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 38px;

    border-radius: 20px;
    object-fit: cover;

    background: var(--oircle-surface-strong);
}

.o-morph-menu__item-copy {
    flex: 1 1 auto;
    min-width: 0;
}

/* ----------------------------- */
/* Navigation theme readability */
/* ----------------------------- */

.o-morph-menu__title,
.o-morph-menu__text,
.o-morph-menu__item,
.o-morph-menu__item small,
.o-morph-menu__section,
.o-morph-menu__section small {
    text-shadow: var(--oircle-text-shadow-soft);
}

@media (max-width: 560px) {
    .o-morph-menu {
        --open-width: min(var(--requested-open-width, 400px), calc(100vw - 16px));
        --open-height: min(var(--requested-open-height, 700px), calc(100dvh - 16px));
    }
}

.o-bottom-nav .o-morph-menu {
    transform-origin: bottom center;
}

.o-bottom-nav .o-morph-menu.is-edge-left {
    transform-origin: bottom left;
}

.o-bottom-nav .o-morph-menu.is-edge-right {
    transform-origin: bottom right;
}