/* Forex Trade — estampas de stablecoin del hero (USDG y USDe) + el wipe cian del intro. Se carga desde content/sections/hero-stamps.html, no desde el de la plantilla. Reglas de movimiento: - el giro permanente vive SOLO en .fx-stamp-layer (moneda y anillo), con transform:rotate() y transform-origin exacto, para que lo mueva el compositor y el centro no se desplace; - la entrada (escala, giro de entrada, opacidad, desenfoque) la anima Motion sobre .fx-stamp y .fx-stamp-in, que son OTRAS capas: el giro permanente nunca salta de ángulo; - stamps.js sube animation-play-state a paused fuera del viewport y la playbackRate en hover. */ /* --------------------------------------------------------------- colocacion */ /* Cuelgan de .hero-parent, la MISMA caja sticky que arrastra el sello rosa .badge-parent: IX2 transforma .hero-parent entera al hacer scroll (action list "scroll-move-down-hero"), asi que las estampas acompañan ese movimiento sin replicarlo. Van ancladas al centro del hero y medidas en rem porque las letras FOREX son rem (.super-text: 48rem, 40rem o 32rem segun breakpoint), no vw: asi la estampa sigue a la letra a cualquier ancho dentro de cada breakpoint. Las cifras salen de medir el hero. */ .fx-stamp { position: absolute; /* .flowvatar-wrapper es absolute, ocupa el hero entero y va a z-index 10: por debajo de eso la estampa se ve (el wrapper es transparente) pero NO recibe el puntero, y el hover no llegaba nunca. Con 11 queda encima. No tapa la cara: no se solapan en ningun breakpoint. */ z-index: 11; aspect-ratio: 1 / 1; pointer-events: auto; filter: drop-shadow(0 6px 0 rgba(1, 1, 1, .18)); transform: rotate(var(--fx-tilt, 0deg)); } .fx-stamp-usdg { --fx-tilt: -12deg; } .fx-stamp-usde { --fx-tilt: 10deg; } /* A. >=1442px: bloque de letras 50.16 x 37.60 rem centrado; sello rosa en (17.60, 7.18) */ .fx-stamp-usdg { width: min(10rem, 170px); left: calc(50% - 28.4rem); top: calc(50% - 19.4rem); } .fx-stamp-usde { width: min(8.6rem, 140px); left: calc(50% + 18.4rem); top: calc(50% - 4.2rem); } /* B. 768-1441px: letras a 40rem, bloque 41.80 x 32.00 rem; sello rosa en (12.33, 4.10) */ @media screen and (max-width: 1441px) { .fx-stamp-usdg { width: min(8.6rem, 150px); left: calc(50% - 23.9rem); top: calc(50% - 16.5rem); } .fx-stamp-usde { width: min(7.2rem, 125px); left: calc(50% + 15rem); top: calc(50% - 7.6rem); } } /* C. 480-767px: letras a 32rem, bloque 33.44 x 26.40 rem; sello rosa en (7.07, 2.87) */ @media screen and (max-width: 767px) { .fx-stamp-usdg { width: 6.6rem; left: calc(50% - 16rem); top: calc(50% - 13.6rem); } .fx-stamp-usde { width: 5.6rem; left: calc(50% + 10.6rem); top: calc(50% - 6.4rem); } } /* D. <=479px: la plantilla esconde el bloque de letras (.relative.push{display:none}), asi que las estampas se colocan alrededor de la mascota, que ocupa (-8.12, -11.50) 17 rem. */ @media screen and (max-width: 479px) { .fx-stamp-usdg { width: 84px; left: max(8px, calc(50% - 12rem)); top: calc(50% - 18.6rem); } .fx-stamp-usde { width: 72px; left: calc(50% + 7.2rem); top: calc(50% + 6.6rem); } } /* Por debajo de 380 px el hueco entre el logotipo y la mascota se queda en ~100 px: la estampa encoge y sube para no pisar ninguno de los dos. */ @media screen and (max-width: 380px) { .fx-stamp-usdg { width: 72px; left: max(8px, calc(50% - 11.4rem)); top: calc(50% - 17.2rem); } .fx-stamp-usde { width: 64px; left: calc(50% + 6.4rem); top: calc(50% + 6.2rem); } } .fx-stamp-in { position: absolute; inset: 0; } .fx-stamp-layer, .fx-stamp-gloss { position: absolute; inset: 0; } .fx-stamp-svg { display: block; width: 100%; height: 100%; overflow: visible; } .fx-stamp-gloss { pointer-events: none; } /* --------------------------------------------------------------- dibujo */ .fx-stamp-disc { fill: #ffffff; } .fx-ring-text { fill: #010101; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase; } .fx-stamp-shine { fill: #ffffff; opacity: .16; } .fx-coin-body { fill: #010101; } .fx-coin-reed { fill: none; stroke: #5546ff; stroke-width: 7; } .fx-coin-teeth { stroke: #010101; stroke-width: 1.4; fill: none; } .fx-coin-hair { fill: none; stroke: #5546ff; stroke-width: 1; opacity: .45; } .fx-coin-text { fill: #ffffff; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 30px; letter-spacing: .5px; } .fx-coin-e { fill: #bfff0a; font-family: 'Bodoni itc book', 'Bodoni 72', Georgia, serif; font-style: italic; font-weight: 400; font-size: 33px; } /* --------------------------------------------------------------- giro */ @keyframes fx-spin-cw { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes fx-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } } .fx-stamp-layer { transform-origin: 50% 50%; will-change: transform; } /* periodos distintos (18 s y 26 s) para que moneda y anillo no se sincronicen nunca */ .fx-stamp-usdg .fx-stamp-coin { animation: fx-spin-cw 18s linear infinite; } .fx-stamp-usdg .fx-stamp-ring { animation: fx-spin-ccw 26s linear infinite; } .fx-stamp-usde .fx-stamp-coin { animation: fx-spin-ccw 18s linear infinite; } .fx-stamp-usde .fx-stamp-ring { animation: fx-spin-cw 26s linear infinite; } /* --------------------------------------------------------------- entrada */ /* Con JS las estampas nacen invisibles y las revela Motion al terminar el intro. Sin JS (o si stamps.js falla) la clase no se pone y se ven desde el primer frame. */ .fx-stamps-js .fx-stamp { opacity: 0; } .fx-stamps-js .fx-stamp.is-in { opacity: 1; } @media (prefers-reduced-motion: reduce) { .fx-stamp-layer { animation: none !important; } } /* ------------------------------------------------- wipe cian de la pantalla de carga */ /* IX2 anima el tercer wipe por el selector .bg-whipe.bg-pink, asi que la clase bg-pink se conserva y solo se le suma fx-cyan (mayor especificidad) para repintarlo. El rosa del resto del sitio no se toca. */ .bg-whipe.bg-pink.fx-cyan { background-color: #00d4ff; }