@keyframes detailFadeInBg {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes detailRevealUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes detailRevealContent {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.detail-brand-page {
    background:
        radial-gradient(circle at 16% 8%, var(--detail-glow-primary, rgba(5, 219, 233, .08)), transparent 24rem),
        radial-gradient(circle at 84% 12%, var(--detail-glow-secondary, rgba(23, 118, 124, .18)), transparent 26rem),
        linear-gradient(180deg, #252423 0%, #252423 100%) !important;
    color: #f6f4f2 !important;
    font-family: "DIN", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

html.detail-page-entering body > div.fixed {
    opacity: 0;
    animation: detailFadeInBg 1.1s ease-in-out forwards;
}

html.detail-page-entering .detail-hero-stack > * {
    opacity: 0;
    transform: translateY(40px);
    will-change: opacity, transform;
}

html.detail-page-entering body {
    overflow-y: hidden;
}

html.detail-page-entering main > :not(.detail-hero-section),
html.detail-page-entering body > footer {
    opacity: 0;
    transform: translateY(18px);
    will-change: opacity, transform;
}

html.detail-page-entering body.is-page-entered .detail-hero-stack > * {
    animation: detailRevealUp 1s cubic-bezier(.16, 1, .3, 1) forwards;
}

html.detail-page-entering body.is-page-entered main > :not(.detail-hero-section),
html.detail-page-entering body.is-page-entered > footer {
    animation: detailRevealContent .7s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: .95s;
}

html.detail-page-entering body.is-page-entered .detail-hero-stack > *:nth-child(1) {
    animation-delay: .25s;
}

html.detail-page-entering body.is-page-entered .detail-hero-stack > *:nth-child(2) {
    animation-delay: .4s;
}

html.detail-page-entering body.is-page-entered .detail-hero-stack > *:nth-child(3) {
    animation-delay: .55s;
}

html.detail-page-entering body.is-page-entered .detail-hero-stack > *:nth-child(4) {
    animation-delay: .7s;
}

body.detail-brand-page .detail-hero-section {
    min-height: calc(100svh - 8rem);
    display: flex;
    align-items: flex-start;
}

body.detail-brand-page .detail-hero-stack {
    width: 100%;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

body.detail-brand-page .detail-hero-stack > * + * {
    margin-top: 0 !important;
}

body.detail-brand-page .detail-hero-stack > *:nth-child(2) {
    margin-top: 2.25rem !important;
}

body.detail-brand-page .detail-hero-stack > *:nth-child(3) {
    margin-top: 2.5rem !important;
}

body.detail-brand-page .detail-hero-stack > *:nth-child(4) {
    margin-top: 4rem !important;
}

body.detail-brand-page header.fixed {
    background-color: rgba(37, 36, 35, .82) !important;
    border-color: #353433 !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.detail-brand-page footer {
    background-color: rgba(37, 36, 35, .96) !important;
    border-color: #353433 !important;
}

body.detail-brand-page .bg-dark {
    background-color: rgba(37, 36, 35, .82) !important;
}

body.detail-brand-page .bg-surface {
    background-color: rgba(42, 41, 40, .9) !important;
}

body.detail-brand-page .border-border {
    border-color: #353433 !important;
}

body.detail-brand-page .text-white {
    color: #f6f4f2 !important;
}

body.detail-brand-page .text-gray-100 {
    color: #f6f4f2 !important;
}

body.detail-brand-page .text-gray-200 {
    color: #d5d3d1 !important;
}

body.detail-brand-page .text-gray-300 {
    color: #b4b1af !important;
}

body.detail-brand-page .text-gray-400 {
    color: #93908e !important;
}

body.detail-brand-page .text-gray-500,
body.detail-brand-page .text-gray-600 {
    color: #706e69 !important;
}

body.detail-brand-page .text-dark {
    color: #252423 !important;
}

body.detail-brand-page .bg-white {
    background-color: #f6f4f2 !important;
}

body.detail-brand-page .hover\:bg-gray-200:hover {
    background-color: #d5d3d1 !important;
}

body.detail-brand-page .bento-card:hover {
    border-color: rgba(5, 219, 233, .22) !important;
    box-shadow: 0 18px 50px -22px rgba(5, 219, 233, .14) !important;
}

body.detail-brand-page .detail-brand-home {
    gap: .75rem;
}

body.detail-brand-page .detail-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    border: 1px solid rgba(5, 219, 233, .16);
    background: linear-gradient(135deg, rgba(5, 219, 233, .16), rgba(23, 118, 124, .24));
}

body.detail-brand-page .detail-brand-mark img {
    width: 1.5rem;
    height: auto;
}

body.detail-brand-page .detail-brand-footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
}

body.detail-brand-page .detail-brand-footer img {
    width: 1.5rem;
    height: auto;
}

body.detail-brand-page .font-mono,
body.detail-brand-page .token-keyword,
body.detail-brand-page .token-function,
body.detail-brand-page .token-string,
body.detail-brand-page .token-property,
body.detail-brand-page .token-number,
body.detail-brand-page .token-comment {
    font-family: "Mono", monospace !important;
}

@media (prefers-reduced-motion: reduce) {
    html.detail-page-entering body > div.fixed,
    html.detail-page-entering .detail-hero-stack > *,
    html.detail-page-entering main > :not(.detail-hero-section),
    html.detail-page-entering body > footer,
    body.detail-brand-page .bento-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (min-width: 768px) {
    body.detail-brand-page .detail-hero-stack {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    body.detail-brand-page .detail-hero-stack > *:nth-child(2) {
        margin-top: 2.75rem !important;
    }

    body.detail-brand-page .detail-hero-stack > *:nth-child(3) {
        margin-top: 3rem !important;
    }

    body.detail-brand-page .detail-hero-stack > *:nth-child(4) {
        margin-top: 4.75rem !important;
    }
}