/* ===========================
SCROLL ANIMATIONS
Agregar en después de styles.css:
Y antes de :
=========================== */
/* ── Estado inicial: elementos ocultos antes de aparecer ── */
.anim-fade-up {
opacity: 0;
transform: translateY(48px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-fade-left {
opacity: 0;
transform: translateX(-48px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-fade-right {
opacity: 0;
transform: translateX(48px);
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-scale-in {
opacity: 0;
transform: scale(0.88);
transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-line-in {
opacity: 0;
transform: scaleX(0);
transform-origin: left center;
transition: opacity 0.5s ease,
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── Estado visible: se activa con JS ── */
.anim-fade-up.in-view,
.anim-fade-left.in-view,
.anim-fade-right.in-view {
opacity: 1;
transform: translate(0, 0);
}
.anim-scale-in.in-view {
opacity: 1;
transform: scale(1);
}
.anim-line-in.in-view {
opacity: 1;
transform: scaleX(1);
}
/* ── Delays escalonados para grupos de cards ── */
.anim-delay-1 { transition-delay: 0.10s; }
.anim-delay-2 { transition-delay: 0.20s; }
.anim-delay-3 { transition-delay: 0.30s; }
.anim-delay-4 { transition-delay: 0.40s; }
.anim-delay-5 { transition-delay: 0.50s; }
.anim-delay-6 { transition-delay: 0.60s; }
/* ── Animación del círculo de habilidades ── */
.skill-circle-wrap circle.progress-ring {
stroke-dashoffset: 351.86; /* empieza vacío */
transition: stroke-dashoffset 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.skill-card.in-view .skill-circle-wrap circle.progress-ring {
stroke-dashoffset: var(--target-offset);
}
/* ── Texto del hero: aparece desde el inicio con delay ── */
.hero-text .hero-line { animation: slideInLeft 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both; }
.hero-text .hero-name { animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.hero-text .hero-role { animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.50s both; }
.hero-text .hero-socials { animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both; }
.hero-text .hero-scroll { animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.80s both; }
.hero-image-wrap { animation: fadeRight 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.30s both; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(36px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRight {
from { opacity: 0; transform: translateX(48px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInLeft {
from { opacity: 0; transform: scaleX(0); transform-origin: left; }
to { opacity: 1; transform: scaleX(1); }
}