/* ========================================================= GALLA CABALLA — capa de animación --------------------------------------------------------- Todo lo de aquí depende de la clase .js del : sin JavaScript nada se oculta y la página se ve completa. ========================================================= */ :root{ /* muelle suave, sin rebote: la curva de los sitios editoriales */ --spring: cubic-bezier(.16,1,.3,1); --spring-back: cubic-bezier(.34,1.4,.5,1); } /* ========================================================= 1 · Intro ========================================================= */ .preloader{ display:none; } .js:not(.intro-done) .preloader{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; background:var(--black); } .preloader__inner{ display:grid; place-items:center; gap:1.4rem; animation:pre-in .7s var(--spring) both; } .preloader img{ width:min(46vw, 230px); } .preloader__star{ width:26px; height:26px; background:var(--pink); clip-path:var(--star-clip); animation:pre-spin 1.1s linear infinite; } @keyframes pre-in{ from{ opacity:0; transform:translateY(18px) scale(.94); } to { opacity:1; transform:none; } } @keyframes pre-spin{ to{ transform:rotate(360deg); } } /* salida: el telón sube y arrastra el logo */ .preloader.is-out{ transform:translateY(-100%); transition:transform .9s var(--spring); } .preloader.is-out .preloader__inner{ opacity:0; transform:translateY(-30px); transition:opacity .35s ease, transform .5s var(--spring); } /* la cabecera entra después del telón */ .js:not(.intro-done) .site-header{ opacity:0; } .js .site-header{ transition:opacity .6s .15s ease, background-color .35s var(--ease), padding .35s var(--ease), transform .5s var(--spring); } /* ========================================================= 2 · Estados de entrada · [data-anim] ========================================================= */ .js [data-anim]{ will-change:transform, opacity; } /* — subir y aparecer — */ .js [data-anim="up"]{ opacity:0; transform:translateY(34px); transition:opacity .9s var(--spring), transform .9s var(--spring); } .js [data-anim="up"].is-in{ opacity:1; transform:none; } /* — línea a línea detrás de una máscara — Ojo: la máscara va SIEMPRE en un hijo, nunca en el elemento observado. Un `clip-path` que colapsa el elemento hace que el IntersectionObserver lo dé por no visible y nunca dispare. */ .js [data-anim="lines"] .ln{ display:block; overflow:hidden; /* holgura para acentos y descendentes; se compensa con el margen */ padding:.1em 0 .16em; margin:-.1em 0 -.16em; } .js [data-anim="lines"] .ln__i{ display:block; transform:translateY(115%); transition:transform 1.05s var(--spring); } .js [data-anim="lines"].is-in .ln__i{ transform:none; } /* — el timbre cae girando — */ .js [data-anim="stamp"]{ opacity:0; transform:translateY(-38px) rotate(-9deg) scale(.9); transition:opacity .6s ease, transform 1.1s var(--spring-back); } .js [data-anim="stamp"].is-in{ opacity:1; transform:none; } /* — el blob crece — */ .js [data-anim="blob"]{ opacity:0; transform:scale(.94); transition:opacity .7s ease, transform 1.2s var(--spring-back); } .js [data-anim="blob"].is-in{ opacity:1; transform:none; } /* — tarjetas de sesión — */ .js [data-anim="card"]{ opacity:0; transform:translateY(48px) scale(.94); transition:opacity .8s var(--spring), transform 1.05s var(--spring); } .js [data-anim="card"].is-in{ opacity:1; transform:none; } /* ========================================================= 3 · Cita: las palabras se encienden con el scroll ========================================================= */ .js [data-scrub] .wd{ display:inline-block; opacity:.14; transition:opacity .1s linear; } /* ========================================================= 4 · Marquesina del lema ========================================================= */ .marquee{ overflow:hidden; width:100%; line-height:1.02; } .marquee__track{ display:flex; width:max-content; } .marquee__item{ font-family:var(--display); color:var(--red); font-size:clamp(2.1rem, 7.2vw, 6rem); letter-spacing:-.01em; padding-inline:.28em; white-space:nowrap; } /* ========================================================= 5 · Hero: recorrido y zoom lento ========================================================= */ .hero__slides{ /* margen extra arriba y abajo para que el parallax no descubra el fondo */ inset:-9% 0 auto 0; height:118%; } .js .hero__slide.is-active img{ animation:kenburns 11s linear forwards; } @keyframes kenburns{ from{ scale:1; } to { scale:1.11; } } /* el fondo del cierre también necesita holgura */ .cta__bg{ top:-10%; height:120%; } /* flechas del hero: entran con el resto */ .js:not(.intro-done) .hero__nav{ opacity:0; } .hero__nav{ transition:opacity .6s .5s ease; } /* ========================================================= 6 · Cabecera que se esconde al bajar ========================================================= */ .site-header.is-hidden{ transform:translateY(-105%); } /* ========================================================= 7 · Tarjetas con inclinación ========================================================= */ [data-tilt]{ transform-style:preserve-3d; will-change:transform; } .card__label{ transition:letter-spacing .5s var(--spring); } .card:hover .card__label{ letter-spacing:.02em; } /* ========================================================= 8 · Carrusel de testimonios: entra por el lado correcto ========================================================= */ [data-magnetic]{ will-change:transform; } .slider{ cursor:grab; } .slider.is-dragging{ cursor:grabbing; user-select:none; } .js .testi.is-active{ animation:testi-fade .55s var(--spring) both; } .js .testi.is-active.from-right{ animation-name:testi-right; } .js .testi.is-active.from-left { animation-name:testi-left; } @keyframes testi-fade { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } } @keyframes testi-right{ from{ opacity:0; transform:translateX(46px); } to{ opacity:1; transform:none; } } @keyframes testi-left { from{ opacity:0; transform:translateX(-46px);} to{ opacity:1; transform:none; } } /* ========================================================= 9 · Asterisco que acompaña al cursor ========================================================= */ .cursor-star{ position:fixed; top:0; left:0; z-index:900; width:22px; height:22px; background:var(--pink); clip-path:var(--star-clip); pointer-events:none; opacity:0; mix-blend-mode:normal; transition:opacity .3s ease, background-color .3s ease; } .cursor-star.is-on{ opacity:.9; } .cursor-star.is-big{ background:var(--red); } /* ========================================================= 10 · Respeto por prefers-reduced-motion ========================================================= */ @media (prefers-reduced-motion: reduce){ .preloader{ display:none !important; } .cursor-star{ display:none; } .js [data-anim]{ opacity:1 !important; transform:none !important; clip-path:none !important; } .js [data-anim="lines"] .ln__i{ transform:none !important; } .js [data-scrub] .wd{ opacity:1 !important; } .js .hero__slide.is-active img{ animation:none; } } /* en pantallas táctiles no hay imán, ni inclinación, ni asterisco */ @media (hover: none){ .cursor-star{ display:none; } }