/* Portada del Duelo · «Choque» (duelo/portada-choque.js). Los dos paneles del dibujo son los botones. Todo lo que se mueve anima solo transform/opacity. */ .s1-screen.portada-choque{ --azul:#3b9bff; --naranja:#ff8a1f; } /* el dibujo sale de .s1-stage a su propia capa (la entrada lo mueve sin que portada-fit mida un escenario escalado) */ .s1-screen.portada-choque .s1-stage{ background:transparent; } .s1-screen.portada-choque .pv-fondo, .s1-screen.portada-choque .pv-arte{ position:absolute; inset:0; pointer-events:none; } .s1-screen.portada-choque .pv-fondo{ position:fixed; background:center/cover no-repeat; opacity:.4; transform:scale(1.6); filter:blur(48px) saturate(1.3); } .s1-screen.portada-choque .pv-arte{ background:center/contain no-repeat; transform-origin:50% 55%; } /* sin velo gris: el dibujo a su color; solo sombra arriba (Volver) y al pie */ .s1-screen.portada-choque .s1-stage::after{ background:linear-gradient(180deg, rgba(4,4,8,.55) 0%, rgba(4,4,8,0) 12%, rgba(4,4,8,0) 86%, rgba(4,4,8,.5) 100%); } .s1-screen.portada-choque .s1-col{ z-index:3; } /* ── el panel ES el botón ── */ .s1-screen.portada-choque .s1-stage .s1-carta.pv-panel{ overflow:visible; -webkit-tap-highlight-color:transparent; } .s1-screen.portada-choque .s1-stage .s1-carta.pv-panel:active{ transform:none; box-shadow:none; } .pv-hueco, .pv-copia, .pv-borde, .pv-destello{ position:absolute; pointer-events:none; border-radius:4%/3%; } /* el hueco oscuro que queda al hundirse */ .pv-hueco{ background:radial-gradient(closest-side, rgba(0,0,0,.95), rgba(0,0,0,.75)); opacity:0; transition:opacity 90ms ease-out; } /* copia recortada del dibujo, encima del original y alineada al píxel: en reposo NO se mueve (al crecer se veía su corte y el panel parecía partido); solo se hunde al tocarla, con el hueco oscuro debajo, y entra en la entrada */ .pv-copia{ background-repeat:no-repeat; transform-origin:50% 60%; will-change:transform; } .s1-screen.portada-choque .pv-panel.pv-abajo .pv-hueco{ opacity:1; } .s1-screen.portada-choque .pv-panel.pv-abajo .pv-copia{ animation:none; transform:scale(.93) translateY(2%); transition:transform 70ms ease-out; } .s1-screen.portada-choque .pv-panel.pv-toca .pv-hueco{ opacity:1; } .s1-screen.portada-choque .pv-panel.pv-toca .pv-copia{ animation:pvRebota 520ms cubic-bezier(.3,1.6,.5,1) both; } @keyframes pvRebota{ 0%,30%{ transform:scale(.9) translateY(2.5%); } 65%{ transform:scale(1.05); } 100%{ transform:scale(1); } } /* ── marcos: el neón pintado de cada panel, latiendo ── */ .pv-marco{ position:absolute; pointer-events:none; border-radius:4%/3%; opacity:.35; animation:pvLate 2.4s ease-in-out infinite; } .pv-marco-cpu{ box-shadow:0 0 22px 4px rgba(59,155,255,.85), inset 0 0 26px rgba(59,155,255,.55); } .pv-marco-reto{ box-shadow:0 0 26px 6px rgba(255,138,31,.9), inset 0 0 30px rgba(255,138,31,.6); animation-delay:1.2s; animation-duration:1.8s; } @keyframes pvLate{ 0%,100%{ opacity:.25; } 50%{ opacity:.95; } } /* ── brillo que recorre el borde (máscara de solo-borde + franja que se desplaza) ── */ .pv-borde{ overflow:hidden; padding:3px; box-sizing:border-box; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); } .pv-borde i{ position:absolute; left:-50%; top:-50%; width:200%; height:200%; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.95) 48%, var(--bc) 52%, transparent 62%); transform:translate(-60%,-60%); animation:pvBorde 3.4s ease-in-out 1.8s infinite; } .pv-borde-cpu{ --bc:#7cc4ff; } .pv-borde-reto{ --bc:#ffb35c; } .pv-borde-reto i{ animation-delay:3.5s; } @keyframes pvBorde{ 0%{ transform:translate(-60%,-60%); } 55%,100%{ transform:translate(60%,60%); } } /* ── destello de su color al pulsar ── */ .pv-destello{ opacity:0; mix-blend-mode:screen; } .pv-destello-cpu{ background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(59,155,255,.85) 45%, rgba(59,155,255,0)); } .pv-destello-reto{ background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,138,31,.85) 45%, rgba(255,138,31,0)); } .s1-screen .pv-panel.pv-toca .pv-destello{ animation:pvDestello 460ms ease-out both; } @keyframes pvDestello{ 0%{ opacity:0; transform:scale(.6); } 20%{ opacity:1; } 100%{ opacity:0; transform:scale(1.35); } } /* ── destello del choque central (entrada) ── */ .pv-flash{ position:absolute; pointer-events:none; z-index:3; border-radius:50%; opacity:0; background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,210,120,.55) 35%, rgba(59,155,255,.25) 60%, transparent); } /* la barra de acero: los tres rivales (encendido y con ✓ el que ya has ganado) */ .s1-screen.portada-choque .s1-stage .s1-marcas.sin-datos::before{ content:none; } .pv-rivales{ display:flex; align-items:center; gap:clamp(4px,1.4vw,8px); } .pv-rivales small{ font:800 clamp(.75rem,3vw,.85rem)/1 'DM Sans',sans-serif; letter-spacing:.1em; /* etiqueta ≥12 px (2-oct: medía 9,6) */ text-transform:uppercase; color:#d9cfb8; margin-right:2px; } #screenS1.portada-choque .s1-stage .s1-marcas:not(.sin-datos) .pv-rivales small{ display:none; } /* las cifras en DM Sans: el «1» de Syne suelto no se lee */ #screenS1.portada-choque .s1-stage .s1-marcas b{ font-family:'DM Sans',system-ui,sans-serif; font-weight:900; } .pv-cara{ position:relative; display:block; width:clamp(24px,7.4vw,40px); aspect-ratio:1; border-radius:6px; overflow:hidden; transform:skewX(-8deg); border:2px solid color-mix(in srgb, var(--c) 45%, #222); background:#111; } .pv-cara img{ width:100%; height:100%; object-fit:cover; object-position:50% 12%; transform:skewX(8deg) scale(1.2); filter:grayscale(.85) brightness(.55); } .pv-cara.ok{ border-color:var(--c); box-shadow:0 0 12px -2px var(--c); } .pv-cara.ok img{ filter:none; } .pv-cara.ok::after{ content:"✓"; position:absolute; right:1px; bottom:0; transform:skewX(8deg); font:900 11px/1 'DM Sans',sans-serif; font-style:normal; color:#fff; text-shadow:0 0 4px var(--c), 0 1px 2px #000; } .portada-choque.pv-entra .pv-cara{ animation:pvCara 380ms cubic-bezier(.3,1.6,.5,1) backwards; } .portada-choque.pv-entra .pv-cara:nth-of-type(1){ animation-delay:1260ms; } .portada-choque.pv-entra .pv-cara:nth-of-type(2){ animation-delay:1340ms; } .portada-choque.pv-entra .pv-cara:nth-of-type(3){ animation-delay:1420ms; } @keyframes pvCara{ from{ opacity:0; transform:skewX(-8deg) scale(1.8); } to{ opacity:1; transform:skewX(-8deg); } } /* ═════════ ENTRADA (se vuelve a poner la clase cada vez que se abre) ═════════ 30-sep (Nico: «parte las imágenes de VS CPU o VS amigo»). Nada se trocea: 0 ms la escena llega ENTERA, a oscuras, con los huecos de los paneles vacíos 150 ms VS CPU entra entero desde la izquierda, con peso, y aterriza (600 ms) 300 ms RETAR A UN AMIGO entra entero desde la derecha y aterriza (760 ms) 820 ms el VS cae del cielo en la costura: golpe (1040 ms), destello 1040 ms la luz se enciende: fuera el velo, los marcos de neón prenden Al aterrizar, la copia coincide al píxel con el dibujo y el hueco se apaga en ese mismo instante: no hay ningún fotograma con el panel doble o partido. Lo que tiembla (dibujo y columna) tiembla con la MISMA animación. */ .pv-apagon{ position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0; background:radial-gradient(70% 45% at 50% 52%, rgba(4,4,10,.55), rgba(4,4,10,.9)); } .portada-choque.pv-entra .pv-arte{ animation:pvArte 420ms cubic-bezier(.2,.8,.2,1) both, pvSacude 700ms linear 600ms both; } .portada-choque.pv-entra .s1-col{ animation:pvSacude 700ms linear 600ms both; } @keyframes pvArte{ from{ opacity:0; transform:scale(1.05); } to{ opacity:1; transform:scale(1); } } /* dos golpes secos (aterrizajes) y uno gordo (el VS); solo la propiedad translate */ @keyframes pvSacude{ 0%{ translate:0 0; } 3%{ translate:0 5px; } 9%{ translate:0 -2px; } 14%{ translate:0 0; } 26%{ translate:0 0; } 29%{ translate:0 5px; } 35%{ translate:0 -2px; } 40%{ translate:0 0; } 63%{ translate:0 0; } 66%{ translate:-8px 7px; } 71%{ translate:7px -5px; } 77%{ translate:-5px 3px; } 84%{ translate:3px -2px; } 92%{ translate:-1px 1px; } 100%{ translate:0 0; } } .portada-choque.pv-entra .pv-apagon{ animation:pvLuz 1400ms linear both; } @keyframes pvLuz{ 0%{ opacity:.9; } 72%{ opacity:.78; } 76%{ opacity:0; } 80%{ opacity:.3; } 100%{ opacity:0; } } /* el hueco del panel está vacío hasta que aterriza su panel */ .portada-choque.pv-entra .pv-panel-cpu .pv-hueco{ animation:pvHueco 600ms step-end; } .portada-choque.pv-entra .pv-panel-reto .pv-hueco{ animation:pvHueco 760ms step-end; } @keyframes pvHueco{ 0%{ opacity:1; background:linear-gradient(180deg,#0a0b14,#050508); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); } 100%{ opacity:0; } } /* cada panel ENTERO entra de su lado, pasa de largo un pelo y asienta con peso */ .portada-choque.pv-entra .pv-panel-cpu .pv-copia{ animation:pvDeIzq 450ms cubic-bezier(.5,0,.75,.2) 150ms backwards, pvAsienta 360ms ease-out 600ms; } .portada-choque.pv-entra .pv-panel-reto .pv-copia{ animation:pvDeDer 460ms cubic-bezier(.5,0,.75,.2) 300ms backwards, pvAsienta 360ms ease-out 760ms; } @keyframes pvDeIzq{ from{ transform:translate(-125%,-18%) rotate(-11deg) scale(1.12); } to{ transform:none; } } @keyframes pvDeDer{ from{ transform:translate(125%,-18%) rotate(11deg) scale(1.12); } to{ transform:none; } } @keyframes pvAsienta{ 0%{ transform:scale(1.04,.95); transform-origin:50% 100%; } 45%{ transform:scale(.985,1.015); transform-origin:50% 100%; } 100%{ transform:none; transform-origin:50% 100%; } } /* el VS cae del cielo a la costura */ .pv-vs{ position:absolute; z-index:4; pointer-events:none; width:0; height:0; opacity:0; } .pv-vs b{ position:absolute; left:0; top:0; transform:translate(-50%,-50%) skewX(-10deg); display:block; white-space:nowrap; font:900 italic 1em/1 'Syne',system-ui,sans-serif; letter-spacing:-.04em; color:#fff6d8; -webkit-text-stroke:.035em #1a0f02; text-shadow:.05em .05em 0 #d4a843, .09em .09em 0 #6b4a10, 0 0 .35em rgba(255,210,120,.9), -.25em 0 .6em rgba(59,155,255,.7), .25em 0 .6em rgba(255,138,31,.7); } .portada-choque.pv-entra .pv-vs{ animation:pvVs 1500ms both 820ms; } @keyframes pvVs{ 0%{ opacity:0; transform:translateY(-260%) scale(2.6); } 14%{ opacity:1; transform:translateY(0) scale(.86); } 20%{ transform:scale(1.1); } 28%{ transform:scale(1); } 70%{ opacity:1; transform:scale(1); } 100%{ opacity:0; transform:scale(.7); } } .portada-choque.pv-entra .pv-flash{ animation:pvFlash 700ms ease-out 1030ms both; } @keyframes pvFlash{ 0%{ opacity:0; transform:scale(.2); } 18%{ opacity:1; } 100%{ opacity:0; transform:scale(1.4); } } /* la luz se enciende: los marcos de neón prenden de golpe y luego laten */ .portada-choque.pv-entra .pv-marco-cpu{ animation:pvPrende 520ms ease-out 1040ms both, pvLate 2.4s ease-in-out 1560ms infinite; } .portada-choque.pv-entra .pv-marco-reto{ animation:pvPrende 520ms ease-out 1080ms both, pvLate 1.8s ease-in-out 1600ms infinite; } @keyframes pvPrende{ 0%{ opacity:0; } 25%{ opacity:1; } 40%{ opacity:.4; } 55%{ opacity:1; } 100%{ opacity:.25; } } .portada-choque.pv-entra .s1-marcas{ animation:pvBarra 460ms cubic-bezier(.2,.9,.3,1.3) 1150ms both; } @keyframes pvBarra{ from{ opacity:0; transform:translate(-50%,-10%) scale(.85); } to{ opacity:1; transform:translate(-50%,-50%); } } @media (prefers-reduced-motion:reduce){ .portada-choque .pv-arte, .portada-choque .pv-copia, .portada-choque .pv-marco, .portada-choque .pv-borde i, .portada-choque .s1-marcas, .portada-choque .s1-col, .portada-choque .pv-hueco, .portada-choque .pv-cara{ animation:none !important; } .portada-choque .pv-flash, .portada-choque .pv-destello, .portada-choque .pv-vs, .portada-choque .pv-apagon{ display:none; } } /* 2-oct · etiquetas de la barra («ganados», «de racha», el botón de retos) a 12 px como mínimo: medían 9,8 en el móvil */ #screenS1.portada-choque .s1-stage .s1-marcas > span, #screenS1.portada-choque .s1-stage .s1-marcas .s1-retos-btn{ font-size:max(12px, min(3vw, .8rem)); letter-spacing:.03em; }