/* ═══════════════════════════════════════════════════════════════════════════ SGE Landing — animations.css v4 Soporte visual para el sistema de animaciones GSAP (Alpha UI Plan v3) Regla: solo transform + opacity en loops. Sin reflow. ═══════════════════════════════════════════════════════════════════════════ */ /* ── GOV-SEC-83: degradacion segura ─────────────────────────────────────────── El hero y el ticker-label arrancan VISIBLES por default. Solo se ocultan para animar si un script (con nonce, corre en ) confirmo que va a armar la secuencia agregando .hero-anim-armed a -- si CSP bloquea el script, si el CDN de GSAP no responde, o si cualquier excepcion corta la ejecucion antes de esa linea, el contenido queda visible sin animar en vez de invisible para siempre. Antes de este fix el default era opacity:0 y la UNICA forma de revelar era la animacion de GSAP (o un fallback que tambien escribia .style, igual de bloqueado por CSP) -- sin escape. */ #hero-card, #hero-eyebrow, #hero-title, #hero-text, #hero-subtext, #hero-buttons, #hero-metrics, #hero-proof, .logo-ticker-label { opacity: 1; } .hero-word { clip-path: inset(0 0% 0 0); will-change: clip-path; } html.hero-anim-armed #hero-card, html.hero-anim-armed #hero-eyebrow, html.hero-anim-armed #hero-title, html.hero-anim-armed #hero-text, html.hero-anim-armed #hero-subtext, html.hero-anim-armed #hero-buttons, html.hero-anim-armed #hero-metrics, html.hero-anim-armed #hero-proof { opacity: 0; transition: opacity 0.5s ease, transform 0.5s ease; } html.hero-anim-armed .logo-ticker-label { opacity: 0; transition: opacity 0.5s ease; } html.hero-anim-armed .hero-word { clip-path: inset(0 100% 0 0); transition: clip-path 0.5s ease; } html.hero-anim-armed #hero-card.hero-in, html.hero-anim-armed #hero-eyebrow.hero-in, html.hero-anim-armed #hero-title.hero-in, html.hero-anim-armed #hero-text.hero-in, html.hero-anim-armed #hero-subtext.hero-in, html.hero-anim-armed #hero-buttons.hero-in, html.hero-anim-armed #hero-metrics.hero-in, html.hero-anim-armed #hero-proof.hero-in, html.hero-anim-armed .logo-ticker-label.hero-in { opacity: 1; transform: none; } html.hero-anim-armed .hero-word.word-in { clip-path: inset(0 0% 0 0); } #hero-card { transform: scale(0.9); } html.hero-anim-armed #hero-card.hero-in { transform: scale(1); } /* ── GSAP toma control del tilt — eliminar CSS hover transform ────────────── */ #hero-card { transition: box-shadow 0.5s ease !important; } .landing-hero-card:hover { transform: none !important; } /* ── Shimmer sweep ─────────────────────────────────────────────────────────── */ .hero-shimmer { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(0,229,255,0.13) 50%, transparent 70%); transform: translateX(-115%); will-change: transform; z-index: 3; border-radius: inherit; overflow: hidden; } /* ── Live chart mini-bars ─────────────────────────────────────────────────── */ .hero-bar { flex: 1; background: linear-gradient(180deg, rgba(0,229,255,0.72) 0%, rgba(55,138,221,0.3) 100%); border-radius: 4px 4px 0 0; will-change: transform; transform-origin: bottom center; } /* ── Step number badges ───────────────────────────────────────────────────── */ .step-number { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(13,110,253,0.12); color: #185FA5; font-weight: 800; font-size: 0.82rem; flex-shrink: 0; will-change: transform, opacity; transition: background 0.3s, color 0.3s, box-shadow 0.3s; } /* ── Feature card glow border (GSAP animates --glow-opacity) ──────────────── */ .feature-card-col .landing-card { --glow-opacity: 0; box-shadow: 0 0 28px rgba(0,229,255,var(--glow-opacity)), 0 10px 30px rgba(2,6,23,0.06); will-change: transform; cursor: default; } /* ── Counter values ───────────────────────────────────────────────────────── */ .counter-value { display: inline; font-variant-numeric: tabular-nums; } /* ── GPU layers para loops ────────────────────────────────────────────────── */ .gsap-float-badge, .hero-shimmer, .hero-bar { transform: translateZ(0); } /* ── GOV-SEC-83: nav del hero (antes se ocultaba via gsap.set inline) ─────── */ .landing-hero > .container { opacity: 1; transform: none; } html.hero-anim-armed .landing-hero > .container { opacity: 0; transform: translateY(-24px); transition: opacity .55s ease, transform .55s ease; } html.hero-anim-armed .landing-hero > .container.hero-in { opacity: 1; transform: none; } /* ── GOV-SEC-83: float badges orbitales -- default visibles, .badge-in revela con un pop cuando el script arma la secuencia; el loop orbital en si es CSS puro (Patron E), 4 variantes de radio/duracion por nth-child ── */ .gsap-float-badge { opacity: 1; transform: scale(1); } html.hero-anim-armed .gsap-float-badge { opacity: 0; transform: scale(0); transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); } html.hero-anim-armed .gsap-float-badge.badge-in { opacity: 1; transform: scale(1); } @keyframes badgeOrbit1 { from { transform: translate(70px,0); } to { transform: translate(-70px,0); } } @keyframes badgeOrbit2 { from { transform: translate(98px,0); } to { transform: translate(-98px,0); } } @keyframes badgeOrbit3 { from { transform: translate(126px,0); } to { transform: translate(-126px,0); } } @keyframes badgeOrbit4 { from { transform: translate(154px,0); } to { transform: translate(-154px,0); } } .gsap-float-badge.orbit-1 { animation: badgeOrbit1 9s ease-in-out infinite alternate; } .gsap-float-badge.orbit-2 { animation: badgeOrbit2 11.5s ease-in-out infinite alternate; } .gsap-float-badge.orbit-3 { animation: badgeOrbit3 14s ease-in-out infinite alternate; } .gsap-float-badge.orbit-4 { animation: badgeOrbit4 16.5s ease-in-out infinite alternate; } /* ── GOV-SEC-83: shimmer sweep -- loop CSS puro, reemplaza el gsap.fromTo + delayedCall recursivo. ── */ @keyframes heroShimmerSweep { 0% { transform: translateX(-115%); } 22% { transform: translateX(215%); } 100% { transform: translateX(215%); } } .hero-shimmer.sweep { animation: heroShimmerSweep 4.45s ease-in-out infinite; } /* ── GOV-SEC-83: hero-bar loop -- reemplaza gsap.to(scaleY:'random(...)'). CSS no tiene random() nativo, 4 variantes de @keyframes con distintos picos + duracion distinta por barra dan un resultado visualmente equivalente. ── */ @keyframes barPulse1 { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1.3); } } @keyframes barPulse2 { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1.5); } } @keyframes barPulse3 { 0%,100% { transform: scaleY(.4); } 50% { transform: scaleY(1.15); } } @keyframes barPulse4 { 0%,100% { transform: scaleY(.7); } 50% { transform: scaleY(1.4); } } .hero-bar.pulse-1 { animation: barPulse1 1.4s ease-in-out infinite; } .hero-bar.pulse-2 { animation: barPulse2 1.9s ease-in-out infinite .15s; } .hero-bar.pulse-3 { animation: barPulse3 1.6s ease-in-out infinite .3s; } .hero-bar.pulse-4 { animation: barPulse4 2.1s ease-in-out infinite .45s; } /* ── GOV-SEC-83: live counter bump -- reemplaza gsap.from(y,opacity) ──────── */ @keyframes counterBump { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .counter-value.bump { animation: counterBump .4s cubic-bezier(.34,1.56,.64,1); } /* ── GOV-SEC-83: reveal-once generico (prob-row/sol-row, process-step, feature-card-col, testimonial-glass, price-tease-card, eco-feature-pill, ticker-label) -- default visible, IntersectionObserver agrega .in-view. ── */ .prob-row, .sol-row, .process-step, .feature-card-col, .testimonial-glass, .price-tease-card, .eco-feature-pill, #ticker-label { opacity: 1; transform: none; } html.hero-anim-armed .prob-row, html.hero-anim-armed .sol-row { opacity: 0; transform: translateX(-20px); transition: opacity .5s cubic-bezier(0,0,.2,1), transform .5s cubic-bezier(0,0,.2,1); } html.hero-anim-armed .prob-row.in-view, html.hero-anim-armed .sol-row.in-view { opacity: 1; transform: none; } html.hero-anim-armed .process-step { opacity: 0; transform: translateX(-30px); transition: opacity .7s cubic-bezier(0,0,.2,1), transform .7s cubic-bezier(0,0,.2,1); } html.hero-anim-armed .process-step.in-view { opacity: 1; transform: none; } .process-step.step-delay-0 { transition-delay: 0s; } .process-step.step-delay-1 { transition-delay: .1s; } .process-step.step-delay-2 { transition-delay: .2s; } .process-step.step-delay-3 { transition-delay: .3s; } .process-step.step-delay-4 { transition-delay: .4s; } .process-step.step-delay-5 { transition-delay: .5s; } .process-step.step-delay-6 { transition-delay: .6s; } .process-step.step-delay-7 { transition-delay: .7s; } /* pop de color del numero de paso al entrar -- 4 variantes por nth-child, reemplaza el ScrollTrigger.onEnter que le pintaba background/color/glow */ .process-step:nth-of-type(4n+1) .step-number.in-view-num { background: rgba(0,229,255,.16); color: #00e5ff; box-shadow: 0 0 14px rgba(0,229,255,.33); } .process-step:nth-of-type(4n+2) .step-number.in-view-num { background: rgba(56,189,248,.16); color: #38bdf8; box-shadow: 0 0 14px rgba(56,189,248,.33); } .process-step:nth-of-type(4n+3) .step-number.in-view-num { background: rgba(52,211,153,.16); color: #34d399; box-shadow: 0 0 14px rgba(52,211,153,.33); } .process-step:nth-of-type(4n+4) .step-number.in-view-num { background: rgba(167,139,250,.16); color: #a78bfa; box-shadow: 0 0 14px rgba(167,139,250,.33); } .step-number.in-view-num { transform: scale(1.2); } html.hero-anim-armed .feature-card-col { opacity: 0; transform: translateY(50px) scale(.88); transition: opacity .75s cubic-bezier(.34,1.4,.64,1), transform .75s cubic-bezier(.34,1.4,.64,1); } html.hero-anim-armed .feature-card-col.in-view { opacity: 1; transform: none; } html.hero-anim-armed .testimonial-glass { opacity: 0; transform: translateY(50px) rotateX(8deg); transition: opacity .8s cubic-bezier(0,0,.2,1), transform .8s cubic-bezier(0,0,.2,1); } html.hero-anim-armed .testimonial-glass.in-view { opacity: 1; transform: none; } .testimonial-glass .testi-avatar img { transition: transform .3s cubic-bezier(.34,1.56,.64,1); } .testimonial-glass:hover .testi-avatar img { transform: scale(1.08); } html.hero-anim-armed .price-tease-card { opacity: 0; transform: translateY(40px) scale(.96); transition: opacity .8s cubic-bezier(.34,1.3,.64,1), transform .8s cubic-bezier(.34,1.3,.64,1); } html.hero-anim-armed .price-tease-card.in-view { opacity: 1; transform: none; } html.hero-anim-armed .eco-feature-pill { opacity: 0; transform: translateX(-20px); transition: opacity .55s cubic-bezier(0,0,.2,1), transform .55s cubic-bezier(0,0,.2,1); } html.hero-anim-armed .eco-feature-pill.in-view { opacity: 1; transform: none; } html.hero-anim-armed #ticker-label { opacity: 0; transform: translateY(10px); transition: opacity .5s cubic-bezier(0,0,.2,1), transform .5s cubic-bezier(0,0,.2,1); } html.hero-anim-armed #ticker-label.in-view { opacity: 1; transform: none; } /* ── GOV-SEC-83: feature-card hover -- CSS puro, reemplaza mouseenter/ mouseleave con gsap.to. ── */ .feature-card-col .landing-card { transition: transform .3s cubic-bezier(0,0,.2,1), box-shadow .35s ease; } .feature-card-col .landing-card:hover { transform: translateY(-8px) scale(1.02); --glow-opacity: 1; box-shadow: 0 20px 40px rgba(0,229,255,.15); } /* ── GOV-SEC-83: header sticky -- reemplaza el gsap.to que corria EN PARALELO al classList.toggle('nav-scrolled') que ya existia. ── */ .landing-hero > .container { transition: transform .4s cubic-bezier(0,0,.2,1), background-color .4s ease, backdrop-filter .4s ease, padding .4s ease, border-radius .4s ease, border-color .4s ease; } /* especificidad reforzada (html.hero-anim-armed + 4 clases) -- sin esto, la regla compartida ".hero-in { transform:none }" de mas arriba (que resetea el slide-down de ENTRADA una vez completado) le gana a esta por especificidad y el efecto sticky nunca mueve el nav, porque ambas clases (.hero-in y .nav-scrolled) conviven en el mismo elemento despues de que termina la animacion de entrada. */ html.hero-anim-armed .landing-hero > .container.nav-scrolled, .landing-hero > .container.nav-scrolled { transform: translateY(10px); background-color: rgba(2, 11, 24, 0.65); backdrop-filter: blur(16px); padding: 0.8rem 1.5rem; border-radius: 50px; border: 1px solid rgba(0, 229, 255, 0.15); } /* ── GOV-SEC-83: #hero-bg-3d parallax -- CSS Scroll-driven Animations, activado solo si el navegador lo soporta (JS chequea CSS.supports antes de agregar la clase; si no, cae al fallback WAAPI del JS). ── */ @keyframes heroBgParallax { from { transform: translateY(0); } to { transform: translateY(30%); } } #hero-bg-3d.bg-parallax-scroll-driven { animation: heroBgParallax linear both; animation-timeline: scroll(nearest block); animation-range: entry 0% cover 100%; } /* ── GOV-SEC-83: entrada de la seccion "scene carousel" ───────────────────── */ .scene-eyebrow, .scene-hline, .scene-desc, .scene-tab { opacity: 1; transform: none; clip-path: none; } html.hero-anim-armed .scene-eyebrow { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(0,0,.2,1), transform .6s cubic-bezier(0,0,.2,1); } html.hero-anim-armed .scene-hline { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .8s cubic-bezier(0,0,.2,1), clip-path .8s cubic-bezier(0,0,.2,1); transition-delay: .1s; } html.hero-anim-armed .scene-desc { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(0,0,.2,1), transform .6s cubic-bezier(0,0,.2,1); transition-delay: .6s; } html.hero-anim-armed .scene-tab { opacity: 0; transform: translateY(12px); transition: opacity .4s cubic-bezier(0,0,.2,1), transform .4s cubic-bezier(0,0,.2,1); transition-delay: .7s; } html.hero-anim-armed .scene-section.scene-in-view .scene-eyebrow, html.hero-anim-armed .scene-section.scene-in-view .scene-hline, html.hero-anim-armed .scene-section.scene-in-view .scene-desc, html.hero-anim-armed .scene-section.scene-in-view .scene-tab { opacity: 1; transform: none; clip-path: inset(0 0% 0 0); } /* ── Orbita visible por encima de la tarjeta ──────────────────────────────── */ .landing-hero-card { overflow: visible !important; transform-style: preserve-3d; } .landing-hero-orbit { top: -60px; right: -50px; width: 240px; height: 240px; border: 1px solid rgba(56,189,248,0.4); box-shadow: 0 0 50px rgba(56,189,248,0.18), inset 0 0 30px rgba(56,189,248,0.05); z-index: 0; } /* ── Magnetic button base ─────────────────────────────────────────────────── */ .btn-magnetic { position: relative; display: inline-block; } /* ── prefers-reduced-motion ───────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .hero-shimmer, .hero-bar, .gsap-float-badge, .landing-hero-glow, .landing-hero-orbit, .step-number, .eco-layer, canvas { animation: none !important; transition: none !important; will-change: auto !important; } .hero-word { clip-path: none !important; } #hero-card, #hero-eyebrow, #hero-title, #hero-text, #hero-subtext, #hero-buttons, #hero-metrics, #hero-proof, .logo-ticker-label { opacity: 1 !important; transform: none !important; } .feature-card-col .landing-card { will-change: auto; } }