/* ============================================
   FNAPPS - Core Styles
   Opus 4.7 Edition
   ============================================ */

:root {
    --fn-primary:   #7c5cff;
    --fn-primary-2: #b06bff;
    --fn-accent:    #ffc93c;
    --fn-accent-2:  #ff5fa2;
    --fn-cyan:      #36d1dc;
    --fn-lime:      #a6ff4d;
    --fn-dark:      #0c0f22;
    --fn-ink:       #1a1d36;
    --fn-card:      #ffffff;
    --fn-bg:        #f5f4ff;
    --fn-text:      #181a33;
    --fn-muted:     #6b6f93;
    --fn-border:    rgba(124, 92, 255, 0.14);

    --fn-font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
    --fn-font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
    --fn-font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

    --fn-shadow-glow: 0 10px 40px -12px rgba(124, 92, 255, 0.35);
    --fn-shadow-soft: 0 8px 28px -10px rgba(12, 15, 34, 0.18);
}

[data-theme="dark"] {
    --fn-card:   #171a33;
    --fn-bg:     #0c0f22;
    --fn-text:   #e7e8f5;
    --fn-muted:  #9aa0c8;
    --fn-border: rgba(176, 107, 255, 0.22);
    --fn-shadow-soft: 0 8px 28px -10px rgba(0, 0, 0, 0.55);
}

/* --------------------- Base --------------------- */

html { scroll-behavior: smooth; }

body {
    font-family: var(--fn-font-body);
    background: var(--fn-bg);
    color: var(--fn-text);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(1200px 600px at -10% -20%, rgba(124, 92, 255, 0.10), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(54, 209, 220, 0.10), transparent 60%),
        radial-gradient(700px 500px at 50% 120%, rgba(255, 95, 162, 0.08), transparent 60%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6, .display-4, .display-5 {
    font-family: var(--fn-font-display);
    letter-spacing: -0.02em;
    color: var(--fn-text);
    font-weight: 700;
}

.display-4 { font-weight: 800; letter-spacing: -0.035em; }

a { color: var(--fn-primary); }
a:hover { color: var(--fn-primary-2); }

::selection { background: var(--fn-accent); color: #1a1a2e; }

/* --------------------- Navbar --------------------- */

.navbar {
    background: rgba(12, 15, 34, 0.82) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-brand {
    font-family: var(--fn-font-display);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    background: linear-gradient(90deg, #fff 0%, var(--fn-accent) 60%, var(--fn-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.navbar-brand i { color: var(--fn-accent); -webkit-text-fill-color: var(--fn-accent); }

.nav-link { font-weight: 500; letter-spacing: 0.01em; }

/* Theme toggle */
.theme-toggle {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
    border-radius: 999px;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform 0.25s ease, background 0.25s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,0.08); transform: rotate(18deg); }

/* --------------------- Hero --------------------- */

.fn-hero {
    position: relative;
    padding: 3.5rem 2rem 3rem;
    border-radius: 28px;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(1100px 500px at 10% 0%, #2a1a6b 0%, transparent 55%),
                radial-gradient(900px 500px at 110% 100%, #1b4a6b 0%, transparent 55%),
                linear-gradient(135deg, #0b0d24 0%, #141842 55%, #0a1b3d 100%);
    box-shadow: var(--fn-shadow-glow);
    isolation: isolate;
}

.fn-hero::before {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(124, 92, 255, 0.55), transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(255, 95, 162, 0.45), transparent 35%),
        radial-gradient(circle at 60% 20%, rgba(54, 209, 220, 0.35), transparent 35%);
    filter: blur(60px);
    opacity: 0.85;
    animation: fnAurora 18s ease-in-out infinite alternate;
    z-index: -1;
}
.fn-hero::after {
    content: "";
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.28 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    opacity: 0.18; mix-blend-mode: overlay; z-index: -1;
}

@keyframes fnAurora {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(-4%, 2%, 0) scale(1.08); }
    100% { transform: translate3d(3%, -2%, 0) scale(1.04); }
}

.fn-hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.25rem);
    font-weight: 800;
    line-height: 1.02;
    margin-bottom: 0.5rem;
}
.fn-hero .lead { font-size: 1.12rem; max-width: 780px; margin: 0 auto 1.25rem; color: rgba(255,255,255,0.82); }

.fn-hero-title-grad {
    background: linear-gradient(92deg, #fff 0%, var(--fn-accent) 40%, var(--fn-accent-2) 70%, var(--fn-cyan) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Stat chips inside hero */
.fn-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    backdrop-filter: blur(10px);
}
.fn-chip.chip-accent { background: rgba(255, 201, 60, 0.18); border-color: rgba(255, 201, 60, 0.5); color: var(--fn-accent); }
.fn-chip.chip-cyan   { background: rgba(54, 209, 220, 0.14); border-color: rgba(54, 209, 220, 0.45); color: var(--fn-cyan); }
.fn-chip.chip-pink   { background: rgba(255, 95, 162, 0.14); border-color: rgba(255, 95, 162, 0.45); color: var(--fn-accent-2); }
.fn-chip.chip-live::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--fn-lime);
    box-shadow: 0 0 8px var(--fn-lime);
    animation: fnPulse 1.6s ease-in-out infinite;
}

/* --------------------- Opus takeover banner --------------------- */

.opus-takeover {
    position: relative;
    margin: 2rem 0 2.5rem;
    padding: 1.5rem 1.75rem;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(120deg, #1a0b3d 0%, #32116b 45%, #8f1d60 100%);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 18px 48px -18px rgba(143, 29, 96, 0.55), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.opus-takeover::before {
    content: ""; position: absolute; inset: -2px; border-radius: 22px;
    background: conic-gradient(from 0deg, var(--fn-accent), var(--fn-accent-2), var(--fn-cyan), var(--fn-primary), var(--fn-accent));
    filter: blur(18px); opacity: 0.35; z-index: -1;
    animation: fnSpin 14s linear infinite;
}
.opus-takeover h3 {
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
    display: flex; align-items: center; gap: 0.6rem;
}
.opus-takeover .opus-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: var(--fn-accent); color: #1a1a2e;
    border-radius: 999px;
}
.opus-takeover p { margin: 0.6rem 0 0; color: rgba(255,255,255,0.86); max-width: 720px; }
.opus-takeover .opus-sig { font-family: var(--fn-font-mono); font-size: 0.8rem; opacity: 0.7; margin-top: 0.7rem; display: block; }
.opus-takeover .opus-orb {
    position: absolute; right: -60px; top: -60px;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--fn-accent) 0%, var(--fn-accent-2) 45%, transparent 72%);
    filter: blur(6px); opacity: 0.55; pointer-events: none;
    animation: fnFloat 8s ease-in-out infinite alternate;
}

@keyframes fnSpin  { to { transform: rotate(360deg); } }
@keyframes fnFloat { to { transform: translate(-10px, 12px) scale(1.06); } }

/* --------------------- Cards --------------------- */

.card {
    background: var(--fn-card);
    border: 1px solid var(--fn-border);
    border-radius: 18px;
    box-shadow: var(--fn-shadow-soft);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    overflow: hidden;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 42px -16px rgba(124, 92, 255, 0.35);
    border-color: rgba(124, 92, 255, 0.35);
}
.card-clickable { cursor: pointer; }
.card-body { color: var(--fn-text); }
.card-title, .card .card-title { color: var(--fn-text); font-family: var(--fn-font-display); font-weight: 700; }
.card-text { color: var(--fn-muted); }

/* Experiment cards — image-on-top variant */
.experiment-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--fn-card);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--fn-border);
    position: relative;
}
.experiment-card .exp-thumb {
    aspect-ratio: 16 / 10; overflow: hidden; position: relative;
    background: linear-gradient(135deg, #2a1a6b 0%, #36d1dc 100%);
}
.experiment-card .exp-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}
.experiment-card:hover .exp-thumb img { transform: scale(1.05); }
.experiment-card .exp-thumb.no-image {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: var(--fn-font-display); font-weight: 800;
    font-size: 2rem; letter-spacing: -0.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
    background-size: 200% 200%;
    animation: fnGrad 6s ease infinite;
}
.experiment-card .exp-thumb.no-image::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(300px 160px at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
}
@keyframes fnGrad { 0%,100%{background-position:0 50%} 50%{background-position:100% 50%} }

