/**
 * Home/Landing Page Styles
 * Independent theme - overrides documentation.css
 */

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');

/* CRITICAL: Override documentation.css variables and base styles */
:root {
    --docs-bg: #141416 !important;
    --docs-text: #f8fafc !important;
    --docs-text-muted: #94a3b8 !important;
}

/* Base styles - highest specificity to override documentation.css */
html {
    background: radial-gradient(ellipse at top, rgba(0, 104, 56, 0.32) 0%, transparent 52%),
                radial-gradient(ellipse at bottom right, rgba(240, 90, 40, 0.16) 0%, transparent 48%),
                #141416 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

body,
body.landing-page-wrapper,
body:has(.landing-page-wrapper) {
    background: radial-gradient(ellipse at top, rgba(0, 104, 56, 0.32) 0%, transparent 52%),
                radial-gradient(ellipse at bottom right, rgba(240, 90, 40, 0.16) 0%, transparent 48%),
                #141416 !important;
    color: #f8fafc !important;
    font-family: Inter, sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    position: relative !important;
}

/* Ensure all text is legible - override any documentation styles */
.landing-page-wrapper,
.landing-page-wrapper * {
    color: inherit;
}

/* Text color overrides for legibility */
.landing-page-wrapper h1,
.landing-page-wrapper h2,
.landing-page-wrapper h3,
.landing-page-wrapper h4,
.landing-page-wrapper h5,
.landing-page-wrapper h6 {
    color: #f8fafc !important;
}

.landing-page-wrapper p {
    color: #cbd5e1 !important;
}

.landing-page-wrapper .text-gray-400,
.landing-page-wrapper .text-gray-300,
.landing-page-wrapper .text-gray-500 {
    color: #9ca3af !important;
}

.landing-page-wrapper .text-white {
    color: #ffffff !important;
}

.landing-page-wrapper a {
    color: #c0bfc1 !important;
}

.landing-page-wrapper a:hover {
    color: #8fd4a8 !important;
}

/* Glass panel effect - Enhanced glassmorphism */
.glass-panel {
    background: rgba(32, 32, 34, 0.72) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important;
    position: relative !important;
}

/* Enhanced glassmorphic card for performance metric */
.landing-page-wrapper .glass-panel,
.landing-page-wrapper div[class*="glass-panel"],
body .glass-panel {
    background: rgba(32, 32, 34, 0.72) !important;
    -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
    backdrop-filter: blur(12px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37),
                inset 0 1px 0 0 rgba(255, 255, 255, 0.05) !important;
    border-radius: 0.5rem !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Glassmorphic card content visibility */
.landing-page-wrapper .glass-panel *,
body .glass-panel * {
    position: relative;
    z-index: 1;
}

/* Ensure text in glass cards is visible */
.landing-page-wrapper .glass-panel .text-white,
body .glass-panel .text-white {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.landing-page-wrapper .glass-panel .text-gray-400,
body .glass-panel .text-gray-400 {
    color: #9ca3af !important;
}

/* Code syntax highlighting */
.code-syntax-keyword { color: #d67eea !important; }
.code-syntax-func { color: #61afef !important; }
.code-syntax-string { color: #98c379 !important; }
.code-syntax-comment { color: #8b93a7 !important; font-style: italic !important; }
.code-syntax-class { color: #e5c07b !important; }
.code-syntax-tag { color: #c4b5fd !important; }
.code-syntax-attr { color: #d8b4fe !important; }

.hero-preview {
    position: relative;
    padding: 0 0 1.4rem 1.15rem;
    margin: 0 0 1.75rem 0;
    overflow: visible;
}

.hero-editor {
    background: #2b303b;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.95rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.hero-editor-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hero-editor-dots {
    display: flex;
    gap: 0.4rem;
    justify-self: start;
}

.hero-editor-dots span {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 999px;
    display: block;
}

.hero-editor-dots span:nth-child(1) { background: #ff5f57; }
.hero-editor-dots span:nth-child(2) { background: #febc2e; }
.hero-editor-dots span:nth-child(3) { background: #28c840; }

.hero-editor-title {
    justify-self: center;
    color: #9ca3af;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.75rem;
}

.landing-page-wrapper pre.hero-editor-code,
.hero-editor-code {
    margin: 0;
    padding: 1.25rem 1.35rem 2.85rem;
    overflow-x: auto;
    color: #e5e7eb !important;
    background: transparent !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.92rem;
    line-height: 1.7;
}

.landing-page-wrapper .hero-response,
.hero-response {
    position: absolute !important;
    left: 0;
    bottom: 0.2rem;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    max-width: 16rem;
    padding: 0.75rem 0.95rem;
    border-radius: 0.85rem;
    background: linear-gradient(90deg, #1c2822 0%, #2a211c 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.38);
    animation: hero-bounce 1.8s infinite;
}

@keyframes hero-bounce {
    0%, 100% {
        transform: translateY(-18%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.hero-response-icon {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    background: rgba(34, 197, 94, 0.16);
    color: #4ade80;
}

.hero-response-label {
    color: #9ca3af;
    font-size: 0.75rem;
    line-height: 1.2;
}

.hero-response-value {
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Grid background pattern */
.bg-grid {
    background-size: 40px 40px !important;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%) !important;
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%) !important;
}

/* Animations */
@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.animate-blob {
    animation: blob 7s infinite !important;
}

.animate-float {
    animation: float 6s ease-in-out infinite !important;
}

.animation-delay-2000 {
    animation-delay: 2s !important;
}

.animation-delay-4000 {
    animation-delay: 4s !important;
}

/* Override framework header/footer for landing page */
.landing-page-wrapper ~ .main-header,
.landing-page-wrapper ~ .main-footer,
.main-header:has(+ * .landing-page-wrapper),
.main-footer:has(+ * .landing-page-wrapper),
body:has(.landing-page-wrapper) .main-header,
body:has(.landing-page-wrapper) .main-footer,
body .main-header,
body .main-footer {
    display: none !important;
}

/* Ensure landing page takes full viewport */
.landing-page-wrapper {
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    background-color: #141416 !important;
    color: #f8fafc !important;
}

/* Tailwind utility overrides for legibility */
.landing-page-wrapper .bg-dark-950 {
    background-color: #141416 !important;
}

.landing-page-wrapper .bg-dark-900 {
    background-color: #1c1c1e !important;
}

.landing-page-wrapper .bg-dark-800 {
    background-color: #242426 !important;
}

.landing-page-wrapper .text-brand-400 {
    color: #8fd4a8 !important;
}

.landing-page-wrapper .text-brand-300 {
    color: #b7e7c9 !important;
}

.landing-page-wrapper .text-brand-500 {
    color: #006838 !important;
}

/* Button and link legibility */
.landing-page-wrapper button:not(.shop-cta),
.landing-page-wrapper .bg-white {
    background-color: #ffffff !important;
    color: #141416 !important;
}

.landing-page-wrapper .text-dark-950 {
    color: #141416 !important;
}

/* Ensure code blocks are readable */
.landing-page-wrapper pre,
.landing-page-wrapper code {
    background-color: #1e222a !important;
    color: #e2e8f0 !important;
}

/* Section backgrounds */
.landing-page-wrapper section {
    background-color: transparent !important;
}

.landing-page-wrapper .bg-dark-900\/50 {
    background-color: rgba(20, 20, 22, 0.72) !important;
}

.landing-page-wrapper .bg-brand-600\/10 {
    background-color: rgba(0, 104, 56, 0.16) !important;
}

/* Border colors for visibility */
.landing-page-wrapper .border-white\/10,
.landing-page-wrapper .border-white\/5,
.landing-page-wrapper .border-white\/20 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

#landing-background {
    position: fixed !important;
    inset: 0 !important;
    z-index: -999 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    width: 100vw !important;
    height: 100vh !important;
    background:
        radial-gradient(ellipse at top, rgba(0, 104, 56, 0.32) 0%, transparent 52%),
        radial-gradient(ellipse at bottom right, rgba(240, 90, 40, 0.16) 0%, transparent 48%),
        #141416 !important;
}

.landing-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(80px);
    mix-blend-mode: screen;
    animation: blob 7s infinite;
}

.landing-orb-green {
    top: 0;
    left: 25%;
    width: 24rem;
    height: 24rem;
    background: #006838;
    opacity: 0.28;
}

.landing-orb-orange {
    top: 0;
    right: 25%;
    width: 24rem;
    height: 24rem;
    background: #f05a28;
    opacity: 0.22;
    animation-delay: 2s;
}

.landing-orb-mint {
    bottom: -8rem;
    left: 33.333333%;
    width: 24rem;
    height: 24rem;
    background: #1f8a4c;
    opacity: 0.22;
    animation-delay: 4s;
}

.landing-orb-forest {
    top: 50%;
    right: 33%;
    width: 18rem;
    height: 18rem;
    background: #0b3d24;
    opacity: 0.45;
    filter: blur(60px);
    mix-blend-mode: normal;
    animation-duration: 9s;
    animation-delay: 1s;
}

.landing-orb-ember {
    bottom: 25%;
    right: 25%;
    width: 20rem;
    height: 20rem;
    background: #8a3418;
    opacity: 0.35;
    filter: blur(70px);
    mix-blend-mode: normal;
    animation-duration: 11s;
    animation-delay: 3s;
}

.landing-bg-grid {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.landing-bg-depth {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(0, 104, 56, 0.16) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(240, 90, 40, 0.1) 0%, transparent 50%);
}

.landing-page-wrapper {
    position: relative !important;
    min-height: 100vh !important;
    width: 100% !important;
    background: transparent !important;
    color: #f8fafc !important;
    overflow-x: hidden !important;
    z-index: 1 !important;
    isolation: isolate !important;
}

.landing-page-wrapper > nav,
.landing-page-wrapper > main,
.landing-page-wrapper > section,
.landing-page-wrapper > footer {
    position: relative !important;
    z-index: 1 !important;
}

/* Content backdrop for better readability - ensure all content is above background */
.landing-page-wrapper main,
.landing-page-wrapper section,
.landing-page-wrapper footer {
    position: relative !important;
    z-index: 1 !important;
}

/* Header stack stays on top; nav sits under the contact bar */
.landing-page-wrapper .shop-chrome {
    z-index: 50 !important;
    position: fixed !important;
}

.landing-page-wrapper .shop-chrome .shop-nav {
    position: relative !important;
    z-index: auto !important;
}

/* Ensure full page coverage */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow-x: hidden !important;
    background-color: #141416 !important;
}