/* ============ LIVING WORLD LAYER — ambient depth + 3D ============ */ /* base cosmos sits on ; body goes transparent so the canvas shows through */ html{background:radial-gradient(130% 90% at 50% -10%, #0c1226 0%, #070a15 55%, #05060d 100%) fixed} body{background:transparent !important} .living-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block} /* cards become 3D-ready surfaces */ .world-card,.dex-card,.grave,.radar-col,.sv-card,.st-card,.lab-card,.dict-compare,.fs-tile{ transform-style:preserve-3d; transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1); will-change:transform; } .living-tilt{box-shadow:0 30px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(141,242,80,.12) !important} /* gentle idle life on glyph badges + crew art */ @media (prefers-reduced-motion:no-preference){ .sv-badge{animation:livingBreath 5.5s ease-in-out infinite} .living-float{animation:livingFloat 7s ease-in-out infinite} } @keyframes livingBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes livingFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1deg)}} @media (prefers-reduced-motion:reduce){ .living-bg{opacity:.6} .world-card,.dex-card,.grave,.radar-col,.sv-card,.st-card,.lab-card,.dict-compare,.fs-tile{transition:none} } /* readability: breathing room for condensed display headings at small sizes */ .fs-tile h3,.fr-card h3,.dict-term h2,.grave .gname,.radar-col h3,.st-card .nm,.meme-related .btn{letter-spacing:.03em} .sv-glyph,.fs-glyph,.dex-glyph{letter-spacing:.04em} .fr-card h3{font-family:var(--font-display);font-size:1.35rem;letter-spacing:.05em;line-height:1.05} /* decorative header art */ .page-hero-art{position:absolute;top:-10px;right:-6px;width:clamp(130px,24vw,240px);opacity:.32;pointer-events:none;z-index:-1} .page-hero-art svg{width:100%;height:100%;overflow:visible} .tl-line .page-hero-art{top:-30px}