/* HERO – stack con Grid y clase is-active */ .hero-slides{ display:grid; position:relative; } .hero-slide{ grid-area:1 / 1; opacity:0; transform: translateY(10px) scale(.985); filter: blur(1.5px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1), filter .7s cubic-bezier(.22,1,.36,1); pointer-events:none; will-change: opacity, transform, filter; } /* Visible */ .hero-slide.is-active{ opacity:1; transform:none; filter:none; pointer-events:auto; } /* Barrido/shine al entrar */ .hero-slide.is-active::after{ content:""; position:absolute; inset:-8% -30%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%); transform: translateX(-120%) skewX(-15deg); animation: hero-shine .8s .05s ease-out both; mix-blend-mode: overlay; pointer-events:none; } /* Stagger sutil */ .hero-slide.is-active > :is(span,h1,h2,h3,p,div,a){ animation: hero-rise .5s cubic-bezier(.22,1,.36,1) both; } .hero-slide.is-active > :is(h1,h2,h3){ animation-delay:.06s; } .hero-slide.is-active > p{ animation-delay:.12s; } .hero-slide.is-active > div{ animation-delay:.18s; } @keyframes hero-shine{ from{ transform: translateX(-120%) skewX(-15deg); opacity:0; } 30% { opacity:.7; } to { transform: translateX(120%) skewX(-15deg); opacity:0; } } @keyframes hero-rise{ from{ opacity:0; transform: translateY(8px) scale(.992); filter: blur(1px); } to { opacity:1; transform:none; filter:none; } } /* Dots (si quieres, conserva tu estilo previo) */ .hero-dot[aria-current="true"]{ transform: scale(1.05); box-shadow: 0 0 0 3px rgba(255,138,112,.25); } /* HERO · Fondo rotativo a pantalla completa de la sección */ #home { position: relative; isolation: isolate; } .hero-bg { position:absolute; inset:0; z-index:-1; overflow:hidden; } /* Capas apiladas que haremos fade-in/out */ .hero-bg-layer{ position:absolute; inset:0; background-size: cover; background-position: center; transform: scale(1.02); opacity: 0; transition: opacity .8s ease, transform .8s ease; will-change: opacity, transform; } .hero-bg-layer.is-active{ opacity: 1; transform: none; } /* Velo para contraste del texto (ajusta si quieres más/menos) */ .hero-bg-veil{ position:absolute; inset:0; background: radial-gradient(120% 80% at 10% 30%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.55) 45%, rgba(255,255,255,0) 80%); /* modo oscuro opcional si usas .dark en */ } .dark .hero-bg-veil{ background: radial-gradient(120% 80% at 10% 30%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 80%); } /* Si prefieres un velo lineal: */ /* .hero-bg-veil { background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.35) 40%, transparent); } */ /* Respeta reduce-motion */ @media (prefers-reduced-motion: reduce){ .hero-bg-layer{ transition: none !important; transform:none !important; } }