/* Tridea — capa visual compartida (hero cinematográfico + creador 3D). Firma de la marca: las "líneas de capa" de una impresión FDM. */ :root { --ember: #f2671f; --amber: #f48c25; --roast: #16100a; --roast-2: #221910; } /* ---------------------------------------------------------- escenario -- */ /* Fondo oscuro cálido con textura de capas de impresión. Siempre oscuro, independiente del tema: es el "escenario" donde brilla el naranja. */ .layer-stage { position: relative; background-color: var(--roast); background-image: radial-gradient(1000px 480px at 78% -10%, rgba(242, 103, 31, 0.22), transparent 62%), radial-gradient(700px 420px at 12% 110%, rgba(244, 140, 37, 0.13), transparent 60%), repeating-linear-gradient( to bottom, rgba(255, 214, 170, 0.045) 0px, rgba(255, 214, 170, 0.045) 1px, transparent 1px, transparent 7px ); color: #fdf8f3; } .layer-stage::after { /* viñeta suave para foco central */ content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10, 6, 3, 0.55) 100%); } .layer-stage > * { position: relative; z-index: 1; } /* ------------------------------------------------------------- entrada -- */ /* El titular "se imprime": aparece de abajo hacia arriba, por capas. */ @keyframes print-in { from { clip-path: inset(100% 0 0 0); transform: translateY(14px); opacity: 0.6; } to { clip-path: inset(0 0 0 0); transform: translateY(0); opacity: 1; } } @keyframes rise-in { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .print-in { animation: print-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; } .rise-in { animation: rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; } .rise-in-1 { animation-delay: 0.25s; } .rise-in-2 { animation-delay: 0.45s; } .rise-in-3 { animation-delay: 0.65s; } /* Flotación ambiental de la pieza del hero */ @keyframes hover-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } } .hover-float { animation: hover-float 7s ease-in-out infinite; } /* ------------------------------------------------ impresión al scroll -- */ /* Los bloques se "imprimen" al entrar en pantalla: se revelan de abajo hacia arriba y un cabezal luminoso sube depositando la pieza. Misma gramática que el hero y que el video promocional. Contrato con el JS (assets/js/print-reveal.js): .print-reveal el elemento a revelar html.js-print lo pone un script inline en el , así el estado oculto sólo existe si hay JS y no hay un flash de contenido antes de armar .is-printing lo agrega el observer al entrar en viewport .is-done al terminar: libera el clip para no recortar sombras ni :focus del contenido */ .print-reveal { position: relative; } html.js-print .print-reveal { clip-path: inset(100% 0 0 0); /* Red de seguridad, sin JS de por medio: si el observer no llegara a disparar nunca, a los 20 s el bloque se revela solo y el contenido jamás queda inaccesible. No se nota: el disparo real ocurre muchísimo antes, y para un bloque al que nadie hizo scroll da igual cuándo apareció. La regla .is-printing tiene más especificidad, así que siempre gana. */ animation: print-layer 1ms linear 20s forwards; } /* Duración de una pasada. Se puede ajustar por bloque con --print-dur, o acá para todo el sitio. Por debajo de ~900ms el efecto se lee como un simple fundido; a 1300ms se alcanza a percibir que la pieza se construye. */ html.js-print .print-reveal.is-printing { animation: print-layer var(--print-dur, 1300ms) cubic-bezier(0.33, 0, 0.15, 1) var(--print-delay, 0ms) forwards; } /* Cabezal: la línea va justo en el borde del recorte y su resplandor cae hacia abajo, dentro de la zona ya visible — si cayera hacia arriba lo recortaría el propio clip-path. */ html.js-print .print-reveal.is-printing::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; z-index: 2; pointer-events: none; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--amber), var(--ember), transparent); box-shadow: 0 4px 24px 3px rgba(242, 103, 31, 0.55); animation: print-head var(--print-dur, 1300ms) cubic-bezier(0.33, 0, 0.15, 1) var(--print-delay, 0ms) forwards; } html.js-print .print-reveal.is-done { /* Hay que apagar la animación, no basta con reponer el clip: el `forwards` sigue imponiendo su último fotograma y en la cascada le gana a cualquier declaración normal. Sin esto el inset queda puesto y recorta lo que sobresale de la caja — los globos numerados de "¿Cómo funciona?" salían cortados por la mitad, y las sombras de las tarjetas también. */ animation: none; clip-path: none; } html.js-print .print-reveal.is-done::after { content: none; } @keyframes print-layer { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes print-head { 0% { top: 100%; opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { top: 0%; opacity: 0; } } /* Retardos en cascada para una fila de tarjetas que entran juntas. Escalan con la duración: si se acorta --print-dur, conviene bajarlos. */ .print-stagger > .print-reveal:nth-child(2) { --print-delay: 170ms; } .print-stagger > .print-reveal:nth-child(3) { --print-delay: 340ms; } .print-stagger > .print-reveal:nth-child(4) { --print-delay: 510ms; } /* ----------------------------------------------- comparador pintar/no -- */ /* Dos fotos de la misma pieza superpuestas; el divisor decide cuánto se ve de cada una. El control real es un invisible que cubre la imagen: así se arrastra con el mouse, se toca en móvil y se mueve con las flechas del teclado, sin reimplementar accesibilidad a mano. */ .ba { position: relative; overflow: hidden; border-radius: 1rem; --pos: 50%; touch-action: pan-y; /* deja hacer scroll vertical aunque se arrastre encima */ } .ba img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; } /* La capa "sin pintar" va encima, recortada hasta el divisor. */ .ba-top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); } .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; } .ba-range:focus-visible + .ba-divider { box-shadow: 0 0 0 3px rgba(244, 140, 37, 0.9); } .ba-divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 14px rgba(0, 0, 0, 0.55); pointer-events: none; z-index: 2; } .ba-knob { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 2.75rem; height: 2.75rem; border-radius: 9999px; background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; color: var(--ember); font-size: 1.25rem; } .ba-tag { position: absolute; bottom: 0.9rem; z-index: 2; padding: 0.3rem 0.75rem; border-radius: 9999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(20, 16, 11, 0.72); backdrop-filter: blur(4px); pointer-events: none; } .ba-tag-left { left: 0.9rem; } .ba-tag-right { right: 0.9rem; } /* --------------------------------------------------------- filamentos -- */ .filament-dot { width: 1.15rem; height: 1.15rem; border-radius: 9999px; border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: inset -2px -3px 4px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.4); } /* ------------------------------------------------------------- creador -- */ .creator-tab-active { background: var(--amber) !important; color: #fff !important; border-color: var(--amber) !important; } .creator-drop-active { border-color: var(--amber) !important; background: rgba(244, 140, 37, 0.08) !important; } /* Barra de progreso con estrías de capa que avanzan */ .progress-track { background: rgba(255, 255, 255, 0.08); overflow: hidden; } .progress-fill { background: repeating-linear-gradient( -45deg, rgba(255, 255, 255, 0.22) 0 8px, transparent 8px 16px ), linear-gradient(90deg, var(--ember), var(--amber)); background-size: 32px 100%, 100% 100%; transition: width 0.5s ease; animation: layer-flow 1.2s linear infinite; } @keyframes layer-flow { to { background-position: 32px 0, 0 0; } } model-viewer { width: 100%; height: 100%; min-height: 20rem; background: transparent; --poster-color: transparent; } /* ---------------------------------------------------- reduced motion -- */ @media (prefers-reduced-motion: reduce) { .print-in, .rise-in, .hover-float, .progress-fill { animation: none !important; } .print-in, .rise-in { clip-path: none; opacity: 1; transform: none; } html { scroll-behavior: auto; } /* Cinturón y tirantes: el JS ya evita armar el efecto, pero si algo llegara a marcarlo, el contenido igual queda visible y sin cabezal. */ html.js-print .print-reveal { clip-path: none !important; animation: none !important; } html.js-print .print-reveal::after { content: none !important; } }