/* Piezas animadas de los proyectos (sustituyen a las portadas fijas). Fuentes en widget/art/; el build las une aquí. Cada pieza vive bajo .pa- (maite, base, barraca, tav). Unidades en cqw: el contenedor mide el ancho de la tarjeta. */ /* El borde dorado del hover no encaja con la web: es cian, como el resto de tarjetas */ .project-card:hover { border-color: rgba(134, 215, 232, 0.55); box-shadow: 0 0 0 0.5px rgba(134, 215, 232, 0.65), 0 0 8px rgba(134, 215, 232, 0.16), 0 0 22px rgba(139, 123, 255, 0.09), 0 22px 62px rgba(0, 0, 0, 0.32); } .project-card:hover .project-media .project-type { color: #86d7e8; } .pm-art { position: relative; overflow: hidden; isolation: isolate; container-type: inline-size; background: #050506; } .pm-art > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* fuera de pantalla las animaciones CSS se pausan */ .pm-art.is-paused *, .pm-art.is-paused *::before, .pm-art.is-paused *::after { animation-play-state: paused !important; } /* ---- maite ---- */ /* Maité Pérez Buday: la portada hecha viva. Todo en cqw (la tarjeta mide 100cqw × 133,3cqw). */ @font-face { font-family: "mp-sg"; font-weight: 400; font-display: block; src: url(data:font/woff2;base64,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) format("woff2"); } .pa-maite { background: #11050d; font-family: "mp-sg", "Space Grotesk", system-ui, sans-serif; --mp-t1: rgba(222, 186, 200, 0.86); --mp-t2: rgba(204, 164, 182, 0.62); --mp-nav: rgba(222, 186, 200, 0.78); --mp-ind: rgba(224, 52, 88, 0.22); } .pa-maite .mp-ly { position: absolute; inset: 0; pointer-events: none; will-change: transform; } .pa-maite .mp-far { inset: -4cqw; } .pa-maite .mp-pal { position: absolute; inset: 0; } .pa-maite .mp-wine { background: linear-gradient(180deg, #11050d 0%, #3c0f22 27%, #4d1631 50%, #3a0f26 74%, #16040f 100%); } .pa-maite .mp-ind { background: linear-gradient(180deg, #05061a 0%, #12144a 27%, #1a1e5a 50%, #101340 74%, #04050f 100%); opacity: 0; } .pa-maite .mp-pal i { position: absolute; display: block; } .pa-maite .mp-gl, .pa-maite .mp-gr { top: 12%; bottom: 14%; width: 62%; animation: mp-br 7s ease-in-out infinite; } .pa-maite .mp-gl { left: 0; } .pa-maite .mp-gr { right: 0; animation-delay: -3.5s; } .pa-maite .mp-gc { left: 0; right: 0; top: 14%; height: 38%; } .pa-maite .mp-wine .mp-gl { background: radial-gradient(ellipse 80% 55% at 0% 50%, rgba(160, 44, 66, 0.9), transparent 72%); } .pa-maite .mp-wine .mp-gr { background: radial-gradient(ellipse 80% 55% at 100% 52%, rgba(166, 46, 68, 0.85), transparent 72%); } .pa-maite .mp-wine .mp-gc { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(118, 30, 74, 0.5), transparent 72%); } .pa-maite .mp-ind .mp-gl { background: radial-gradient(ellipse 80% 55% at 0% 50%, rgba(52, 44, 170, 0.85), transparent 72%); } .pa-maite .mp-ind .mp-gr { background: radial-gradient(ellipse 80% 55% at 100% 52%, rgba(40, 56, 176, 0.8), transparent 72%); } .pa-maite .mp-ind .mp-gc { background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(70, 56, 190, 0.5), transparent 72%); } @keyframes mp-br { 0%, 100% { opacity: 0.78; } 50% { opacity: 1; } } .pa-maite > canvas.mp-wv { inset: auto; left: 0; top: 52cqw; width: 100cqw; height: 22cqw; will-change: transform; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); } .pa-maite .mp-halo { position: absolute; left: 4cqw; right: 4cqw; top: 24cqw; height: 34cqw; opacity: 0; } .pa-maite .mp-hw { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 128, 156, 0.26), transparent 70%); } .pa-maite .mp-hi { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(130, 160, 245, 0.28), transparent 70%); } .pa-maite .mp-sig { position: absolute; left: 15cqw; top: 26.5cqw; width: 70cqw; height: 29.06cqw; overflow: visible; } .pa-maite .mp-nib { opacity: 0; } .pa-maite .mp-nav { position: absolute; left: 5.5cqw; right: 5.5cqw; top: 5cqw; height: 6.5cqw; display: flex; align-items: center; justify-content: space-between; opacity: 0; } .pa-maite .mp-lg { width: 15cqw; height: 6.2cqw; display: block; fill: #fff; fill-rule: evenodd; } .pa-maite .mp-lk { display: flex; gap: 3.4cqw; font-size: 2.6cqw; letter-spacing: 0.1em; color: var(--mp-nav); text-shadow: 0 0 1.2cqw rgba(20, 4, 12, 0.5); } .pa-maite .mp-lk b { font-weight: 400; white-space: nowrap; } .pa-maite .mp-s1, .pa-maite .mp-s2 { position: absolute; left: 0; right: 0; margin: 0; text-align: center; white-space: nowrap; opacity: 0; text-shadow: 0 0 1.4cqw rgba(20, 4, 12, 0.55); } .pa-maite .mp-s1 { top: 77.6cqw; font-size: 3.3cqw; letter-spacing: 0.13em; font-weight: 400; color: var(--mp-t1); } .pa-maite .mp-s2 { top: 84.4cqw; font-size: 2.9cqw; letter-spacing: 0.14em; font-weight: 400; color: var(--mp-t2); } .pa-maite .mp-pill { position: absolute; left: 50%; top: 98cqw; width: 58cqw; height: 9.8cqw; padding: 0.9cqw; display: grid; grid-template-columns: 1fr 1fr; align-items: center; text-align: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 1.4cqw; background: rgba(255, 255, 255, 0.07); opacity: 0; transform: translate(-50%, 0); } .pa-maite .mp-pill b { position: relative; font-size: 2.9cqw; font-weight: 400; letter-spacing: 0.13em; white-space: nowrap; } .pa-maite .mp-bar { position: absolute; left: 0.9cqw; top: 0.9cqw; width: calc(50% - 0.9cqw); height: calc(100% - 1.8cqw); border-radius: 0.9cqw; background: var(--mp-ind); } .pa-maite .mp-tap { position: absolute; left: 50%; top: 102.9cqw; width: 8cqw; height: 8cqw; margin: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.6); opacity: 0; } .pa-maite.is-hot .mp-pill { border-color: rgba(255, 255, 255, 0.24); } .pa-maite .mp-grain { position: absolute; inset: -10%; background-size: 96px; opacity: 0.5; animation: mp-gr 0.9s steps(1) infinite; pointer-events: none; } @keyframes mp-gr { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-4%, -3%); } 80% { transform: translate(6%, 5%); } } .pa-maite .mp-veil { position: absolute; inset: 0; background: #050506; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .pa-maite *, .pa-maite *::before, .pa-maite *::after { animation: none !important; transition: none !important; } } /* ---- base ---- */ /* Base Estudio: capas y detalles de la pieza (unidades en cqw; lienzo lógico 900x1200) */ .pa-base .bs-bg, .pa-base .bs-gl, .pa-base .bs-s, .pa-base .bs-ar, .pa-base .bs-vg, .pa-base .bs-gr { position: absolute; pointer-events: none; } .pa-base .bs-bg { inset: 0; opacity: 0; background: linear-gradient(112deg, #1c1c1c 0%, #0f0f0f 52%, #020202 100%); } .pa-base .bs-gl { left: 80.56%; top: 13.9%; width: 104cqw; height: 104cqw; margin: -52cqw 0 0 -52cqw; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 92, 58, 0.6), rgba(255, 70, 50, 0.22) 42%, rgba(255, 60, 40, 0) 72%); will-change: transform, opacity; } .pa-base .bs-s { inset: 0; width: 100%; height: 100%; } .pa-base .bs-ar { left: 65.56%; top: 2.5%; width: 30.56%; height: 23.58%; transform-origin: 49.1% 48.2%; will-change: transform; } .pa-base .bs-ar svg { display: block; overflow: visible; } .pa-base .bs-ln { fill: none; stroke: #fff; stroke-opacity: 0.34; stroke-width: 2; } .pa-base .bs-cota { stroke-opacity: 0.6; } .pa-base .bs-ax { stroke: #ff6a4a; stroke-opacity: 0.5; } .pa-base .bs-t { fill: #fff; fill-opacity: 0.7; font: 500 19px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.04em; } .pa-base .bs-vg { inset: 0; background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.38)); } .pa-base .bs-gr { left: -50%; top: -50%; width: 200%; height: 200%; opacity: 0.07; background-size: 128px; animation: bsGrain 0.9s steps(1) infinite; } @keyframes bsGrain { 0% { transform: translate(0, 0); } 12% { transform: translate(-7%, 5%); } 25% { transform: translate(5%, -9%); } 37% { transform: translate(-11%, -3%); } 50% { transform: translate(9%, 8%); } 62% { transform: translate(-4%, 11%); } 75% { transform: translate(8%, -6%); } 87% { transform: translate(-9%, 2%); } } @media (prefers-reduced-motion: reduce) { .pa-base .bs-gr { animation: none; } } /* ---- barraca ---- */ /* Barraca Covadonga: logo con relieve, resplandor suave, grano y una inclinación 3D con barrido de luz (solo transform/opacity). */ .pa-barraca { background: #050505; } .pa-barraca .brc-glow { position: absolute; inset: 0; background: radial-gradient(60% 42% at 50% 46%, rgba(214, 100, 40, 0.34), rgba(120, 40, 14, 0.14) 55%, transparent 80%); animation: brc-breathe 7s ease-in-out infinite; } .pa-barraca .brc-stage { position: absolute; inset: 0; perspective: 120cqw; } .pa-barraca .brc-tilt { position: absolute; inset: 0; } .pa-barraca .brc-svg { width: 100%; height: 100%; display: block; } .pa-barraca .brc-sw { animation: brc-sweep 6s cubic-bezier(0.5, 0, 0.3, 1) infinite; } .pa-barraca .brc-grain { position: absolute; inset: 0; opacity: 0.13; pointer-events: none; } .pa-barraca.is-hot .brc-sw { animation-duration: 2.6s; } @keyframes brc-sweep { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(1500px); } } @keyframes brc-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pa-barraca .brc-sw, .pa-barraca .brc-glow { animation: none; } .pa-barraca .brc-sw { display: none; } } /* ---- tav ---- */ .pa-tav { background: #030101; } .pa-tav .tav-p { position: absolute; inset: 0; perspective: 900px; transition: transform 0.9s ease; } .pa-tav.is-hot .tav-p { transform: scale(1.03); } .pa-tav .tav-s { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; animation: tav-in 0.8s ease-out both; } @keyframes tav-in { from { opacity: 0; } to { opacity: 1; } } /* barrido de luz sobre el letrero (solo transform de una capa: barato) */ .pa-tav::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 60%; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 196, 130, 0.2) 50%, transparent 70%); animation: tav-sweep 6s cubic-bezier(0.5, 0, 0.3, 1) infinite; } .pa-tav.is-hot::after { animation-duration: 2.6s; } @keyframes tav-sweep { 0% { transform: translateX(0); } 45%, 100% { transform: translateX(300%); } } @media (prefers-reduced-motion: reduce) { .pa-tav::after { animation: none; display: none; } .pa-tav .tav-s, .pa-tav .tav-h2, .pa-tav .tav-p { animation: none !important; transition: none; transform: none; } }