@import "tailwindcss";

@source "../../templates";
@source "../../src";

@custom-variant dark (&:where(.dark, .dark *));

@layer base {
    :root {
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-left: env(safe-area-inset-left, 0px);
        --safe-right: env(safe-area-inset-right, 0px);
    }

    html[data-android-native] {
        --safe-top: 0px;
        --safe-bottom: 0px;
        --safe-left: 0px;
        --safe-right: 0px;
    }
}

@keyframes page-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes content-soft-in {
    from {
        opacity: 0;
        transform: translateY(0.45rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-fade-in {
    animation: page-fade-in 0.38s ease-out both;
}

.index-shell-reveal {
    animation: content-soft-in 0.45s 0.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.page-nav-reveal {
    animation: content-soft-in 0.4s 0.07s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@layer components {
    [data-index-fixed-header-toolbar-wrap] {
        padding-top: max(0px, var(--safe-top));
    }

    html[data-webview-safe-area] [data-index-fixed-header-toolbar-wrap] {
        padding-top: var(--safe-top);
    }

    [data-index-shell-ambient] {
        height: calc(var(--safe-top) + 200px);
    }

    .index-shell-ambient-icon {
        right: 40px;
        top: calc(var(--safe-top) + 70px);
    }

    [data-index-shell-header-spacer] {
        height: calc(var(--safe-top) + 60px);
    }
}

@theme {
    --font-family-sans: 'Inter', system-ui, sans-serif;
}

@keyframes home-hero-in {
    from {
        opacity: 0;
        transform: translateY(1rem);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes home-name-shimmer {
    0%,
    100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes home-blob-a {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    40% {
        transform: translate(-18px, 14px) scale(1.06);
    }
    70% {
        transform: translate(10px, -8px) scale(0.97);
    }
}

@keyframes home-blob-b {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    35% {
        transform: translate(14px, -12px) scale(1.04);
    }
    65% {
        transform: translate(-12px, 10px) scale(0.98);
    }
}

@keyframes home-blob-c {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-8px, -14px) scale(1.08);
    }
}

.home-hero-eyebrow {
    animation: home-hero-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero-title {
    animation: home-hero-in 0.72s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero-sub {
    animation: home-hero-in 0.72s 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-hero-name {
    background-size: 220% 100%;
    animation: home-name-shimmer 8s ease-in-out infinite;
}

.home-blob-a {
    animation: home-blob-a 20s ease-in-out infinite;
}

.home-blob-b {
    animation: home-blob-b 24s ease-in-out infinite;
}

.home-blob-c {
    animation: home-blob-c 17s ease-in-out infinite;
}

@keyframes home-card-in {
    from {
        opacity: 0;
        transform: translateY(1rem) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.home-card {
    animation: home-card-in 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-grid .home-card:nth-child(1) {
    animation-delay: 0.3s;
}

.home-grid .home-card:nth-child(2) {
    animation-delay: 0.38s;
}

.home-grid .home-card:nth-child(3) {
    animation-delay: 0.46s;
}

.home-grid .home-card:nth-child(4) {
    animation-delay: 0.54s;
}

.home-card-wide {
    animation-delay: 0.62s;
}

@media (prefers-reduced-motion: reduce) {
    .page-fade-in,
    .index-shell-reveal,
    .page-nav-reveal {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .home-hero-eyebrow,
    .home-hero-title,
    .home-hero-sub {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }

    .home-hero-name {
        animation: none;
        background-position: 0% 50%;
    }

    .home-blob-a,
    .home-blob-b,
    .home-blob-c {
        animation: none;
    }

    .home-card {
        animation: none;
        opacity: 1;
        transform: none;
    }
}