/* Bosque — demo técnica. Colores y tipografía SÓLO de styles/tokens.css: aquí no hay paleta propia. La profundidad sale de mezclar el tono de rama con la niebla (--highlight / --bg), no de colores nuevos. */ * { box-sizing: border-box; } html, body { font-family: var(--font-sans); color: var(--text); background: var(--bg); overflow: hidden; } .con-dedo { display: none; } /* Táctil = sin hover Y puntero grueso: un Chromium sin pantalla dice «hover: none» pero no «coarse». */ @media (hover: none) and (pointer: coarse) { .con-raton { display: none; } .con-dedo { display: inline; } } /* Pie: la marca comercial («Zymbiotek»); la razón social va sólo en lo legal. Cristal para que se lea sobre las ramas también en móvil. */ .pie { position: fixed; z-index: 5; right: var(--space-4); bottom: max(var(--space-3), env(safe-area-inset-bottom)); padding: 6px 12px; font-size: .8rem; line-height: 1.3; color: var(--muted); background: var(--glass-fill); border: 1px solid var(--glass-edge); border-radius: var(--radius-pill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .pie strong { color: var(--text); font-weight: 700; } /* Cielo: --highlight arriba, --bg abajo, y un resplandor cálido de --organic-amber entre las copas. Va en .bosque (fijo, del tamaño exacto de la ventana) y no en : el fondo del body se propaga al lienzo del documento y allí se repetía en franjas horizontales. */ .bosque { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(ellipse 60% 45% at 78% 6%, color-mix(in srgb, var(--organic-amber) 16%, transparent), transparent 70%), linear-gradient(180deg, var(--highlight) 0%, color-mix(in srgb, var(--highlight) 45%, var(--bg)) 50%, var(--surface-2) 100%); } .capa { position: absolute; inset: -4%; will-change: transform; } .capa svg.ramas, .capa canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* ── Ramas ────────────────────────────────────────────────────── Corteza derivada de tokens: ámbar y verde orgánicos oscurecidos con --text (un pardo, no negro). La profundidad es NIEBLA: cada nivel conserva un --k de su color y el resto es --highlight. Sin filter: blur() — desenfocar capas grandes se recalcula en cada fotograma y hundía el rendimiento (18 fps medidos contra 61 sin él en la v1). */ .bosque { --c-corteza: color-mix(in srgb, color-mix(in srgb, var(--organic-amber-text) 40%, var(--organic-green-text)) 45%, var(--text)); --c-luz: color-mix(in srgb, var(--c-corteza) 60%, var(--organic-amber)); --c-sombra: color-mix(in srgb, var(--c-corteza) 45%, var(--text)); --c-hoja: var(--organic-green-text); --c-hoja-viva: var(--organic-green); --c-hoja-sombra: color-mix(in srgb, var(--organic-green-text) 65%, var(--text)); --c-musgo: color-mix(in srgb, var(--organic-green) 55%, var(--organic-green-text)); --niebla: var(--highlight); } .capa[data-nivel="0"] { --k: 22%; } .capa[data-nivel="1"] { --k: 40%; } .capa[data-nivel="2"] { --k: 64%; } .capa[data-nivel="3"] { --k: 100%; } .ramas .g-base { stop-color: color-mix(in srgb, var(--c-corteza) var(--k), var(--niebla)); } .ramas .g-punta { stop-color: color-mix(in srgb, var(--c-luz) calc(var(--k) * .85), var(--niebla)); } .ramas .luz { fill: color-mix(in srgb, var(--c-luz) var(--k), var(--niebla)); opacity: .5; } .ramas .sombra { fill: color-mix(in srgb, var(--c-sombra) var(--k), var(--niebla)); opacity: .5; } .ramas .veta { fill: none; stroke: color-mix(in srgb, var(--c-sombra) var(--k), var(--niebla)); stroke-width: 1.1; stroke-linecap: round; opacity: .6; } .ramas .nudo { fill: color-mix(in srgb, var(--c-sombra) var(--k), var(--niebla)); } .ramas .nudo-anillo { fill: color-mix(in srgb, var(--c-luz) var(--k), var(--niebla)); opacity: .75; } .ramas .musgo { fill: color-mix(in srgb, var(--c-musgo) var(--k), var(--niebla)); } .ramas .hoja { fill: color-mix(in srgb, var(--c-hoja) var(--k), var(--niebla)); } .ramas .hoja.viva { fill: color-mix(in srgb, var(--c-hoja-viva) var(--k), var(--niebla)); } .ramas .hoja.sombra { fill: color-mix(in srgb, var(--c-hoja-sombra) var(--k), var(--niebla)); } /* Bandas de niebla entre niveles: fijas (no hacen parallax), así la bruma parece estar en el aire. */ .bruma { position: absolute; inset: 0; pointer-events: none; } .bruma-lejos { background: linear-gradient(180deg, color-mix(in srgb, var(--highlight) 40%, transparent) 0%, transparent 30%, transparent 55%, color-mix(in srgb, var(--highlight) 70%, transparent) 100%); } .bruma-media { background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 60%, transparent) 0%, transparent 42%); } .bruma-cerca { background: linear-gradient(0deg, color-mix(in srgb, var(--bg) 45%, transparent) 0%, transparent 20%); } /* ── Aves enlace ─────────────────────────────────────────────── */ .aves { position: absolute; inset: 0; } .ave { position: absolute; left: 0; top: 0; display: block; width: var(--tam, 96px); color: var(--text); text-decoration: none; border-radius: var(--radius-card); -webkit-tap-highlight-color: transparent; } .ave { transform-origin: var(--pie-x, 47%) var(--pie-y, 75%); } .ave-salto { display: block; transform-origin: var(--pie-x, 47%) var(--pie-y, 75%); will-change: transform; } /* El ave (, de cualquier especie) es decoración del enlace: el enlace recibe el ratón y el foco, no ella. Mira a un lado u otro (--mira = ±1). Postura de ave posada, sobre el pie (--pie-y, por especie): inclinada hacia delante --lean (8–18°; hacia delante es hacia donde mira, de ahí el × --mira) y un aplastado que lo deja algo agachado o más estirado. La pendiente de la rama la lleva el .ave, que lo contiene. */ .ave zym-ave { --zym-ave-tam: 100%; width: 100%; pointer-events: none; transform-origin: var(--pie-x, 47%) var(--pie-y, 75%); transform: rotate(calc(var(--lean, 12deg) * var(--mira, 1))) scale(calc(var(--mira, 1) * var(--pose-sx, 1)), var(--pose-sy, 1)); } /* Hasta que el widget termina su entrada (ver compatWidget en bosque.js). Opacidad y no visibility: el enlace sigue siendo enfocable y clicable mientras tanto. */ .ave.por-aparecer .ave-salto { opacity: 0; } .ave-salto { transition: opacity .25s; } .ave:focus { outline: none; } .ave:focus-visible { outline: 3px solid var(--primary-text); outline-offset: 2px; } .etiqueta { position: absolute; left: 50%; bottom: calc(100% - 4px); transform: translate(-50%, 6px) scale(.96); white-space: nowrap; padding: 6px 10px; font-size: .82rem; font-weight: 600; color: var(--text); background: var(--glass-fill); border: 1px solid var(--glass-hair); border-radius: var(--radius-pill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; transition: opacity var(--t), transform var(--t-slow); } .etiqueta::after { content: " →"; color: var(--primary-text); } .ave:hover .etiqueta, .ave:focus-visible .etiqueta, .ave.activa .etiqueta { opacity: 1; transform: translate(-50%, 0) scale(1); } /* Sin JavaScript (o antes de que cargue) las aves son una lista de enlaces legible. */ html:not(.js) .aves { position: static; display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 160px var(--space-4) 0; } html:not(.js) .ave { position: relative; } html:not(.js) .etiqueta { position: static; transform: none; opacity: 1; display: inline-block; } .js .aves:not(.lista) .ave { visibility: hidden; } .js .aves.lista .ave { visibility: visible; } @media (max-width: 560px) { .pie { left: 50%; right: auto; transform: translateX(-50%); white-space: nowrap; font-size: .78rem; } } @media (prefers-reduced-motion: reduce) { .etiqueta, .tabla { transition: none; } } /* ── Santuario: poste con carteles de madera (v5) ───────────────────────────────────────────────── La madera sale de los mismos tokens que la corteza: ámbar orgánico curtido con el verde de las hojas y aclarado con --bg (una madera tallada y algo lavada por la lluvia). Lo «pirograbado» es --primary-on (oscuro en los dos temas) quemado con --organic-amber-text: 5,9:1 sobre la madera. El dibujo de cada tabla (contorno irregular, punta de flecha, veta, nudo y clavo) lo genera bosque.js con semilla fija y va en un