/* ========================================================== Entrada del formulario ------------------------------------------------------- Lo primero que ve quien abre la página: el nombre del encuentro, la casa del afiche y "ven en familia". Dura poco más de tres segundos y se puede saltar tocando la pantalla. Se muestra una sola vez por visita: si alguien recarga para corregir un dato, entra derecho al formulario. Tampoco aparece para quien pidió menos movimiento en su sistema. Está oculta salvo que el script del la habilite, así que si el JavaScript falla nadie queda encerrado en ella. ========================================================== */ @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Caveat/caveat-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .intro { display: none; } html.con-intro { overflow: hidden; } html.con-intro .intro { align-items: center; background: radial-gradient(120% 90% at 50% 12%, #24467a 0%, #14263f 58%, #0d1a2f 100%); cursor: pointer; display: flex; inset: 0; justify-content: center; overflow: hidden; position: fixed; transition: opacity .6s ease; z-index: 9999; } html.con-intro .intro.saliendo { opacity: 0; } /* El sol detrás del título */ .intro-sol { animation: intro-sol 1.6s .35s ease-out forwards; background: radial-gradient(closest-side, rgba(238, 188, 96, .55), rgba(238, 188, 96, 0) 70%); height: 900px; left: 50%; margin-left: -450px; opacity: 0; pointer-events: none; position: absolute; top: 6%; width: 900px; } .intro-caja { align-items: center; display: flex; flex-direction: column; gap: min(2.6vh, 26px); justify-content: center; max-height: 100vh; max-width: 860px; padding: min(3vh, 24px) 32px; position: relative; text-align: center; width: 100%; } .intro-rotulo { animation: intro-aparecer .7s .1s ease forwards; color: rgba(255, 255, 255, .6); font-family: 'Satoshi', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .3em; opacity: 0; } .intro-titulo { animation: intro-subir .9s .2s cubic-bezier(.16, .84, .28, 1) forwards; color: #fff; font-family: 'ClashDisplay-Variable', 'ClashDisplay', sans-serif; font-size: min(11vw, 16vh, 132px); font-weight: 700; letter-spacing: -.02em; line-height: .88; opacity: 0; } .intro-lema { align-items: baseline; animation: intro-subir .9s .5s cubic-bezier(.16, .84, .28, 1) forwards; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; opacity: 0; } .intro-lema span { color: rgba(255, 255, 255, .92); font-family: 'Satoshi', sans-serif; font-size: min(3.4vw, 5vh, 40px); font-weight: 600; } .intro-lema .manuscrito { color: #d5ab54; font-family: 'Caveat', cursive; font-size: min(5.4vw, 8vh, 62px); font-weight: 700; line-height: 1; } .intro-linea { animation: intro-linea .8s .75s cubic-bezier(.16, .84, .28, 1) both; background: #d5ab54; height: 2px; transform-origin: 50% 50%; width: 100%; } /* La foto se funde con el fondo por los lados y por abajo, y queda entera arriba. Son dos degradados, uno por eje. Van en dos elementos anidados en vez de componerse en uno solo: mask-composite necesita variantes con y sin prefijo que se pisan entre ellas, mientras que anidados se multiplican sin más. */ .intro-casa { animation: intro-casa 1.5s .85s cubic-bezier(.16, .84, .28, 1) forwards; display: flex; flex: 0 1 auto; justify-content: center; mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 24%, #000 76%, rgba(0, 0, 0, 0) 100%); min-height: 0; opacity: 0; position: relative; -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, #000 24%, #000 76%, rgba(0, 0, 0, 0) 100%); width: 100%; } .intro-casa img { display: block; height: auto; mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 14%, #000 44%, rgba(0, 0, 0, 0) 100%); max-height: min(34vh, 340px); object-fit: contain; -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000 14%, #000 44%, rgba(0, 0, 0, 0) 100%); width: 100%; } .intro-firma { animation: intro-firma 1s 1.75s ease-out forwards; color: #fff; font-family: 'Caveat', cursive; font-size: min(4.6vw, 7vh, 52px); font-weight: 700; margin-top: min(-1.6vh, -6px); opacity: 0; transform: rotate(-3deg); } .intro-pista { background: rgba(255, 255, 255, .2); height: 2px; margin-top: 8px; width: 180px; } .intro-pista span { animation: intro-barra 3.1s linear both; background: #d5ab54; display: block; height: 2px; transform-origin: 0 50%; } .intro-saltar { bottom: 22px; color: rgba(255, 255, 255, .4); font-family: 'Satoshi', sans-serif; font-size: 12px; left: 0; letter-spacing: .04em; position: absolute; right: 0; text-align: center; } @keyframes intro-aparecer { from { opacity: 0; } to { opacity: 1; } } @keyframes intro-subir { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes intro-linea { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes intro-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes intro-sol { from { opacity: 0; transform: scale(.6); } to { opacity: .55; transform: scale(1); } } @keyframes intro-casa { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); transform: scale(1.06); } 60% { opacity: 1; } 100% { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); } } @keyframes intro-firma { 0% { opacity: 0; transform: translateY(10px) rotate(-3deg); } 100% { opacity: 1; transform: translateY(0) rotate(-3deg); } } @media (max-width: 600px) { .intro-caja { gap: min(2vh, 18px); padding: 20px; } .intro-rotulo { font-size: 10px; letter-spacing: .22em; } .intro-lema { gap: 8px; } }