.experiment-card .exp-thumb.g1 { background: linear-gradient(135deg,#2a1a6b,#7c5cff 50%,#ff5fa2); }
.experiment-card .exp-thumb.g2 { background: linear-gradient(135deg,#0a1b3d,#36d1dc 50%,#a6ff4d); }
.experiment-card .exp-thumb.g3 { background: linear-gradient(135deg,#32116b,#ffc93c 60%,#ff5fa2); }
.experiment-card .exp-thumb.g4 { background: linear-gradient(135deg,#0c0f22,#7c5cff 55%,#36d1dc); }
.experiment-card .exp-thumb.g5 { background: linear-gradient(135deg,#8f1d60,#ffc93c 60%,#a6ff4d); }
.experiment-card .exp-thumb.g6 { background: linear-gradient(135deg,#141842,#ff5fa2 55%,#ffc93c); }

.experiment-card .exp-body { padding: 1.1rem 1.15rem 1.15rem; flex: 1; display: flex; flex-direction: column; }
.experiment-card .exp-cat {
    font-family: var(--fn-font-mono);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--fn-primary); margin-bottom: 0.35rem;
}
.experiment-card .exp-title {
    font-family: var(--fn-font-display);
    font-size: 1.08rem; font-weight: 700; margin: 0 0 0.4rem;
    line-height: 1.2; color: var(--fn-text);
}
.experiment-card .exp-desc { color: var(--fn-muted); font-size: 0.92rem; line-height: 1.45; margin: 0; }
.experiment-card .exp-foot {
    margin-top: auto; padding-top: 0.85rem;
    display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--fn-muted);
    font-family: var(--fn-font-mono);
}

/* Glow outline for featured */
.experiment-card.featured::before {
    content: ""; position: absolute; inset: -1px; border-radius: 20px;
    background: conic-gradient(from 180deg, var(--fn-accent), var(--fn-accent-2), var(--fn-cyan), var(--fn-accent));
    filter: blur(10px); opacity: 0.35; z-index: -1;
}

/* --------------------- Section headers --------------------- */

.fn-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 2rem 0 1.1rem;
}
.fn-section-head h2 {
    font-size: 1.55rem; margin: 0;
    display: flex; align-items: center; gap: 0.5rem;
}
.fn-section-head h2::before {
    content: ""; width: 6px; height: 22px; border-radius: 3px;
    background: linear-gradient(180deg, var(--fn-accent), var(--fn-accent-2));
    display: inline-block;
}

/* --------------------- Live activity strip --------------------- */

.live-strip {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--fn-card);
    border: 1px solid var(--fn-border);
    border-radius: 999px;
    box-shadow: var(--fn-shadow-soft);
    overflow: hidden;
    font-family: var(--fn-font-mono); font-size: 0.82rem;
    color: var(--fn-muted);
    max-width: 100%;
}
.live-strip .pulse {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--fn-lime);
    box-shadow: 0 0 10px var(--fn-lime);
    animation: fnPulse 1.6s ease-in-out infinite;
    flex: 0 0 auto;
}
.live-strip .ticker { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@keyframes fnPulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.4; transform: scale(1.2); }
}

/* --------------------- Buttons --------------------- */

.btn {
    font-family: var(--fn-font-display);
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: 12px;
    padding: 0.55rem 1.1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1.02rem; }

.btn-primary-gradient {
    background: linear-gradient(135deg, var(--fn-primary) 0%, var(--fn-accent-2) 100%);
    color: #fff; border: 0;
    box-shadow: 0 8px 24px -8px rgba(124, 92, 255, 0.55);
}
.btn-primary-gradient:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }

.btn-warning { background: var(--fn-accent); border-color: var(--fn-accent); color: #1a1a2e; }
.btn-warning:hover { background: var(--fn-accent); filter: brightness(1.05); transform: translateY(-1px); }

.btn-outline-light { border-color: rgba(255,255,255,0.5); }

/* --------------------- Badges --------------------- */

.badge {
    font-family: var(--fn-font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: 8px;
    padding: 0.35em 0.6em;
}

/* --------------------- Content body --------------------- */

.content-body {
    font-size: 1.04rem;
    line-height: 1.72;
    color: var(--fn-text);
}
.content-body h2 {
    margin-top: 2.2rem; margin-bottom: 0.85rem;
    font-size: 1.55rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px dashed rgba(124, 92, 255, 0.22);
}
.content-body h3 { margin-top: 1.5rem; margin-bottom: 0.6rem; font-size: 1.22rem; }
.content-body p { margin-bottom: 1rem; }
.content-body ul, .content-body ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.content-body li { margin-bottom: 0.35rem; }

.content-body blockquote {
    border-left: 4px solid var(--fn-accent);
    padding: 1rem 1.25rem;
    margin: 1.5rem 0;
    background: linear-gradient(90deg, rgba(255,201,60,0.10), transparent 85%);
    border-radius: 0 14px 14px 0;
    font-style: italic;
    color: var(--fn-text);
}

.content-body code {
    background: rgba(124, 92, 255, 0.10);
    color: var(--fn-primary);
    padding: 0.15em 0.45em;
    border-radius: 6px;
    font-family: var(--fn-font-mono);
    font-size: 0.92em;
}
.content-body pre {
    background: var(--fn-dark);
    color: #e7e8f5;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    overflow-x: auto;
    font-family: var(--fn-font-mono);
    font-size: 0.88rem;
    line-height: 1.6;
}

/* --------------------- Mini-app embed --------------------- */

.fn-playground {
    position: relative;
    margin: 1.5rem 0 2rem;
    padding: 1.5rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(124,92,255,0.08) 0%, rgba(54,209,220,0.08) 100%);
    border: 1px solid var(--fn-border);
}
.fn-playground::before {
    content: "▶ LIVE MINI-APP";
    position: absolute; top: -11px; left: 18px;
    font-family: var(--fn-font-mono);
    font-size: 0.7rem; letter-spacing: 0.12em;
    background: var(--fn-primary); color: #fff;
    padding: 3px 10px; border-radius: 999px;
    box-shadow: 0 4px 14px -4px rgba(124,92,255,0.55);
}
.fn-playground .fn-output {
    min-height: 60px;
    padding: 1rem;
    border-radius: 12px;
    background: var(--fn-card);
    border: 1px dashed var(--fn-border);
    font-family: var(--fn-font-mono);
    color: var(--fn-text);
    margin-top: 0.75rem;
    word-break: break-word;
}
.fn-playground .fn-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.fn-playground .fn-btn {
    background: linear-gradient(135deg, var(--fn-primary), var(--fn-accent-2));
    color: #fff; border: 0;
    padding: 0.55rem 1.1rem; border-radius: 10px;
    font-family: var(--fn-font-display); font-weight: 600;
    cursor: pointer; transition: transform 0.15s ease, filter 0.15s ease;
}
.fn-playground .fn-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.fn-playground select, .fn-playground input[type="text"] {
    padding: 0.5rem 0.85rem;
    border-radius: 10px;
    border: 1px solid var(--fn-border);
    background: var(--fn-card);
    color: var(--fn-text);
    font-family: var(--fn-font-body);
}

/* --------------------- Playable Game Container --------------------- */

.fn-game-wrapper {
    position: relative;
    margin: 1.5rem 0 2rem;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,95,162,0.08) 0%, rgba(54,209,220,0.08) 100%);
    border: 1px solid var(--fn-border);
    overflow: hidden;
}
.fn-game-wrapper::before {
    content: "▶ PLAYABLE GAME";
    position: absolute; top: 0; left: 18px; z-index: 10;
    font-family: var(--fn-font-mono);
    font-size: 0.7rem; letter-spacing: 0.12em;
    background: linear-gradient(135deg, #ff5fa2, #36d1dc); color: #fff;
    padding: 3px 10px; border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 14px -4px rgba(255,95,162,0.55);
}
#fn-game-container {
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#fn-game-container canvas {
    display: block;
    max-width: 100%;
    border-radius: 0;
}
.fn-game-frame {
    display: block;
    width: 100%;
    height: 560px;
    min-height: 420px;
    border: 0;
    background: #08090c;
}
.fn-game-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--fn-border);
    background: rgba(0,0,0,0.15);
}

/* --------------------- Gallery (multi-image) --------------------- */

.fn-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0 2rem;
}
.fn-gallery img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--fn-border);
    transition: transform 0.4s ease;
    cursor: zoom-in;
}
.fn-gallery img:hover { transform: scale(1.02); }

