/* ============================================================ PAISAJISMO CALPE COSTA — animate.css Capa de animación premium, aditiva a styles.css. No modifica colores, tipografías ni contenido: solo movimiento. Todo el contenido permanece visible por defecto (sin JS = sin ocultar nada), por lo que no afecta a indexación ni SEO. ============================================================ */ /* ── Reveal on scroll ─────────────────────────────────────── Solo se activa cuando JS añade la clase .js al y marca cada elemento con .reveal. Si JS no corre, todo queda visible con su estado final normal (progressive enhancement). */ html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms cubic-bezier(.22,.68,.32,1), transform 700ms cubic-bezier(.22,.68,.32,1); will-change: opacity, transform; } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger para grupos de tarjetas (servicios, portfolio, pasos) */ html.js .reveal-group > .reveal:nth-child(1) { transition-delay: 0ms; } html.js .reveal-group > .reveal:nth-child(2) { transition-delay: 90ms; } html.js .reveal-group > .reveal:nth-child(3) { transition-delay: 180ms; } html.js .reveal-group > .reveal:nth-child(4) { transition-delay: 270ms; } html.js .reveal-group > .reveal:nth-child(5) { transition-delay: 360ms; } html.js .reveal-group > .reveal:nth-child(6) { transition-delay: 450ms; } /* ── Hero: entrada suave al cargar ──────────────────────────── */ html.js .hero__content > * { opacity: 0; transform: translateY(18px); animation: heroIn 800ms cubic-bezier(.22,.68,.32,1) forwards; } html.js .hero__content .eyebrow { animation-delay: 80ms; } html.js .hero__content h1 { animation-delay: 180ms; } html.js .hero__content .hero__subtitle { animation-delay: 300ms; } html.js .hero__content .hero__ctas { animation-delay: 420ms; } @keyframes heroIn { to { opacity: 1; transform: translateY(0); } } .hero__bg img { transform: scale(1.08); transition: transform 6000ms cubic-bezier(.22,.68,.32,1); } html.js .hero.is-loaded .hero__bg img { transform: scale(1); } /* ── Botones: microinteracción premium ─────────────────────── */ .btn { position: relative; overflow: hidden; transition: transform var(--t-normal), box-shadow var(--t-normal), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .btn:hover { transform: translateY(-2px); } .btn-primary:hover { box-shadow: 0 10px 24px -8px rgba(26,58,74,0.45); } .btn-outline:hover, .btn-outline-dark:hover { box-shadow: 0 8px 20px -10px rgba(26,58,74,0.3); } /* Barrido de brillo sutil sobre el CTA principal */ .btn-primary::before { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.28), transparent); transform: skewX(-20deg); transition: left 650ms ease; pointer-events: none; } .btn-primary:hover::before { left: 130%; } /* ── Tarjetas: elevación e imagen con zoom ─────────────────── */ .service-card, .portfolio-item, .process-step, .card { transition: transform var(--t-normal) ease, box-shadow var(--t-normal) ease; } .service-card:hover, .portfolio-item:hover, .card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -22px rgba(22,35,43,0.28); } .process-step:hover { transform: translateY(-4px); } .service-card__img img, .portfolio-item img, .card__img img, .split__image img { transition: transform 700ms cubic-bezier(.22,.68,.32,1); } .service-card:hover .service-card__img img, .portfolio-item:hover img, .card:hover .card__img img, .split:hover .split__image img { transform: scale(1.06); } .process-step__num { transition: transform var(--t-normal) ease, color var(--t-fast); } .process-step:hover .process-step__num { transform: scale(1.12); } /* ── Navegación: subrayado animado ──────────────────────────── */ .nav__links a { position: relative; } .nav__links a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: currentColor; transition: width var(--t-normal) ease; } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { width: 100%; } /* Header: sombra más viva al hacer scroll (ya usa .scrolled desde main.js) */ .site-header { transition: box-shadow var(--t-normal) ease, background var(--t-normal) ease; } /* ── FAQ: apertura más suave ───────────────────────────────── */ .faq-item__answer { transition: max-height 400ms cubic-bezier(.22,.68,.32,1), opacity 300ms ease; } .faq-item__icon { transition: transform var(--t-normal) ease; } .faq-item.is-open .faq-item__icon { transform: rotate(45deg); } /* ── WhatsApp flotante: pulso discreto ──────────────────────── */ .whatsapp-fab { animation: fabPulse 3200ms ease-in-out infinite; } @keyframes fabPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0.35); } 50% { box-shadow: 0 0 0 10px rgba(37,211,102,0); } } /* ── Accesibilidad: respeta movimiento reducido ─────────────── */ @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .hero__content > *, .hero__bg img, .btn, .btn-primary::before, .service-card, .portfolio-item, .process-step, .card, .service-card__img img, .portfolio-item img, .card__img img, .split__image img, .process-step__num, .nav__links a::after, .site-header, .faq-item__answer, .faq-item__icon, .whatsapp-fab { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; } }