/* ========================================================================== Marca APAS CUYO — logo en reposo + intro animada. El isotipo son tres paralelogramos escalonados. En vez de redibujarlos como SVG (arriesgado: es la marca de un cliente), recortamos el PNG REAL en cuatro bandas con clip-path y animamos cada una. El arte queda pixel-exacto y al asentarse las bandas recomponen el logo original. Bandas medidas sobre el archivo de 838x351: slash superior y 2- 98 #76ace4 slash medio y 108-218 #227ce2 slash inferior y 226-348 #074580 wordmark x 302-836 #50565b ========================================================================== */ :root { --marca-celeste: #76ace4; --marca-azul: #227ce2; --marca-navy: #074580; --marca-gris: #50565b; /* Cortes derivados de las cajas de arriba, en % del asset. */ --corte-x: 32.8%; /* isotipo | wordmark (275/838) */ --corte-y1: 29.34%; /* superior | medio (103/351) */ --corte-y2: 63.25%; /* medio | inferior (222/351) */ } /* ─── Logo en reposo ─────────────────────────────────────────────────────── */ .marca { display: block; width: auto; /* El asset es 838x351 -> ratio 2.387. Fijamos alto y dejamos correr el ancho. */ height: var(--marca-alto, 46px); aspect-ratio: 838 / 351; object-fit: contain; } /* Slot donde aterriza el hero. Arranca invisible y se revela de golpe en el handoff (ver intro.js: el crossfade de dos imgs idénticas parpadea). */ .marca-slot { display: inline-block; line-height: 0; } .marca-slot .marca { opacity: 0; } .marca-slot--visible .marca { opacity: 1; } /* ─── Intro ──────────────────────────────────────────────────────────────── */ /* Telón navy. Cubre la pantalla durante TODO el movimiento del logo para que el destino no asome mientras el logo viaja. */ .telon { position: fixed; inset: 0; z-index: 90; background: linear-gradient(160deg, #1d3557 0%, #16294a 55%, #0f1e38 100%); /* Cola larga expo-out: con ease-in el opacity 1->0 termina de golpe y se siente mecánico. */ transition: opacity .52s cubic-bezier(.16, 1, .3, 1); } .telon--yendose { opacity: 0; } /* El hero vive como hijo directo de : cualquier ancestro con transform, filter, backdrop-filter o contain rompería el position:fixed. */ .hero { position: fixed; z-index: 91; pointer-events: none; will-change: left, top, width, height; } .hero__banda { position: absolute; inset: 0; background-image: url("/assets/marca/apascuyo-blanco.png"); background-size: 100% 100%; background-repeat: no-repeat; opacity: 0; } /* Cada banda recorta su propia porción del mismo PNG. Juntas = el logo entero. */ .hero__banda--sup { clip-path: inset(0 67.2% var(--corte-y1r) 0); } .hero__banda--med { clip-path: inset(var(--corte-y1) 67.2% var(--corte-y2r) 0); } .hero__banda--inf { clip-path: inset(var(--corte-y2) 67.2% 0 0); } .hero__banda--texto { clip-path: inset(0 0 0 var(--corte-x)); } :root { --corte-y1r: 70.66%; --corte-y2r: 36.75%; } /* Los tres slashes entran deslizándose desde la izquierda, escalonados. El desplazamiento sigue la inclinación del propio isotipo. */ @keyframes slash-entra { from { opacity: 0; transform: translate3d(-14%, 0, 0); } to { opacity: 1; transform: none; } } @keyframes texto-entra { from { opacity: 0; transform: translate3d(-5%, 0, 0); } to { opacity: 1; transform: none; } } .hero--entrando .hero__banda { animation: slash-entra .44s cubic-bezier(.16, 1, .3, 1) forwards; } .hero--entrando .hero__banda--sup { animation-delay: 0s; } .hero--entrando .hero__banda--med { animation-delay: .07s; } .hero--entrando .hero__banda--inf { animation-delay: .14s; } .hero--entrando .hero__banda--texto { animation: texto-entra .42s cubic-bezier(.16, 1, .3, 1) .24s forwards; } /* Ya asentado: sin animación, todo visible (durante el vuelo al slot). */ .hero--asentado .hero__banda { opacity: 1; animation: none; transform: none; } /* Quien pidió menos movimiento ve el estado final y nada más. */ @media (prefers-reduced-motion: reduce) { .telon { transition: none; } .hero--entrando .hero__banda { animation: none; opacity: 1; transform: none; } } /* ─── Entrada del contenido ──────────────────────────────────────────────── */ /* OJO con la inversión: el estado oculto se aplica SOLO cuando intro.js ya corrió y marcó `body.con-intro`. Si el módulo no carga (JS roto, red mala), el contenido se ve igual. Un formulario público no puede quedar invisible porque falló una animación. */ body.con-intro .sube { opacity: 0; transform: translateY(12px); } body.con-intro.contenido-listo .sube { animation: subir .55s cubic-bezier(.16, 1, .3, 1) var(--retraso, 0ms) forwards; } @keyframes subir { to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { body.con-intro .sube { opacity: 1; transform: none; } body.con-intro.contenido-listo .sube { animation: none; } }