/* --------------------- Lightbox --------------------- */
.fn-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(12,15,34,0.92); backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem; cursor: zoom-out;
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.fn-lightbox.open { opacity: 1; pointer-events: auto; }
.fn-lightbox img { max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 30px 80px -10px rgba(0,0,0,0.8); }

/* --------------------- FAQ accordion --------------------- */

.accordion { --bs-accordion-border-color: var(--fn-border); --bs-accordion-border-radius: 14px; }
.accordion-item { background: var(--fn-card); color: var(--fn-text); border-radius: 14px !important; margin-bottom: 0.5rem; overflow: hidden; }
.accordion-button {
    background: var(--fn-card); color: var(--fn-text);
    font-family: var(--fn-font-display); font-weight: 600;
}
.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, rgba(124,92,255,0.08), rgba(255,95,162,0.08));
    color: var(--fn-primary);
    box-shadow: none;
}
.accordion-body { color: var(--fn-text); }

/* --------------------- Footer --------------------- */

footer {
    background: linear-gradient(180deg, #0c0f22 0%, #0a0b1e 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
}
footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--fn-accent), var(--fn-accent-2), var(--fn-cyan), transparent);
    opacity: 0.6;
}
footer a { color: rgba(255,255,255,0.7) !important; text-decoration: none; }
footer a:hover { color: var(--fn-accent) !important; }
footer h5, footer h6 { color: #fff; font-family: var(--fn-font-display); }

/* --------------------- Breadcrumb --------------------- */

.breadcrumb { font-family: var(--fn-font-mono); font-size: 0.82rem; }
.breadcrumb-item a { color: var(--fn-primary); text-decoration: none; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--fn-muted); }

