/* ── motion.css — capa de movimiento (index + installers) ──────────────────── Solo se aplica cuando tiene la clase `js` (la pone el inline-script del ): sin JS no se oculta nada. Todo el movimiento es transform/opacity (CLS = 0) y se desactiva con prefers-reduced-motion. */ /* ── Scroll-reveal ─────────────────────────────────────────────────────────── */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .js [data-reveal].is-revealed { opacity: 1; transform: none; } /* ── Hero: capa de media (vídeo IA o aurora provisional) ──────────────────── */ .hero__media { position: absolute; inset: 0; overflow: hidden; } .hero__media video { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: brightness(.82) saturate(.92); } /* Aurora provisional (stand-in del loop IA mientras no haya clip): energía/naturaleza en la paleta de marca, deriva muy lenta. */ .hero__aurora { position: absolute; inset: -20%; background: radial-gradient(35% 45% at 25% 30%, rgba(74,124,89,.38), transparent 70%), radial-gradient(30% 40% at 75% 65%, rgba(126,175,142,.24), transparent 70%), radial-gradient(25% 30% at 60% 22%, rgba(255,107,53,.10), transparent 70%); filter: blur(40px); animation: aurora-drift 24s ease-in-out infinite alternate; } .hero--installer .hero__aurora { opacity: .7; } @keyframes aurora-drift { from { transform: translate3d(-2%, 1%, 0) scale(1); } to { transform: translate3d(4%, -3%, 0) scale(1.06); } } /* Scrim para legibilidad del texto sobre la media: degradado vertical + viñeta radial donde caen los títulos */ .hero__media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 75% 55% at 50% 52%, rgba(26,46,26,.42), transparent 75%), linear-gradient(180deg, rgba(26,46,26,.38) 0%, rgba(26,46,26,.52) 55%, rgba(26,46,26,.72) 100%); } /* Sombra de texto de refuerzo (inocua sobre el fondo oscuro liso; crítica cuando hay vídeo/media detrás del título) */ .hero .hero__h1 { text-shadow: 0 2px 24px rgba(26,46,26,.55), 0 1px 6px rgba(26,46,26,.35); } .hero .hero__tagline, .hero .hero__invite-msg { text-shadow: 0 1px 10px rgba(26,46,26,.5); } /* ── Feature cards: acentos sutiles ────────────────────────────────────────── */ .feature-card { transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s; } .feature-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(26,46,26,.10); } .feature-card__icon { transition: transform .35s cubic-bezier(.22,.61,.36,1); } .feature-card:hover .feature-card__icon { transform: translateY(-3px) scale(1.06); } .feature-card__bar { transform-origin: left center; transition: transform .45s cubic-bezier(.22,.61,.36,1); } .feature-card:hover .feature-card__bar { transform: scaleX(1.6); } /* ── Service items: hover sutil ────────────────────────────────────────────── */ .service-item { transition: transform .3s cubic-bezier(.22,.61,.36,1), background-color .3s; } .service-item:hover { transform: translateY(-2px); } /* ── Accesibilidad: sin movimiento si el usuario lo pide ───────────────────── */ @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__aurora, .animate-float { animation: none !important; } .feature-card, .feature-card__icon, .feature-card__bar, .service-item { transition: none !important; } }