/* ========================================================= 01 · LETTERS Las letras THYART como stickers. Las genera js/letters.js y las posiciona con --x / --y / --s (inicio y detalle). Animaciones: letters-pop (entrada) · letters-float (flotar en reposo) · letters-tip-in (etiqueta) Estados en y en cada letra: .is-active / .is-dim ========================================================= */ .stage{position:fixed;inset:0;overflow:hidden} .letters{position:absolute;inset:0;pointer-events:none;--size:200px} .letters__item{ position:absolute;left:50%;top:50%;z-index:1; width:var(--size);height:calc(var(--size) * 1.08); --x:0px;--y:0px;--s:1; transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--tilt,0deg)) scale(var(--s)); transition:transform 1s var(--ease),filter .7s var(--ease); pointer-events:auto;border-radius:28px;-webkit-tap-highlight-color:transparent; } .letters__item.is-active{z-index:3} .letters__item.is-dim{filter:grayscale(1) brightness(.32)} .letters__item:focus-visible{outline:2px solid var(--accent);outline-offset:8px} /* flotar suave solo en inicio */ .letters__float{ position:relative;display:block;width:100%;height:100%; animation:letters-float 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.1s); } body[data-mode="detail"] .letters__float{animation:none} .letters__glyph{ display:block;width:100%;height:100%;overflow:visible;scale:1; transition:scale .5s var(--ease),rotate .5s var(--ease); animation:letters-pop 1s var(--ease) calc(.15s + var(--i) * .09s) backwards; } @media (hover:hover){ .letters__item:hover .letters__glyph{scale:1.1;rotate:-4deg} } /* capas del sticker: borde oscuro exterior → aro de color → línea oscura → relleno claro */ .letters__glyph text{ font-family:var(--font-letters);font-weight:700;font-size:190px;text-anchor:middle; stroke-linejoin:round;stroke-linecap:round; } .glyph__edge{fill:#1b1330;stroke:#1b1330;stroke-width:46} .glyph__rim {fill:var(--c);stroke:var(--c);stroke-width:34} .glyph__line{fill:#1b1330;stroke:#1b1330;stroke-width:9} .glyph__fill{fill:var(--ink)} /* etiqueta al pasar el cursor */ .letters__tip{ position:absolute;left:50%;bottom:100%;translate:-50% 0;margin-bottom:-6px; padding:8px 16px;border-radius:999px;background:#111;border:1px solid var(--line); font-size:.95rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none; } .letters__item:hover .letters__tip, .letters__item:focus-visible .letters__tip{animation:letters-tip-in .35s var(--ease) both} body[data-mode="detail"] .letters__item.is-active .letters__tip{display:none} @keyframes letters-pop{ from{opacity:0;transform:translateY(40px) scale(.5) rotate(-12deg)} to{opacity:1;transform:none} } @keyframes letters-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} } @keyframes letters-tip-in{ from{opacity:0;transform:translateY(6px) scale(.96)} to{opacity:1;transform:none} }