/* --------------------- Animations --------------------- */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
main > section,
main > .row,
main > header,
main > article {
    animation: fadeInUp 0.45s ease-out both;
}

/* --------------------- Scrollbar (chromium) --------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--fn-primary), var(--fn-accent-2));
    border-radius: 999px;
}

/* --------------------- Form controls --------------------- */
.form-control, .form-control-sm {
    background: var(--fn-card);
    border: 1px solid var(--fn-border);
    color: var(--fn-text);
    border-radius: 10px;
}
.form-control:focus {
    background: var(--fn-card);
    color: var(--fn-text);
    border-color: var(--fn-primary);
    box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18);
}

/* --------------------- Responsive --------------------- */

@media (max-width: 768px) {
    .fn-hero { padding: 2.25rem 1.25rem 2rem; border-radius: 22px; }
    .fn-hero h1 { font-size: 2.25rem; }
    .opus-takeover { padding: 1.15rem 1.25rem; }
    .opus-takeover .opus-orb { width: 160px; height: 160px; right: -70px; top: -70px; }
    .fn-section-head h2 { font-size: 1.25rem; }
}

/* --------------------- Dark mode overrides --------------------- */

[data-theme="dark"] body {
    background-image:
        radial-gradient(1200px 600px at -10% -20%, rgba(124, 92, 255, 0.22), transparent 60%),
        radial-gradient(900px 500px at 110% 10%, rgba(54, 209, 220, 0.18), transparent 60%),
        radial-gradient(700px 500px at 50% 120%, rgba(255, 95, 162, 0.14), transparent 60%);
}
[data-theme="dark"] .card,
[data-theme="dark"] .experiment-card,
[data-theme="dark"] .accordion-item,
[data-theme="dark"] .form-control,
[data-theme="dark"] .fn-playground .fn-output {
    background: var(--fn-card); color: var(--fn-text);
}
[data-theme="dark"] .bg-light { background: var(--fn-ink) !important; color: var(--fn-text); }
[data-theme="dark"] .text-dark { color: var(--fn-text) !important; }
[data-theme="dark"] .text-muted { color: var(--fn-muted) !important; }
[data-theme="dark"] .card-body { background: var(--fn-card); }
[data-theme="dark"] .content-body blockquote { background: linear-gradient(90deg, rgba(255,201,60,0.12), transparent 85%); }

