/* =========================================================== motion.css — scroll reveal, depth, glass & micro-interaction Layered on top of components.css. JS adds .reveal-ready to ; without JS everything stays fully visible. =========================================================== */ :root { /* Richer, layered shadows */ --shadow-xs: 0 1px 2px rgba(44, 44, 42, 0.05); --shadow-md: 0 4px 12px rgba(44, 44, 42, 0.07), 0 12px 28px rgba(44, 44, 42, 0.06); --shadow-lg: 0 8px 24px rgba(44, 44, 42, 0.10), 0 24px 56px rgba(44, 44, 42, 0.10); --shadow-acento: 0 10px 30px rgba(107, 128, 104, 0.22); /* Translucent surfaces */ --glass-bg: rgba(250, 248, 245, 0.62); --glass-border: rgba(255, 255, 255, 0.55); --glass-blur: saturate(160%) blur(14px); } /* Prevent transient horizontal scroll from directional reveals. `clip` (unlike `hidden`) does not break the sticky header. */ html, body { overflow-x: clip; } /* ----------------------------------------------------------- 1. Scroll reveal ----------------------------------------------------------- */ .reveal-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } .reveal-ready [data-reveal="left"] { transform: translateX(-32px); } .reveal-ready [data-reveal="right"] { transform: translateX(32px); } .reveal-ready [data-reveal="zoom"] { transform: scale(0.94); } .reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; } /* ----------------------------------------------------------- 2. Depth & glass on cards ----------------------------------------------------------- */ .curso-card { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-color: var(--glass-border); box-shadow: var(--shadow-md); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); position: relative; overflow: hidden; } /* moving sheen sweep on hover */ .curso-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.45) 50%, transparent 60%); transform: translateX(-120%); transition: transform var(--dur-slow) var(--ease-out); pointer-events: none; } .curso-card:hover, .curso-card:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--c-acento-soft); } .curso-card:hover::after { transform: translateX(120%); } .curso-card__roman { transition: transform var(--dur-base) var(--ease-out); } .curso-card:hover .curso-card__roman { transform: scale(1.18) rotate(-4deg); } /* Stats & preceptos lift */ .stat { transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .stat:hover { transform: translateY(-4px); } .preceptos { box-shadow: var(--shadow-md); } .preceptos__item { transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .preceptos__item:hover { color: var(--c-acento); transform: translateX(6px); } /* ----------------------------------------------------------- 3. Hero motion — parallax handle ----------------------------------------------------------- */ .hero::before { inset: -140px 0 0 0; /* extend upward so downward drift never exposes a gap */ will-change: transform; transform: translateY(var(--hero-parallax, 0)); transition: transform 80ms linear; } /* soft drifting glow accent behind hero text */ .hero__inner::before { content: ''; position: absolute; inset: -10% 0 auto 0; height: 60%; margin-inline: auto; max-width: 40rem; background: radial-gradient(ellipse at center, rgba(107, 128, 104, 0.16), transparent 70%); filter: blur(8px); z-index: -1; animation: glow-drift 9s var(--ease-in-out) infinite; pointer-events: none; } @keyframes glow-drift { 0%, 100% { transform: translate3d(-3%, 0, 0) scale(1); opacity: 0.8; } 50% { transform: translate3d(3%, -4%, 0) scale(1.08); opacity: 1; } } .hero__inner { position: relative; } /* ----------------------------------------------------------- 4. Buttons & figures micro-interaction ----------------------------------------------------------- */ .btn { transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn--primary { box-shadow: var(--shadow-acento); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .figure { box-shadow: var(--shadow-md); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .figure:hover { box-shadow: var(--shadow-lg); } /* ----------------------------------------------------------- 5. FAQ open animation ----------------------------------------------------------- */ .faq__item { transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .faq__item[open] { box-shadow: var(--shadow-md); } .faq__item[open] .faq__answer { animation: faq-in var(--dur-base) var(--ease-out); } @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------- 6. Header shadow once scrolled ----------------------------------------------------------- */ .site-header.is-scrolled { box-shadow: var(--shadow-xs); background: rgba(250, 248, 245, 0.82); } /* ----------------------------------------------------------- 7. Respect reduced motion — show everything, kill movement ----------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .hero__inner::before { animation: none !important; } .curso-card::after { display: none; } }