@layer components {
    .navbar-bar   { @apply fixed top-0 w-full z-50 bg-white/90 backdrop-blur border-b border-gray-100; }
    .navbar-inner { @apply container mx-auto px-4 sm:px-6 lg:px-8; }
    .navbar-row   { @apply flex items-center justify-between py-3 md:py-4; }
    .brand       { @apply flex items-center gap-3; }
    .brand-logo  { @apply block w-10 h-10 md:w-12 md:h-12 object-contain; }
    .brand-name  { @apply text-lg md:text-xl font-bold leading-none tracking-tight text-slate-900; }
}

@layer utilities {
    .photo-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.5rem;
    }
    .photo-card {
        @apply overflow-hidden rounded-xl bg-white shadow-md transition-all duration-300 hover:shadow-xl hover:-translate-y-1 cursor-pointer;
    }
    .photo-overlay {
        @apply absolute inset-0 bg-gradient-to-t from-dark/70 via-dark/20 to-transparent opacity-0 transition-opacity duration-300 flex items-end p-4;
    }
    .photo-card:hover .photo-overlay { @apply opacity-100; }
    .filter-active { @apply bg-primary text-white; }
}

/* ====== 英雄区样式 ====== */
:root {
    --gallery-primary: #0b1220;
    --gallery-dark: #132a45;
    --accent-1: #06b6d4;
    --accent-2: #8b5cf6;
    --accent-3: #22d3ee;
    --wave-fill: color-mix(in oklab, white 92%, var(--accent-2) 8%);
}

.gradient-bg {
    background-color: var(--gallery-primary);
    position: relative;
}

.gradient-bg::before {
    content: "";
    position: absolute; inset: 0;
    background:
            radial-gradient(1100px 520px at 18% 14%, color-mix(in oklab, var(--accent-2) 32%, transparent) 0%, transparent 62%),
            radial-gradient(900px 480px at 86% 24%, color-mix(in oklab, var(--accent-1) 28%, transparent) 0%, transparent 66%),
            linear-gradient(120deg, color-mix(in oklab, var(--gallery-primary) 96%, black 4%), var(--gallery-dark));
    z-index: 0;
    filter: saturate(1.08) brightness(1.02);
}

.gradient-bg::after {
    content: "";
    position: absolute; inset: -20% -10% -28% -10%;
    background:
            conic-gradient(from 120deg at 70% 20%,
            color-mix(in oklab, var(--accent-3) 12%, transparent) 0 28%,
            transparent 28% 74%,
            color-mix(in oklab, var(--accent-2) 10%, transparent) 74% 100%);
    filter: blur(42px) saturate(1.15);
    opacity: .55;
    animation: hueSweep 16s infinite ease-in-out alternate;
    pointer-events: none;
    z-index: 0;
}

.svg-wave { display: block; transform: translateZ(0); }

@keyframes flowGradient { from { filter: saturate(1.02) brightness(1.0); } to { filter: saturate(1.12) brightness(1.04); } }
@keyframes moveTexture { from { transform: translate(0, 0); } to { transform: translate(18px, 18px); } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes waveMotion { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes hueSweep { from { transform: rotate(0deg) translateZ(0); opacity: .45; } to { transform: rotate(28deg) translateZ(0); opacity: .65; } }