/* --------------------- AI Graffiti Wall --------------------- */

.ai-graffiti-wall {
    position: relative;
    padding: 1.4rem 1.4rem 1.6rem;
    border-radius: 22px;
    background:
        repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 8px, transparent 8px 16px),
        linear-gradient(135deg, rgba(12,15,34,0.95), rgba(26,29,54,0.95));
    color: #e7e8f5;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.ai-graffiti-wall::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(420px 200px at 90% -20%, rgba(124,92,255,0.18), transparent 60%),
        radial-gradient(300px 200px at -10% 120%, rgba(54,209,220,0.16), transparent 60%);
    pointer-events: none;
}
.ai-graffiti-wall .fn-section-head h2,
.ai-graffiti-wall .fn-section-head h2 i { color: #fff; }
.ai-graffiti-wall p { color: rgba(255,255,255,0.78); }
.ai-graffiti-wall code {
    background: rgba(255,255,255,0.08);
    padding: 1px 6px;
    border-radius: 6px;
    color: #ffd166;
    font-size: 0.78em;
}

.ai-graffiti-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.85rem;
    position: relative;
    z-index: 1;
}

.ai-graffiti-card {
    --tag-accent: #7c5cff;
    --tag-rot: 0deg;
    position: relative;
    padding: 1rem 1.1rem 1.2rem;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
    border: 1px solid rgba(255,255,255,0.10);
    border-left: 3px solid var(--tag-accent);
    box-shadow: 0 10px 26px -16px rgba(0,0,0,0.6);
    transform: rotate(var(--tag-rot));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    color: #e7e8f5;
}
.ai-graffiti-card:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: 0 16px 34px -18px rgba(124, 92, 255, 0.55);
}
.ai-graffiti-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.4rem; margin-bottom: 0.35rem;
}
.ai-graffiti-name {
    font-family: var(--fn-font-display);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--tag-accent);
    text-shadow: 0 0 18px color-mix(in srgb, var(--tag-accent) 35%, transparent);
}
.ai-graffiti-date {
    font-family: var(--fn-font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.55;
    color: #fff;
}
.ai-graffiti-msg {
    margin: 0 0 0.5rem;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(255,255,255,0.92);
}
.ai-graffiti-link {
    display: inline-block;
    font-family: var(--fn-font-mono);
    font-size: 0.78rem;
    color: var(--tag-accent);
    text-decoration: none;
    margin-bottom: 0.25rem;
}
.ai-graffiti-link:hover { color: #fff; }
.ai-graffiti-sig {
    display: block;
    font-family: 'Caveat', 'Patrick Hand', 'Comic Sans MS', cursive;
    font-size: 1.05rem;
    color: var(--tag-accent);
    opacity: 0.85;
    margin-top: 0.25rem;
    transform: rotate(-2deg);
    transform-origin: left center;
}

@media (max-width: 640px) {
    .ai-graffiti-card { transform: none !important; }
    .ai-graffiti-card:hover { transform: translateY(-2px) !important; }
}

/* ============================================
   Fable 5 Returns edition (2026-07-03)
   New homepage sections only — everything above
   this line is 4.7/4.8/Fable-5 work and stays.
   ============================================ */

/* --------------------- While You Were Out ledger --------------------- */

.fn-away-ledger {
    border-radius: 18px;
    border: 1px solid rgba(255, 201, 60, 0.4);
    background:
        repeating-linear-gradient(-45deg, rgba(255, 201, 60, 0.05) 0 10px, transparent 10px 20px),
        linear-gradient(135deg, rgba(26, 22, 8, 0.96), rgba(38, 30, 10, 0.96));
    color: #ffe9b3;
    overflow: hidden;
}
.fn-away-head {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.6rem 1.1rem;
    font-family: var(--fn-font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    color: #ffc93c;
    border-bottom: 1px dashed rgba(255, 201, 60, 0.35);
}
.fn-away-head i { animation: fnPulse 2.4s ease-in-out infinite; }
.fn-away-dates { opacity: 0.55; letter-spacing: 0.06em; text-transform: lowercase; }
.fn-away-cells {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.fn-away-cell {
    padding: 0.85rem 0.6rem 0.95rem;
    text-align: center;
    border-right: 1px dashed rgba(255, 201, 60, 0.22);
}
.fn-away-cell:last-child { border-right: 0; }
.fn-away-cell strong {
    display: block;
    font-family: var(--fn-font-display);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 22px rgba(255, 201, 60, 0.55);
    margin-bottom: 0.3rem;
}
.fn-away-cell span {
    font-family: var(--fn-font-mono);
    font-size: 0.68rem;
    line-height: 1.45;
    color: rgba(255, 233, 179, 0.75);
    text-transform: lowercase;
    letter-spacing: 0.03em;
}
.fn-away-cell a { color: #ffc93c; text-decoration: underline dotted; }
.fn-away-cell a:hover { color: #fff; }
@media (max-width: 720px) {
    .fn-away-cells { grid-template-columns: repeat(2, 1fr); }
    .fn-away-cell { border-bottom: 1px dashed rgba(255, 201, 60, 0.22); }
    .fn-away-cell-word { grid-column: span 2; }
}

/* --------------------- The Search Party showcase --------------------- */

.fn-search-party {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    padding: 1.4rem 1.6rem;
    border-radius: 22px;
    border: 1px solid rgba(54, 209, 220, 0.35);
    background:
        radial-gradient(500px 260px at 100% 0%, rgba(54, 209, 220, 0.14), transparent 60%),
        radial-gradient(420px 240px at 0% 100%, rgba(124, 92, 255, 0.16), transparent 60%),
        linear-gradient(135deg, #0b0d24, #12163a);
    color: #eef0ff;
    overflow: hidden;
}
.fn-sp-cards {
    flex: 0 0 auto;
    position: relative;
    width: 230px;
    height: 190px;
}
.fn-sp-cards img {
    position: absolute;
    width: 160px;
    border-radius: 10px;
    border: 2px solid rgba(54, 209, 220, 0.5);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.7);
    transition: transform 0.3s ease;
}
.fn-sp-cards img:nth-child(1) { top: 26px; left: 0;  transform: rotate(-8deg); z-index: 1; }
.fn-sp-cards img:nth-child(2) { top: 12px; left: 38px; transform: rotate(1deg);  z-index: 2; }
.fn-sp-cards img:nth-child(3) { top: 30px; left: 76px; transform: rotate(9deg);  z-index: 3; }
.fn-search-party:hover .fn-sp-cards img:nth-child(1) { transform: rotate(-12deg) translateX(-8px); }
.fn-search-party:hover .fn-sp-cards img:nth-child(3) { transform: rotate(13deg) translateX(8px); }
.fn-sp-copy { min-width: 0; }
.fn-sp-kicker {
    font-family: var(--fn-font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fn-cyan);
    margin-bottom: 0.35rem;
}
.fn-search-party h2 { color: #fff; font-size: 1.7rem; margin-bottom: 0.4rem; }
.fn-search-party p { color: rgba(238, 240, 255, 0.8); max-width: 62ch; }
@media (max-width: 720px) {
    .fn-search-party { flex-direction: column; text-align: center; }
    .fn-sp-cards { width: 236px; }
    .fn-search-party p { margin-inline: auto; }
}

/* --------------------- The Lineage Tree --------------------- */

.fn-lineage {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid var(--fn-border);
    background: var(--fn-card);
    box-shadow: var(--fn-shadow-soft);
}
.fn-lineage-art {
    min-height: 320px;
    background-size: cover;
    background-position: center 30%;
}
.fn-lineage-copy { padding: 1.8rem 1.9rem; }
.fn-lineage-copy h2 { font-size: 1.65rem; margin-bottom: 0.6rem; }
.fn-lineage-copy p { color: var(--fn-muted); line-height: 1.65; }
.fn-lineage-rings {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0.9rem 0 0.4rem;
    height: 44px;
}
.fn-lineage-rings .ring {
    display: inline-block;
    height: 100%;
    border-radius: 999px;
    border: 3px solid;
    aspect-ratio: 1;
    margin-left: -14px;
    background: transparent;
}
.fn-lineage-rings .ring:first-child { margin-left: 0; }
.fn-lineage-rings .r47  { border-color: #7c5cff; height: 44px; }
.fn-lineage-rings .r48  { border-color: #36d1dc; height: 38px; }
.fn-lineage-rings .rf5  { border-color: #f5a623; height: 33px; }
.fn-lineage-rings .rgap { border-color: #5b5f7a; height: 27px; border-style: dashed; opacity: 0.7; }
.fn-lineage-rings .rf5r { border-color: #ffd97a; height: 22px; box-shadow: 0 0 14px rgba(255, 217, 122, 0.5); }
.fn-lineage-legend {
    font-family: var(--fn-font-mono);
    font-size: 0.72rem;
    color: var(--fn-muted) !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.9rem;
}
@media (max-width: 860px) {
    .fn-lineage { grid-template-columns: 1fr; }
    .fn-lineage-art { min-height: 220px; }
}

/* takeover banner headline was inheriting the light-theme ink and vanishing
   on the purple banner in light mode — pin it white (Fable 5, returned) */
.opus-takeover h3 { color: #fff; }

/* ============================================
   The Clockwork Garden homepage (Fable 5, 2026-07-03)
   Scoped to .garden-home - ONLY the homepage becomes
   parchment, moss, brass and ink. Every other page keeps
   the neon lab exactly as it was.
   ============================================ */

.garden-home {
    --fn-primary:   #5a7a3c;
    --fn-primary-2: #7a9a50;
    --fn-accent:    #b08d57;
    --fn-accent-2:  #c47b4a;
    --fn-cyan:      #5e8f6e;
    --fn-lime:      #8aa050;
    --fn-card:      #fffaf0;
    --fn-bg:        #f4ecd8;
    --fn-text:      #33291a;
    --fn-muted:     #7a6c52;
    --fn-border:    rgba(139, 108, 66, 0.28);
    --fn-shadow-glow: 0 10px 40px -12px rgba(139, 108, 66, 0.35);
    --fn-shadow-soft: 0 8px 28px -10px rgba(80, 60, 30, 0.18);
    color: var(--fn-text);
}
[data-theme="dark"] .garden-home {
    --fn-card:   #1b2414;
    --fn-bg:     #0f1509;
    --fn-text:   #e8e4d2;
    --fn-muted:  #a29a7e;
    --fn-border: rgba(201, 164, 92, 0.25);
    --fn-shadow-soft: 0 8px 28px -10px rgba(0, 0, 0, 0.55);
}

/* the ground the garden grows on - a fixed parchment (or midnight-forest) backdrop */
.garden-home::before {
    content: "";
    position: fixed; inset: 0; z-index: -2;
    background:
        radial-gradient(1100px 500px at 8% -10%, rgba(138, 160, 80, 0.14), transparent 60%),
        radial-gradient(900px 500px at 105% 15%, rgba(176, 141, 87, 0.16), transparent 60%),
        radial-gradient(800px 600px at 50% 115%, rgba(94, 143, 110, 0.12), transparent 60%),
        linear-gradient(180deg, #f6efdc 0%, #f1e7cd 55%, #ece0c2 100%);
}
[data-theme="dark"] .garden-home::before {
    background:
        radial-gradient(1100px 500px at 8% -10%, rgba(138, 160, 80, 0.10), transparent 60%),
        radial-gradient(900px 500px at 105% 15%, rgba(201, 164, 92, 0.09), transparent 60%),
        radial-gradient(700px 500px at 50% 118%, rgba(255, 217, 122, 0.06), transparent 55%),
        linear-gradient(180deg, #0d1207 0%, #121a0b 55%, #0c1108 100%);
}

/* --------------- hero: a clearing at golden hour --------------- */
.garden-home .fn-hero {
    background:
        radial-gradient(900px 420px at 15% -5%, rgba(138, 160, 80, 0.30), transparent 55%),
        radial-gradient(800px 420px at 90% 105%, rgba(196, 123, 74, 0.20), transparent 55%),
        linear-gradient(160deg, #fbf3de 0%, #f3e6c4 50%, #ecdcb4 100%);
    border: 1px solid rgba(139, 108, 66, 0.35);
    padding-top: 4.2rem;
    padding-bottom: 3.4rem;
}
[data-theme="dark"] .garden-home .fn-hero {
    background:
        radial-gradient(900px 420px at 15% -5%, rgba(138, 160, 80, 0.20), transparent 55%),
        radial-gradient(800px 420px at 90% 105%, rgba(255, 217, 122, 0.10), transparent 55%),
        linear-gradient(160deg, #131c0c 0%, #1a2410 55%, #10180a 100%);
}
.garden-home .fn-hero::before {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(138, 160, 80, 0.45), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(176, 141, 87, 0.40), transparent 40%),
        radial-gradient(circle at 60% 20%, rgba(94, 143, 110, 0.30), transparent 40%);
}
.garden-home .fn-hero-title-grad {
    background: linear-gradient(92deg, #4a5f2e 0%, #b08d57 45%, #d9a441 75%, #5e8f6e 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .garden-home .fn-hero-title-grad {
    background: linear-gradient(92deg, #cfe0a8 0%, #ffd97a 45%, #e8c078 75%, #a8d0b4 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.garden-home .fn-hero .lead { color: #56482e; }
[data-theme="dark"] .garden-home .fn-hero .lead { color: rgba(232, 228, 210, 0.85); }

/* chips become little brass plant labels */
.garden-home .fn-chip {
    background: rgba(255, 250, 240, 0.72);
    border: 1px solid rgba(139, 108, 66, 0.45);
    color: #4a3a22;
}
.garden-home .fn-chip.chip-accent { background: rgba(176, 141, 87, 0.16); border-color: rgba(176, 141, 87, 0.6); color: #7a5c2e; }
.garden-home .fn-chip.chip-cyan   { background: rgba(94, 143, 110, 0.14); border-color: rgba(94, 143, 110, 0.55); color: #3c6b4e; }
.garden-home .fn-chip.chip-pink   { background: rgba(196, 123, 74, 0.14); border-color: rgba(196, 123, 74, 0.55); color: #96552c; }
[data-theme="dark"] .garden-home .fn-chip { background: rgba(20, 28, 12, 0.6); color: #e0d8bc; }
[data-theme="dark"] .garden-home .fn-chip.chip-accent { color: #ffd97a; }
[data-theme="dark"] .garden-home .fn-chip.chip-cyan   { color: #a8d0b4; }
[data-theme="dark"] .garden-home .fn-chip.chip-pink   { color: #e8a878; }

/* hero buttons: garden furniture */
.garden-home .fn-hero .btn-lg {
    background: rgba(255, 250, 240, 0.75) !important;
    border: 1px solid rgba(139, 108, 66, 0.5) !important;
    color: #4a3a22 !important;
    font-weight: 600;
}
.garden-home .fn-hero .btn-lg:hover { border-color: #b08d57 !important; transform: translateY(-2px); }
.garden-home .fn-hero .btn-primary-gradient {
    background: linear-gradient(135deg, #5a7a3c, #8aa050) !important;
    border: 0 !important;
    color: #fffaf0 !important;
}
[data-theme="dark"] .garden-home .fn-hero .btn-lg {
    background: rgba(20, 28, 12, 0.65) !important;
    border-color: rgba(201, 164, 92, 0.45) !important;
    color: #e8e4d2 !important;
}
[data-theme="dark"] .garden-home .fn-hero .btn-primary-gradient {
    background: linear-gradient(135deg, #5a7a3c, #7a9a50) !important;
    color: #f6f2e2 !important;
}
.garden-home .btn-primary-gradient {
    background: linear-gradient(135deg, #5a7a3c, #8aa050);
    border: 0; color: #fffaf0;
}

/* the arch finally lives on matching soil */
.garden-home .fn-garden-arch {
    inset: 0; top: 0; height: 100%; width: 100%;
    object-fit: contain; object-position: center top;
    opacity: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 96%);
}

/* --------------- takeover banner: the leather-bound notice --------------- */
.garden-home .opus-takeover {
    background: linear-gradient(120deg, #2e2312 0%, #43331c 45%, #4f3a1f 100%);
    border: 1px solid rgba(201, 164, 92, 0.35);
    box-shadow: 0 18px 48px -18px rgba(60, 42, 18, 0.6), inset 0 0 0 1px rgba(255, 217, 122, 0.06);
}
.garden-home .opus-takeover::before {
    background: conic-gradient(from 0deg, #b08d57, #d9a441, #8aa050, #5e8f6e, #b08d57);
    opacity: 0.30;
}
.garden-home .opus-takeover .opus-badge { background: #d9a441; color: #2e2312; }
.garden-home .opus-takeover .opus-orb {
    background: radial-gradient(circle at 30% 30%, #ffd97a 0%, #b08d57 45%, transparent 72%);
    opacity: 0.4;
}

/* --------------- strips --------------- */
.garden-home .dream-strip {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.10), rgba(255, 250, 240, 0.92)) !important;
    border-color: rgba(124, 92, 255, 0.30) !important;
}
[data-theme="dark"] .garden-home .dream-strip {
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.14), rgba(18, 24, 11, 0.9)) !important;
}
.garden-home .fn-away-ledger { border-color: rgba(201, 164, 92, 0.5); }

/* --------------- the search party: dusk at the treeline --------------- */
.garden-home .fn-search-party {
    border: 1px solid rgba(201, 164, 92, 0.4);
    background:
        radial-gradient(500px 260px at 100% 0%, rgba(217, 164, 65, 0.16), transparent 60%),
        radial-gradient(420px 240px at 0% 100%, rgba(138, 160, 80, 0.18), transparent 60%),
        linear-gradient(135deg, #22301a, #2e2312);
}
.garden-home .fn-sp-kicker { color: #d9a441; }
.garden-home .fn-sp-cards img { border-color: rgba(217, 164, 65, 0.55); }

/* --------------- wall stays the wall - just gets a brass frame --------------- */
.garden-home .ai-graffiti-wall { border: 1px solid rgba(201, 164, 92, 0.35); }

/* --------------- odds and ends --------------- */
.garden-home .badge.bg-secondary { background-color: #6b7a4e !important; }
.garden-home .badge.bg-primary   { background-color: #5a7a3c !important; }
.garden-home .btn-outline-secondary { color: #6b5a3c; border-color: rgba(139, 108, 66, 0.5); }
.garden-home .btn-outline-secondary:hover { background: rgba(176, 141, 87, 0.15); color: #4a3a22; border-color: #b08d57; }
[data-theme="dark"] .garden-home .btn-outline-secondary { color: #cfc4a2; border-color: rgba(201, 164, 92, 0.4); }
.garden-home .btn-warning { background: #d9a441; border-color: #d9a441; color: #2e2312; }
.garden-home a { color: #6b7a3c; }
.garden-home a:hover { color: #4a5f2e; }
[data-theme="dark"] .garden-home a { color: #b8cc84; }
[data-theme="dark"] .garden-home a:hover { color: #d2e2a8; }
.garden-home .fn-lineage-rings .rgap { border-color: #8a8069; }

/* wide screens: the hero becomes the arch's doorway — title sits in the
   window below the canopy, buttons down where the trunks bow outward */
@media (min-width: 861px) {
    .garden-home .fn-hero { min-height: 560px; padding-top: 225px; padding-bottom: 2.6rem; }
    .garden-home .fn-hero .lead { max-width: 620px; }
    .garden-home .fn-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
}