@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }

html { background: var(--bg-color); }
body {
    background: transparent;
    grid-template-rows: 1fr;
    padding-top: 6.5rem;
}

.blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; view-transition-name: blobs; }
.blobs i { position: absolute; border-radius: 50%; filter: blur(70px); animation: drift 22s ease-in-out infinite alternate; }
.blobs i:nth-child(1) { width: 44vmax; height: 44vmax; left: -10vmax; top: -12vmax; background: var(--blob-a, #6f9a6a); opacity: .55; }
.blobs i:nth-child(2) { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -14vmax; background: var(--blob-b, #a7cca4); opacity: .28; animation-delay: -8s; }
.blobs i:nth-child(3) { width: 28vmax; height: 28vmax; left: 45%; top: 40%; background: var(--blob-c, #e8d98f); opacity: .14; animation-delay: -15s; }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.15); } }

.top-nav {
    position: fixed; top: max(1rem, env(safe-area-inset-top)); left: 0; right: 0;
    margin-inline: auto; width: fit-content;
    gap: 0; padding: .4rem; z-index: 100;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(18px) saturate(170%);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 30px rgba(0, 0, 0, .2);
    view-transition-name: nav;
}
.top-nav .nav-item {
    position: relative; z-index: 1;
    padding: .6rem 1.3rem; border-radius: 999px; border-bottom: 0;
    font-size: 1.1rem;
    transition: color var(--transition-smooth);
}
.top-nav .nav-item:hover { transform: none; color: var(--text-hover); }
.top-nav .nav-item.active { color: #fff; padding-bottom: .6rem; border-bottom: 0; }
.nav-glow, .top-nav:not(.has-glow) .nav-item.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1));
    border: 1px solid rgba(255, 255, 255, .32);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 4px 14px rgba(0, 0, 0, .18);
}
.nav-glow {
    position: absolute; top: .4rem; bottom: .4rem; left: 0; width: 0; border-radius: 999px;
    transition: transform .5s cubic-bezier(.34, 1.45, .5, 1), width .5s cubic-bezier(.34, 1.45, .5, 1);
}

.contact-card, .wallet-card, .cat-card {
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 30px rgba(0, 0, 0, .16);
}
.contact-card, .wallet-card {
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.cat-card { cursor: pointer; }
.cat-card:hover { transform: translateY(-6px) rotate(-1.2deg) scale(1.03); box-shadow: 0 18px 36px rgba(0, 0, 0, .3); }
.contact-card:hover { transform: translateY(-4px); }
.pic-container { animation: float 6s ease-in-out infinite alternate; }
@keyframes float { to { transform: translateY(-10px) rotate(1deg); } }

[data-reveal] { opacity: 0; }
[data-reveal].in { animation: rise .8s cubic-bezier(.22, 1, .36, 1) var(--d, 0s) both; }
@keyframes rise {
    from { opacity: 0; translate: 0 26px; filter: blur(10px); }
    to   { opacity: 1; translate: 0 0;    filter: blur(0); }
}

@media (max-width: 480px) { .top-nav .nav-item { padding: .55rem 1rem; font-size: 1rem; } }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; }
    .blobs i, .pic-container { animation: none; }
}


.top-nav {
    background: rgba(255, 255, 255, .03);
    border-color: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 20px rgba(0, 0, 0, .08);
}
.nav-glow, .top-nav:not(.has-glow) .nav-item.active {
    background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
    border-color: rgba(255, 255, 255, .22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 8px rgba(0, 0, 0, .08);
}

#bottom-bar {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 6px 20px rgba(0, 0, 0, .08);
}
#access-overlay button {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--text-hover);
    font: 600 1.1rem var(--font-main);
    padding: .8rem 1.8rem; border-radius: 999px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 20px rgba(0, 0, 0, .15);
    transition: background .3s ease, transform .3s ease;
}
#access-overlay button:hover { background: rgba(255, 255, 255, .16); transform: translateY(-2px); }