/* Y2K Purple Portfolio — motion.css
   Todo el movimiento vive aquí. Solo se animan transform y opacity.
   Sin JS (clase .js ausente) el contenido se ve completo y estático. */

@keyframes blink { 50% { opacity: 0; } }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(.9rem); } }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes glow { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes twinkle { 0%, 100% { opacity: .75; transform: scale(.85) rotate(0); } 50% { opacity: 1; transform: scale(1.12) rotate(45deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes title-in { from { opacity: 0; transform: translateY(40px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-zoom { from { transform: scale(1.22); } to { transform: scale(1.06); } }
@keyframes hero-open { from { clip-path: inset(14% 8% 14% 8% round 28px); } to { clip-path: inset(0 round 0); } }

/* ---------------------------------------------------------------- Loader */
.loader { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; }
.js:not(.no-loader) .loader { display: grid; }
.loader.is-gone { display: none !important; }
.loader__slices { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.loader__slices i {
	background: linear-gradient(180deg, #0d0826, #1d1052);
	border-right: 1px solid var(--line);
	transition: transform .85s var(--ease);
}
.loader__slices i:nth-child(2) { transition-delay: .06s; }
.loader__slices i:nth-child(3) { transition-delay: .12s; }
.loader__slices i:nth-child(4) { transition-delay: .18s; }
.loader__slices i:nth-child(5) { transition-delay: .24s; }
.loader.is-done .loader__slices i { transform: translateY(-101%); }

.loader__panel { position: relative; z-index: 1; width: min(88vw, 26rem); transition: opacity .35s, transform .5s var(--ease); }
.loader.is-done .loader__panel, .loader.is-done .loader__spark { opacity: 0; transform: scale(.94) translateY(-10px); }
.loader.is-done { pointer-events: none; }
.loader__body { padding: 1.4rem 1.4rem 1.2rem; }
.loader__num { display: flex; align-items: baseline; gap: .3rem; margin-bottom: .9rem; color: #fff; }
.loader__num b { font: 400 clamp(3rem, 14vw, 4.6rem)/1 var(--font-mono); text-shadow: var(--glow); }
.loader__num small { color: var(--secondary); font: 400 1.2rem var(--font-mono); }
.loader__bar { height: 6px; overflow: hidden; background: rgba(123, 92, 255, .2); border-radius: 6px; }
.loader__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), var(--accent)); box-shadow: 0 0 14px var(--primary); transform: scaleX(var(--p, 0)); transform-origin: left; }
.loader__log { display: grid; gap: .1rem; margin: 1rem 0 0; padding: 0; color: var(--secondary); font: 400 .78rem var(--font-mono); letter-spacing: .08em; list-style: none; }
.loader__log li { opacity: .22; transition: opacity .3s; }
.loader__log li::before { content: "> "; }
.loader__log li.on { opacity: 1; }
.loader__spark { position: absolute; z-index: 1; right: 12%; top: 18%; width: 4rem; height: 4rem; animation: twinkle 2.4s ease-in-out infinite; transition: opacity .35s, transform .5s var(--ease); }

/* ------------------------------------------------ Entradas (reveal al scroll) */
.js [data-reveal] {
	opacity: 0;
	filter: blur(8px);
	transition: opacity .8s var(--ease), transform .9s var(--ease), filter .8s var(--ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal="up"] { transform: translateY(30px); }
.js [data-reveal="left"] { transform: translateX(-34px); }
.js [data-reveal="right"] { transform: translateX(34px); }
.js [data-reveal="scale"] { transform: translateY(16px) scale(.93); }
.js [data-reveal].is-in, .reveal-all [data-reveal] { opacity: 1; filter: none; transform: none; }

/* Titular del hero: cada palabra sube desde una máscara */
.js .hero__name .l > span { transform: translateY(108%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
.js.is-ready .hero__name .l > span, .reveal-all .hero__name .l > span { transform: none; }
.js .hero__art { opacity: 0; transform: scale(.94); transition: opacity 1.1s var(--ease) .3s, transform 1.3s var(--ease) .3s; }
.js.is-ready .hero__art, .reveal-all .hero__art { opacity: 1; transform: none; }

/* ------------------------------------------------------------- Idle (sutil) */
.float { animation: float 7s ease-in-out infinite; }
.float--2 { animation-duration: 9s; animation-delay: -3s; }
.orb { position: relative; }
.orb::after { content: ""; position: absolute; inset: -22%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(123, 92, 255, .55), transparent 65%); animation: glow 4.5s ease-in-out infinite; }
.spark--a { animation: twinkle 4.2s ease-in-out infinite; }
.spark--b { animation: twinkle 5.6s ease-in-out -2s infinite; }
.brand__mark { transition: transform .8s var(--ease); }
.brand:hover .brand__mark { transform: rotate(180deg) scale(1.08); }
.fx--prism, .fx--orb, .fx--orb2 { will-change: transform; }

/* --------------------------------------------- Post: llegada diferenciada */
.js .post-hero .post-title span { opacity: 0; }
.js.is-ready .post-hero .post-title span, .reveal-all .post-hero .post-title span { animation: title-in 1s var(--ease) .15s both; }
.js .post-hero__chips, .js .post-hero .meta { opacity: 0; }
.js.is-ready .post-hero__chips, .reveal-all .post-hero__chips { animation: fade-up .8s var(--ease) .05s both; }
.js.is-ready .post-hero .meta, .reveal-all .post-hero .meta { animation: fade-up .8s var(--ease) .4s both; }
.js.is-ready .post-hero__media .cover__img, .reveal-all .post-hero__media .cover__img { animation: hero-zoom 1.8s var(--ease) both; }
/* Respaldo para navegadores sin View Transitions: la portada se "abre" */
.px-arrive .post-hero__media { animation: hero-open 1s var(--ease) both; }

/* View Transitions entre páginas (Chrome/Edge/Safari recientes): la portada de
   la tarjeta se transforma en la portada del post. Mejora progresiva. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-group(*) { animation-duration: .65s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
	::view-transition-group(root) { animation-duration: .4s; }
}

/* ----------------------------------------------------- Dispositivos táctiles */
@media (max-width: 899px), (pointer: coarse) {
	/* Menos coste: sin desenfoque en reveals ni cristal con backdrop-filter */
	.js [data-reveal] { filter: none; }
	.win { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(160deg, rgba(34, 22, 78, .92), rgba(14, 9, 32, .94)); }
	.card__stamp { -webkit-backdrop-filter: none; backdrop-filter: none; }
	.float--2, .fx--orb2 .orb::after { animation: none; }
	.card:hover::before { animation: none; }
}

/* ------------------------------------------------- Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.loader { display: none !important; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition-duration: .001ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
	.js [data-reveal], .js .hero__art, .js .hero__name .l > span, .js .post-hero .post-title span, .js .post-hero__chips, .js .post-hero .meta { opacity: 1 !important; transform: none !important; filter: none !important; }
	.card, .cat { transform: none !important; }
}