/* ═══════════════════════════════════════════════════════════════ VASCULAR CLINIC — Animaciones Todo con transform/opacity para mantener 60fps. REGLA DE ORO: sin JavaScript la página se ve COMPLETA. Los elementos [data-anim] son visibles por defecto; solo se ocultan cuando el tiene la clase .js-enabled, que la añade un script inline en el . ═══════════════════════════════════════════════════════════════ */ /* ═══ 1. PRELOADER ═════════════════════════════════════════════ */ .preloader{ display:none; } /* sin JS: nunca aparece */ .js-enabled .preloader{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; background:#fff; transition:opacity .55s ease, visibility .55s; } .preloader.done{ opacity:0; visibility:hidden; } .preloader__v{ stroke-dasharray:200; stroke-dashoffset:200; animation:drawV 1s var(--ease) forwards; } .preloader__swoosh{ stroke-dasharray:200; stroke-dashoffset:200; animation:drawV .9s var(--ease) .25s forwards, spinSwoosh 2.4s linear .9s infinite; transform-origin:60px 66px; } .preloader__text{ font-size:.8rem; font-weight:800; letter-spacing:.3em; text-transform:uppercase; color:var(--azul); opacity:0; animation:fadeInSoft .6s ease .5s forwards; } @keyframes drawV{ to{ stroke-dashoffset:0; } } @keyframes spinSwoosh{ from{ transform:rotate(-20deg); } to { transform:rotate(340deg); } } @keyframes fadeInSoft{ to{ opacity:1; } } /* ═══ 2. REVEAL AL HACER SCROLL ════════════════════════════════ */ .js-enabled [data-anim]{ opacity:0; transition:opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); transition-delay:var(--delay, 0ms); will-change:opacity, transform; } .js-enabled [data-anim="fade-up"] { transform:translateY(38px); } .js-enabled [data-anim="fade-in"] { transform:none; } .js-enabled [data-anim="scale-in"] { transform:scale(.93); } .js-enabled [data-anim="slide-right"]{ transform:translateX(-46px); } .js-enabled [data-anim="slide-left"] { transform:translateX(46px); } .js-enabled [data-anim="flip-in"] { transform:perspective(900px) rotateX(-16deg); transform-origin:top; } .js-enabled [data-anim="blur-in"] { transform:translateY(20px); filter:blur(10px); } .js-enabled [data-anim].is-visible{ opacity:1; transform:none; filter:none; } /* liberamos la GPU al terminar */ .js-enabled [data-anim].anim-done{ will-change:auto; } /* ═══ 3. HERO — entrada en cascada ═════════════════════════════ */ .js-enabled .hero__title .word{ display:inline-block; opacity:0; transform:translateY(60%) rotate(4deg); filter:blur(6px); animation:wordIn .9s var(--ease) forwards; animation-delay:var(--wd, 0ms); } @keyframes wordIn{ to{ opacity:1; transform:none; filter:blur(0); } } /* subrayado rojo de la palabra clave */ .hero__title em::after{ transition:transform .9s var(--ease); } .hero.ready .hero__title em::after{ transform:scaleX(1); } .pill__dot{ animation:dotPulse 2.2s ease-out infinite; } @keyframes dotPulse{ 0% { box-shadow:0 0 0 0 rgba(216,31,60,.75); } 70% { box-shadow:0 0 0 12px rgba(216,31,60,0); } 100%{ box-shadow:0 0 0 0 rgba(216,31,60,0); } } /* ═══ 4. FONDO DEL HERO — blobs, malla, pulso ══════════════════ */ .blob--1{ animation:floatA 20s ease-in-out infinite; } .blob--2{ animation:floatB 26s ease-in-out infinite; } .blob--3{ animation:floatC 23s ease-in-out infinite; } @keyframes floatA{ 0%,100%{ transform:translate(0,0) scale(1); } 33% { transform:translate(70px,52px) scale(1.12); } 66% { transform:translate(-38px,80px) scale(.94); } } @keyframes floatB{ 0%,100%{ transform:translate(0,0) scale(1); } 50% { transform:translate(-84px,-58px) scale(1.15); } } @keyframes floatC{ 0%,100%{ transform:translate(-50%,0) scale(1); } 40% { transform:translate(-58%,-46px) scale(1.1); } 75% { transform:translate(-42%,40px) scale(.92); } } .hero__mesh{ animation:meshSpin 26s linear infinite; } @keyframes meshSpin{ to{ transform:rotate(360deg); } } .hero__grid{ animation:gridDrift 28s linear infinite; } @keyframes gridDrift{ to{ background-position:64px 64px; } } /* Línea de pulso / ECG */ .pulse-path{ stroke-dasharray:1600; stroke-dashoffset:1600; animation:drawPulse 5.5s var(--ease) infinite; filter:drop-shadow(0 0 7px rgba(216,31,60,.75)); } @keyframes drawPulse{ 0% { stroke-dashoffset:1600; opacity:0; } 12% { opacity:1; } 62% { stroke-dashoffset:0; opacity:1; } 85%,100%{ stroke-dashoffset:0; opacity:0; } } /* Indicador de scroll */ .scroll-hint{ animation:bobble 2.4s ease-in-out infinite; } .scroll-hint__mouse span{ animation:wheel 1.9s var(--ease) infinite; } @keyframes bobble{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(9px); } } @keyframes wheel{ 0% { opacity:0; transform:translateY(0); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(14px); } } /* ═══ 5. MARQUEE ═══════════════════════════════════════════════ */ .marquee__track{ animation:marquee 32s linear infinite; } .marquee:hover .marquee__track{ animation-play-state:paused; } @keyframes marquee{ from{ transform:translateX(0); } to { transform:translateX(-50%); } } /* ═══ 6. MENÚ MÓVIL — links escalonados ════════════════════════ */ .mobile-menu.open .mobile-menu__link:nth-child(1){ transition-delay:.14s; } .mobile-menu.open .mobile-menu__link:nth-child(2){ transition-delay:.20s; } .mobile-menu.open .mobile-menu__link:nth-child(3){ transition-delay:.26s; } .mobile-menu.open .mobile-menu__link:nth-child(4){ transition-delay:.32s; } .mobile-menu.open .mobile-menu__link:nth-child(5){ transition-delay:.38s; } .mobile-menu.open .mobile-menu__link:nth-child(6){ transition-delay:.44s; } .mobile-menu.open .mobile-menu__cta{ transition-delay:.5s; animation:fadeUpIn .5s var(--ease) .5s both; } @keyframes fadeUpIn{ from{ opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } } /* ═══ 7. BOTONES — ripple y magnético ══════════════════════════ */ @keyframes ripple{ to{ transform:scale(3.2); opacity:0; } } .js-magnetic{ transition:transform .3s var(--ease), box-shadow .35s var(--ease); } /* ═══ 8. ÍCONOS DE SÍNTOMAS — micro-animación al hover ═════════ */ .symptom:hover .symptom__icon--wave svg { animation:waveFlow 1.4s ease-in-out infinite; } .symptom:hover .symptom__icon--spin svg { animation:spinSlow 3.2s linear infinite; } .symptom:hover .symptom__icon--press svg { animation:pressDown 1.3s ease-in-out infinite; } .symptom:hover .symptom__icon--swell svg { animation:swell 1.6s ease-in-out infinite; } .symptom:hover .symptom__icon--tick svg { animation:tick 1.1s steps(4) infinite; } .symptom:hover .symptom__icon--beat svg { animation:heartBeat 1.15s ease-in-out infinite; } @keyframes waveFlow{ 0%,100%{ transform:translateX(0); } 50% { transform:translateX(-3px); } } @keyframes spinSlow{ to{ transform:rotate(360deg); } } @keyframes pressDown{ 0%,100%{ transform:translateY(0); } 50% { transform:translateY(3px); } } @keyframes swell{ 0%,100%{ transform:scale(1); } 50% { transform:scale(1.14); } } @keyframes tick{ 0%,100%{ transform:rotate(0); } 50% { transform:rotate(14deg); } } @keyframes heartBeat{ 0%,100% { transform:scale(1); } 14% { transform:scale(1.18); } 28% { transform:scale(1); } 42% { transform:scale(1.12); } 56% { transform:scale(1); } } /* ═══ 9. SCHEDULE y CTA FINAL — gradientes en movimiento ═══════ */ .schedule::before{ animation:gradientSlide 6s ease-in-out infinite; } @keyframes gradientSlide{ 0%,100%{ background-position:0% 50%; } 50% { background-position:100% 50%; } } .final-cta__bg{ animation:gradientShift 16s ease-in-out infinite; } @keyframes gradientShift{ 0%,100%{ background-position:0% 50%; } 50% { background-position:100% 50%; } } /* Halo suave girando detrás del CTA final */ .final-cta::before{ content:''; position:absolute; width:900px; height:900px; top:50%; left:50%; margin:-450px 0 0 -450px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.14), transparent 62%); animation:haloSpin 30s linear infinite; pointer-events:none; } @keyframes haloSpin{ from{ transform:rotate(0) scale(1); } 50% { transform:rotate(180deg) scale(1.18); } to { transform:rotate(360deg) scale(1); } } /* ═══ 10. BOTÓN FLOTANTE WHATSAPP ══════════════════════════════ */ .wa-fab.show .wa-fab__ring{ animation:pulseRing 2.3s var(--ease) infinite; } @keyframes pulseRing{ 0% { transform:scale(1); opacity:.55; } 70% { transform:scale(1.85); opacity:0; } 100%{ transform:scale(1.85); opacity:0; } } .wa-fab.show svg{ animation:wiggle 4.5s ease-in-out 1.5s infinite; } @keyframes wiggle{ 0%,88%,100%{ transform:rotate(0); } 91% { transform:rotate(-12deg) scale(1.08); } 94% { transform:rotate(11deg) scale(1.08); } 97% { transform:rotate(-6deg); } } /* ═══ 11. FAQ — contenido que entra ════════════════════════════ */ .faq__item.open .faq__a-inner{ animation:faqIn .5s var(--ease) both; } @keyframes faqIn{ from{ opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } } /* ═══ 12. SCROLL-DRIVEN (navegadores modernos) ═════════════════ Donde el navegador soporte animation-timeline, los reveals corren en el compositor sin costo de JavaScript. El IntersectionObserver sigue siendo el respaldo universal. ═══════════════════════════════════════════════════════════════ */ @supports (animation-timeline: view()){ @media (prefers-reduced-motion: no-preference){ .js-enabled .venue, .js-enabled .symptom{ animation:liftIn linear both; animation-timeline:view(); animation-range:entry 0% entry 42%; } @keyframes liftIn{ from{ transform:translateY(26px) scale(.985); } to { transform:none; } } } } /* ═══ 13. ACCESIBILIDAD — reducir movimiento ═══════════════════ Si el sistema pide menos movimiento, apagamos TODO. El contenido queda visible y legible, nunca oculto. ═══════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } html{ scroll-behavior:auto; } .js-enabled .preloader{ display:none !important; } .js-enabled [data-anim], .js-enabled .hero__title .word{ opacity:1 !important; transform:none !important; filter:none !important; } .hero__canvas, .hero__mesh, .hero__pulse, .scroll-hint, .final-cta::before, .wa-fab__ring{ display:none !important; } .blob{ animation:none !important; } .marquee__track{ animation:none !important; transform:none !important; } .hero__title em::after{ transform:scaleX(1) !important; } .sec-head__title::after{ width:74px !important; } }