@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: 160ms ease both vt-out;
}

::view-transition-new(root) {
    animation: 260ms cubic-bezier(.22, 1, .36, 1) both vt-in;
}

@keyframes vt-out {
    to {
        opacity: 0;
    }
}

@keyframes vt-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.profile-btn,
.top-profile {
    border-radius: var(--r-sm);
    overflow: hidden;
    isolation: isolate;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.profile-btn:hover,
.top-profile:hover {
    transform: none;
    background: var(--blue-soft);
    border-color: var(--blue);
    color: var(--blue-deep);
}

.profile-btn:active,
.top-profile:active {
    transform: scale(.96);
}

.profile-btn.has-avatar:hover,
.top-profile.has-avatar:hover {
    background: #fff;
}

[data-profile-link] .profile-avatar {
    z-index: 1;
    border-radius: inherit;
    animation: avatar-in 260ms cubic-bezier(.22, 1, .36, 1) both;
}

.account-link[data-profile-link] .profile-avatar,
.marketing-login[data-profile-link] .profile-avatar {
    border-radius: 50%;
}

@keyframes avatar-in {
    from {
        opacity: 0;
        transform: scale(1.06);
    }
}

.notif-badge {
    animation: badge-pop 280ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes badge-pop {
    from {
        transform: scale(.4);
        opacity: 0;
    }
}

.notif-item {
    animation-duration: 340ms;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.reveal {
    transition-duration: 480ms;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

.auth-handoff {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    background: var(--paper);
    opacity: 0;
    pointer-events: none;
    transition: opacity 240ms ease;
}

.auth-handoff.is-on {
    opacity: 1;
    pointer-events: auto;
}

.auth-handoff-box {
    display: grid;
    justify-items: center;
    gap: 14px;
    transform: translateY(6px);
    transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.auth-handoff.is-on .auth-handoff-box {
    transform: none;
}

.auth-handoff-ring {
    width: 34px;
    height: 34px;
    border: 3px solid var(--blue-soft);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: handoff-spin .8s linear infinite;
}

.auth-handoff-box p {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted-2);
}

@keyframes handoff-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

@media (max-width: 520px) {
    .header-actions .marketing-login.has-avatar {
        position: relative;
        overflow: hidden;
        padding: 0;
        background: var(--soft);
        border-color: var(--line);
    }

    .header-actions .marketing-login.has-avatar .profile-avatar {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: inherit;
    }
}

@media (max-width: 420px) {
    .account-link.has-avatar {
        position: relative;
        overflow: hidden;
        border-radius: var(--r-sm);
        background: var(--soft);
    }

    .account-link.has-avatar .profile-avatar {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        border-radius: inherit;
    }
}

/* Consistent, restrained motion across the website; respects accessibility settings. */
@media (prefers-reduced-motion: no-preference) {
  a, button, .card, .panel-card, .nav-item, .metric-item, .product-card, .order-card {
    transition-duration: .22s;
    transition-timing-function: cubic-bezier(.2,.75,.25,1);
  }
  .nav-item:hover .nav-icon, .nav-item:hover .nav-chevron { transform: translateX(2px); }
  .nav-icon, .nav-chevron { transition: transform .22s cubic-bezier(.2,.75,.25,1); }
  .sidebar { transition: transform .28s cubic-bezier(.2,.75,.25,1), visibility .28s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}