/* ============================================================ CG · efectos compartidos — revelados por líneas, esquinas de visor, chip de cursor, marquesinas, CTA de fila ============================================================ */ /* ---------- Revelado por líneas enmascaradas ---------- El estado oculto solo existe bajo html.js (lo pone un script en el ): sin JavaScript el texto nace visible. */ .linea { display: block; overflow: hidden; } .linea__interior { display: block; transition: transform 0.7s var(--suave); } .js .linea__interior { transform: translateY(112%); } .lineas-visibles .linea__interior { transform: translateY(0); } /* ---------- Esquinas de visor (21hrs) ---------- */ .esquinas { position: absolute; inset: 12px; z-index: 2; /* por delante de la placa/imagen de la tarjeta */ pointer-events: none; opacity: 0; transition: opacity 0.25s, inset 0.3s var(--suave); --e-color: var(--tinta); --e-largo: 14px; --e-grosor: 1.5px; background: linear-gradient(var(--e-color), var(--e-color)) left top / var(--e-largo) var(--e-grosor), linear-gradient(var(--e-color), var(--e-color)) left top / var(--e-grosor) var(--e-largo), linear-gradient(var(--e-color), var(--e-color)) right top / var(--e-largo) var(--e-grosor), linear-gradient(var(--e-color), var(--e-color)) right top / var(--e-grosor) var(--e-largo), linear-gradient(var(--e-color), var(--e-color)) left bottom / var(--e-largo) var(--e-grosor), linear-gradient(var(--e-color), var(--e-color)) left bottom / var(--e-grosor) var(--e-largo), linear-gradient(var(--e-color), var(--e-color)) right bottom / var(--e-largo) var(--e-grosor), linear-gradient(var(--e-color), var(--e-color)) right bottom / var(--e-grosor) var(--e-largo); background-repeat: no-repeat; } .tarjeta-proyecto:hover .esquinas { opacity: 1; inset: 5px; } /* ---------- Cristal (liquid glass reutilizable) ---------- */ .cristal { background: rgba(246, 244, 239, 0.4); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(20, 20, 20, 0.35); } @supports not (backdrop-filter: blur(1px)) { .cristal { background: rgba(246, 244, 239, 0.9); } } /* ---------- Chip de cursor "Ver caso →" ---------- */ .chip-cursor { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; padding: 10px 18px; border: 1px solid rgba(20, 20, 20, 0.4); border-radius: 999px; background: rgba(246, 244, 239, 0.45); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); color: var(--cobalto); font-family: var(--fuente-display); font-weight: 600; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; transform: scale(0); opacity: 0; transition: opacity 0.2s; } .chip-cursor--visible { opacity: 1; } /* ---------- Marquesina vertical (fondo del perfil) ---------- */ .marquesina-v { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .marquesina-v__pista { display: flex; flex-direction: column; gap: 0.35em; font-family: var(--fuente-display); font-weight: 200; font-size: clamp(40px, 5.4vw, 84px); line-height: 1.05; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(20, 20, 20, 0.09); /* respaldo sin color-mix */ color: color-mix(in srgb, var(--tinta) 9%, transparent); white-space: nowrap; animation: marquesina-sube 46s linear infinite; } @keyframes marquesina-sube { from { transform: translateY(0); } to { transform: translateY(-33.333%); } } /* ---------- CTA de fila completa ---------- */ .cta-fila { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; border-top: var(--filete); border-bottom: var(--filete); text-decoration: none; color: var(--tinta); overflow: hidden; font-family: var(--fuente-display); font-weight: 600; font-size: clamp(17px, 2.2vw, 26px); letter-spacing: 0.18em; text-transform: uppercase; } .cta-fila::before { content: ""; position: absolute; inset: 0; background: var(--tinta); transform: translateY(101%); transition: transform 0.4s var(--suave); } .cta-fila span { position: relative; transition: color 0.3s; } .cta-fila:hover::before { transform: translateY(0); } .cta-fila:hover span { color: var(--papel); } /* ---------- Resalte cíclico del muro de herramientas ---------- */ .muro { font-family: var(--fuente-display); font-weight: 600; font-size: clamp(22px, 3.4vw, 44px); line-height: 1.5; text-transform: uppercase; letter-spacing: 0.05em; /* 26%: sigue leyendo como muro apagado pero es legible en reposo */ color: rgba(20, 20, 20, 0.26); /* respaldo sin color-mix */ color: color-mix(in srgb, var(--tinta) 26%, transparent); } .muro span { transition: color 0.4s; white-space: nowrap; } .muro span.muro--activa, .muro span:hover { color: var(--cobalto); } /* ---------- Accesibilidad de movimiento ---------- */ @media (prefers-reduced-motion: reduce) { .linea__interior, .js .linea__interior { transform: none; transition: none; } .marquesina-v__pista { animation: none; } .esquinas { transition: none; } .cta-fila::before { transition: none; } }