/* ============================================================ NEFTY — capa de MOVIMIENTO (Claude Design → adaptada al DOM real por Leo). Aditiva, GPU-friendly (solo transform/opacity), accesible. Carga DESPUÉS de nefty-live.css. [BIND] resueltos: header=#page-header, secciones=.tutor-single-course-segment, tarjetas=.grid-item.courses, thumb=.course-thumbnail. Nav underline OMITIDO (EduMall ya lo anima). ============================================================ */ :root{ --nf-ease: cubic-bezier(.22,.61,.36,1); --nf-ease-out: cubic-bezier(.16,1,.3,1); --nf-dur-1: .18s; --nf-dur-2: .32s; --nf-dur-3: .55s; } /* ---- Accesibilidad: prefers-reduced-motion apaga TODO ---- */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } [data-nf-reveal]{opacity:1 !important; transform:none !important;} } /* ---- 0) Base ---- */ html{scroll-behavior:smooth;} body{animation:nf-fade-in var(--nf-dur-3) var(--nf-ease) both;} @keyframes nf-fade-in{from{opacity:0} to{opacity:1}} /* ---- 1) Reveal al scroll (el JS marca [data-nf-reveal] + .nf-in) ---- */ [data-nf-reveal]{ opacity:0; transform:translateY(18px); transition:opacity var(--nf-dur-3) var(--nf-ease), transform var(--nf-dur-3) var(--nf-ease); transition-delay:var(--nf-delay, 0ms); will-change:opacity, transform; } [data-nf-reveal].nf-in{opacity:1; transform:none;} /* ---- 2) Tarjetas de curso: lift + zoom del thumbnail ---- */ .grid-item.courses{ transition:transform var(--nf-dur-2) var(--nf-ease), box-shadow var(--nf-dur-2) var(--nf-ease); } .grid-item.courses:hover{ transform:translateY(-6px); box-shadow:0 16px 38px rgba(29,29,27,.16); } .grid-item.courses .course-thumbnail{ overflow:hidden; } .grid-item.courses .course-thumbnail img{ transition:transform var(--nf-dur-3) var(--nf-ease); will-change:transform; } .grid-item.courses:hover .course-thumbnail img{ transform:scale(1.06); } /* ---- 3) Botones: micro-interacción ---- */ .tutor-btn-primary, a.button, button[type=submit]{ transition:transform var(--nf-dur-1) var(--nf-ease), box-shadow var(--nf-dur-1) var(--nf-ease), background-color var(--nf-dur-1) var(--nf-ease); } .tutor-btn-primary:hover, a.button:hover, button[type=submit]:hover{ transform:translateY(-1px) scale(1.015); box-shadow:0 8px 20px rgba(181,29,23,.28); } .tutor-btn-primary:active{ transform:scale(.97); } /* ---- 5) Header sticky: sombra al hacer scroll (.nf-scrolled lo añade el JS en ) ---- */ .nf-scrolled #page-header, .nf-scrolled .page-header{ box-shadow:0 4px 20px rgba(29,29,27,.10); transition:box-shadow var(--nf-dur-2) var(--nf-ease); } /* ---- 9) Acordeón de curriculum: expand suave ---- */ .tutor-accordion-item-body{ transition:max-height var(--nf-dur-2) var(--nf-ease), opacity var(--nf-dur-2) var(--nf-ease); } /* ---- 10) CTA de inscripción: pop sutil 1 vez al entrar ---- */ .tutor-price-preview-box .tutor-btn-primary{ animation:nf-cta-pop var(--nf-dur-3) var(--nf-ease-out) both; } @keyframes nf-cta-pop{0%{transform:scale(.94);opacity:0} 60%{transform:scale(1.02)} 100%{transform:scale(1);opacity:1}} /* ---- Utilidades (skeleton/spinner) ---- */ .nf-skeleton{ background:linear-gradient(90deg,#EEE9E7 25%,#F6F2F0 37%,#EEE9E7 63%); background-size:400% 100%; animation:nf-shimmer 1.4s ease infinite; border-radius:10px; } @keyframes nf-shimmer{0%{background-position:100% 0} 100%{background-position:-100% 0}} .nf-spinner{ width:34px;height:34px;border-radius:50%;border:3px solid rgba(181,29,23,.18); border-top-color:var(--nf-red,#B51D17); animation:nf-spin .8s linear infinite; } @keyframes nf-spin{to{transform:rotate(360deg)}}